From 3c04f122b0ff154eedbe45b51c2d9a4eeccca24b Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 3 Nov 2020 05:44:11 -0800 Subject: [PATCH 01/11] refactor(types): rewrite type definitions to account for intrinsic attributes --- package.json | 2 + tests/carbon-components-svelte-tests.svelte | 21 + types/Accordion/Accordion.d.ts | 38 + types/Accordion/AccordionItem.d.ts | 43 + types/Accordion/AccordionSkeleton.d.ts | 36 + types/AspectRatio/AspectRatio.d.ts | 17 + types/Breadcrumb/Breadcrumb.Skeleton.d.ts | 25 + types/Breadcrumb/Breadcrumb.d.ts | 27 + types/Breadcrumb/BreadcrumbItem.d.ts | 26 + types/Button/Button.Skeleton.d.ts | 30 + types/Button/Button.d.ts | 96 + types/Button/ButtonSet.d.ts | 17 + types/Checkbox/Checkbox.Skeleton.d.ts | 13 + types/Checkbox/Checkbox.d.ts | 79 + types/CodeSnippet/CodeSnippet.Skeleton.d.ts | 19 + types/CodeSnippet/CodeSnippet.d.ts | 112 + types/ComboBox/ComboBox.d.ts | 129 + types/ComposedModal/ComposedModal.d.ts | 60 + types/ComposedModal/ModalBody.d.ts | 23 + types/ComposedModal/ModalFooter.d.ts | 45 + types/ComposedModal/ModalHeader.d.ts | 54 + types/ContentSwitcher/ContentSwitcher.d.ts | 33 + types/ContentSwitcher/Switch.d.ts | 46 + types/Copy/Copy.d.ts | 31 + types/CopyButton/CopyButton.d.ts | 17 + types/DataTable/DataTable.d.ts | 122 + types/DataTable/Table.d.ts | 46 + types/DataTable/TableBody.d.ts | 11 + types/DataTable/TableCell.d.ts | 15 + types/DataTable/TableContainer.d.ts | 29 + types/DataTable/TableHead.d.ts | 15 + types/DataTable/TableHeader.d.ts | 32 + types/DataTable/TableRow.d.ts | 15 + types/DataTable/Toolbar.d.ts | 17 + types/DataTable/ToolbarBatchActions.d.ts | 17 + types/DataTable/ToolbarContent.d.ts | 11 + types/DataTable/ToolbarMenu.d.ts | 11 + types/DataTable/ToolbarMenuItem.d.ts | 13 + types/DataTable/ToolbarSearch.d.ts | 43 + .../DataTableSkeleton/DataTableSkeleton.d.ts | 55 + types/DatePicker/DatePicker.Skeleton.d.ts | 24 + types/DatePicker/DatePicker.d.ts | 75 + types/DatePicker/DatePickerInput.d.ts | 87 + types/Dropdown/Dropdown.Skeleton.d.ts | 19 + types/Dropdown/Dropdown.d.ts | 121 + types/FileUploader/FileUploader.Skeleton.d.ts | 13 + types/FileUploader/FileUploader.d.ts | 84 + types/FileUploader/FileUploaderButton.d.ts | 77 + .../FileUploaderDropContainer.d.ts | 78 + types/FileUploader/FileUploaderItem.d.ts | 54 + types/FileUploader/Filename.d.ts | 29 + types/FluidForm/FluidForm.d.ts | 11 + types/Form/Form.d.ts | 16 + types/FormGroup/FormGroup.d.ts | 39 + types/FormItem/FormItem.d.ts | 15 + types/FormLabel/FormLabel.d.ts | 20 + types/Grid/Column.d.ts | 75 + types/Grid/Grid.d.ts | 54 + types/Grid/Row.d.ts | 48 + types/Icon/Icon.Skeleton.d.ts | 19 + types/Icon/Icon.d.ts | 25 + types/InlineLoading/InlineLoading.d.ts | 36 + types/Link/Link.d.ts | 49 + types/ListBox/ListBox.d.ts | 54 + types/ListBox/ListBoxField.d.ts | 61 + types/ListBox/ListBoxMenu.d.ts | 23 + types/ListBox/ListBoxMenuIcon.d.ts | 31 + types/ListBox/ListBoxMenuItem.d.ts | 26 + types/ListBox/ListBoxSelection.d.ts | 42 + types/ListItem/ListItem.d.ts | 15 + types/Loading/Loading.d.ts | 38 + types/Modal/Modal.d.ts | 131 + types/MultiSelect/MultiSelect.d.ts | 165 + types/Notification/InlineNotification.d.ts | 71 + .../NotificationActionButton.d.ts | 15 + types/Notification/NotificationButton.d.ts | 35 + types/Notification/NotificationIcon.d.ts | 27 + .../Notification/NotificationTextDetails.d.ts | 35 + types/Notification/ToastNotification.d.ts | 76 + types/NumberInput/NumberInput.Skeleton.d.ts | 19 + types/NumberInput/NumberInput.d.ts | 141 + types/OrderedList/OrderedList.d.ts | 27 + types/OverflowMenu/OverflowMenu.d.ts | 85 + types/OverflowMenu/OverflowMenuItem.d.ts | 67 + types/Pagination/Pagination.Skeleton.d.ts | 13 + types/Pagination/Pagination.d.ts | 105 + types/PaginationNav/PaginationNav.d.ts | 48 + .../ProgressIndicator.Skeleton.d.ts | 25 + .../ProgressIndicator/ProgressIndicator.d.ts | 40 + types/ProgressIndicator/ProgressStep.d.ts | 63 + types/RadioButton/RadioButton.Skeleton.d.ts | 13 + types/RadioButton/RadioButton.d.ts | 63 + types/RadioButtonGroup/RadioButtonGroup.d.ts | 44 + types/Search/Search.Skeleton.d.ts | 24 + types/Search/Search.d.ts | 100 + types/Select/Select.Skeleton.d.ts | 19 + types/Select/Select.d.ts | 93 + types/Select/SelectItem.d.ts | 33 + types/Select/SelectItemGroup.d.ts | 23 + .../SkeletonPlaceholder.d.ts | 13 + types/SkeletonText/SkeletonText.d.ts | 37 + types/Slider/Slider.Skeleton.d.ts | 19 + types/Slider/Slider.d.ts | 115 + .../StructuredList.Skeleton.d.ts | 25 + types/StructuredList/StructuredList.d.ts | 33 + types/StructuredList/StructuredListBody.d.ts | 15 + types/StructuredList/StructuredListCell.d.ts | 27 + types/StructuredList/StructuredListHead.d.ts | 15 + types/StructuredList/StructuredListInput.d.ts | 44 + types/StructuredList/StructuredListRow.d.ts | 34 + types/Tabs/Tab.d.ts | 50 + types/Tabs/TabContent.d.ts | 16 + types/Tabs/Tabs.d.ts | 39 + types/Tabs/TabsSkeleton.d.ts | 19 + types/Tag/Tag.Skeleton.d.ts | 13 + types/Tag/Tag.d.ts | 60 + types/TextArea/TextArea.Skeleton.d.ts | 19 + types/TextArea/TextArea.d.ts | 99 + types/TextInput/PasswordInput.d.ts | 121 + types/TextInput/TextInput.Skeleton.d.ts | 19 + types/TextInput/TextInput.d.ts | 123 + types/Tile/ClickableTile.d.ts | 33 + types/Tile/ExpandableTile.d.ts | 70 + types/Tile/RadioTile.d.ts | 58 + types/Tile/SelectableTile.d.ts | 70 + types/Tile/Tile.d.ts | 21 + types/Tile/TileGroup.d.ts | 29 + types/TimePicker/TimePicker.d.ts | 106 + types/TimePicker/TimePickerSelect.d.ts | 60 + types/Toggle/Toggle.Skeleton.d.ts | 24 + types/Toggle/Toggle.d.ts | 57 + types/ToggleSmall/ToggleSmall.Skeleton.d.ts | 24 + types/ToggleSmall/ToggleSmall.d.ts | 57 + types/Tooltip/Tooltip.d.ts | 90 + .../TooltipDefinition/TooltipDefinition.d.ts | 46 + types/TooltipIcon/TooltipIcon.d.ts | 45 + types/UIShell/Content.d.ts | 17 + types/UIShell/GlobalHeader/Header.d.ts | 54 + types/UIShell/GlobalHeader/HeaderAction.d.ts | 38 + .../GlobalHeader/HeaderActionLink.d.ts | 31 + .../GlobalHeader/HeaderActionSearch.d.ts | 18 + types/UIShell/GlobalHeader/HeaderNav.d.ts | 16 + types/UIShell/GlobalHeader/HeaderNavItem.d.ts | 33 + types/UIShell/GlobalHeader/HeaderNavMenu.d.ts | 48 + .../GlobalHeader/HeaderPanelDivider.d.ts | 11 + .../UIShell/GlobalHeader/HeaderPanelLink.d.ts | 23 + .../GlobalHeader/HeaderPanelLinks.d.ts | 11 + .../UIShell/GlobalHeader/HeaderUtilities.d.ts | 11 + types/UIShell/HeaderGlobalAction.d.ts | 29 + types/UIShell/SideNav/SideNav.d.ts | 28 + types/UIShell/SideNav/SideNavItems.d.ts | 11 + types/UIShell/SideNav/SideNavLink.d.ts | 37 + types/UIShell/SideNav/SideNavMenu.d.ts | 34 + types/UIShell/SideNav/SideNavMenuItem.d.ts | 31 + types/UIShell/SkipToContent.d.ts | 24 + types/UnorderedList/UnorderedList.d.ts | 21 + types/index.d.ts | 5533 +---------------- yarn.lock | 127 +- 158 files changed, 6997 insertions(+), 5383 deletions(-) create mode 100644 tests/carbon-components-svelte-tests.svelte create mode 100644 types/Accordion/Accordion.d.ts create mode 100644 types/Accordion/AccordionItem.d.ts create mode 100644 types/Accordion/AccordionSkeleton.d.ts create mode 100644 types/AspectRatio/AspectRatio.d.ts create mode 100644 types/Breadcrumb/Breadcrumb.Skeleton.d.ts create mode 100644 types/Breadcrumb/Breadcrumb.d.ts create mode 100644 types/Breadcrumb/BreadcrumbItem.d.ts create mode 100644 types/Button/Button.Skeleton.d.ts create mode 100644 types/Button/Button.d.ts create mode 100644 types/Button/ButtonSet.d.ts create mode 100644 types/Checkbox/Checkbox.Skeleton.d.ts create mode 100644 types/Checkbox/Checkbox.d.ts create mode 100644 types/CodeSnippet/CodeSnippet.Skeleton.d.ts create mode 100644 types/CodeSnippet/CodeSnippet.d.ts create mode 100644 types/ComboBox/ComboBox.d.ts create mode 100644 types/ComposedModal/ComposedModal.d.ts create mode 100644 types/ComposedModal/ModalBody.d.ts create mode 100644 types/ComposedModal/ModalFooter.d.ts create mode 100644 types/ComposedModal/ModalHeader.d.ts create mode 100644 types/ContentSwitcher/ContentSwitcher.d.ts create mode 100644 types/ContentSwitcher/Switch.d.ts create mode 100644 types/Copy/Copy.d.ts create mode 100644 types/CopyButton/CopyButton.d.ts create mode 100644 types/DataTable/DataTable.d.ts create mode 100644 types/DataTable/Table.d.ts create mode 100644 types/DataTable/TableBody.d.ts create mode 100644 types/DataTable/TableCell.d.ts create mode 100644 types/DataTable/TableContainer.d.ts create mode 100644 types/DataTable/TableHead.d.ts create mode 100644 types/DataTable/TableHeader.d.ts create mode 100644 types/DataTable/TableRow.d.ts create mode 100644 types/DataTable/Toolbar.d.ts create mode 100644 types/DataTable/ToolbarBatchActions.d.ts create mode 100644 types/DataTable/ToolbarContent.d.ts create mode 100644 types/DataTable/ToolbarMenu.d.ts create mode 100644 types/DataTable/ToolbarMenuItem.d.ts create mode 100644 types/DataTable/ToolbarSearch.d.ts create mode 100644 types/DataTableSkeleton/DataTableSkeleton.d.ts create mode 100644 types/DatePicker/DatePicker.Skeleton.d.ts create mode 100644 types/DatePicker/DatePicker.d.ts create mode 100644 types/DatePicker/DatePickerInput.d.ts create mode 100644 types/Dropdown/Dropdown.Skeleton.d.ts create mode 100644 types/Dropdown/Dropdown.d.ts create mode 100644 types/FileUploader/FileUploader.Skeleton.d.ts create mode 100644 types/FileUploader/FileUploader.d.ts create mode 100644 types/FileUploader/FileUploaderButton.d.ts create mode 100644 types/FileUploader/FileUploaderDropContainer.d.ts create mode 100644 types/FileUploader/FileUploaderItem.d.ts create mode 100644 types/FileUploader/Filename.d.ts create mode 100644 types/FluidForm/FluidForm.d.ts create mode 100644 types/Form/Form.d.ts create mode 100644 types/FormGroup/FormGroup.d.ts create mode 100644 types/FormItem/FormItem.d.ts create mode 100644 types/FormLabel/FormLabel.d.ts create mode 100644 types/Grid/Column.d.ts create mode 100644 types/Grid/Grid.d.ts create mode 100644 types/Grid/Row.d.ts create mode 100644 types/Icon/Icon.Skeleton.d.ts create mode 100644 types/Icon/Icon.d.ts create mode 100644 types/InlineLoading/InlineLoading.d.ts create mode 100644 types/Link/Link.d.ts create mode 100644 types/ListBox/ListBox.d.ts create mode 100644 types/ListBox/ListBoxField.d.ts create mode 100644 types/ListBox/ListBoxMenu.d.ts create mode 100644 types/ListBox/ListBoxMenuIcon.d.ts create mode 100644 types/ListBox/ListBoxMenuItem.d.ts create mode 100644 types/ListBox/ListBoxSelection.d.ts create mode 100644 types/ListItem/ListItem.d.ts create mode 100644 types/Loading/Loading.d.ts create mode 100644 types/Modal/Modal.d.ts create mode 100644 types/MultiSelect/MultiSelect.d.ts create mode 100644 types/Notification/InlineNotification.d.ts create mode 100644 types/Notification/NotificationActionButton.d.ts create mode 100644 types/Notification/NotificationButton.d.ts create mode 100644 types/Notification/NotificationIcon.d.ts create mode 100644 types/Notification/NotificationTextDetails.d.ts create mode 100644 types/Notification/ToastNotification.d.ts create mode 100644 types/NumberInput/NumberInput.Skeleton.d.ts create mode 100644 types/NumberInput/NumberInput.d.ts create mode 100644 types/OrderedList/OrderedList.d.ts create mode 100644 types/OverflowMenu/OverflowMenu.d.ts create mode 100644 types/OverflowMenu/OverflowMenuItem.d.ts create mode 100644 types/Pagination/Pagination.Skeleton.d.ts create mode 100644 types/Pagination/Pagination.d.ts create mode 100644 types/PaginationNav/PaginationNav.d.ts create mode 100644 types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts create mode 100644 types/ProgressIndicator/ProgressIndicator.d.ts create mode 100644 types/ProgressIndicator/ProgressStep.d.ts create mode 100644 types/RadioButton/RadioButton.Skeleton.d.ts create mode 100644 types/RadioButton/RadioButton.d.ts create mode 100644 types/RadioButtonGroup/RadioButtonGroup.d.ts create mode 100644 types/Search/Search.Skeleton.d.ts create mode 100644 types/Search/Search.d.ts create mode 100644 types/Select/Select.Skeleton.d.ts create mode 100644 types/Select/Select.d.ts create mode 100644 types/Select/SelectItem.d.ts create mode 100644 types/Select/SelectItemGroup.d.ts create mode 100644 types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts create mode 100644 types/SkeletonText/SkeletonText.d.ts create mode 100644 types/Slider/Slider.Skeleton.d.ts create mode 100644 types/Slider/Slider.d.ts create mode 100644 types/StructuredList/StructuredList.Skeleton.d.ts create mode 100644 types/StructuredList/StructuredList.d.ts create mode 100644 types/StructuredList/StructuredListBody.d.ts create mode 100644 types/StructuredList/StructuredListCell.d.ts create mode 100644 types/StructuredList/StructuredListHead.d.ts create mode 100644 types/StructuredList/StructuredListInput.d.ts create mode 100644 types/StructuredList/StructuredListRow.d.ts create mode 100644 types/Tabs/Tab.d.ts create mode 100644 types/Tabs/TabContent.d.ts create mode 100644 types/Tabs/Tabs.d.ts create mode 100644 types/Tabs/TabsSkeleton.d.ts create mode 100644 types/Tag/Tag.Skeleton.d.ts create mode 100644 types/Tag/Tag.d.ts create mode 100644 types/TextArea/TextArea.Skeleton.d.ts create mode 100644 types/TextArea/TextArea.d.ts create mode 100644 types/TextInput/PasswordInput.d.ts create mode 100644 types/TextInput/TextInput.Skeleton.d.ts create mode 100644 types/TextInput/TextInput.d.ts create mode 100644 types/Tile/ClickableTile.d.ts create mode 100644 types/Tile/ExpandableTile.d.ts create mode 100644 types/Tile/RadioTile.d.ts create mode 100644 types/Tile/SelectableTile.d.ts create mode 100644 types/Tile/Tile.d.ts create mode 100644 types/Tile/TileGroup.d.ts create mode 100644 types/TimePicker/TimePicker.d.ts create mode 100644 types/TimePicker/TimePickerSelect.d.ts create mode 100644 types/Toggle/Toggle.Skeleton.d.ts create mode 100644 types/Toggle/Toggle.d.ts create mode 100644 types/ToggleSmall/ToggleSmall.Skeleton.d.ts create mode 100644 types/ToggleSmall/ToggleSmall.d.ts create mode 100644 types/Tooltip/Tooltip.d.ts create mode 100644 types/TooltipDefinition/TooltipDefinition.d.ts create mode 100644 types/TooltipIcon/TooltipIcon.d.ts create mode 100644 types/UIShell/Content.d.ts create mode 100644 types/UIShell/GlobalHeader/Header.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderAction.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderActionLink.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderActionSearch.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderNav.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderNavItem.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderNavMenu.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderPanelLink.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts create mode 100644 types/UIShell/GlobalHeader/HeaderUtilities.d.ts create mode 100644 types/UIShell/HeaderGlobalAction.d.ts create mode 100644 types/UIShell/SideNav/SideNav.d.ts create mode 100644 types/UIShell/SideNav/SideNavItems.d.ts create mode 100644 types/UIShell/SideNav/SideNavLink.d.ts create mode 100644 types/UIShell/SideNav/SideNavMenu.d.ts create mode 100644 types/UIShell/SideNav/SideNavMenuItem.d.ts create mode 100644 types/UIShell/SkipToContent.d.ts create mode 100644 types/UnorderedList/UnorderedList.d.ts diff --git a/package.json b/package.json index 753fb622..5cb52e32 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "types": "./types/index.d.ts", "sideEffects": false, "scripts": { + "check-types": "svelte-check --workspace tests", "prettier": "prettier --write './**/*.{svelte,js,md}'", "publish-examples": "node scripts/publish-examples", "build:css": "node scripts/build-css", @@ -39,6 +40,7 @@ "rollup-plugin-svelte": "^6.1.0", "rollup-plugin-terser": "^7.0.2", "svelte": "^3.29.4", + "svelte-check": "^1.1.6", "svelte-loader": "^2.13.6", "typescript": "^4.0.5" }, diff --git a/tests/carbon-components-svelte-tests.svelte b/tests/carbon-components-svelte-tests.svelte new file mode 100644 index 00000000..38f82cf6 --- /dev/null +++ b/tests/carbon-components-svelte-tests.svelte @@ -0,0 +1,21 @@ + + + + + text + + + diff --git a/types/Accordion/Accordion.d.ts b/types/Accordion/Accordion.d.ts new file mode 100644 index 00000000..f7bc09e3 --- /dev/null +++ b/types/Accordion/Accordion.d.ts @@ -0,0 +1,38 @@ +/// + +export default class Accordion { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the accordion + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Accordion/AccordionItem.d.ts b/types/Accordion/AccordionItem.d.ts new file mode 100644 index 00000000..66a7528b --- /dev/null +++ b/types/Accordion/AccordionItem.d.ts @@ -0,0 +1,43 @@ +/// + +export default class AccordionItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the title of the accordion item heading + * Alternatively, use the named slot "title" (e.g.
...
) + * @default "title" + */ + title?: string; + + /** + * Set to `true` to open the first accordion item + * @default false + */ + open?: boolean; + + /** + * Set to `true` to disable the accordion item + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the accordion item chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + title: {}; + }; + + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Accordion/AccordionSkeleton.d.ts b/types/Accordion/AccordionSkeleton.d.ts new file mode 100644 index 00000000..0a1f9e45 --- /dev/null +++ b/types/Accordion/AccordionSkeleton.d.ts @@ -0,0 +1,36 @@ +/// + +export default class AccordionSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of accordion items to render + * @default 4 + */ + count?: number; + + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + */ + size?: "sm" | "xl"; + + /** + * Set to `false` to close the first accordion item + * @default true + */ + open?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/AspectRatio/AspectRatio.d.ts b/types/AspectRatio/AspectRatio.d.ts new file mode 100644 index 00000000..a2d58318 --- /dev/null +++ b/types/AspectRatio/AspectRatio.d.ts @@ -0,0 +1,17 @@ +/// + +export default class AspectRatio { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the aspect ratio + * @default "2x1" + */ + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Breadcrumb/Breadcrumb.Skeleton.d.ts b/types/Breadcrumb/Breadcrumb.Skeleton.d.ts new file mode 100644 index 00000000..072b4f16 --- /dev/null +++ b/types/Breadcrumb/Breadcrumb.Skeleton.d.ts @@ -0,0 +1,25 @@ +/// + +export default class BreadcrumbSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Specify the number of breadcrumb items to render + * @default 3 + */ + count?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Breadcrumb/Breadcrumb.d.ts b/types/Breadcrumb/Breadcrumb.d.ts new file mode 100644 index 00000000..7ec1eea1 --- /dev/null +++ b/types/Breadcrumb/Breadcrumb.d.ts @@ -0,0 +1,27 @@ +/// + +export default class Breadcrumb { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Set to `true` to display skeleton state + * @default false + */ + skeleton?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Breadcrumb/BreadcrumbItem.d.ts b/types/Breadcrumb/BreadcrumbItem.d.ts new file mode 100644 index 00000000..77b5dfe4 --- /dev/null +++ b/types/Breadcrumb/BreadcrumbItem.d.ts @@ -0,0 +1,26 @@ +/// + +export default class BreadcrumbItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Set to `true` if the breadcrumb item represents the current page + * @default false + */ + isCurrentPage?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Button/Button.Skeleton.d.ts b/types/Button/Button.Skeleton.d.ts new file mode 100644 index 00000000..4cd5aa0a --- /dev/null +++ b/types/Button/Button.Skeleton.d.ts @@ -0,0 +1,30 @@ +/// + +export default class ButtonSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Specify the size of button skeleton + * @default "default" + */ + size?: "default" | "field" | "small"; + + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts new file mode 100644 index 00000000..522fdacd --- /dev/null +++ b/types/Button/Button.d.ts @@ -0,0 +1,96 @@ +/// + +export default class Button { + $$prop_def: { + /** + * Specify the kind of button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"; + + /** + * Specify the size of button + * @default "default" + */ + size?: "default" | "field" | "small"; + + /** + * Set to `true` for the icon-only variant + * @default false + */ + hasIconOnly?: boolean; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the ARIA label for the button icon + */ + iconDescription?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * `hasIconOnly` must be set to `true` + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Set the position of the tooltip relative to the icon + */ + tooltipPosition?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g. ) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to disable the button + * @default false + */ + disabled?: boolean; + + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the `type` attribute for the button element + * @default "button" + */ + type?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLButtonElement; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Button/ButtonSet.d.ts b/types/Button/ButtonSet.d.ts new file mode 100644 index 00000000..cb5277d2 --- /dev/null +++ b/types/Button/ButtonSet.d.ts @@ -0,0 +1,17 @@ +/// + +export default class ButtonSet { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to stack the buttons vertically + * @default false + */ + stacked?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Checkbox/Checkbox.Skeleton.d.ts b/types/Checkbox/Checkbox.Skeleton.d.ts new file mode 100644 index 00000000..b2eca382 --- /dev/null +++ b/types/Checkbox/Checkbox.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class CheckboxSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.d.ts new file mode 100644 index 00000000..22b602bf --- /dev/null +++ b/types/Checkbox/Checkbox.d.ts @@ -0,0 +1,79 @@ +/// + +export default class Checkbox { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify whether the checkbox is checked + * @default false + */ + checked?: boolean; + + /** + * Specify whether the checkbox is indeterminate + * @default false + */ + indeterminate?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` for the checkbox to be read-only + * @default false + */ + readonly?: boolean; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set a name for the input element + * @default "" + */ + name?: string; + + /** + * Specify the title attribute for the label element + */ + title?: string; + + /** + * Set an id for the input label + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "check", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/CodeSnippet/CodeSnippet.Skeleton.d.ts b/types/CodeSnippet/CodeSnippet.Skeleton.d.ts new file mode 100644 index 00000000..eebcfc80 --- /dev/null +++ b/types/CodeSnippet/CodeSnippet.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class CodeSnippetSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts new file mode 100644 index 00000000..4aeb2784 --- /dev/null +++ b/types/CodeSnippet/CodeSnippet.d.ts @@ -0,0 +1,112 @@ +/// + +export default class CodeSnippet { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; + + /** + * Set the code snippet text + * Alternatively, use the default slot (e.g. {`code`}) + */ + code?: string; + + /** + * Set to `true` to expand a multi-line code snippet (type="multi") + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to hide the copy button + * @default false + */ + hideCopyButton?: boolean; + + /** + * Set to `true` to wrap the text + * Note that `type` must be "multi" + * @default false + */ + wrapText?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Specify the ARIA label for the copy button icon + */ + copyButtonDescription?: string; + + /** + * Specify the ARIA label of the copy button + */ + copyLabel?: string; + + /** + * Specify the feedback text displayed when clicking the snippet + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Specify the show less text + * `type` must be "multi" + * @default "Show less" + */ + showLessText?: string; + + /** + * Specify the show more text + * `type` must be "multi" + * @default "Show more" + */ + showMoreText?: string; + + /** + * Set to `true` to enable the show more/less button + * @default false + */ + showMoreLess?: boolean; + + /** + * Set an id for the code element + */ + id?: string; + + /** + * Obtain a reference to the pre HTML element + * @default null + */ + ref?: null | HTMLPreElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts new file mode 100644 index 00000000..f1a28bd7 --- /dev/null +++ b/types/ComboBox/ComboBox.d.ts @@ -0,0 +1,129 @@ +/// + +interface ComboBoxItem { + id: string; + text: string; +} + +export default class ComboBox { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the combobox items + * @default [] + */ + items?: ComboBoxItem[]; + + /** + * Override the display of a combobox item + * @default (item) => item.text || item.id + */ + itemToString?: (item: ComboBoxItem) => string; + + /** + * Set the selected item by value index + */ + selectedIndex?: number; + + /** + * Specify the selected combobox value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the combobox + * @default false + */ + disabled?: boolean; + + /** + * Specify the title text of the combobox + * @default "" + */ + titleText?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to open the combobox menu dropdown + * @default false + */ + open?: boolean; + + /** + * Determine if an item should be filtered given the current combobox value + * @default () => true + */ + shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Set an id for the list box component + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Obtain a reference to the list HTML element + * @default null + */ + listRef?: null | HTMLDivElement; + }; + + $$slot_def: {}; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; + $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void; + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts new file mode 100644 index 00000000..35069cb1 --- /dev/null +++ b/types/ComposedModal/ComposedModal.d.ts @@ -0,0 +1,60 @@ +/// + +export default class ComposedModal { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the composed modal + */ + size?: "xs" | "sm" | "lg"; + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to prevent the modal from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + /** + * Specify a class for the inner modal + * @default "" + */ + containerClass?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void; + $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "open", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ModalBody.d.ts b/types/ComposedModal/ModalBody.d.ts new file mode 100644 index 00000000..0a0bfce7 --- /dev/null +++ b/types/ComposedModal/ModalBody.d.ts @@ -0,0 +1,23 @@ +/// + +export default class ModalBody { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ModalFooter.d.ts b/types/ComposedModal/ModalFooter.d.ts new file mode 100644 index 00000000..63125f67 --- /dev/null +++ b/types/ComposedModal/ModalFooter.d.ts @@ -0,0 +1,45 @@ +/// + +export default class ModalFooter { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Specify a class for the primary button + */ + primaryClass?: string; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a class for the secondary button + */ + secondaryClass?: string; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ModalHeader.d.ts b/types/ComposedModal/ModalHeader.d.ts new file mode 100644 index 00000000..3fccc16e --- /dev/null +++ b/types/ComposedModal/ModalHeader.d.ts @@ -0,0 +1,54 @@ +/// + +export default class ModalHeader { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the modal title + * @default "" + */ + title?: string; + + /** + * Specify the modal label + * @default "" + */ + label?: string; + + /** + * Specify the label class + * @default "" + */ + labelClass?: string; + + /** + * Specify the title class + * @default "" + */ + titleClass?: string; + + /** + * Specify the close class + * @default "" + */ + closeClass?: string; + + /** + * Specify the close icon class + * @default "" + */ + closeIconClass?: string; + + /** + * Specify the ARIA label for the close icon + * @default "Close" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ContentSwitcher/ContentSwitcher.d.ts b/types/ContentSwitcher/ContentSwitcher.d.ts new file mode 100644 index 00000000..87ba9635 --- /dev/null +++ b/types/ContentSwitcher/ContentSwitcher.d.ts @@ -0,0 +1,33 @@ +/// + +export default class ContentSwitcher { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the selected index of the switch item + * @default 0 + */ + selectedIndex?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the size of the content switcher + */ + size?: "sm" | "xl"; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ContentSwitcher/Switch.d.ts b/types/ContentSwitcher/Switch.d.ts new file mode 100644 index 00000000..6281e9ff --- /dev/null +++ b/types/ContentSwitcher/Switch.d.ts @@ -0,0 +1,46 @@ +/// + +export default class Switch { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the switch text + * Alternatively, use the named slot "text" (e.g. ...) + * @default "Provide text" + */ + text?: string; + + /** + * Set to `true` for the switch to be selected + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to disable the switch + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the button element + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Copy/Copy.d.ts b/types/Copy/Copy.d.ts new file mode 100644 index 00000000..41292983 --- /dev/null +++ b/types/Copy/Copy.d.ts @@ -0,0 +1,31 @@ +/// + +export default class Copy { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the feedback text shown after clicking the button + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts new file mode 100644 index 00000000..c1c9f515 --- /dev/null +++ b/types/CopyButton/CopyButton.d.ts @@ -0,0 +1,17 @@ +/// + +export default class CopyButton { + $$prop_def: { + /** + * Set the title and ARIA label for the copy button + * @default "Copy to clipboard" + */ + iconDescription?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts new file mode 100644 index 00000000..0c011da4 --- /dev/null +++ b/types/DataTable/DataTable.d.ts @@ -0,0 +1,122 @@ +/// + +type Headers = { + key: string; + value: string; + display?: (item) => string; + sort?: (a, b) => number; + empty?: boolean; + columnMenu?: boolean; +}[]; + +export default class DataTable { + $$prop_def: { + /** + * Specify the data table headers + * @default [] + */ + headers?: Headers; + + /** + * Specify the rows the data table should render + * keys defined in `headers` are used for the row ids + * @default [] + */ + rows?: Object[]; + + /** + * Set the size of the data table + */ + size?: "compact" | "short" | "tall"; + + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` for the expandable variant + * Automatically set to `true` if `batchExpansion` is `true` + * @default false + */ + expandable?: boolean; + + /** + * Set to `true` to enable batch expansion + * @default false + */ + batchExpansion?: boolean; + + /** + * Specify the row ids to be expanded + * @default [] + */ + expandedRowIds?: string[]; + + /** + * Set to `true` for the radio selection variant + * @default false + */ + radio?: boolean; + + /** + * Set to `true` for the selectable variant + * Automatically set to `true` if `radio` or `batchSelection` are `true` + * @default false + */ + selectable?: boolean; + + /** + * Set to `true` to enable batch selection + * @default false + */ + batchSelection?: boolean; + + /** + * Specify the row ids to be selected + * @default [] + */ + selectedRowIds?: string[]; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { + default: {}; + cell: { row: any; cell: any }; + ["expanded-row"]: { row: any }; + }; + + $on(eventname: "click:header--expand", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:header", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "mouseenter:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "mouseleave:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:row--expand", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:cell", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts new file mode 100644 index 00000000..cbdbcaca --- /dev/null +++ b/types/DataTable/Table.d.ts @@ -0,0 +1,46 @@ +/// + +export default class Table { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the table + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; + + /** + * Set to `true` for the bordered variant + * @default false + */ + shouldShowBorder?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableBody.d.ts b/types/DataTable/TableBody.d.ts new file mode 100644 index 00000000..bcc26bd5 --- /dev/null +++ b/types/DataTable/TableBody.d.ts @@ -0,0 +1,11 @@ +/// + +export default class TableBody { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableCell.d.ts b/types/DataTable/TableCell.d.ts new file mode 100644 index 00000000..6eeb4538 --- /dev/null +++ b/types/DataTable/TableCell.d.ts @@ -0,0 +1,15 @@ +/// + +export default class TableCell { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableContainer.d.ts b/types/DataTable/TableContainer.d.ts new file mode 100644 index 00000000..0afec925 --- /dev/null +++ b/types/DataTable/TableContainer.d.ts @@ -0,0 +1,29 @@ +/// + +export default class TableContainer { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableHead.d.ts b/types/DataTable/TableHead.d.ts new file mode 100644 index 00000000..d62cfad9 --- /dev/null +++ b/types/DataTable/TableHead.d.ts @@ -0,0 +1,15 @@ +/// + +export default class TableHead { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableHeader.d.ts b/types/DataTable/TableHeader.d.ts new file mode 100644 index 00000000..9f0a97a7 --- /dev/null +++ b/types/DataTable/TableHeader.d.ts @@ -0,0 +1,32 @@ +/// + +export default class TableHeader { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `scope` attribute + * @default "col" + */ + scope?: string; + + /** + * Override the default id translations + * @default () => "" + */ + translateWithId?: () => string; + + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableRow.d.ts b/types/DataTable/TableRow.d.ts new file mode 100644 index 00000000..5f6d8f8a --- /dev/null +++ b/types/DataTable/TableRow.d.ts @@ -0,0 +1,15 @@ +/// + +export default class TableRow { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/Toolbar.d.ts b/types/DataTable/Toolbar.d.ts new file mode 100644 index 00000000..8bf7139c --- /dev/null +++ b/types/DataTable/Toolbar.d.ts @@ -0,0 +1,17 @@ +/// + +export default class Toolbar { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the toolbar size + * @default "default" + */ + size?: "sm" | "default"; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarBatchActions.d.ts b/types/DataTable/ToolbarBatchActions.d.ts new file mode 100644 index 00000000..31e79dad --- /dev/null +++ b/types/DataTable/ToolbarBatchActions.d.ts @@ -0,0 +1,17 @@ +/// + +export default class ToolbarBatchActions { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Override the total items selected text + * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected` + */ + formatTotalSelected?: (totalSelected: number) => string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarContent.d.ts b/types/DataTable/ToolbarContent.d.ts new file mode 100644 index 00000000..f263726d --- /dev/null +++ b/types/DataTable/ToolbarContent.d.ts @@ -0,0 +1,11 @@ +/// + +export default class ToolbarContent { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarMenu.d.ts b/types/DataTable/ToolbarMenu.d.ts new file mode 100644 index 00000000..ab04b15b --- /dev/null +++ b/types/DataTable/ToolbarMenu.d.ts @@ -0,0 +1,11 @@ +/// + +export default class ToolbarMenu { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarMenuItem.d.ts b/types/DataTable/ToolbarMenuItem.d.ts new file mode 100644 index 00000000..95f5095b --- /dev/null +++ b/types/DataTable/ToolbarMenuItem.d.ts @@ -0,0 +1,13 @@ +/// + +export default class ToolbarMenuItem { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarSearch.d.ts b/types/DataTable/ToolbarSearch.d.ts new file mode 100644 index 00000000..7bec1b77 --- /dev/null +++ b/types/DataTable/ToolbarSearch.d.ts @@ -0,0 +1,43 @@ +/// + +export default class ToolbarSearch { + $$prop_def: { + /** + * Specify the value of the search input + * @default "" + */ + value?: string; + + /** + * Set to `true` to expand the search bar + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to keep the search bar expanded + * @default false + */ + persistent?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTableSkeleton/DataTableSkeleton.d.ts b/types/DataTableSkeleton/DataTableSkeleton.d.ts new file mode 100644 index 00000000..efe7bf3f --- /dev/null +++ b/types/DataTableSkeleton/DataTableSkeleton.d.ts @@ -0,0 +1,55 @@ +/// + +export default class DataTableSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of columns + * @default 5 + */ + columns?: number; + + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set the size of the data table + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to apply zebra styles to the datatable rows + * @default false + */ + zebra?: boolean; + + /** + * Set to `false` to hide the header + * @default true + */ + showHeader?: boolean; + + /** + * Set the column headers + * If `headers` has one more items, `count` is ignored + * @default [] + */ + headers?: string[]; + + /** + * Set to `false` to hide the toolbar + * @default true + */ + showToolbar?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DatePicker/DatePicker.Skeleton.d.ts b/types/DatePicker/DatePicker.Skeleton.d.ts new file mode 100644 index 00000000..b545fd96 --- /dev/null +++ b/types/DatePicker/DatePicker.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class DatePickerSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the range variant + * @default false + */ + range?: boolean; + + /** + * Set an id to be used by the label element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DatePicker/DatePicker.d.ts b/types/DatePicker/DatePicker.d.ts new file mode 100644 index 00000000..6c74518c --- /dev/null +++ b/types/DatePicker/DatePicker.d.ts @@ -0,0 +1,75 @@ +/// + +export default class DatePicker { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the date picker type + * @default "simple" + */ + datePickerType?: "simple" | "single" | "range"; + + /** + * Specify the date picker input value + * @default "" + */ + value?: string; + + /** + * Specify the element to append the calendar to + */ + appendTo?: HTMLElement; + + /** + * Specify the date format + * @default "m/d/Y" + */ + dateFormat?: string; + + /** + * Specify the maximum date + * @default null + */ + maxDate?: null | string | Date; + + /** + * Specify the minimum date + * @default null + */ + minDate?: null | string | Date; + + /** + * Specify the locale + * @default "en" + */ + locale?: string; + + /** + * Set to `true` to use the short variant + * @default false + */ + short?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set an id for the date picker element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts new file mode 100644 index 00000000..74e73908 --- /dev/null +++ b/types/DatePicker/DatePickerInput.d.ts @@ -0,0 +1,87 @@ +/// + +export default class DatePickerInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input type + * @default "text" + */ + type?: string; + + /** + * Specify the input placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the Regular Expression for the input value + * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" + */ + pattern?: string; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the calendar icon + * @default "" + */ + iconDescription?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set a name for the input element + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Dropdown/Dropdown.Skeleton.d.ts b/types/Dropdown/Dropdown.Skeleton.d.ts new file mode 100644 index 00000000..0066d3e5 --- /dev/null +++ b/types/Dropdown/Dropdown.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class DropdownSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.d.ts new file mode 100644 index 00000000..691dec6c --- /dev/null +++ b/types/Dropdown/Dropdown.d.ts @@ -0,0 +1,121 @@ +/// + +type DropdownItemId = string; + +type DropdownItemText = string; + +interface DropdownItem { + id: DropdownItemId; + text: DropdownItemText; +} + +export default class Dropdown { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the dropdown items + * @default [] + */ + items?: DropdownItem[]; + + /** + * Override the display of a dropdown item + * @default (item) => item.text || item.id + */ + itemToString?: (item: DropdownItem) => string; + + /** + * Specify the selected item index + */ + selectedIndex?: number; + + /** + * Specify the type of dropdown + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the size of the dropdown field + */ + size?: "sm" | "lg" | "xl"; + + /** + * Set to `true` to open the dropdown + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the dropdown + * @default false + */ + disabled?: boolean; + + /** + * Specify the title text + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the list box label + */ + label?: string; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Set an id for the list box component + */ + id?: string; + + /** + * Specify a name attribute for the list box + */ + name?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: {}; + + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploader.Skeleton.d.ts b/types/FileUploader/FileUploader.Skeleton.d.ts new file mode 100644 index 00000000..0a553f94 --- /dev/null +++ b/types/FileUploader/FileUploader.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class FileUploaderSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts new file mode 100644 index 00000000..22cf364d --- /dev/null +++ b/types/FileUploader/FileUploader.d.ts @@ -0,0 +1,84 @@ +/// + +export default class FileUploader { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the accepted file types + * @default [] + */ + accept?: string[]; + + /** + * Obtain the uploaded file names + * @default [] + */ + files?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of clearing the array of uploaded files + * @constant + * @default () => { files = []; } + */ + clearFiles?: () => any; + + /** + * Specify the label description + * @default "" + */ + labelDescription?: string; + + /** + * Specify the label title + * @default "" + */ + labelTitle?: string; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the button label + * @default "" + */ + buttonLabel?: string; + + /** + * Specify the ARIA label used for the status icons + * @default "Provide icon description" + */ + iconDescription?: string; + + /** + * Specify a name attribute for the file button uploader input + * @default "" + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "remove", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploaderButton.d.ts b/types/FileUploader/FileUploaderButton.d.ts new file mode 100644 index 00000000..fc7246d3 --- /dev/null +++ b/types/FileUploader/FileUploaderButton.d.ts @@ -0,0 +1,77 @@ +/// + +export default class FileUploaderButton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the accepted file types + * @default [] + */ + accept?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to disable label changes + * @default false + */ + disableLabelChanges?: boolean; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the label role + * @default "button" + */ + role?: string; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploaderDropContainer.d.ts b/types/FileUploader/FileUploaderDropContainer.d.ts new file mode 100644 index 00000000..74b309f6 --- /dev/null +++ b/types/FileUploader/FileUploaderDropContainer.d.ts @@ -0,0 +1,78 @@ +/// + +type Files = string[]; + +export default class FileUploaderDropContainer { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the accepted file types + * @default [] + */ + accept?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of validating uploaded files + * The default behavior does not validate files + * @default (files) => files + */ + validateFiles?: (files: Files) => Files; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the `role` attribute of the drop container + * @default "button" + */ + role?: string; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void; + $on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void; + $on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploaderItem.d.ts b/types/FileUploader/FileUploaderItem.d.ts new file mode 100644 index 00000000..19fd8536 --- /dev/null +++ b/types/FileUploader/FileUploaderItem.d.ts @@ -0,0 +1,54 @@ +/// + +export default class FileUploaderItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the error subject text + * @default "" + */ + errorSubject?: string; + + /** + * Specify the error body text + * @default "" + */ + errorBody?: string; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Specify the file uploader name + * @default "" + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "delete", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/Filename.d.ts b/types/FileUploader/Filename.d.ts new file mode 100644 index 00000000..aef005d4 --- /dev/null +++ b/types/FileUploader/Filename.d.ts @@ -0,0 +1,29 @@ +/// + +export default class Filename { + $$prop_def: { + /** + * Specify the file name status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FluidForm/FluidForm.d.ts b/types/FluidForm/FluidForm.d.ts new file mode 100644 index 00000000..c3bcbd43 --- /dev/null +++ b/types/FluidForm/FluidForm.d.ts @@ -0,0 +1,11 @@ +/// + +export default class FluidForm { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Form/Form.d.ts b/types/Form/Form.d.ts new file mode 100644 index 00000000..e5e78ac9 --- /dev/null +++ b/types/Form/Form.d.ts @@ -0,0 +1,16 @@ +/// + +export default class Form { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FormGroup/FormGroup.d.ts b/types/FormGroup/FormGroup.d.ts new file mode 100644 index 00000000..e7a156d2 --- /dev/null +++ b/types/FormGroup/FormGroup.d.ts @@ -0,0 +1,39 @@ +/// + +export default class FormGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to render a form requirement + * @default false + */ + message?: boolean; + + /** + * Specify the message text + * @default "" + */ + messageText?: string; + + /** + * Specify the legend text + * @default "" + */ + legendText?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FormItem/FormItem.d.ts b/types/FormItem/FormItem.d.ts new file mode 100644 index 00000000..55cf3eac --- /dev/null +++ b/types/FormItem/FormItem.d.ts @@ -0,0 +1,15 @@ +/// + +export default class FormItem { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FormLabel/FormLabel.d.ts b/types/FormLabel/FormLabel.d.ts new file mode 100644 index 00000000..ee9f97e2 --- /dev/null +++ b/types/FormLabel/FormLabel.d.ts @@ -0,0 +1,20 @@ +/// + +export default class FormLabel { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set an id to be used by the label element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts new file mode 100644 index 00000000..e3162fd9 --- /dev/null +++ b/types/Grid/Column.d.ts @@ -0,0 +1,75 @@ +/// + +type ColumnSize = boolean | number; + +interface ColumnSizeDescriptor { + span?: ColumnSize; + offset: number; +} + +type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; + +export default class Column { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + + /** + * Specify the aspect ratio of the column + */ + aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; + + /** + * Set the small breakpoint + */ + sm?: ColumnBreakpoint; + + /** + * Set the medium breakpoint + */ + md?: ColumnBreakpoint; + + /** + * Set the large breakpoint + */ + lg?: ColumnBreakpoint; + + /** + * Set the extra large breakpoint + */ + xlg?: ColumnBreakpoint; + + /** + * Set the maximum breakpoint + */ + max?: ColumnBreakpoint; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.d.ts new file mode 100644 index 00000000..4b4e9da5 --- /dev/null +++ b/types/Grid/Grid.d.ts @@ -0,0 +1,54 @@ +/// + +export default class Grid { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to use the narrow variant + * @default false + */ + narrow?: boolean; + + /** + * Set to `true` to use the fullWidth variant + * @default false + */ + fullWidth?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.d.ts new file mode 100644 index 00000000..d2adef0b --- /dev/null +++ b/types/Grid/Row.d.ts @@ -0,0 +1,48 @@ +/// + +export default class Row { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to use the narrow variant + * @default false + */ + narrow?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Icon/Icon.Skeleton.d.ts b/types/Icon/Icon.Skeleton.d.ts new file mode 100644 index 00000000..0726550a --- /dev/null +++ b/types/Icon/Icon.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class IconSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the icon + * @default 16 + */ + size?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts new file mode 100644 index 00000000..a5d23bd7 --- /dev/null +++ b/types/Icon/Icon.d.ts @@ -0,0 +1,25 @@ +/// + +export default class Icon { + $$prop_def: { + /** + * Specify the icon from `carbon-icons-svelte` to render + * Icon size must be 16px (e.g. `Add16`, `Task16`) + */ + render?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/InlineLoading/InlineLoading.d.ts b/types/InlineLoading/InlineLoading.d.ts new file mode 100644 index 00000000..1b7cf01f --- /dev/null +++ b/types/InlineLoading/InlineLoading.d.ts @@ -0,0 +1,36 @@ +/// + +export default class InlineLoading { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the loading status + * @default "active" + */ + status?: "active" | "inactive" | "finished" | "error"; + + /** + * Set the loading description + */ + description?: string; + + /** + * Specify the ARIA label for the loading icon + */ + iconDescription?: string; + + /** + * Specify the timeout delay (ms) after `status` is set to "success" + * @default 1500 + */ + successDelay?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "success", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts new file mode 100644 index 00000000..357137ff --- /dev/null +++ b/types/Link/Link.d.ts @@ -0,0 +1,49 @@ +/// + +export default class Link { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the size of the link + */ + size?: "sm" | "lg"; + + /** + * Specify the href value + */ + href?: string; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to allow visited styles + * @default false + */ + visited?: boolean; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLParagraphElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBox.d.ts b/types/ListBox/ListBox.d.ts new file mode 100644 index 00000000..778c1d15 --- /dev/null +++ b/types/ListBox/ListBox.d.ts @@ -0,0 +1,54 @@ +/// + +export default class ListBox { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the list box + */ + size?: "sm" | "xl"; + + /** + * Set the type of the list box + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Set to `true` to open the list box + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the list box + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts new file mode 100644 index 00000000..e4427b10 --- /dev/null +++ b/types/ListBox/ListBoxField.d.ts @@ -0,0 +1,61 @@ +/// + +type ListBoxFieldTranslationId = "close" | "open"; + +export default class ListBoxField { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to disable the list box field + * @default false + */ + disabled?: boolean; + + /** + * Specify the role attribute + * @default "combobox" + */ + role?: string; + + /** + * Specify the tabindex + * @default "-1" + */ + tabindex?: string; + + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds?: { close: "close"; open: "open" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxFieldTranslationId) => string; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxMenu.d.ts b/types/ListBox/ListBoxMenu.d.ts new file mode 100644 index 00000000..826c346d --- /dev/null +++ b/types/ListBox/ListBoxMenu.d.ts @@ -0,0 +1,23 @@ +/// + +export default class ListBoxMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLDivElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxMenuIcon.d.ts b/types/ListBox/ListBoxMenuIcon.d.ts new file mode 100644 index 00000000..36b04bd3 --- /dev/null +++ b/types/ListBox/ListBoxMenuIcon.d.ts @@ -0,0 +1,31 @@ +/// + +type ListBoxMenuIconTranslationId = "close" | "open"; + +export default class ListBoxMenuIcon { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to open the list box menu icon + * @default false + */ + open?: boolean; + + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds?: { close: "close"; open: "open" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxMenuIconTranslationId) => string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxMenuItem.d.ts b/types/ListBox/ListBoxMenuItem.d.ts new file mode 100644 index 00000000..b351a6e0 --- /dev/null +++ b/types/ListBox/ListBoxMenuItem.d.ts @@ -0,0 +1,26 @@ +/// + +export default class ListBoxMenuItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to enable the active state + * @default false + */ + active?: boolean; + + /** + * Set to `true` to enable the highlighted state + * @default false + */ + highlighted?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxSelection.d.ts b/types/ListBox/ListBoxSelection.d.ts new file mode 100644 index 00000000..d177ca03 --- /dev/null +++ b/types/ListBox/ListBoxSelection.d.ts @@ -0,0 +1,42 @@ +/// + +type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; + +export default class ListBoxSelection { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of selected items + */ + selectionCount?: any; + + /** + * Set to `true` to disable the list box selection + * @default false + */ + disabled?: boolean; + + /** + * Default translation ids + * @constant + * @default { clearAll: "clearAll", clearSelection: "clearSelection", } + */ + translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxSelectionTranslationId) => string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: {}; + + $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListItem/ListItem.d.ts b/types/ListItem/ListItem.d.ts new file mode 100644 index 00000000..c0842915 --- /dev/null +++ b/types/ListItem/ListItem.d.ts @@ -0,0 +1,15 @@ +/// + +export default class ListItem { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Loading/Loading.d.ts b/types/Loading/Loading.d.ts new file mode 100644 index 00000000..a56718b5 --- /dev/null +++ b/types/Loading/Loading.d.ts @@ -0,0 +1,38 @@ +/// + +export default class Loading { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + + /** + * Set to `false` to disable the active state + * @default true + */ + active?: boolean; + + /** + * Set to `false` to disable the overlay + * @default true + */ + withOverlay?: boolean; + + /** + * Specify the label description + * @default "Active loading indicator" + */ + description?: string; + + /** + * Set an id for the label element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts new file mode 100644 index 00000000..3cb86af3 --- /dev/null +++ b/types/Modal/Modal.d.ts @@ -0,0 +1,131 @@ +/// + +export default class Modal { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the modal + */ + size?: "xs" | "sm" | "lg"; + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to enable alert mode + * @default false + */ + alert?: boolean; + + /** + * Set to `true` to use the passive variant + * @default false + */ + passiveModal?: boolean; + + /** + * Specify the modal heading + */ + modalHeading?: string; + + /** + * Specify the modal label + */ + modalLabel?: string; + + /** + * Specify the ARIA label for the modal + */ + modalAriaLabel?: string; + + /** + * Specify the ARIA label for the close icon + * @default "Close the modal" + */ + iconDescription?: string; + + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Set to `true` for the primary button to be triggered when pressing "Enter" + * @default true + */ + shouldSubmitOnEnter?: boolean; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Set to `true` to prevent the modal from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; + label: {}; + heading: {}; + }; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:button--secondary", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "open", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts new file mode 100644 index 00000000..1dd9e4db --- /dev/null +++ b/types/MultiSelect/MultiSelect.d.ts @@ -0,0 +1,165 @@ +/// + +type MultiSelectItemId = string; + +type MultiSelectItemText = string; + +interface MultiSelectItem { + id: MultiSelectItemId; + text: MultiSelectItemText; +} + +export default class MultiSelect { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the multiselect items + * @default [] + */ + items?: MultiSelectItem[]; + + /** + * Override the display of a multiselect item + * @default (item) => item.text || item.id + */ + itemToString?: (item: MultiSelectItem) => string; + + /** + * Set the selected ids + * @default [] + */ + selectedIds?: MultiSelectItemId[]; + + /** + * Specify the multiselect value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ + size?: "sm" | "lg" | "xl"; + + /** + * Specify the type of multiselect + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the selection feedback after selecting items + * @default "top-after-reopen" + */ + selectionFeedback?: "top" | "fixed" | "top-after-reopen"; + + /** + * Set to `true` to disable the dropdown + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to filter items + * @default false + */ + filterable?: boolean; + + /** + * Override the filtering logic + * The default filtering is an exact string comparison + * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) + */ + filterItem?: (item: MultiSelectItem, value: string) => string; + + /** + * Set to `true` to open the dropdown + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the locale + * @default "en" + */ + locale?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Override the sorting logic + * The default sorting compare the item text value + * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) + */ + sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Specify the title text + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to pass the item to `itemToString` in the checkbox + * @default false + */ + useTitleInItem?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the list box label + * @default "" + */ + label?: string; + + /** + * Set an id for the list box component + */ + id?: string; + + /** + * Specify a name attribute for the select + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/InlineNotification.d.ts b/types/Notification/InlineNotification.d.ts new file mode 100644 index 00000000..54a96b07 --- /dev/null +++ b/types/Notification/InlineNotification.d.ts @@ -0,0 +1,71 @@ +/// + +export default class InlineNotification { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of notification + * @default "inline" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the kind of notification + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + actions: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationActionButton.d.ts b/types/Notification/NotificationActionButton.d.ts new file mode 100644 index 00000000..86fc5a36 --- /dev/null +++ b/types/Notification/NotificationActionButton.d.ts @@ -0,0 +1,15 @@ +/// + +export default class NotificationActionButton { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts new file mode 100644 index 00000000..2f526c01 --- /dev/null +++ b/types/Notification/NotificationButton.d.ts @@ -0,0 +1,35 @@ +/// + +export default class NotificationButton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + renderIcon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the title of the icon + */ + title?: string; + + /** + * Specify the ARIA label for the icon + * @default "Close icon" + */ + iconDescription?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationIcon.d.ts b/types/Notification/NotificationIcon.d.ts new file mode 100644 index 00000000..f391d511 --- /dev/null +++ b/types/Notification/NotificationIcon.d.ts @@ -0,0 +1,27 @@ +/// + +export default class NotificationIcon { + $$prop_def: { + /** + * Specify the kind of notification icon + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationTextDetails.d.ts b/types/Notification/NotificationTextDetails.d.ts new file mode 100644 index 00000000..3445a04f --- /dev/null +++ b/types/Notification/NotificationTextDetails.d.ts @@ -0,0 +1,35 @@ +/// + +export default class NotificationTextDetails { + $$prop_def: { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/ToastNotification.d.ts b/types/Notification/ToastNotification.d.ts new file mode 100644 index 00000000..fd0436e8 --- /dev/null +++ b/types/Notification/ToastNotification.d.ts @@ -0,0 +1,76 @@ +/// + +export default class ToastNotification { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the kind of notification + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/NumberInput/NumberInput.Skeleton.d.ts b/types/NumberInput/NumberInput.Skeleton.d.ts new file mode 100644 index 00000000..9761bb4d --- /dev/null +++ b/types/NumberInput/NumberInput.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class NumberInputSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts new file mode 100644 index 00000000..0eb5011e --- /dev/null +++ b/types/NumberInput/NumberInput.d.ts @@ -0,0 +1,141 @@ +/// + +type NumberInputTranslationId = "increment" | "decrement"; + +export default class NumberInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the step increment + * @default 1 + */ + step?: number; + + /** + * Specify the maximum value + */ + max?: number; + + /** + * Specify the minimum value + */ + min?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` for the input to be read-only + * @default false + */ + readonly?: boolean; + + /** + * Set to `true` to enable the mobile variant + * @default false + */ + mobile?: boolean; + + /** + * Set to `true` to allow for an empty value + * @default false + */ + allowEmpty?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the increment icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + label?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: NumberInputTranslationId) => string; + + /** + * Default translation ids + * @constant + * @default { increment: "increment", decrement: "decrement", } + */ + translationIds?: { increment: "increment"; decrement: "decrement" }; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: { + label: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/OrderedList/OrderedList.d.ts b/types/OrderedList/OrderedList.d.ts new file mode 100644 index 00000000..840e4c07 --- /dev/null +++ b/types/OrderedList/OrderedList.d.ts @@ -0,0 +1,27 @@ +/// + +export default class OrderedList { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + + /** + * Set to `true` to use native list styles + * @default false + */ + native?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/OverflowMenu/OverflowMenu.d.ts b/types/OverflowMenu/OverflowMenu.d.ts new file mode 100644 index 00000000..fabd27dd --- /dev/null +++ b/types/OverflowMenu/OverflowMenu.d.ts @@ -0,0 +1,85 @@ +/// + +export default class OverflowMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the size of the overflow menu + */ + size?: "sm" | "xl"; + + /** + * Specify the direction of the overflow menu relative to the button + * @default "bottom" + */ + direction?: "top" | "bottom"; + + /** + * Set to `true` to open the menu + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to flip the menu relative to the button + * @default false + */ + flipped?: boolean; + + /** + * Specify the menu options class + */ + menuOptionsClass?: string; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the icon class + */ + iconClass?: string; + + /** + * Specify the ARIA label for the icon + * @default "Open and close list of options" + */ + iconDescription?: string; + + /** + * Set an id for the button element + */ + id?: string; + + /** + * Obtain a reference to the trigger button element + * @default null + */ + buttonRef?: null | HTMLButtonElement; + + /** + * Obtain a reference to the overflow menu element + * @default null + */ + menuRef?: null | HTMLUListElement; + }; + + $$slot_def: { + default: {}; + menu: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/OverflowMenu/OverflowMenuItem.d.ts b/types/OverflowMenu/OverflowMenuItem.d.ts new file mode 100644 index 00000000..e3270bf1 --- /dev/null +++ b/types/OverflowMenu/OverflowMenuItem.d.ts @@ -0,0 +1,67 @@ +/// + +export default class OverflowMenuItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the item text + * Alternatively, use the default slot for a custom element + * @default "Provide text" + */ + text?: string; + + /** + * Specify the `href` attribute if the item is a link + * @default "" + */ + href?: string; + + /** + * Set to `true` if the item should be focused when opening the menu + * @default false + */ + primaryFocus?: boolean; + + /** + * Set to `true` to disable the item + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to include a divider + * @default false + */ + hasDivider?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `false` to omit the button `title` attribute + * @default true + */ + requireTitle?: boolean; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Pagination/Pagination.Skeleton.d.ts b/types/Pagination/Pagination.Skeleton.d.ts new file mode 100644 index 00000000..3947119d --- /dev/null +++ b/types/Pagination/Pagination.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class PaginationSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Pagination/Pagination.d.ts b/types/Pagination/Pagination.d.ts new file mode 100644 index 00000000..0ff0c2b5 --- /dev/null +++ b/types/Pagination/Pagination.d.ts @@ -0,0 +1,105 @@ +/// + +export default class Pagination { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the current page index + * @default 1 + */ + page?: number; + + /** + * Specify the total number of items + * @default 0 + */ + totalItems?: number; + + /** + * Set to `true` to disable the pagination + * @default false + */ + disabled?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; + + /** + * Specify the items per page text + * @default "Items per page:" + */ + itemsPerPageText?: string; + + /** + * Override the item text + * @default (min, max) => `${min}–${max} items` + */ + itemText?: (min: number, max: number) => string; + + /** + * Override the item range text + * @default (min, max, total) => `${min}–${max} of ${total} items` + */ + itemRangeText?: (min: number, max: number, total: number) => string; + + /** + * Set to `true` to disable the page input + * @default false + */ + pageInputDisabled?: boolean; + + /** + * Set to `true` to disable the page size input + * @default false + */ + pageSizeInputDisabled?: boolean; + + /** + * Specify the number of items to display in a page + * @default 10 + */ + pageSize?: number; + + /** + * Specify the available page sizes + * @default [10] + */ + pageSizes?: number[]; + + /** + * Set to `true` if the number of pages is unknown + * @default false + */ + pagesUnknown?: boolean; + + /** + * Override the page text + * @default (page) => `page ${page}` + */ + pageText?: (page: number) => string; + + /** + * Override the page range text + * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}` + */ + pageRangeText?: (current: number, total: number) => string; + + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "update", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/PaginationNav/PaginationNav.d.ts b/types/PaginationNav/PaginationNav.d.ts new file mode 100644 index 00000000..9f448952 --- /dev/null +++ b/types/PaginationNav/PaginationNav.d.ts @@ -0,0 +1,48 @@ +/// + +export default class PaginationNav { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the current page index + * @default 0 + */ + page?: number; + + /** + * Specify the total number of pages + * @default 10 + */ + total?: number; + + /** + * Specify the total number of pages to show + * @default 10 + */ + shown?: number; + + /** + * Set to `true` to loop the navigation + * @default false + */ + loop?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click:button--previous", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:button--next", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts b/types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts new file mode 100644 index 00000000..c646df9a --- /dev/null +++ b/types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts @@ -0,0 +1,25 @@ +/// + +export default class ProgressIndicatorSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Specify the number of steps to render + * @default 4 + */ + count?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ProgressIndicator/ProgressIndicator.d.ts b/types/ProgressIndicator/ProgressIndicator.d.ts new file mode 100644 index 00000000..5caab63d --- /dev/null +++ b/types/ProgressIndicator/ProgressIndicator.d.ts @@ -0,0 +1,40 @@ +/// + +export default class ProgressIndicator { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the current step index + * @default 0 + */ + currentIndex?: number; + + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Set to `true` to specify whether the progress steps should be split equally in size in the div + * @default false + */ + spaceEqually?: boolean; + + /** + * Set to `true` to prevent updating `currentIndex` + * @default false + */ + preventChangeOnClick?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ProgressIndicator/ProgressStep.d.ts b/types/ProgressIndicator/ProgressStep.d.ts new file mode 100644 index 00000000..f56ccf9a --- /dev/null +++ b/types/ProgressIndicator/ProgressStep.d.ts @@ -0,0 +1,63 @@ +/// + +export default class ProgressStep { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` for the complete variant + * @default false + */ + complete?: boolean; + + /** + * Set to `true` to use the current variant + * @default false + */ + current?: boolean; + + /** + * Set to `true` to disable the progress step + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the step description + * @default "" + */ + description?: string; + + /** + * Specify the step label + * @default "" + */ + label?: string; + + /** + * Specify the step secondary label + * @default "" + */ + secondaryLabel?: string; + + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: { + default: { props: { class: "bx--progress-label" } }; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/RadioButton/RadioButton.Skeleton.d.ts b/types/RadioButton/RadioButton.Skeleton.d.ts new file mode 100644 index 00000000..bf50fc5c --- /dev/null +++ b/types/RadioButton/RadioButton.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class RadioButtonSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/RadioButton/RadioButton.d.ts b/types/RadioButton/RadioButton.d.ts new file mode 100644 index 00000000..c5c81164 --- /dev/null +++ b/types/RadioButton/RadioButton.d.ts @@ -0,0 +1,63 @@ +/// + +export default class RadioButton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the value of the radio button + * @default "" + */ + value?: string; + + /** + * Set to `true` to check the radio button + * @default false + */ + checked?: boolean; + + /** + * Set to `true` to disable the radio button + * @default false + */ + disabled?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/RadioButtonGroup/RadioButtonGroup.d.ts b/types/RadioButtonGroup/RadioButtonGroup.d.ts new file mode 100644 index 00000000..3f93e4a0 --- /dev/null +++ b/types/RadioButtonGroup/RadioButtonGroup.d.ts @@ -0,0 +1,44 @@ +/// + +export default class RadioButtonGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the selected radio button value + */ + selected?: string; + + /** + * Set to `true` to disable the radio buttons + * @default false + */ + disabled?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the orientation of the radio buttons + * @default "horizontal" + */ + orientation?: "horizontal" | "vertical"; + + /** + * Set an id for the container div element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Search/Search.Skeleton.d.ts b/types/Search/Search.Skeleton.d.ts new file mode 100644 index 00000000..e08b82de --- /dev/null +++ b/types/Search/Search.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class SearchSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * @default false + */ + small?: boolean; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts new file mode 100644 index 00000000..8f936cb2 --- /dev/null +++ b/types/Search/Search.d.ts @@ -0,0 +1,100 @@ +/// + +export default class Search { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * @default false + */ + small?: boolean; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the search input + * @default false + */ + disabled?: boolean; + + /** + * Specify the value of the search input + * @default "" + */ + value?: string; + + /** + * Specify the `type` attribute of the search input + * @default "text" + */ + type?: string; + + /** + * Specify the `placeholder` attribute of the search input + * @default "Search..." + */ + placeholder?: string; + + /** + * Specify the `autocomplete` attribute + * @default "off" + */ + autocomplete?: "on" | "off"; + + /** + * Set to `true` to auto focus the search element + * @default false + */ + autofocus?: boolean; + + /** + * Specify the close button label text + * @default "Clear search input" + */ + closeButtonLabelText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/Select.Skeleton.d.ts b/types/Select/Select.Skeleton.d.ts new file mode 100644 index 00000000..a8924f96 --- /dev/null +++ b/types/Select/Select.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class SelectSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts new file mode 100644 index 00000000..726a120f --- /dev/null +++ b/types/Select/Select.d.ts @@ -0,0 +1,93 @@ +/// + +export default class Select { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the selected item value + */ + selected?: string; + + /** + * Set the size of the select input + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the select element + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the select element + */ + id?: string; + + /** + * Specify a name attribute for the select element + */ + name?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Set to `true` to not render a label + * @default false + */ + noLabel?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Obtain a reference to the select HTML element + * @default null + */ + ref?: null | HTMLSelectElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/SelectItem.d.ts b/types/Select/SelectItem.d.ts new file mode 100644 index 00000000..c2d925dc --- /dev/null +++ b/types/Select/SelectItem.d.ts @@ -0,0 +1,33 @@ +/// + +export default class SelectItem { + $$prop_def: { + /** + * Specify the option value + * @default "" + */ + value?: string; + + /** + * Specify the option text + * @default "" + */ + text?: string; + + /** + * Set to `true` to hide the option + * @default false + */ + hidden?: boolean; + + /** + * Set to `true` to disable the option + * @default false + */ + disabled?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/SelectItemGroup.d.ts b/types/Select/SelectItemGroup.d.ts new file mode 100644 index 00000000..fafae7e0 --- /dev/null +++ b/types/Select/SelectItemGroup.d.ts @@ -0,0 +1,23 @@ +/// + +export default class SelectItemGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to disable the optgroup element + * @default false + */ + disabled?: boolean; + + /** + * Specify the label attribute of the optgroup element + * @default "Provide label" + */ + label?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts new file mode 100644 index 00000000..369d2597 --- /dev/null +++ b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts @@ -0,0 +1,13 @@ +/// + +export default class SkeletonPlaceholder { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/SkeletonText/SkeletonText.d.ts b/types/SkeletonText/SkeletonText.d.ts new file mode 100644 index 00000000..4fddde79 --- /dev/null +++ b/types/SkeletonText/SkeletonText.d.ts @@ -0,0 +1,37 @@ +/// + +export default class SkeletonText { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of lines to render + * @default 3 + */ + lines?: number; + + /** + * Set to `true` to use the heading size variant + * @default false + */ + heading?: boolean; + + /** + * Set to `true` to use the paragraph size variant + * @default false + */ + paragraph?: boolean; + + /** + * Specify the width of the text (% or px) + * @default "100%" + */ + width?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Slider/Slider.Skeleton.d.ts b/types/Slider/Slider.Skeleton.d.ts new file mode 100644 index 00000000..12c9a388 --- /dev/null +++ b/types/Slider/Slider.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class SliderSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Slider/Slider.d.ts b/types/Slider/Slider.d.ts new file mode 100644 index 00000000..b78b1c2e --- /dev/null +++ b/types/Slider/Slider.d.ts @@ -0,0 +1,115 @@ +/// + +export default class Slider { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the value of the slider + * @default 0 + */ + value?: number; + + /** + * Set the maximum slider value + * @default 100 + */ + max?: number; + + /** + * Specify the label for the max value + * @default "" + */ + maxLabel?: string; + + /** + * Set the minimum slider value + * @default 0 + */ + min?: number; + + /** + * Specify the label for the min value + * @default "" + */ + minLabel?: string; + + /** + * Set the step value + * @default 1 + */ + step?: number; + + /** + * Set the step multiplier value + * @default 4 + */ + stepMultiplier?: number; + + /** + * Set to `true` to require a value + * @default false + */ + required?: boolean; + + /** + * Specify the input type + * @default "number" + */ + inputType?: string; + + /** + * Set to `true` to disable the slider + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to hide the text input + * @default false + */ + hideTextInput?: boolean; + + /** + * Set an id for the slider div element + */ + id?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set a name for the slider element + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredList.Skeleton.d.ts b/types/StructuredList/StructuredList.Skeleton.d.ts new file mode 100644 index 00000000..06029486 --- /dev/null +++ b/types/StructuredList/StructuredList.Skeleton.d.ts @@ -0,0 +1,25 @@ +/// + +export default class StructuredListSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set to `true` to use the bordered variant + * @default false + */ + border?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredList.d.ts b/types/StructuredList/StructuredList.d.ts new file mode 100644 index 00000000..9010508d --- /dev/null +++ b/types/StructuredList/StructuredList.d.ts @@ -0,0 +1,33 @@ +/// + +export default class StructuredList { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the selected structured list row value + */ + selected?: string; + + /** + * Set to `true` to use the bordered variant + * @default false + */ + border?: boolean; + + /** + * Set to `true` to use the selection variant + * @default false + */ + selection?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListBody.d.ts b/types/StructuredList/StructuredListBody.d.ts new file mode 100644 index 00000000..6511b0d0 --- /dev/null +++ b/types/StructuredList/StructuredListBody.d.ts @@ -0,0 +1,15 @@ +/// + +export default class StructuredListBody { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListCell.d.ts b/types/StructuredList/StructuredListCell.d.ts new file mode 100644 index 00000000..bb3ce0f4 --- /dev/null +++ b/types/StructuredList/StructuredListCell.d.ts @@ -0,0 +1,27 @@ +/// + +export default class StructuredListCell { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use as a header + * @default false + */ + head?: boolean; + + /** + * Set to `true` to prevent wrapping + * @default false + */ + noWrap?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListHead.d.ts b/types/StructuredList/StructuredListHead.d.ts new file mode 100644 index 00000000..247bf484 --- /dev/null +++ b/types/StructuredList/StructuredListHead.d.ts @@ -0,0 +1,15 @@ +/// + +export default class StructuredListHead { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListInput.d.ts b/types/StructuredList/StructuredListInput.d.ts new file mode 100644 index 00000000..75ac8264 --- /dev/null +++ b/types/StructuredList/StructuredListInput.d.ts @@ -0,0 +1,44 @@ +/// + +export default class StructuredListInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to check the input + * @default false + */ + checked?: boolean; + + /** + * Specify the title of the input + * @default "title" + */ + title?: string; + + /** + * Specify the value of the input + * @default "value" + */ + value?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListRow.d.ts b/types/StructuredList/StructuredListRow.d.ts new file mode 100644 index 00000000..d66bacf9 --- /dev/null +++ b/types/StructuredList/StructuredListRow.d.ts @@ -0,0 +1,34 @@ +/// + +export default class StructuredListRow { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use as a header + * @default false + */ + head?: boolean; + + /** + * Set to `true` to render a label slot + * @default false + */ + label?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/Tab.d.ts b/types/Tabs/Tab.d.ts new file mode 100644 index 00000000..65378f14 --- /dev/null +++ b/types/Tabs/Tab.d.ts @@ -0,0 +1,50 @@ +/// + +export default class Tab { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the tab label + * Alternatively, use the default slot (e.g. Label) + * @default "" + */ + label?: string; + + /** + * Specify the href attribute + * @default "#" + */ + href?: string; + + /** + * Set to `true` to disable the tab + * @default false + */ + disabled?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the anchor HTML element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/TabContent.d.ts b/types/Tabs/TabContent.d.ts new file mode 100644 index 00000000..0deb1a25 --- /dev/null +++ b/types/Tabs/TabContent.d.ts @@ -0,0 +1,16 @@ +/// + +export default class TabContent { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/Tabs.d.ts b/types/Tabs/Tabs.d.ts new file mode 100644 index 00000000..acde5530 --- /dev/null +++ b/types/Tabs/Tabs.d.ts @@ -0,0 +1,39 @@ +/// + +export default class Tabs { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the selected tab index + * @default 0 + */ + selected?: number; + + /** + * Specify the type of tabs + * @default "default" + */ + type?: "default" | "container"; + + /** + * Specify the ARIA label for the chevron icon + * @default "Show menu options" + */ + iconDescription?: string; + + /** + * Specify the tab trigger href attribute + * @default "#" + */ + triggerHref?: string; + }; + + $$slot_def: { + default: {}; + content: {}; + }; + + $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/TabsSkeleton.d.ts b/types/Tabs/TabsSkeleton.d.ts new file mode 100644 index 00000000..d1a1deca --- /dev/null +++ b/types/Tabs/TabsSkeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class TabsSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of tabs to render + * @default 4 + */ + count?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tag/Tag.Skeleton.d.ts b/types/Tag/Tag.Skeleton.d.ts new file mode 100644 index 00000000..326858a7 --- /dev/null +++ b/types/Tag/Tag.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class TagSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts new file mode 100644 index 00000000..1aac8261 --- /dev/null +++ b/types/Tag/Tag.d.ts @@ -0,0 +1,60 @@ +/// + +export default class Tag { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the type of tag + */ + type?: + | "red" + | "magenta" + | "purple" + | "blue" + | "cyan" + | "teal" + | "green" + | "gray" + | "cool-gray" + | "warm-gray" + | "high-contrast"; + + /** + * Set to `true` to use filterable variant + * @default false + */ + filter?: boolean; + + /** + * Set to `true` to disable a filterable tag + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set the title for the close button in a filterable tag + * @default "Clear filter" + */ + title?: string; + + /** + * Set an id for the filterable tag + */ + id?: string; + }; + + $$slot_def: { + default: { props: { class: "bx--tag__label" } }; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextArea/TextArea.Skeleton.d.ts b/types/TextArea/TextArea.Skeleton.d.ts new file mode 100644 index 00000000..5be5edc6 --- /dev/null +++ b/types/TextArea/TextArea.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class TextAreaSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextArea/TextArea.d.ts b/types/TextArea/TextArea.d.ts new file mode 100644 index 00000000..1b943998 --- /dev/null +++ b/types/TextArea/TextArea.d.ts @@ -0,0 +1,99 @@ +/// + +export default class TextArea { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the textarea value + * @default "" + */ + value?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the number of cols + * @default 50 + */ + cols?: number; + + /** + * Specify the number of rows + * @default 4 + */ + rows?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the text for the invalid state + * @default "" + */ + invalidText?: string; + + /** + * Set an id for the textarea element + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the textarea HTML element + * @default null + */ + ref?: null | HTMLTextAreaElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts new file mode 100644 index 00000000..cd9a40ff --- /dev/null +++ b/types/TextInput/PasswordInput.d.ts @@ -0,0 +1,121 @@ +/// + +export default class PasswordInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the input type + * @default "password" + */ + type?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the hide password label text + * @default "Hide password" + */ + hidePasswordLabel?: string; + + /** + * Specify the show password label text + * @default "Show password" + */ + showPasswordLabel?: string; + + /** + * Set the alignment of the tooltip relative to the icon + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Set the position of the tooltip relative to the icon + */ + tooltipPosition?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the text for the invalid state + * @default "" + */ + invalidText?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextInput/TextInput.Skeleton.d.ts b/types/TextInput/TextInput.Skeleton.d.ts new file mode 100644 index 00000000..8d3e0daf --- /dev/null +++ b/types/TextInput/TextInput.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class TextInputSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.d.ts new file mode 100644 index 00000000..f2cfb6cf --- /dev/null +++ b/types/TextInput/TextInput.d.ts @@ -0,0 +1,123 @@ +/// + +export default class TextInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the input type + * @default "" + */ + type?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Set to `true` to mark the field as required + * @default false + */ + required?: boolean; + + /** + * Set to `true` to use inline version + * @default false + */ + inline?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/ClickableTile.d.ts b/types/Tile/ClickableTile.d.ts new file mode 100644 index 00000000..1f54c8e2 --- /dev/null +++ b/types/Tile/ClickableTile.d.ts @@ -0,0 +1,33 @@ +/// + +export default class ClickableTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to click the tile + * @default false + */ + clicked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set the `href` + */ + href?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.d.ts new file mode 100644 index 00000000..380b8f43 --- /dev/null +++ b/types/Tile/ExpandableTile.d.ts @@ -0,0 +1,70 @@ +/// + +export default class ExpandableTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to expand the tile + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the max height of the tile (number of pixels) + * @default 0 + */ + tileMaxHeight?: number; + + /** + * Specify the padding of the tile (number of pixels) + * @default 0 + */ + tilePadding?: number; + + /** + * Specify the icon text of the collapsed tile + * @default "Interact to expand Tile" + */ + tileCollapsedIconText?: string; + + /** + * Specify the icon text of the expanded tile + * @default "Interact to collapse Tile" + */ + tileExpandedIconText?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the top-level div element + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + above: {}; + below: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/RadioTile.d.ts b/types/Tile/RadioTile.d.ts new file mode 100644 index 00000000..03312c5a --- /dev/null +++ b/types/Tile/RadioTile.d.ts @@ -0,0 +1,58 @@ +/// + +export default class RadioTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to check the tile + * @default false + */ + checked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the value of the radio input + * @default "" + */ + value?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the ARIA label for the radio tile checkmark icon + * @default "Tile checkmark" + */ + iconDescription?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/SelectableTile.d.ts b/types/Tile/SelectableTile.d.ts new file mode 100644 index 00000000..a688f8a5 --- /dev/null +++ b/types/Tile/SelectableTile.d.ts @@ -0,0 +1,70 @@ +/// + +export default class SelectableTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to select the tile + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the title of the selectable tile + * @default "title" + */ + title?: string; + + /** + * Specify the value of the selectable tile + * @default "value" + */ + value?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the ARIA label for the selectable tile checkmark icon + * @default "Tile checkmark" + */ + iconDescription?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/Tile.d.ts b/types/Tile/Tile.d.ts new file mode 100644 index 00000000..717b0be7 --- /dev/null +++ b/types/Tile/Tile.d.ts @@ -0,0 +1,21 @@ +/// + +export default class Tile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/TileGroup.d.ts b/types/Tile/TileGroup.d.ts new file mode 100644 index 00000000..98b1b307 --- /dev/null +++ b/types/Tile/TileGroup.d.ts @@ -0,0 +1,29 @@ +/// + +export default class TileGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the selected tile value + */ + selected?: string; + + /** + * Set to `true` to disable the tile group + * @default false + */ + disabled?: boolean; + + /** + * Specify the legend text + * @default "" + */ + legend?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.d.ts new file mode 100644 index 00000000..77a53d4f --- /dev/null +++ b/types/TimePicker/TimePicker.d.ts @@ -0,0 +1,106 @@ +/// + +export default class TimePicker { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the input type + * @default "text" + */ + type?: string; + + /** + * Specify the input placeholder text + * @default "hh=mm" + */ + placeholder?: string; + + /** + * Specify the `pattern` attribute for the input element + * @default "(1[012]|[1-9]):[0-5][0-9](\\s)?" + */ + pattern?: string; + + /** + * Specify the `maxlength` input attribute + * @default 5 + */ + maxlength?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TimePicker/TimePickerSelect.d.ts b/types/TimePicker/TimePickerSelect.d.ts new file mode 100644 index 00000000..e0218924 --- /dev/null +++ b/types/TimePicker/TimePickerSelect.d.ts @@ -0,0 +1,60 @@ +/// + +export default class TimePickerSelect { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the select value + * @default "" + */ + value?: string; + + /** + * Set to `true` to disable the select + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the chevron icon + * @default "Open list of options" + */ + iconDescription?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * @default true + */ + hideLabel?: boolean; + + /** + * Set an id for the select element + */ + id?: string; + + /** + * Specify a name attribute for the select element + */ + name?: string; + + /** + * Obtain a reference to the select HTML element + * @default null + */ + ref?: null | HTMLSelectElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Toggle/Toggle.Skeleton.d.ts b/types/Toggle/Toggle.Skeleton.d.ts new file mode 100644 index 00000000..c4edef3a --- /dev/null +++ b/types/Toggle/Toggle.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class ToggleSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts new file mode 100644 index 00000000..d1631a85 --- /dev/null +++ b/types/Toggle/Toggle.d.ts @@ -0,0 +1,57 @@ +/// + +export default class Toggle { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to toggle the checkbox input + * @default false + */ + toggled?: boolean; + + /** + * Set to `true` to disable checkbox input + * @default false + */ + disabled?: boolean; + + /** + * Specify the label for the untoggled state + * @default "Off" + */ + labelA?: string; + + /** + * Specify the label for the toggled state + * @default "On" + */ + labelB?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ToggleSmall/ToggleSmall.Skeleton.d.ts b/types/ToggleSmall/ToggleSmall.Skeleton.d.ts new file mode 100644 index 00000000..7ee04409 --- /dev/null +++ b/types/ToggleSmall/ToggleSmall.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class ToggleSmallSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ToggleSmall/ToggleSmall.d.ts b/types/ToggleSmall/ToggleSmall.d.ts new file mode 100644 index 00000000..d03bb6f0 --- /dev/null +++ b/types/ToggleSmall/ToggleSmall.d.ts @@ -0,0 +1,57 @@ +/// + +export default class ToggleSmall { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to toggle the checkbox input + * @default false + */ + toggled?: boolean; + + /** + * Set to `true` to disable checkbox input + * @default false + */ + disabled?: boolean; + + /** + * Specify the label for the untoggled state + * @default "Off" + */ + labelA?: string; + + /** + * Specify the label for the toggled state + * @default "On" + */ + labelB?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.d.ts new file mode 100644 index 00000000..a1026aaa --- /dev/null +++ b/types/Tooltip/Tooltip.d.ts @@ -0,0 +1,90 @@ +/// + +export default class Tooltip { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the direction of the tooltip relative to the button + * @default "bottom" + */ + direction?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to open the tooltip + * @default false + */ + open?: boolean; + + /** + * Set to `true` to hide the tooltip icon + * @default false + */ + hideIcon?: boolean; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the tooltip button + * Icon size must be 16px (e.g. `Add16`, `Task16`) + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the ARIA label for the tooltip button + * @default "" + */ + iconDescription?: string; + + /** + * Specify the icon name attribute + * @default "" + */ + iconName?: string; + + /** + * Set the button tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the tooltip + */ + tooltipId?: string; + + /** + * Set an id for the tooltip button + */ + triggerId?: string; + + /** + * Set the tooltip button text + * @default "" + */ + triggerText?: string; + + /** + * Obtain a reference to the trigger text HTML element + * @default null + */ + ref?: null | HTMLElement; + + /** + * Obtain a reference to the tooltip HTML element + * @default null + */ + refTooltip?: null | HTMLElement; + + /** + * Obtain a reference to the icon HTML element + * @default null + */ + refIcon?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; + triggerText: {}; + icon: {}; + }; + + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TooltipDefinition/TooltipDefinition.d.ts b/types/TooltipDefinition/TooltipDefinition.d.ts new file mode 100644 index 00000000..a9bec238 --- /dev/null +++ b/types/TooltipDefinition/TooltipDefinition.d.ts @@ -0,0 +1,46 @@ +/// + +export default class TooltipDefinition { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the tooltip text + * @default "" + */ + tooltipText?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * @default "center" + */ + align?: "start" | "center" | "end"; + + /** + * Set the direction of the tooltip relative to the icon + * @default "bottom" + */ + direction?: "top" | "bottom"; + + /** + * Set an id for the tooltip div element + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + tooltip: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts new file mode 100644 index 00000000..4d8b7492 --- /dev/null +++ b/types/TooltipIcon/TooltipIcon.d.ts @@ -0,0 +1,45 @@ +/// + +export default class TooltipIcon { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the tooltip text + * @default "" + */ + tooltipText?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * @default "center" + */ + align?: "start" | "center" | "end"; + + /** + * Set the direction of the tooltip relative to the icon + * @default "bottom" + */ + direction?: "top" | "right" | "bottom" | "left"; + + /** + * Set an id for the span element + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/Content.d.ts b/types/UIShell/Content.d.ts new file mode 100644 index 00000000..f2956ecd --- /dev/null +++ b/types/UIShell/Content.d.ts @@ -0,0 +1,17 @@ +/// + +export default class Content { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the id for the main element + * @default "main-content" + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts new file mode 100644 index 00000000..ec195157 --- /dev/null +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -0,0 +1,54 @@ +/// + +export default class Header { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `false` to hide the side nav by default + * @default true + */ + expandedByDefault?: boolean; + + /** + * Set to `true` to open the side nav + * @default false + */ + isSideNavOpen?: boolean; + + /** + * Specify the ARIA label for the header + */ + uiShellAriaLabel?: string; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the company name + */ + company?: string; + + /** + * Specify the platform name + * Alternatively, use the named slot "platform" (e.g. ...) + * @default "" + */ + platformName?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: { + default: {}; + ["skip-to-content"]: {}; + platform: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts new file mode 100644 index 00000000..a588430a --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts @@ -0,0 +1,38 @@ +/// + +export default class HeaderAction { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to open the panel + * @default false + */ + isOpen?: boolean; + + /** + * Specify the icon props + */ + icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; + + /** + * Specify the text + * Alternatively, use the named slot "text" (e.g.
...
) + */ + text?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + text: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts new file mode 100644 index 00000000..d69ea619 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts @@ -0,0 +1,31 @@ +/// + +export default class HeaderActionLink { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the active state + * @default false + */ + linkIsActive?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the icon props + */ + icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts new file mode 100644 index 00000000..79e45517 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts @@ -0,0 +1,18 @@ +/// + +export default class HeaderActionSearch { + $$prop_def: { + /** + * Set to `true` to focus the search + * @default false + */ + searchIsActive?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "focusInputSearch", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "focusOutInputSearch", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "inputSearch", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderNav.d.ts b/types/UIShell/GlobalHeader/HeaderNav.d.ts new file mode 100644 index 00000000..0682d233 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderNav.d.ts @@ -0,0 +1,16 @@ +/// + +export default class HeaderNav { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the ARIA label for the nav + */ + ariaLabel?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts new file mode 100644 index 00000000..c33b9d5f --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts @@ -0,0 +1,33 @@ +/// + +export default class HeaderNavItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts new file mode 100644 index 00000000..68c03b0d --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts @@ -0,0 +1,48 @@ +/// + +export default class HeaderNavMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the `href` attribute + * @default "/" + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + /** + * Specify the ARIA label for the chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts new file mode 100644 index 00000000..d119f1d7 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts @@ -0,0 +1,11 @@ +/// + +export default class HeaderPanelDivider { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts new file mode 100644 index 00000000..719fd36b --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts @@ -0,0 +1,23 @@ +/// + +export default class HeaderPanelLink { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts new file mode 100644 index 00000000..c9e0c119 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts @@ -0,0 +1,11 @@ +/// + +export default class HeaderPanelLinks { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderUtilities.d.ts b/types/UIShell/GlobalHeader/HeaderUtilities.d.ts new file mode 100644 index 00000000..27451169 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderUtilities.d.ts @@ -0,0 +1,11 @@ +/// + +export default class HeaderUtilities { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/HeaderGlobalAction.d.ts b/types/UIShell/HeaderGlobalAction.d.ts new file mode 100644 index 00000000..cefda50a --- /dev/null +++ b/types/UIShell/HeaderGlobalAction.d.ts @@ -0,0 +1,29 @@ +/// + +export default class HeaderGlobalAction { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the active variant + * @default false + */ + isActive?: boolean; + + /** + * Specify the icon to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts new file mode 100644 index 00000000..84f3aed3 --- /dev/null +++ b/types/UIShell/SideNav/SideNav.d.ts @@ -0,0 +1,28 @@ +/// + +export default class SideNav { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the fixed variant + * @default false + */ + fixed?: boolean; + + /** + * Specify the ARIA label for the nav + */ + ariaLabel?: string; + + /** + * Set to `true` to toggle the expanded state + * @default false + */ + isOpen?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavItems.d.ts b/types/UIShell/SideNav/SideNavItems.d.ts new file mode 100644 index 00000000..1380a084 --- /dev/null +++ b/types/UIShell/SideNav/SideNavItems.d.ts @@ -0,0 +1,11 @@ +/// + +export default class SideNavItems { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavLink.d.ts b/types/UIShell/SideNav/SideNavLink.d.ts new file mode 100644 index 00000000..7d961a5f --- /dev/null +++ b/types/UIShell/SideNav/SideNavLink.d.ts @@ -0,0 +1,37 @@ +/// + +export default class SideNavLink { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to select the current link + * @default false + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavMenu.d.ts b/types/UIShell/SideNav/SideNavMenu.d.ts new file mode 100644 index 00000000..19d0b427 --- /dev/null +++ b/types/UIShell/SideNav/SideNavMenu.d.ts @@ -0,0 +1,34 @@ +/// + +export default class SideNavMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavMenuItem.d.ts b/types/UIShell/SideNav/SideNavMenuItem.d.ts new file mode 100644 index 00000000..701fbd44 --- /dev/null +++ b/types/UIShell/SideNav/SideNavMenuItem.d.ts @@ -0,0 +1,31 @@ +/// + +export default class SideNavMenuItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to select the item + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the item text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SkipToContent.d.ts b/types/UIShell/SkipToContent.d.ts new file mode 100644 index 00000000..fd95515c --- /dev/null +++ b/types/UIShell/SkipToContent.d.ts @@ -0,0 +1,24 @@ +/// + +export default class SkipToContent { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `href` attribute + * @default "#main-content" + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UnorderedList/UnorderedList.d.ts b/types/UnorderedList/UnorderedList.d.ts new file mode 100644 index 00000000..ae7c3839 --- /dev/null +++ b/types/UnorderedList/UnorderedList.d.ts @@ -0,0 +1,21 @@ +/// + +export default class UnorderedList { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/index.d.ts b/types/index.d.ts index 8f0b41d2..006ee9cf 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,5379 +1,154 @@ -// Type definitions for carbon-components-svelte 0.22.0 -// Project: https://github.com/IBM/carbon-components-svelte - -export class CarbonSvelteComponent { - $$prop_def: {}; - - $$slot_def: {}; - - // stub all `on:{eventname}` directives - $on(eventname: string, handler: (e: Event) => any): () => void; -} - -export class Accordion extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the accordion - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class AccordionItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the title of the accordion item heading - * Alternatively, use the named slot "title" (e.g.
...
) - * @default "title" - */ - title?: string; - - /** - * Set to `true` to open the first accordion item - * @default false - */ - open?: boolean; - - /** - * Set to `true` to disable the accordion item - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the accordion item chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; - }; - - $$slot_def: { title: {}; default: {} }; -} - -export class AccordionSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of accordion items to render - * @default 4 - */ - count?: number; - - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `false` to close the first accordion item - * @default true - */ - open?: boolean; - }; -} - -export class AspectRatio extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the aspect ratio - * @default "2x1" - */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; - }; - - $$slot_def: { default: {} }; -} - -export class Breadcrumb extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Set to `true` to display skeleton state - * @default false - */ - skeleton?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class BreadcrumbItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Set to `true` if the breadcrumb item represents the current page - * @default false - */ - isCurrentPage?: boolean; - }; - - $$slot_def: { default: { props: any } }; -} - -export class BreadcrumbSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Specify the number of breadcrumb items to render - * @default 3 - */ - count?: number; - }; -} - -export class Button extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the kind of button - * @default "primary" - */ - kind?: - | "primary" - | "secondary" - | "tertiary" - | "ghost" - | "danger" - | "danger-tertiary" - | "danger-ghost"; - - /** - * Specify the size of button - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` for the icon-only variant - * @default false - */ - hasIconOnly?: boolean; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the ARIA label for the button icon - */ - iconDescription?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * `hasIconOnly` must be set to `true` - */ - tooltipAlignment?: "start" | "center" | "end"; - - /** - * Set the position of the tooltip relative to the icon - */ - tooltipPosition?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g. ) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to disable the button - * @default false - */ - disabled?: boolean; - - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the `type` attribute for the button element - * @default "button" - */ - type?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class ButtonSet extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to stack the buttons vertically - * @default false - */ - stacked?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ButtonSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the size of button skeleton - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; - }; -} - -export class Checkbox extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify whether the checkbox is checked - * @default false - */ - checked?: boolean; - - /** - * Specify whether the checkbox is indeterminate - * @default false - */ - indeterminate?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` for the checkbox to be read-only - * @default false - */ - readonly?: boolean; - - /** - * Set to `true` to disable the checkbox - * @default false - */ - disabled?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set a name for the input element - * @default "" - */ - name?: string; - - /** - * Specify the title attribute for the label element - */ - title?: string; - - /** - * Set an id for the input label - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class CheckboxSkeleton extends CarbonSvelteComponent {} - -export class ClickableTile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to click the tile - * @default false - */ - clicked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set the `href` - */ - href?: string; - }; - - $$slot_def: { default: {} }; -} - -export class CodeSnippet extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; - - /** - * Set the code snippet text - * Alternatively, use the default slot (e.g. {`code`}) - */ - code?: string; - - /** - * Set to `true` to expand a multi-line code snippet (type="multi") - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to hide the copy button - * @default false - */ - hideCopyButton?: boolean; - - /** - * Set to `true` to wrap the text - * Note that `type` must be "multi" - * @default false - */ - wrapText?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Specify the ARIA label for the copy button icon - */ - copyButtonDescription?: string; - - /** - * Specify the ARIA label of the copy button - */ - copyLabel?: string; - - /** - * Specify the feedback text displayed when clicking the snippet - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Specify the show less text - * `type` must be "multi" - * @default "Show less" - */ - showLessText?: string; - - /** - * Specify the show more text - * `type` must be "multi" - * @default "Show more" - */ - showMoreText?: string; - - /** - * Set to `true` to enable the show more/less button - * @default false - */ - showMoreLess?: boolean; - - /** - * Set an id for the code element - */ - id?: string; - - /** - * Obtain a reference to the pre HTML element - * @default null - */ - ref?: null | HTMLPreElement; - }; - - $$slot_def: { default: {} }; -} - -export class CodeSnippetSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; - }; -} - -type ColumnSize = boolean | number; - -interface ColumnSizeDescriptor { - span?: ColumnSize; - offset: number; -} - -type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; - -export class Column extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - - /** - * Specify the aspect ratio of the column - */ - aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; - - /** - * Set the small breakpoint - */ - sm?: ColumnBreakpoint; - - /** - * Set the medium breakpoint - */ - md?: ColumnBreakpoint; - - /** - * Set the large breakpoint - */ - lg?: ColumnBreakpoint; - - /** - * Set the extra large breakpoint - */ - xlg?: ColumnBreakpoint; - - /** - * Set the maximum breakpoint - */ - max?: ColumnBreakpoint; - }; - - $$slot_def: { default: {} }; -} - -interface ComboBoxItem { - id: string; - text: string; -} - -export class ComboBox extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the combobox items - * @default [] - */ - items?: ComboBoxItem[]; - - /** - * Override the display of a combobox item - */ - itemToString?: (item: ComboBoxItem) => string; - - /** - * Set the selected item by value index - */ - selectedIndex?: number; - - /** - * Specify the selected combobox value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the combobox - * @default false - */ - disabled?: boolean; - - /** - * Specify the title text of the combobox - * @default "" - */ - titleText?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to open the combobox menu dropdown - * @default false - */ - open?: boolean; - - /** - * Determine if an item should be filtered given the current combobox value - */ - shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Obtain a reference to the list HTML element - * @default null - */ - listRef?: null | HTMLDivElement; - }; -} - -export class ComposedModal extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the composed modal - */ - size?: "xs" | "sm" | "lg"; - - /** - * Set to `true` to open the modal - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `true` to prevent the modal from closing when clicking outside - * @default false - */ - preventCloseOnClickOutside?: boolean; - - /** - * Specify a class for the inner modal - * @default "" - */ - containerClass?: string; - - /** - * Specify a selector to be focused when opening the modal - * @default "[data-modal-primary-focus]" - */ - selectorPrimaryFocus?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { default: {} }; -} - -export class Content extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the id for the main element - * @default "main-content" - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class ContentSwitcher extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the selected index of the switch item - * @default 0 - */ - selectedIndex?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the size of the content switcher - */ - size?: "sm" | "xl"; - }; - - $$slot_def: { default: {} }; -} - -export class Copy extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the feedback text shown after clicking the button - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class CopyButton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the title and ARIA label for the copy button - * @default "Copy to clipboard" - */ - iconDescription?: string; - }; -} - -export class DataTable extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the data table headers - * @default [] - */ - headers?: { - key: string; - value: string; - display?: (item) => string; - sort?: (a, b) => number; - empty?: boolean; - columnMenu?: boolean; - }[]; - - /** - * Specify the rows the data table should render - * keys defined in `headers` are used for the row ids - * @default [] - */ - rows?: Object[]; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` for the expandable variant - * Automatically set to `true` if `batchExpansion` is `true` - * @default false - */ - expandable?: boolean; - - /** - * Set to `true` to enable batch expansion - * @default false - */ - batchExpansion?: boolean; - - /** - * Specify the row ids to be expanded - * @default [] - */ - expandedRowIds?: string[]; - - /** - * Set to `true` for the radio selection variant - * @default false - */ - radio?: boolean; - - /** - * Set to `true` for the selectable variant - * Automatically set to `true` if `radio` or `batchSelection` are `true` - * @default false - */ - selectable?: boolean; - - /** - * Set to `true` to enable batch selection - * @default false - */ - batchSelection?: boolean; - - /** - * Specify the row ids to be selected - * @default [] - */ - selectedRowIds?: string[]; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - - $$slot_def: { - default: {}; - "cell-header": { header: any }; - cell: { row: any; cell: any }; - "expanded-row": { row: any }; - }; -} - -export class DataTableSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of columns - * @default 5 - */ - columns?: number; - - /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to apply zebra styles to the datatable rows - * @default false - */ - zebra?: boolean; - - /** - * Set to `false` to hide the header - * @default true - */ - showHeader?: boolean; - - /** - * Set the column headers - * If `headers` has one more items, `count` is ignored - * @default [] - */ - headers?: string[]; - - /** - * Set to `false` to hide the toolbar - * @default true - */ - showToolbar?: boolean; - }; -} - -export class DatePicker extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the date picker type - * @default "simple" - */ - datePickerType?: "simple" | "single" | "range"; - - /** - * Specify the date picker input value - * @default "" - */ - value?: string; - - /** - * Specify the element to append the calendar to - */ - appendTo?: HTMLElement; - - /** - * Specify the date format - * @default "m/d/Y" - */ - dateFormat?: string; - - /** - * Specify the maximum date - * @default null - */ - maxDate?: null | string | Date; - - /** - * Specify the minimum date - * @default null - */ - minDate?: null | string | Date; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Set to `true` to use the short variant - * @default false - */ - short?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set an id for the date picker element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class DatePickerInput extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input type - * @default "text" - */ - type?: string; - - /** - * Specify the input placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the Regular Expression for the input value - * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" - */ - pattern?: string; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the calendar icon - * @default "" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set a name for the input element - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class DatePickerSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the range variant - * @default false - */ - range?: boolean; - - /** - * Set an id to be used by the label element - */ - id?: string; - }; -} - -type DropdownItemId = string; - -type DropdownItemText = string; - -interface DropdownItem { - id: DropdownItemId; - text: DropdownItemText; -} - -export class Dropdown extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the dropdown items - * @default [] - */ - items?: DropdownItem[]; - - /** - * Override the display of a dropdown item - */ - itemToString?: (item: DropdownItem) => string; - - /** - * Specify the selected item index - */ - selectedIndex?: number; - - /** - * Specify the type of dropdown - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Specify the size of the dropdown field - */ - size?: "sm" | "lg" | "xl"; - - /** - * Set to `true` to open the dropdown - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the dropdown - * @default false - */ - disabled?: boolean; - - /** - * Specify the title text - * @default "" - */ - titleText?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the list box label - */ - label?: string; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the list box - */ - name?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; -} - -export class DropdownSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - }; -} - -export class ExpandableTile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to expand the tile - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the max height of the tile (number of pixels) - * @default 0 - */ - tileMaxHeight?: number; - - /** - * Specify the padding of the tile (number of pixels) - * @default 0 - */ - tilePadding?: number; - - /** - * Specify the icon text of the collapsed tile - * @default "Interact to expand Tile" - */ - tileCollapsedIconText?: string; - - /** - * Specify the icon text of the expanded tile - * @default "Interact to collapse Tile" - */ - tileExpandedIconText?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the top-level div element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { above: {}; below: {} }; -} - -export class FileUploader extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the file uploader status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Obtain the uploaded file names - * @default [] - */ - files?: string[]; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of clearing the array of uploaded files - * @constant - */ - clearFiles?: () => any; - - /** - * Specify the label description - * @default "" - */ - labelDescription?: string; - - /** - * Specify the label title - * @default "" - */ - labelTitle?: string; - - /** - * Specify the kind of file uploader button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; - - /** - * Specify the button label - * @default "" - */ - buttonLabel?: string; - - /** - * Specify the ARIA label used for the status icons - * @default "Provide icon description" - */ - iconDescription?: string; - - /** - * Specify a name attribute for the file button uploader input - * @default "" - */ - name?: string; - }; -} - -export class FileUploaderButton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to disable label changes - * @default false - */ - disableLabelChanges?: boolean; - - /** - * Specify the kind of file uploader button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; - - /** - * Specify the label text - * @default "Add file" - */ - labelText?: string; - - /** - * Specify the label role - * @default "button" - */ - role?: string; - - /** - * Specify `tabindex` attribute - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -type Files = string[]; - -export class FileUploaderDropContainer extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of validating uploaded files - * The default behavior does not validate files - */ - validateFiles?: (files: Files) => Files; - - /** - * Specify the label text - * @default "Add file" - */ - labelText?: string; - - /** - * Specify the `role` attribute of the drop container - * @default "button" - */ - role?: string; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify `tabindex` attribute - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class FileUploaderItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the file uploader status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the ARIA label used for the status icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the error subject text - * @default "" - */ - errorSubject?: string; - - /** - * Specify the error body text - * @default "" - */ - errorBody?: string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Specify the file uploader name - * @default "" - */ - name?: string; - }; -} - -export class FileUploaderSkeleton extends CarbonSvelteComponent {} - -export class Filename extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the file name status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the ARIA label used for the status icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - }; -} - -export class FluidForm extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Form extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class FormGroup extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to render a form requirement - * @default false - */ - message?: boolean; - - /** - * Specify the message text - * @default "" - */ - messageText?: string; - - /** - * Specify the legend text - * @default "" - */ - legendText?: string; - }; - - $$slot_def: { default: {} }; -} - -export class FormItem extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class FormLabel extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set an id to be used by the label element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class Grid extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to use the condensed variant - * @default false - */ - condensed?: boolean; - - /** - * Set to `true` to use the narrow variant - * @default false - */ - narrow?: boolean; - - /** - * Set to `true` to use the fullWidth variant - * @default false - */ - fullWidth?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class Header extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `false` to hide the side nav by default - * @default true - */ - expandedByDefault?: boolean; - - /** - * Set to `true` to open the side nav - * @default false - */ - isSideNavOpen?: boolean; - - /** - * Specify the ARIA label for the header - */ - uiShellAriaLabel?: string; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the company name - */ - company?: string; - - /** - * Specify the platform name - * Alternatively, use the named slot "platform" (e.g. ...) - * @default "" - */ - platformName?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - - $$slot_def: { "skip-to-content": {}; platform: {}; default: {} }; -} - -export class HeaderAction extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to open the panel - * @default false - */ - isOpen?: boolean; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - - /** - * Specify the text - * Alternatively, use the named slot "text" (e.g.
...
) - */ - text?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { text: {}; default: {} }; -} - -export class HeaderActionLink extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the active state - * @default false - */ - linkIsActive?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class HeaderActionSearch extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to focus the search - * @default false - */ - searchIsActive?: boolean; - }; -} - -export class HeaderGlobalAction extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the active variant - * @default false - */ - isActive?: boolean; - - /** - * Specify the icon to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderNav extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderNavItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class HeaderNavMenu extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the `href` attribute - * @default "/" - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - - /** - * Specify the ARIA label for the chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderPanelDivider extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class HeaderPanelLink extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderPanelLinks extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class HeaderUtilities extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Icon extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the icon from `carbon-icons-svelte` to render - * Icon size must be 16px (e.g. `Add16`, `Task16`) - */ - render?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - }; -} - -export class IconSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the icon - * @default 16 - */ - size?: number; - }; -} - -export class InlineLoading extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the loading status - * @default "active" - */ - status?: "active" | "inactive" | "finished" | "error"; - - /** - * Set the loading description - */ - description?: string; - - /** - * Specify the ARIA label for the loading icon - */ - iconDescription?: string; - - /** - * Specify the timeout delay (ms) after `status` is set to "success" - * @default 1500 - */ - successDelay?: number; - }; -} - -export class InlineNotification extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "inline" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: - | "error" - | "info" - | "info-square" - | "success" - | "warning" - | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {}; actions: {} }; -} - -export class Link extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the size of the link - */ - size?: "sm" | "lg"; - - /** - * Specify the href value - */ - href?: string; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to disable the checkbox - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to allow visited styles - * @default false - */ - visited?: boolean; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLParagraphElement; - }; - - $$slot_def: { default: {} }; -} - -export class ListBox extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the list box - */ - size?: "sm" | "xl"; - - /** - * Set the type of the list box - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Set to `true` to open the list box - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the list box - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - }; - - $$slot_def: { default: {} }; -} - -type ListBoxFieldTranslationId = "close" | "open"; - -export class ListBoxField extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to disable the list box field - * @default false - */ - disabled?: boolean; - - /** - * Specify the role attribute - * @default "combobox" - */ - role?: string; - - /** - * Specify the tabindex - * @default "-1" - */ - tabindex?: string; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - */ - translateWithId?: (id: ListBoxFieldTranslationId) => string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { default: {} }; -} - -export class ListBoxMenu extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLDivElement; - }; - - $$slot_def: { default: {} }; -} - -type ListBoxMenuIconTranslationId = "close" | "open"; - -export class ListBoxMenuIcon extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to open the list box menu icon - * @default false - */ - open?: boolean; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - */ - translateWithId?: (id: ListBoxMenuIconTranslationId) => string; - }; -} - -export class ListBoxMenuItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to enable the active state - * @default false - */ - active?: boolean; - - /** - * Set to `true` to enable the highlighted state - * @default false - */ - highlighted?: boolean; - }; - - $$slot_def: { default: {} }; -} - -type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; - -export class ListBoxSelection extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of selected items - */ - selectionCount?: any; - - /** - * Set to `true` to disable the list box selection - * @default false - */ - disabled?: boolean; - - /** - * Default translation ids - * @constant - * @default { clearAll: "clearAll", clearSelection: "clearSelection", } - */ - translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; - - /** - * Override the default translation ids - */ - translateWithId?: (id: ListBoxSelectionTranslationId) => string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; -} - -export class ListItem extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Loading extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; - - /** - * Set to `false` to disable the active state - * @default true - */ - active?: boolean; - - /** - * Set to `false` to disable the overlay - * @default true - */ - withOverlay?: boolean; - - /** - * Specify the label description - * @default "Active loading indicator" - */ - description?: string; - - /** - * Set an id for the label element - */ - id?: string; - }; -} - -export class Modal extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the modal - */ - size?: "xs" | "sm" | "lg"; - - /** - * Set to `true` to open the modal - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `true` to enable alert mode - * @default false - */ - alert?: boolean; - - /** - * Set to `true` to use the passive variant - * @default false - */ - passiveModal?: boolean; - - /** - * Specify the modal heading - */ - modalHeading?: string; - - /** - * Specify the modal label - */ - modalLabel?: string; - - /** - * Specify the ARIA label for the modal - */ - modalAriaLabel?: string; - - /** - * Specify the ARIA label for the close icon - * @default "Close the modal" - */ - iconDescription?: string; - - /** - * Set to `true` if the modal contains form elements - * @default false - */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; - - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Set to `true` for the primary button to be triggered when pressing "Enter" - * @default true - */ - shouldSubmitOnEnter?: boolean; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a selector to be focused when opening the modal - * @default "[data-modal-primary-focus]" - */ - selectorPrimaryFocus?: string; - - /** - * Set to `true` to prevent the modal from closing when clicking outside - * @default false - */ - preventCloseOnClickOutside?: boolean; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { label: {}; heading: {}; default: {} }; -} - -export class ModalBody extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` if the modal contains form elements - * @default false - */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ModalFooter extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Specify a class for the primary button - */ - primaryClass?: string; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a class for the secondary button - */ - secondaryClass?: string; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ModalHeader extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the modal title - * @default "" - */ - title?: string; - - /** - * Specify the modal label - * @default "" - */ - label?: string; - - /** - * Specify the label class - * @default "" - */ - labelClass?: string; - - /** - * Specify the title class - * @default "" - */ - titleClass?: string; - - /** - * Specify the close class - * @default "" - */ - closeClass?: string; - - /** - * Specify the close icon class - * @default "" - */ - closeIconClass?: string; - - /** - * Specify the ARIA label for the close icon - * @default "Close" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {} }; -} - -type MultiSelectItemId = string; - -type MultiSelectItemText = string; - -interface MultiSelectItem { - id: MultiSelectItemId; - text: MultiSelectItemText; -} - -export class MultiSelect extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the multiselect items - * @default [] - */ - items?: MultiSelectItem[]; - - /** - * Override the display of a multiselect item - */ - itemToString?: (item: MultiSelectItem) => string; - - /** - * Set the selected ids - * @default [] - */ - selectedIds?: MultiSelectItemId[]; - - /** - * Specify the multiselect value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "lg" | "xl"; - - /** - * Specify the type of multiselect - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Specify the selection feedback after selecting items - * @default "top-after-reopen" - */ - selectionFeedback?: "top" | "fixed" | "top-after-reopen"; - - /** - * Set to `true` to disable the dropdown - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to filter items - * @default false - */ - filterable?: boolean; - - /** - * Override the filtering logic - * The default filtering is an exact string comparison - */ - filterItem?: (item: MultiSelectItem, value: string) => string; - - /** - * Set to `true` to open the dropdown - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Override the sorting logic - * The default sorting compare the item text value - */ - sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Specify the title text - * @default "" - */ - titleText?: string; - - /** - * Set to `true` to pass the item to `itemToString` in the checkbox - * @default false - */ - useTitleInItem?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the list box label - * @default "" - */ - label?: string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the select - */ - name?: string; - }; -} - -export class NotificationActionButton extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class NotificationButton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - renderIcon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the title of the icon - */ - title?: string; - - /** - * Specify the ARIA label for the icon - * @default "Close icon" - */ - iconDescription?: string; - }; -} - -export class NotificationIcon extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the kind of notification icon - * @default "error" - */ - kind?: - | "error" - | "info" - | "info-square" - | "success" - | "warning" - | "warning-alt"; - - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - }; -} - -export class NotificationTextDetails extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; - }; - - $$slot_def: { default: {} }; -} - -type NumberInputTranslationId = "increment" | "decrement"; - -export class NumberInput extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the step increment - * @default 1 - */ - step?: number; - - /** - * Specify the maximum value - */ - max?: number; - - /** - * Specify the minimum value - */ - min?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` for the input to be read-only - * @default false - */ - readonly?: boolean; - - /** - * Set to `true` to enable the mobile variant - * @default false - */ - mobile?: boolean; - - /** - * Set to `true` to allow for an empty value - * @default false - */ - allowEmpty?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the increment icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the label text - * @default "" - */ - label?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Override the default translation ids - */ - translateWithId?: (id: NumberInputTranslationId) => string; - - /** - * Default translation ids - * @constant - * @default { increment: "increment", decrement: "decrement", } - */ - translationIds?: { increment: "increment"; decrement: "decrement" }; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - - $$slot_def: { label: {} }; -} - -export class NumberInputSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class OrderedList extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; - - /** - * Set to `true` to use native list styles - * @default false - */ - native?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class OverflowMenu extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the size of the overflow menu - */ - size?: "sm" | "xl"; - - /** - * Specify the direction of the overflow menu relative to the button - * @default "bottom" - */ - direction?: "top" | "bottom"; - - /** - * Set to `true` to open the menu - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to flip the menu relative to the button - * @default false - */ - flipped?: boolean; - - /** - * Specify the menu options class - */ - menuOptionsClass?: string; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the icon class - */ - iconClass?: string; - - /** - * Specify the ARIA label for the icon - * @default "Open and close list of options" - */ - iconDescription?: string; - - /** - * Set an id for the button element - */ - id?: string; - - /** - * Obtain a reference to the trigger button element - * @default null - */ - buttonRef?: null | HTMLButtonElement; - - /** - * Obtain a reference to the overflow menu element - * @default null - */ - menuRef?: null | HTMLUListElement; - }; - - $$slot_def: { menu: {}; default: {} }; -} - -export class OverflowMenuItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the item text - * Alternatively, use the default slot for a custom element - * @default "Provide text" - */ - text?: string; - - /** - * Specify the `href` attribute if the item is a link - * @default "" - */ - href?: string; - - /** - * Set to `true` if the item should be focused when opening the menu - * @default false - */ - primaryFocus?: boolean; - - /** - * Set to `true` to disable the item - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to include a divider - * @default false - */ - hasDivider?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `false` to omit the button `title` attribute - * @default true - */ - requireTitle?: boolean; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class Pagination extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the current page index - * @default 1 - */ - page?: number; - - /** - * Specify the total number of items - * @default 0 - */ - totalItems?: number; - - /** - * Set to `true` to disable the pagination - * @default false - */ - disabled?: boolean; - - /** - * Specify the forward button text - * @default "Next page" - */ - forwardText?: string; - - /** - * Specify the backward button text - * @default "Previous page" - */ - backwardText?: string; - - /** - * Specify the items per page text - * @default "Items per page:" - */ - itemsPerPageText?: string; - - /** - * Override the item text - */ - itemText?: (min: number, max: number) => string; - - /** - * Override the item range text - */ - itemRangeText?: (min: number, max: number, total: number) => string; - - /** - * Set to `true` to disable the page input - * @default false - */ - pageInputDisabled?: boolean; - - /** - * Set to `true` to disable the page size input - * @default false - */ - pageSizeInputDisabled?: boolean; - - /** - * Specify the number of items to display in a page - * @default 10 - */ - pageSize?: number; - - /** - * Specify the available page sizes - * @default [10] - */ - pageSizes?: number[]; - - /** - * Set to `true` if the number of pages is unknown - * @default false - */ - pagesUnknown?: boolean; - - /** - * Override the page text - */ - pageText?: (page: number) => string; - - /** - * Override the page range text - */ - pageRangeText?: (current: number, total: number) => string; - - /** - * Set an id for the top-level element - */ - id?: string; - }; -} - -export class PaginationNav extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the current page index - * @default 0 - */ - page?: number; - - /** - * Specify the total number of pages - * @default 10 - */ - total?: number; - - /** - * Specify the total number of pages to show - * @default 10 - */ - shown?: number; - - /** - * Set to `true` to loop the navigation - * @default false - */ - loop?: boolean; - - /** - * Specify the forward button text - * @default "Next page" - */ - forwardText?: string; - - /** - * Specify the backward button text - * @default "Previous page" - */ - backwardText?: string; - }; -} - -export class PaginationSkeleton extends CarbonSvelteComponent {} - -export class PasswordInput extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the input type - * @default "password" - */ - type?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the hide password label text - * @default "Hide password" - */ - hidePasswordLabel?: string; - - /** - * Specify the show password label text - * @default "Show password" - */ - showPasswordLabel?: string; - - /** - * Set the alignment of the tooltip relative to the icon - */ - tooltipAlignment?: "start" | "center" | "end"; - - /** - * Set the position of the tooltip relative to the icon - */ - tooltipPosition?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the text for the invalid state - * @default "" - */ - invalidText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class ProgressIndicator extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the current step index - * @default 0 - */ - currentIndex?: number; - - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Set to `true` to specify whether the progress steps should be split equally in size in the div - * @default false - */ - spaceEqually?: boolean; - - /** - * Set to `true` to prevent updating `currentIndex` - * @default false - */ - preventChangeOnClick?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ProgressIndicatorSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Specify the number of steps to render - * @default 4 - */ - count?: number; - }; -} - -export class ProgressStep extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` for the complete variant - * @default false - */ - complete?: boolean; - - /** - * Set to `true` to use the current variant - * @default false - */ - current?: boolean; - - /** - * Set to `true` to disable the progress step - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the step description - * @default "" - */ - description?: string; - - /** - * Specify the step label - * @default "" - */ - label?: string; - - /** - * Specify the step secondary label - * @default "" - */ - secondaryLabel?: string; - - /** - * Set an id for the top-level element - */ - id?: string; - }; - - $$slot_def: { default: { props: any } }; -} - -export class RadioButton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the value of the radio button - * @default "" - */ - value?: string; - - /** - * Set to `true` to check the radio button - * @default false - */ - checked?: boolean; - - /** - * Set to `true` to disable the radio button - * @default false - */ - disabled?: boolean; - - /** - * Specify the label position - * @default "right" - */ - labelPosition?: "right" | "left"; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class RadioButtonGroup extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the selected radio button value - */ - selected?: string; - - /** - * Set to `true` to disable the radio buttons - * @default false - */ - disabled?: boolean; - - /** - * Specify the label position - * @default "right" - */ - labelPosition?: "right" | "left"; - - /** - * Specify the orientation of the radio buttons - * @default "horizontal" - */ - orientation?: "horizontal" | "vertical"; - - /** - * Set an id for the container div element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class RadioButtonSkeleton extends CarbonSvelteComponent {} - -export class RadioTile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to check the tile - * @default false - */ - checked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the value of the radio input - * @default "" - */ - value?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the ARIA label for the radio tile checkmark icon - * @default "Tile checkmark" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - }; - - $$slot_def: { default: {} }; -} - -export class Row extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to use the condensed variant - * @default false - */ - condensed?: boolean; - - /** - * Set to `true` to use the narrow variant - * @default false - */ - narrow?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class Search extends CarbonSvelteComponent { - $$prop_def: { - /** - * - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the search input - * @default false - */ - disabled?: boolean; - - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Specify the `type` attribute of the search input - * @default "text" - */ - type?: string; - - /** - * Specify the `placeholder` attribute of the search input - * @default "Search..." - */ - placeholder?: string; - - /** - * Specify the `autocomplete` attribute - * @default "off" - */ - autocomplete?: "on" | "off"; - - /** - * Set to `true` to auto focus the search element - * @default false - */ - autofocus?: boolean; - - /** - * Specify the close button label text - * @default "Clear search input" - */ - closeButtonLabelText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class SearchSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; - }; -} - -export class Select extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the selected item value - */ - selected?: string; - - /** - * Set the size of the select input - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the select element - * @default false - */ - disabled?: boolean; - - /** - * Set an id for the select element - */ - id?: string; - - /** - * Specify a name attribute for the select element - */ - name?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Set to `true` to not render a label - * @default false - */ - noLabel?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Obtain a reference to the select HTML element - * @default null - */ - ref?: null | HTMLSelectElement; - }; - - $$slot_def: { default: {} }; -} - -export class SelectItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the option value - * @default "" - */ - value?: string; - - /** - * Specify the option text - * @default "" - */ - text?: string; - - /** - * Set to `true` to hide the option - * @default false - */ - hidden?: boolean; - - /** - * Set to `true` to disable the option - * @default false - */ - disabled?: boolean; - }; -} - -export class SelectItemGroup extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to disable the optgroup element - * @default false - */ - disabled?: boolean; - - /** - * Specify the label attribute of the optgroup element - * @default "Provide label" - */ - label?: string; - }; - - $$slot_def: { default: {} }; -} - -export class SelectSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class SelectableTile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the tile - * @default false - */ - selected?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the title of the selectable tile - * @default "title" - */ - title?: string; - - /** - * Specify the value of the selectable tile - * @default "value" - */ - value?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the ARIA label for the selectable tile checkmark icon - * @default "Tile checkmark" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - - $$slot_def: { default: {} }; -} - -export class SideNav extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the fixed variant - * @default false - */ - fixed?: boolean; - - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - - /** - * Set to `true` to toggle the expanded state - * @default false - */ - isOpen?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class SideNavItems extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class SideNavLink extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the current link - * @default false - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class SideNavMenu extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class SideNavMenuItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the item - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the item text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class SkeletonPlaceholder extends CarbonSvelteComponent {} - -export class SkeletonText extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of lines to render - * @default 3 - */ - lines?: number; - - /** - * Set to `true` to use the heading size variant - * @default false - */ - heading?: boolean; - - /** - * Set to `true` to use the paragraph size variant - * @default false - */ - paragraph?: boolean; - - /** - * Specify the width of the text (% or px) - * @default "100%" - */ - width?: string; - }; -} - -export class SkipToContent extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - * @default "#main-content" - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - }; - - $$slot_def: { default: {} }; -} - -export class Slider extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the value of the slider - * @default 0 - */ - value?: number; - - /** - * Set the maximum slider value - * @default 100 - */ - max?: number; - - /** - * Specify the label for the max value - * @default "" - */ - maxLabel?: string; - - /** - * Set the minimum slider value - * @default 0 - */ - min?: number; - - /** - * Specify the label for the min value - * @default "" - */ - minLabel?: string; - - /** - * Set the step value - * @default 1 - */ - step?: number; - - /** - * Set the step multiplier value - * @default 4 - */ - stepMultiplier?: number; - - /** - * Set to `true` to require a value - * @default false - */ - required?: boolean; - - /** - * Specify the input type - * @default "number" - */ - inputType?: string; - - /** - * Set to `true` to disable the slider - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to hide the text input - * @default false - */ - hideTextInput?: boolean; - - /** - * Set an id for the slider div element - */ - id?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set a name for the slider element - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLElement; - }; -} - -export class SliderSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class StructuredList extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the selected structured list row value - */ - selected?: string; - - /** - * Set to `true` to use the bordered variant - * @default false - */ - border?: boolean; - - /** - * Set to `true` to use the selection variant - * @default false - */ - selection?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class StructuredListBody extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class StructuredListCell extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use as a header - * @default false - */ - head?: boolean; - - /** - * Set to `true` to prevent wrapping - * @default false - */ - noWrap?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class StructuredListHead extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class StructuredListInput extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to check the input - * @default false - */ - checked?: boolean; - - /** - * Specify the title of the input - * @default "title" - */ - title?: string; - - /** - * Specify the value of the input - * @default "value" - */ - value?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class StructuredListRow extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use as a header - * @default false - */ - head?: boolean; - - /** - * Set to `true` to render a label slot - * @default false - */ - label?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - }; - - $$slot_def: { default: {} }; -} - -export class StructuredListSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set to `true` to use the bordered variant - * @default false - */ - border?: boolean; - }; -} - -export class Switch extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the switch text - * Alternatively, use the named slot "text" (e.g. ...) - * @default "Provide text" - */ - text?: string; - - /** - * Set to `true` for the switch to be selected - * @default false - */ - selected?: boolean; - - /** - * Set to `true` to disable the switch - * @default false - */ - disabled?: boolean; - - /** - * Set an id for the button element - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class Tab extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the tab label - * Alternatively, use the default slot (e.g. Label) - * @default "" - */ - label?: string; - - /** - * Specify the href attribute - * @default "#" - */ - href?: string; - - /** - * Set to `true` to disable the tab - * @default false - */ - disabled?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the anchor HTML element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - - $$slot_def: { default: {} }; -} - -export class TabContent extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set an id for the top-level element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class Table extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` to use static width - * @default false - */ - useStaticWidth?: boolean; - - /** - * Set to `true` for the bordered variant - * @default false - */ - shouldShowBorder?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class TableBody extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableCell extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableContainer extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class TableHead extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableHeader extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the `scope` attribute - * @default "col" - */ - scope?: string; - - /** - * Override the default id translations - */ - translateWithId?: () => string; - - /** - * Set an id for the top-level element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class TableRow extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Tabs extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the selected tab index - * @default 0 - */ - selected?: number; - - /** - * Specify the type of tabs - * @default "default" - */ - type?: "default" | "container"; - - /** - * Specify the ARIA label for the chevron icon - * @default "Show menu options" - */ - iconDescription?: string; - - /** - * Specify the tab trigger href attribute - * @default "#" - */ - triggerHref?: string; - }; - - $$slot_def: { default: {}; content: {} }; -} - -export class TabsSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of tabs to render - * @default 4 - */ - count?: number; - }; -} - -export class Tag extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the type of tag - */ - type?: - | "red" - | "magenta" - | "purple" - | "blue" - | "cyan" - | "teal" - | "green" - | "gray" - | "cool-gray" - | "warm-gray" - | "high-contrast"; - - /** - * Set to `true` to use filterable variant - * @default false - */ - filter?: boolean; - - /** - * Set to `true` to disable a filterable tag - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set the title for the close button in a filterable tag - * @default "Clear filter" - */ - title?: string; - - /** - * Set an id for the filterable tag - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class TagSkeleton extends CarbonSvelteComponent {} - -export class TextArea extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the textarea value - * @default "" - */ - value?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the number of cols - * @default 50 - */ - cols?: number; - - /** - * Specify the number of rows - * @default 4 - */ - rows?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the text for the invalid state - * @default "" - */ - invalidText?: string; - - /** - * Set an id for the textarea element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the textarea HTML element - * @default null - */ - ref?: null | HTMLTextAreaElement; - }; -} - -export class TextAreaSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class TextInput extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the input type - * @default "" - */ - type?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set to `true` to indicate an warning state - * @default false - */ - warn?: boolean; - - /** - * Specify the warning state text - * @default "" - */ - warnText?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Set to `true` to mark the field as required - * @default false - */ - required?: boolean; - - /** - * Set to `true` to use inline version - * @default false - */ - inline?: boolean; - }; -} - -export class TextInputSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class Tile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class TileGroup extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the selected tile value - */ - selected?: string; - - /** - * Set to `true` to disable the tile group - * @default false - */ - disabled?: boolean; - - /** - * Specify the legend text - * @default "" - */ - legend?: string; - }; - - $$slot_def: { default: {} }; -} - -export class TimePicker extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the input type - * @default "text" - */ - type?: string; - - /** - * Specify the input placeholder text - * @default "hh=mm" - */ - placeholder?: string; - - /** - * Specify the `pattern` attribute for the input element - * @default "(1[012]|[1-9]):[0-5][0-9](\\s)?" - */ - pattern?: string; - - /** - * Specify the `maxlength` input attribute - * @default 5 - */ - maxlength?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - - $$slot_def: { default: {} }; -} - -export class TimePickerSelect extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the select value - * @default "" - */ - value?: string; - - /** - * Set to `true` to disable the select - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the chevron icon - * @default "Open list of options" - */ - iconDescription?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * - * @default true - */ - hideLabel?: boolean; - - /** - * Set an id for the select element - */ - id?: string; - - /** - * Specify a name attribute for the select element - */ - name?: string; - - /** - * Obtain a reference to the select HTML element - * @default null - */ - ref?: null | HTMLSelectElement; - }; - - $$slot_def: { default: {} }; -} - -export class ToastNotification extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: - | "error" - | "info" - | "info-square" - | "success" - | "warning" - | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class Toggle extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to toggle the checkbox input - * @default false - */ - toggled?: boolean; - - /** - * Set to `true` to disable checkbox input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label for the untoggled state - * @default "Off" - */ - labelA?: string; - - /** - * Specify the label for the toggled state - * @default "On" - */ - labelB?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - */ - name?: string; - }; -} - -export class ToggleSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - }; -} - -export class ToggleSmall extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to toggle the checkbox input - * @default false - */ - toggled?: boolean; - - /** - * Set to `true` to disable checkbox input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label for the untoggled state - * @default "Off" - */ - labelA?: string; - - /** - * Specify the label for the toggled state - * @default "On" - */ - labelB?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - */ - name?: string; - }; -} - -export class ToggleSmallSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - }; -} - -export class Toolbar extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the toolbar size - * @default "default" - */ - size?: "sm" | "default"; - }; - - $$slot_def: { default: {} }; -} - -export class ToolbarBatchActions extends CarbonSvelteComponent { - $$prop_def: { - /** - * Override the total items selected text - */ - formatTotalSelected?: (totalSelected: number) => string; - }; - - $$slot_def: { default: {} }; -} - -export class ToolbarContent extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class ToolbarMenu extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class ToolbarMenuItem extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class ToolbarSearch extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Set to `true` to expand the search bar - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to keep the search bar expanded - * @default false - */ - persistent?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class Tooltip extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the direction of the tooltip relative to the button - * @default "bottom" - */ - direction?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to open the tooltip - * @default false - */ - open?: boolean; - - /** - * Set to `true` to hide the tooltip icon - * @default false - */ - hideIcon?: boolean; - - /** - * Specify the icon from `carbon-icons-svelte` to render for the tooltip button - * Icon size must be 16px (e.g. `Add16`, `Task16`) - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the ARIA label for the tooltip button - * @default "" - */ - iconDescription?: string; - - /** - * Specify the icon name attribute - * @default "" - */ - iconName?: string; - - /** - * Set the button tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the tooltip - */ - tooltipId?: string; - - /** - * Set an id for the tooltip button - */ - triggerId?: string; - - /** - * Set the tooltip button text - * @default "" - */ - triggerText?: string; - - /** - * Obtain a reference to the trigger text HTML element - * @default null - */ - ref?: null | HTMLElement; - - /** - * Obtain a reference to the tooltip HTML element - * @default null - */ - refTooltip?: null | HTMLElement; - - /** - * Obtain a reference to the icon HTML element - * @default null - */ - refIcon?: null | HTMLElement; - }; - - $$slot_def: { triggerText: {}; icon: {}; default: {} }; -} - -export class TooltipDefinition extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the tooltip text - * @default "" - */ - tooltipText?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * @default "center" - */ - align?: "start" | "center" | "end"; - - /** - * Set the direction of the tooltip relative to the icon - * @default "bottom" - */ - direction?: "top" | "bottom"; - - /** - * Set an id for the tooltip div element - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {}; tooltip: {} }; -} - -export class TooltipIcon extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the tooltip text - * @default "" - */ - tooltipText?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * @default "center" - */ - align?: "start" | "center" | "end"; - - /** - * Set the direction of the tooltip relative to the icon - * @default "bottom" - */ - direction?: "top" | "right" | "bottom" | "left"; - - /** - * Set an id for the span element - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class UnorderedList extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; - }; - - $$slot_def: { default: {} }; -} +export { default as SkeletonText } from "./SkeletonText/SkeletonText"; +export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton"; +export { default as Accordion } from "./Accordion/Accordion"; +export { default as AccordionItem } from "./Accordion/AccordionItem"; +export { default as AspectRatio } from "./AspectRatio/AspectRatio"; +export { default as BreadcrumbSkeleton } from "./Breadcrumb/Breadcrumb.Skeleton"; +export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb"; +export { default as Link } from "./Link/Link"; +export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem"; +export { default as ButtonSkeleton } from "./Button/Button.Skeleton"; +export { default as Button } from "./Button/Button"; +export { default as ButtonSet } from "./Button/ButtonSet"; +export { default as CheckboxSkeleton } from "./Checkbox/Checkbox.Skeleton"; +export { default as Checkbox } from "./Checkbox/Checkbox"; +export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher"; +export { default as Switch } from "./ContentSwitcher/Switch"; +export { default as Copy } from "./Copy/Copy"; +export { default as CopyButton } from "./CopyButton/CopyButton"; +export { default as ListBox } from "./ListBox/ListBox"; +export { default as ListBoxField } from "./ListBox/ListBoxField"; +export { default as ListBoxMenu } from "./ListBox/ListBoxMenu"; +export { default as ListBoxMenuIcon } from "./ListBox/ListBoxMenuIcon"; +export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem"; +export { default as ListBoxSelection } from "./ListBox/ListBoxSelection"; +export { default as ComboBox } from "./ComboBox/ComboBox"; +export { default as ComposedModal } from "./ComposedModal/ComposedModal"; +export { default as ModalHeader } from "./ComposedModal/ModalHeader"; +export { default as ModalBody } from "./ComposedModal/ModalBody"; +export { default as ModalFooter } from "./ComposedModal/ModalFooter"; +export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippet.Skeleton"; +export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet"; +export { default as RadioButton } from "./RadioButton/RadioButton"; +export { default as RadioButtonSkeleton } from "./RadioButton/RadioButton.Skeleton"; +export { default as Table } from "./DataTable/Table"; +export { default as TableBody } from "./DataTable/TableBody"; +export { default as TableCell } from "./DataTable/TableCell"; +export { default as TableContainer } from "./DataTable/TableContainer"; +export { default as TableHead } from "./DataTable/TableHead"; +export { default as TableHeader } from "./DataTable/TableHeader"; +export { default as TableRow } from "./DataTable/TableRow"; +export { default as DataTable } from "./DataTable/DataTable"; +export { default as Toolbar } from "./DataTable/Toolbar"; +export { default as ToolbarContent } from "./DataTable/ToolbarContent"; +export { default as SearchSkeleton } from "./Search/Search.Skeleton"; +export { default as Search } from "./Search/Search"; +export { default as ToolbarSearch } from "./DataTable/ToolbarSearch"; +export { default as ToolbarBatchActions } from "./DataTable/ToolbarBatchActions"; +export { default as OverflowMenu } from "./OverflowMenu/OverflowMenu"; +export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem"; +export { default as ToolbarMenu } from "./DataTable/ToolbarMenu"; +export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem"; +export { default as DataTableSkeleton } from "./DataTableSkeleton/DataTableSkeleton"; +export { default as DatePicker } from "./DatePicker/DatePicker"; +export { default as DatePickerInput } from "./DatePicker/DatePickerInput"; +export { default as DatePickerSkeleton } from "./DatePicker/DatePicker.Skeleton"; +export { default as Dropdown } from "./Dropdown/Dropdown"; +export { default as DropdownSkeleton } from "./Dropdown/Dropdown.Skeleton"; +export { default as Loading } from "./Loading/Loading"; +export { default as Filename } from "./FileUploader/Filename"; +export { default as FileUploaderButton } from "./FileUploader/FileUploaderButton"; +export { default as FileUploader } from "./FileUploader/FileUploader"; +export { default as FileUploaderItem } from "./FileUploader/FileUploaderItem"; +export { default as FileUploaderDropContainer } from "./FileUploader/FileUploaderDropContainer"; +export { default as FileUploaderSkeleton } from "./FileUploader/FileUploader.Skeleton"; +export { default as Form } from "./Form/Form"; +export { default as FluidForm } from "./FluidForm/FluidForm"; +export { default as FormGroup } from "./FormGroup/FormGroup"; +export { default as FormItem } from "./FormItem/FormItem"; +export { default as FormLabel } from "./FormLabel/FormLabel"; +export { default as Grid } from "./Grid/Grid"; +export { default as Row } from "./Grid/Row"; +export { default as Column } from "./Grid/Column"; +export { default as IconSkeleton } from "./Icon/Icon.Skeleton"; +export { default as Icon } from "./Icon/Icon"; +export { default as InlineLoading } from "./InlineLoading/InlineLoading"; +export { default as ListItem } from "./ListItem/ListItem"; +export { default as MultiSelect } from "./MultiSelect/MultiSelect"; +export { default as Modal } from "./Modal/Modal"; +export { default as NotificationButton } from "./Notification/NotificationButton"; +export { default as NotificationIcon } from "./Notification/NotificationIcon"; +export { default as NotificationTextDetails } from "./Notification/NotificationTextDetails"; +export { default as ToastNotification } from "./Notification/ToastNotification"; +export { default as InlineNotification } from "./Notification/InlineNotification"; +export { default as NotificationActionButton } from "./Notification/NotificationActionButton"; +export { default as NumberInput } from "./NumberInput/NumberInput"; +export { default as NumberInputSkeleton } from "./NumberInput/NumberInput.Skeleton"; +export { default as OrderedList } from "./OrderedList/OrderedList"; +export { default as Select } from "./Select/Select"; +export { default as SelectSkeleton } from "./Select/Select.Skeleton"; +export { default as SelectItem } from "./Select/SelectItem"; +export { default as SelectItemGroup } from "./Select/SelectItemGroup"; +export { default as Pagination } from "./Pagination/Pagination"; +export { default as PaginationSkeleton } from "./Pagination/Pagination.Skeleton"; +export { default as PaginationNav } from "./PaginationNav/PaginationNav"; +export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator"; +export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicator.Skeleton"; +export { default as ProgressStep } from "./ProgressIndicator/ProgressStep"; +export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup"; +export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder"; +export { default as Slider } from "./Slider/Slider"; +export { default as SliderSkeleton } from "./Slider/Slider.Skeleton"; +export { default as StructuredList } from "./StructuredList/StructuredList"; +export { default as StructuredListSkeleton } from "./StructuredList/StructuredList.Skeleton"; +export { default as StructuredListBody } from "./StructuredList/StructuredListBody"; +export { default as StructuredListHead } from "./StructuredList/StructuredListHead"; +export { default as StructuredListCell } from "./StructuredList/StructuredListCell"; +export { default as StructuredListRow } from "./StructuredList/StructuredListRow"; +export { default as StructuredListInput } from "./StructuredList/StructuredListInput"; +export { default as Tabs } from "./Tabs/Tabs"; +export { default as Tab } from "./Tabs/Tab"; +export { default as TabContent } from "./Tabs/TabContent"; +export { default as TabsSkeleton } from "./Tabs/TabsSkeleton"; +export { default as TagSkeleton } from "./Tag/Tag.Skeleton"; +export { default as Tag } from "./Tag/Tag"; +export { default as TextArea } from "./TextArea/TextArea"; +export { default as TextAreaSkeleton } from "./TextArea/TextArea.Skeleton"; +export { default as TextInput } from "./TextInput/TextInput"; +export { default as TextInputSkeleton } from "./TextInput/TextInput.Skeleton"; +export { default as PasswordInput } from "./TextInput/PasswordInput"; +export { default as Tile } from "./Tile/Tile"; +export { default as ClickableTile } from "./Tile/ClickableTile"; +export { default as ExpandableTile } from "./Tile/ExpandableTile"; +export { default as SelectableTile } from "./Tile/SelectableTile"; +export { default as RadioTile } from "./Tile/RadioTile"; +export { default as TileGroup } from "./Tile/TileGroup"; +export { default as TimePicker } from "./TimePicker/TimePicker"; +export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect"; +export { default as Toggle } from "./Toggle/Toggle"; +export { default as ToggleSkeleton } from "./Toggle/Toggle.Skeleton"; +export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall"; +export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmall.Skeleton"; +export { default as Tooltip } from "./Tooltip/Tooltip"; +export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition"; +export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon"; +export { default as Header } from "./UIShell/GlobalHeader/Header"; +export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction"; +export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink"; +export { default as HeaderActionSearch } from "./UIShell/GlobalHeader/HeaderActionSearch"; +export { default as HeaderNav } from "./UIShell/GlobalHeader/HeaderNav"; +export { default as HeaderNavItem } from "./UIShell/GlobalHeader/HeaderNavItem"; +export { default as HeaderNavMenu } from "./UIShell/GlobalHeader/HeaderNavMenu"; +export { default as HeaderPanelDivider } from "./UIShell/GlobalHeader/HeaderPanelDivider"; +export { default as HeaderPanelLink } from "./UIShell/GlobalHeader/HeaderPanelLink"; +export { default as HeaderPanelLinks } from "./UIShell/GlobalHeader/HeaderPanelLinks"; +export { default as HeaderUtilities } from "./UIShell/GlobalHeader/HeaderUtilities"; +export { default as SideNav } from "./UIShell/SideNav/SideNav"; +export { default as SideNavItems } from "./UIShell/SideNav/SideNavItems"; +export { default as SideNavLink } from "./UIShell/SideNav/SideNavLink"; +export { default as SideNavMenu } from "./UIShell/SideNav/SideNavMenu"; +export { default as SideNavMenuItem } from "./UIShell/SideNav/SideNavMenuItem"; +export { default as Content } from "./UIShell/Content"; +export { default as SkipToContent } from "./UIShell/SkipToContent"; +export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction"; +export { default as UnorderedList } from "./UnorderedList/UnorderedList"; diff --git a/yarn.lock b/yarn.lock index c7ddfb32..3549c21e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -120,6 +120,11 @@ resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== +"@types/pug@^2.0.4": + version "2.0.4" + resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2" + integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI= + "@types/resolve@1.17.1": version "1.17.1" resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6" @@ -127,6 +132,13 @@ dependencies: "@types/node" "*" +"@types/sass@^1.16.0": + version "1.16.0" + resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d" + integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA== + dependencies: + "@types/node" "*" + abbrev@1: version "1.1.1" resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" @@ -207,6 +219,14 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: "@types/color-name" "^1.1.1" color-convert "^2.0.1" +anymatch@~3.1.1: + version "3.1.1" + resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142" + integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + aproba@^1.0.3: version "1.2.0" resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" @@ -311,6 +331,11 @@ big.js@^5.2.2: resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== +binary-extensions@^2.0.0: + version "2.1.0" + resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9" + integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ== + block-stream@*: version "0.0.9" resolved "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a" @@ -326,7 +351,7 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -braces@^3.0.1: +braces@^3.0.1, braces@~3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -433,6 +458,21 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chokidar@^3.4.1: + version "3.4.3" + resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" + integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.1.2" + ci-info@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46" @@ -656,6 +696,11 @@ delegates@^1.0.0: resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o= +detect-indent@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd" + integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA== + ecc-jsbn@~0.1.1: version "0.1.2" resolved "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" @@ -1015,6 +1060,13 @@ gh-pages@^3.1.0: fs-extra "^8.1.0" globby "^6.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" + integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ== + dependencies: + is-glob "^4.0.1" + glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6, glob@~7.1.1: version "7.1.6" resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" @@ -1190,6 +1242,13 @@ is-arrayish@^0.3.1: resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-callable@^1.1.4, is-callable@^1.2.2: version "1.2.2" resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9" @@ -1200,6 +1259,11 @@ is-date-object@^1.0.1: resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g== +is-extglob@^2.1.1: + version "2.1.1" + resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" + integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= + is-finite@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3" @@ -1222,6 +1286,13 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== +is-glob@^4.0.1, is-glob@~4.0.1: + version "4.0.1" + resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" + integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg== + dependencies: + is-extglob "^2.1.1" + is-module@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" @@ -1581,6 +1652,11 @@ mimic-fn@^2.1.0: resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +min-indent@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" + integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== + minimatch@^3.0.4, minimatch@~3.0.2: version "3.0.4" resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" @@ -1678,7 +1754,7 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: semver "2 || 3 || 4 || 5" validate-npm-package-license "^3.0.1" -normalize-path@^3.0.0: +normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== @@ -1935,7 +2011,7 @@ performance-now@^2.1.0: resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= -picomatch@^2.0.5, picomatch@^2.2.2: +picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2: version "2.2.2" resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== @@ -2097,6 +2173,13 @@ readable-stream@^2.0.1, readable-stream@^2.0.6: string_decoder "~1.1.1" util-deprecate "~1.0.1" +readdirp@~3.5.0: + version "3.5.0" + resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e" + integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ== + dependencies: + picomatch "^2.2.1" + redent@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" @@ -2381,6 +2464,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +source-map@^0.7.3: + version "0.7.3" + resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" + integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== + sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8: version "1.4.8" resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" @@ -2571,6 +2659,13 @@ strip-indent@^1.0.1: dependencies: get-stdin "^4.0.1" +strip-indent@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" + integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== + 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" @@ -2609,6 +2704,20 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +svelte-check@^1.1.6: + version "1.1.6" + resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.6.tgz#705fea71a757511f47894cdfa1ffab6e5c5cab4d" + integrity sha512-9CTehTTy02B4b7hsSp/F0JO8LrI3hNAgXfBtQ2JkxbDSLqlMPM5d2wcMrSzws9QQg6clRfBnn44wx3h/XYWWmg== + dependencies: + chalk "^4.0.0" + chokidar "^3.4.1" + glob "^7.1.6" + import-fresh "^3.2.1" + minimist "^1.2.5" + source-map "^0.7.3" + svelte-preprocess "^4.0.0" + typescript "*" + svelte-dev-helper@^1.1.9: version "1.1.9" resolved "https://registry.npmjs.org/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3" @@ -2622,6 +2731,16 @@ svelte-loader@^2.13.6: loader-utils "^1.1.0" svelte-dev-helper "^1.1.9" +svelte-preprocess@^4.0.0: + version "4.5.2" + resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz#37976d1e0d866eb382411d486f7468d2275087e9" + integrity sha512-ClUX5NecnGBwI+nJnnBvKKy0XutCq5uHTIKe6cPhpvuOj9AAnyvef9wOZAE93yr85OKPutGCNIJa/X1TrJ7O0Q== + dependencies: + "@types/pug" "^2.0.4" + "@types/sass" "^1.16.0" + detect-indent "^6.0.0" + strip-indent "^3.0.0" + svelte@^3.29.4: version "3.29.4" resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.4.tgz#d0f80cb58109ef52963855c23496f7153bb2eb7e" @@ -2706,7 +2825,7 @@ type-fest@^0.11.0: resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1" integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ== -typescript@^4.0.5: +typescript@*, typescript@^4.0.5: version "4.0.5" resolved "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389" integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ== From d38e6d8be6e45b2ab8c0e08b87fc7f55d6b114aa Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Wed, 4 Nov 2020 06:04:25 -0800 Subject: [PATCH 02/11] refactor: update/fix JSDoc props --- rollup.config.js | 4 +- src/Accordion/Accordion.svelte | 16 +-- src/Accordion/AccordionItem.svelte | 16 +-- ...eleton.svelte => AccordionSkeleton.svelte} | 14 +-- src/Accordion/index.js | 2 +- src/AspectRatio/AspectRatio.svelte | 2 +- src/Breadcrumb/Breadcrumb.svelte | 12 +- src/Breadcrumb/BreadcrumbItem.svelte | 7 +- ...leton.svelte => BreadcrumbSkeleton.svelte} | 10 +- src/Breadcrumb/index.js | 2 +- src/Button/Button.svelte | 44 +++---- src/Button/ButtonSet.svelte | 5 +- ....Skeleton.svelte => ButtonSkeleton.svelte} | 9 +- src/Button/index.js | 2 +- src/Checkbox/Checkbox.svelte | 48 +++---- ...keleton.svelte => CheckboxSkeleton.svelte} | 0 src/Checkbox/InlineCheckbox.svelte | 16 +-- src/Checkbox/index.js | 2 +- src/CodeSnippet/CodeSnippet.svelte | 52 +++----- ...eton.svelte => CodeSnippetSkeleton.svelte} | 2 +- src/CodeSnippet/index.js | 2 +- src/ComboBox/ComboBox.svelte | 74 ++++------- src/ComposedModal/ComposedModal.svelte | 29 ++--- src/ComposedModal/ModalBody.svelte | 10 +- src/ComposedModal/ModalFooter.svelte | 24 +--- src/ComposedModal/ModalHeader.svelte | 35 ++---- src/ContentSwitcher/ContentSwitcher.svelte | 12 +- src/ContentSwitcher/Switch.svelte | 15 +-- src/Copy/Copy.svelte | 12 +- src/CopyButton/CopyButton.svelte | 5 +- src/DataTable/DataTable.svelte | 64 +++++----- src/DataTable/Table.svelte | 27 +--- src/DataTable/TableContainer.svelte | 15 +-- src/DataTable/TableHeader.svelte | 9 +- src/DataTable/Toolbar.svelte | 2 +- src/DataTable/ToolbarBatchActions.svelte | 2 +- src/DataTable/ToolbarSearch.svelte | 22 +--- .../DataTableSkeleton.svelte | 29 ++--- src/DatePicker/DatePicker.svelte | 39 +++--- src/DatePicker/DatePickerInput.svelte | 53 ++------ ...leton.svelte => DatePickerSkeleton.svelte} | 7 +- src/DatePicker/index.js | 2 +- src/Dropdown/Dropdown.svelte | 73 ++++------- ...keleton.svelte => DropdownSkeleton.svelte} | 5 +- src/Dropdown/index.js | 2 +- src/FileUploader/FileUploader.svelte | 46 +++---- src/FileUploader/FileUploaderButton.svelte | 47 +++---- .../FileUploaderDropContainer.svelte | 49 +++----- src/FileUploader/FileUploaderItem.svelte | 33 ++--- ...ton.svelte => FileUploaderSkeleton.svelte} | 0 src/FileUploader/Filename.svelte | 12 +- src/FileUploader/index.js | 2 +- src/FormGroup/FormGroup.svelte | 20 +-- src/FormLabel/FormLabel.svelte | 2 +- src/Grid/Column.svelte | 117 ++++++++---------- src/Grid/Grid.svelte | 35 ++---- src/Grid/Row.svelte | 30 ++--- src/Icon/Icon.svelte | 9 +- ...on.Skeleton.svelte => IconSkeleton.svelte} | 5 +- src/Icon/index.js | 2 +- src/InlineLoading/InlineLoading.svelte | 11 +- src/Link/Link.svelte | 21 +--- src/ListBox/ListBox.svelte | 29 ++--- src/ListBox/ListBoxField.svelte | 31 ++--- src/ListBox/ListBoxMenu.svelte | 6 +- src/ListBox/ListBoxMenuIcon.svelte | 17 +-- src/ListBox/ListBoxMenuItem.svelte | 10 +- src/ListBox/ListBoxSelection.svelte | 25 ++-- src/Loading/Loading.svelte | 22 +--- src/Modal/Modal.svelte | 77 +++--------- src/MultiSelect/MultiSelect.svelte | 87 ++++--------- src/Notification/InlineNotification.svelte | 39 ++---- src/Notification/NotificationButton.svelte | 11 +- src/Notification/NotificationIcon.svelte | 9 +- .../NotificationTextDetails.svelte | 17 +-- src/Notification/ToastNotification.svelte | 44 ++----- src/NumberInput/NumberInput.svelte | 78 +++--------- ...eton.svelte => NumberInputSkeleton.svelte} | 5 +- src/NumberInput/index.js | 2 +- src/OrderedList/OrderedList.svelte | 10 +- src/OverflowMenu/OverflowMenu.svelte | 36 ++---- src/OverflowMenu/OverflowMenuItem.svelte | 35 ++---- src/Pagination/Pagination.svelte | 62 +++------- ...leton.svelte => PaginationSkeleton.svelte} | 0 src/Pagination/index.js | 2 +- src/PaginationNav/PaginationItem.svelte | 10 +- src/PaginationNav/PaginationNav.svelte | 36 +----- src/PaginationNav/PaginationOverflow.svelte | 10 +- .../ProgressIndicator.svelte | 20 +-- ...velte => ProgressIndicatorSkeleton.svelte} | 10 +- src/ProgressIndicator/ProgressStep.svelte | 37 ++---- src/ProgressIndicator/index.js | 2 +- src/RadioButton/RadioButton.svelte | 36 ++---- ...eton.svelte => RadioButtonSkeleton.svelte} | 0 src/RadioButton/index.js | 2 +- src/RadioButtonGroup/RadioButtonGroup.svelte | 15 +-- src/Search/Search.svelte | 23 ++-- ....Skeleton.svelte => SearchSkeleton.svelte} | 3 +- src/Search/index.js | 2 +- src/Select/Select.svelte | 58 +++------ src/Select/SelectItem.svelte | 20 +-- src/Select/SelectItemGroup.svelte | 10 +- ....Skeleton.svelte => SelectSkeleton.svelte} | 5 +- src/Select/index.js | 2 +- src/SkeletonText/SkeletonText.svelte | 25 +--- src/Slider/Slider.svelte | 79 +++--------- ....Skeleton.svelte => SliderSkeleton.svelte} | 5 +- src/Slider/index.js | 2 +- src/StructuredList/StructuredList.svelte | 12 +- src/StructuredList/StructuredListCell.svelte | 10 +- src/StructuredList/StructuredListInput.svelte | 24 +--- src/StructuredList/StructuredListRow.svelte | 15 +-- ...n.svelte => StructuredListSkeleton.svelte} | 10 +- src/StructuredList/index.js | 2 +- src/Tabs/Tab.svelte | 20 +-- src/Tabs/TabContent.svelte | 2 +- src/Tabs/Tabs.svelte | 14 +-- src/Tabs/TabsSkeleton.svelte | 5 +- src/Tag/Tag.svelte | 12 +- ...Tag.Skeleton.svelte => TagSkeleton.svelte} | 0 src/Tag/index.js | 2 +- src/TextArea/TextArea.svelte | 61 +++------ .../TextAreaSkeleton.svelte} | 5 +- src/TextArea/index.js | 2 +- src/TextInput/PasswordInput.svelte | 72 +++-------- src/TextInput/TextInput.svelte | 78 +++--------- .../TextInputSkeleton.svelte} | 5 +- src/TextInput/index.js | 2 +- src/Tile/ClickableTile.svelte | 12 +- src/Tile/ExpandableTile.svelte | 41 ++---- src/Tile/RadioTile.svelte | 32 ++--- src/Tile/SelectableTile.svelte | 36 ++---- src/Tile/Tile.svelte | 5 +- src/Tile/TileGroup.svelte | 12 +- src/TimePicker/TimePicker.svelte | 57 +++------ src/TimePicker/TimePickerSelect.svelte | 27 ++-- src/Toggle/Toggle.svelte | 29 ++--- ....Skeleton.svelte => ToggleSkeleton.svelte} | 7 +- src/Toggle/index.js | 2 +- src/ToggleSmall/ToggleSmall.svelte | 29 ++--- ...eton.svelte => ToggleSmallSkeleton.svelte} | 7 +- src/ToggleSmall/index.js | 2 +- src/Tooltip/Tooltip.svelte | 38 ++---- .../TooltipDefinition.svelte | 13 +- src/TooltipIcon/TooltipIcon.svelte | 13 +- src/UIShell/Content.svelte | 5 +- src/UIShell/GlobalHeader/Header.svelte | 19 +-- src/UIShell/GlobalHeader/HeaderAction.svelte | 11 +- .../GlobalHeader/HeaderActionLink.svelte | 11 +- .../GlobalHeader/HeaderActionSearch.svelte | 6 +- src/UIShell/GlobalHeader/HeaderNav.svelte | 2 +- src/UIShell/GlobalHeader/HeaderNavItem.svelte | 6 +- src/UIShell/GlobalHeader/HeaderNavMenu.svelte | 19 +-- .../GlobalHeader/HeaderPanelLink.svelte | 4 +- src/UIShell/HeaderGlobalAction.svelte | 9 +- src/UIShell/SideNav/HamburgerMenu.svelte | 9 +- src/UIShell/SideNav/SideNav.svelte | 12 +- src/UIShell/SideNav/SideNavLink.svelte | 13 +- src/UIShell/SideNav/SideNavMenu.svelte | 11 +- src/UIShell/SideNav/SideNavMenuItem.svelte | 8 +- src/UIShell/SkipToContent.svelte | 10 +- src/UnorderedList/UnorderedList.svelte | 5 +- ....Skeleton.d.ts => BreadcrumbSkeleton.d.ts} | 0 ...tton.Skeleton.d.ts => ButtonSkeleton.d.ts} | 0 types/Checkbox/Checkbox.d.ts | 2 +- ...ox.Skeleton.d.ts => CheckboxSkeleton.d.ts} | 0 ...Skeleton.d.ts => CodeSnippetSkeleton.d.ts} | 0 types/ComboBox/ComboBox.d.ts | 5 +- types/ComposedModal/ComposedModal.d.ts | 2 +- types/ContentSwitcher/ContentSwitcher.d.ts | 2 +- types/DataTable/DataTable.d.ts | 33 +++-- ....Skeleton.d.ts => DatePickerSkeleton.d.ts} | 0 types/Dropdown/Dropdown.d.ts | 5 +- ...wn.Skeleton.d.ts => DropdownSkeleton.d.ts} | 0 types/FileUploader/FileUploader.d.ts | 12 +- types/FileUploader/FileUploaderButton.d.ts | 4 +- .../FileUploaderDropContainer.d.ts | 4 +- types/FileUploader/FileUploaderItem.d.ts | 2 +- ...keleton.d.ts => FileUploaderSkeleton.d.ts} | 0 types/Grid/Column.d.ts | 2 +- types/Grid/Grid.d.ts | 2 +- types/Grid/Row.d.ts | 2 +- .../{Icon.Skeleton.d.ts => IconSkeleton.d.ts} | 0 types/ListBox/ListBoxField.d.ts | 2 +- types/ListBox/ListBoxMenu.d.ts | 2 +- types/Modal/Modal.d.ts | 2 +- ...Skeleton.d.ts => NumberInputSkeleton.d.ts} | 0 ....Skeleton.d.ts => PaginationSkeleton.d.ts} | 0 ...on.d.ts => ProgressIndicatorSkeleton.d.ts} | 0 types/RadioButton/RadioButton.d.ts | 2 +- ...Skeleton.d.ts => RadioButtonSkeleton.d.ts} | 0 ...arch.Skeleton.d.ts => SearchSkeleton.d.ts} | 0 types/Select/Select.d.ts | 2 +- ...lect.Skeleton.d.ts => SelectSkeleton.d.ts} | 0 ...ider.Skeleton.d.ts => SliderSkeleton.d.ts} | 0 ...leton.d.ts => StructuredListSkeleton.d.ts} | 0 .../{Tag.Skeleton.d.ts => TagSkeleton.d.ts} | 0 ...ea.Skeleton.d.ts => TextAreaSkeleton.d.ts} | 0 ...t.Skeleton.d.ts => TextInputSkeleton.d.ts} | 0 types/Tile/ExpandableTile.d.ts | 4 +- ...ggle.Skeleton.d.ts => ToggleSkeleton.d.ts} | 0 ...Skeleton.d.ts => ToggleSmallSkeleton.d.ts} | 0 .../GlobalHeader/HeaderActionSearch.d.ts | 2 +- types/index.d.ts | 42 +++---- 204 files changed, 992 insertions(+), 2359 deletions(-) rename src/Accordion/{Accordion.Skeleton.svelte => AccordionSkeleton.svelte} (83%) rename src/Breadcrumb/{Breadcrumb.Skeleton.svelte => BreadcrumbSkeleton.svelte} (69%) rename src/Button/{Button.Skeleton.svelte => ButtonSkeleton.svelte} (83%) rename src/Checkbox/{Checkbox.Skeleton.svelte => CheckboxSkeleton.svelte} (100%) rename src/CodeSnippet/{CodeSnippet.Skeleton.svelte => CodeSnippetSkeleton.svelte} (89%) rename src/DatePicker/{DatePicker.Skeleton.svelte => DatePickerSkeleton.svelte} (87%) rename src/Dropdown/{Dropdown.Skeleton.svelte => DropdownSkeleton.svelte} (81%) rename src/FileUploader/{FileUploader.Skeleton.svelte => FileUploaderSkeleton.svelte} (100%) rename src/Icon/{Icon.Skeleton.svelte => IconSkeleton.svelte} (76%) rename src/NumberInput/{NumberInput.Skeleton.svelte => NumberInputSkeleton.svelte} (78%) rename src/Pagination/{Pagination.Skeleton.svelte => PaginationSkeleton.svelte} (100%) rename src/ProgressIndicator/{ProgressIndicator.Skeleton.svelte => ProgressIndicatorSkeleton.svelte} (81%) rename src/RadioButton/{RadioButton.Skeleton.svelte => RadioButtonSkeleton.svelte} (100%) rename src/Search/{Search.Skeleton.svelte => SearchSkeleton.svelte} (88%) rename src/Select/{Select.Skeleton.svelte => SelectSkeleton.svelte} (80%) rename src/Slider/{Slider.Skeleton.svelte => SliderSkeleton.svelte} (87%) rename src/StructuredList/{StructuredList.Skeleton.svelte => StructuredListSkeleton.svelte} (86%) rename src/Tag/{Tag.Skeleton.svelte => TagSkeleton.svelte} (100%) rename src/{TextInput/TextInput.Skeleton.svelte => TextArea/TextAreaSkeleton.svelte} (78%) rename src/{TextArea/TextArea.Skeleton.svelte => TextInput/TextInputSkeleton.svelte} (77%) rename src/Toggle/{Toggle.Skeleton.svelte => ToggleSkeleton.svelte} (89%) rename src/ToggleSmall/{ToggleSmall.Skeleton.svelte => ToggleSmallSkeleton.svelte} (91%) rename types/Breadcrumb/{Breadcrumb.Skeleton.d.ts => BreadcrumbSkeleton.d.ts} (100%) rename types/Button/{Button.Skeleton.d.ts => ButtonSkeleton.d.ts} (100%) rename types/Checkbox/{Checkbox.Skeleton.d.ts => CheckboxSkeleton.d.ts} (100%) rename types/CodeSnippet/{CodeSnippet.Skeleton.d.ts => CodeSnippetSkeleton.d.ts} (100%) rename types/DatePicker/{DatePicker.Skeleton.d.ts => DatePickerSkeleton.d.ts} (100%) rename types/Dropdown/{Dropdown.Skeleton.d.ts => DropdownSkeleton.d.ts} (100%) rename types/FileUploader/{FileUploader.Skeleton.d.ts => FileUploaderSkeleton.d.ts} (100%) rename types/Icon/{Icon.Skeleton.d.ts => IconSkeleton.d.ts} (100%) rename types/NumberInput/{NumberInput.Skeleton.d.ts => NumberInputSkeleton.d.ts} (100%) rename types/Pagination/{Pagination.Skeleton.d.ts => PaginationSkeleton.d.ts} (100%) rename types/ProgressIndicator/{ProgressIndicator.Skeleton.d.ts => ProgressIndicatorSkeleton.d.ts} (100%) rename types/RadioButton/{RadioButton.Skeleton.d.ts => RadioButtonSkeleton.d.ts} (100%) rename types/Search/{Search.Skeleton.d.ts => SearchSkeleton.d.ts} (100%) rename types/Select/{Select.Skeleton.d.ts => SelectSkeleton.d.ts} (100%) rename types/Slider/{Slider.Skeleton.d.ts => SliderSkeleton.d.ts} (100%) rename types/StructuredList/{StructuredList.Skeleton.d.ts => StructuredListSkeleton.d.ts} (100%) rename types/Tag/{Tag.Skeleton.d.ts => TagSkeleton.d.ts} (100%) rename types/TextArea/{TextArea.Skeleton.d.ts => TextAreaSkeleton.d.ts} (100%) rename types/TextInput/{TextInput.Skeleton.d.ts => TextInputSkeleton.d.ts} (100%) rename types/Toggle/{Toggle.Skeleton.d.ts => ToggleSkeleton.d.ts} (100%) rename types/ToggleSmall/{ToggleSmall.Skeleton.d.ts => ToggleSmallSkeleton.d.ts} (100%) diff --git a/rollup.config.js b/rollup.config.js index 6a405cab..5cbf4381 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -22,7 +22,9 @@ export default ["es", "umd"].map((format) => { resolve(), commonjs(), UMD && terser(), - !UMD && generateDocs(), + + // TODO: replace + // !UMD && generateDocs(), ], }; }); diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte index d85f873e..572e5733 100644 --- a/src/Accordion/Accordion.svelte +++ b/src/Accordion/Accordion.svelte @@ -1,31 +1,25 @@ diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte index 144b0256..44a54068 100644 --- a/src/Breadcrumb/Breadcrumb.svelte +++ b/src/Breadcrumb/Breadcrumb.svelte @@ -1,17 +1,11 @@ {#if skeleton} diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte index 9b35f11d..b5df750b 100644 --- a/src/Breadcrumb/BreadcrumbItem.svelte +++ b/src/Breadcrumb/BreadcrumbItem.svelte @@ -1,14 +1,11 @@ diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js index cdda91e0..fb120fca 100644 --- a/src/Breadcrumb/index.js +++ b/src/Breadcrumb/index.js @@ -1,3 +1,3 @@ export { default as Breadcrumb } from "./Breadcrumb.svelte"; export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte"; -export { default as BreadcrumbSkeleton } from "./Breadcrumb.Skeleton.svelte"; +export { default as BreadcrumbSkeleton } from "./BreadcrumbSkeleton.svelte"; diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 39734839..7e989669 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -1,92 +1,76 @@ diff --git a/src/Button/Button.Skeleton.svelte b/src/Button/ButtonSkeleton.svelte similarity index 83% rename from src/Button/Button.Skeleton.svelte rename to src/Button/ButtonSkeleton.svelte index 5793abe9..8ff4e495 100644 --- a/src/Button/Button.Skeleton.svelte +++ b/src/Button/ButtonSkeleton.svelte @@ -1,20 +1,17 @@ diff --git a/src/Button/index.js b/src/Button/index.js index 731d8c0a..c5dc77c0 100644 --- a/src/Button/index.js +++ b/src/Button/index.js @@ -1,3 +1,3 @@ export { default as Button } from "./Button.svelte"; -export { default as ButtonSkeleton } from "./Button.Skeleton.svelte"; +export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte"; export { default as ButtonSet } from "./ButtonSet.svelte"; diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index cb20107d..fba7beb6 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/src/Checkbox/Checkbox.svelte @@ -1,72 +1,52 @@ diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js index aaaf1455..dcd7d575 100644 --- a/src/Checkbox/index.js +++ b/src/Checkbox/index.js @@ -1,3 +1,3 @@ export { default as Checkbox } from "./Checkbox.svelte"; -export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte"; +export { default as CheckboxSkeleton } from "./CheckboxSkeleton.svelte"; export { default as InlineCheckbox } from "./InlineCheckbox.svelte"; diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte index 0d3c52f8..e50e069e 100644 --- a/src/CodeSnippet/CodeSnippet.svelte +++ b/src/CodeSnippet/CodeSnippet.svelte @@ -1,101 +1,77 @@ diff --git a/src/CodeSnippet/index.js b/src/CodeSnippet/index.js index 4775c90e..6dc60a2f 100644 --- a/src/CodeSnippet/index.js +++ b/src/CodeSnippet/index.js @@ -1,2 +1,2 @@ export { default as CodeSnippet } from "./CodeSnippet.svelte"; -export { default as CodeSnippetSkeleton } from "./CodeSnippet.Skeleton.svelte"; +export { default as CodeSnippetSkeleton } from "./CodeSnippetSkeleton.svelte"; diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 7038b677..70a61a36 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -1,122 +1,96 @@ diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte index 38604e9e..9f57fbf4 100644 --- a/src/ComposedModal/ModalFooter.svelte +++ b/src/ComposedModal/ModalFooter.svelte @@ -1,38 +1,26 @@ diff --git a/src/DataTable/TableContainer.svelte b/src/DataTable/TableContainer.svelte index 36d2933e..ea5d6d1e 100644 --- a/src/DataTable/TableContainer.svelte +++ b/src/DataTable/TableContainer.svelte @@ -1,20 +1,11 @@ diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte index 363e373e..2bb7f400 100644 --- a/src/DataTable/TableHeader.svelte +++ b/src/DataTable/TableHeader.svelte @@ -1,19 +1,16 @@ diff --git a/src/DatePicker/index.js b/src/DatePicker/index.js index fcf3d9c1..46f8fc8e 100644 --- a/src/DatePicker/index.js +++ b/src/DatePicker/index.js @@ -1,3 +1,3 @@ export { default as DatePicker } from "./DatePicker.svelte"; export { default as DatePickerInput } from "./DatePickerInput.svelte"; -export { default as DatePickerSkeleton } from "./DatePicker.Skeleton.svelte"; +export { default as DatePickerSkeleton } from "./DatePickerSkeleton.svelte"; diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index 0f729017..f141ba8a 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -1,118 +1,95 @@ diff --git a/src/Dropdown/index.js b/src/Dropdown/index.js index e5c140b2..8bb6b0e4 100644 --- a/src/Dropdown/index.js +++ b/src/Dropdown/index.js @@ -1,2 +1,2 @@ export { default as Dropdown } from "./Dropdown.svelte"; -export { default as DropdownSkeleton } from "./Dropdown.Skeleton.svelte"; +export { default as DropdownSkeleton } from "./DropdownSkeleton.svelte"; diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte index 34ba779d..52fcc340 100644 --- a/src/FileUploader/FileUploader.svelte +++ b/src/FileUploader/FileUploader.svelte @@ -1,70 +1,58 @@ diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte index 25a996fd..917ea08f 100644 --- a/src/FileUploader/FileUploaderDropContainer.svelte +++ b/src/FileUploader/FileUploaderDropContainer.svelte @@ -1,74 +1,57 @@
+ /** + * @event {string} delete + */ + /** * Specify the file uploader status - * @type {"uploading" | "edit" | "complete"} [status="uploading"] + * @type {"uploading" | "edit" | "complete"} */ export let status = "uploading"; - /** - * Specify the ARIA label used for the status icons - * @type {string} [iconDescription=""] - */ + /** Specify the ARIA label used for the status icons */ export let iconDescription = ""; - /** - * Set to `true` to indicate an invalid state - * @type {boolean} [invalid=false] - */ + /** Set to `true` to indicate an invalid state */ export let invalid = false; - /** - * Specify the error subject text - * @type {string} [errorSubject=""] - */ + /** Specify the error subject text */ export let errorSubject = ""; - /** - * Specify the error body text - * @type {string} [errorBody=""] - */ + /** Specify the error body text */ export let errorBody = ""; /** * Set an id for the top-level element - * @type {string} [id] + * @type {string} */ export let id = "ccs-" + Math.random().toString(36); - /** - * Specify the file uploader name - * @type {string} [name=""] - */ + /** Specify the file uploader name */ export let name = ""; import { createEventDispatcher } from "svelte"; diff --git a/src/FileUploader/FileUploader.Skeleton.svelte b/src/FileUploader/FileUploaderSkeleton.svelte similarity index 100% rename from src/FileUploader/FileUploader.Skeleton.svelte rename to src/FileUploader/FileUploaderSkeleton.svelte diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte index 36d0f040..d8d913a7 100644 --- a/src/FileUploader/Filename.svelte +++ b/src/FileUploader/Filename.svelte @@ -1,20 +1,14 @@ diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte index 937d136b..054591b1 100644 --- a/src/FormLabel/FormLabel.svelte +++ b/src/FormLabel/FormLabel.svelte @@ -1,7 +1,7 @@ diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte index 7734f509..76dfa944 100644 --- a/src/Grid/Column.svelte +++ b/src/Grid/Column.svelte @@ -1,65 +1,4 @@ {#if skeleton} diff --git a/src/Icon/Icon.Skeleton.svelte b/src/Icon/IconSkeleton.svelte similarity index 76% rename from src/Icon/Icon.Skeleton.svelte rename to src/Icon/IconSkeleton.svelte index 4d958fbd..e67da320 100644 --- a/src/Icon/Icon.Skeleton.svelte +++ b/src/Icon/IconSkeleton.svelte @@ -1,8 +1,5 @@ diff --git a/src/Icon/index.js b/src/Icon/index.js index 41f46931..551efcd3 100644 --- a/src/Icon/index.js +++ b/src/Icon/index.js @@ -1,2 +1,2 @@ export { default as Icon } from "./Icon.svelte"; -export { default as IconSkeleton } from "./Icon.Skeleton.svelte"; +export { default as IconSkeleton } from "./IconSkeleton.svelte"; diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte index 8498100f..081d05e8 100644 --- a/src/InlineLoading/InlineLoading.svelte +++ b/src/InlineLoading/InlineLoading.svelte @@ -1,26 +1,23 @@ diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte index 5e519d95..9e3298e9 100644 --- a/src/ListBox/ListBox.svelte +++ b/src/ListBox/ListBox.svelte @@ -1,44 +1,29 @@ diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte index 9c06b8e1..6f424728 100644 --- a/src/ListBox/ListBoxField.svelte +++ b/src/ListBox/ListBoxField.svelte @@ -1,51 +1,38 @@ diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte index dd4c8836..d1cd1485 100644 --- a/src/ListBox/ListBoxMenuIcon.svelte +++ b/src/ListBox/ListBoxMenuIcon.svelte @@ -1,27 +1,20 @@ diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte index 8df1bfb7..902a6c4f 100644 --- a/src/ListBox/ListBoxSelection.svelte +++ b/src/ListBox/ListBoxSelection.svelte @@ -1,21 +1,18 @@ diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte index 2eebb2a2..597295fc 100644 --- a/src/Notification/ToastNotification.svelte +++ b/src/Notification/ToastNotification.svelte @@ -1,62 +1,38 @@ diff --git a/src/NumberInput/index.js b/src/NumberInput/index.js index af304831..d58c80e1 100644 --- a/src/NumberInput/index.js +++ b/src/NumberInput/index.js @@ -1,2 +1,2 @@ export { default as NumberInput } from "./NumberInput.svelte"; -export { default as NumberInputSkeleton } from "./NumberInput.Skeleton.svelte"; +export { default as NumberInputSkeleton } from "./NumberInputSkeleton.svelte"; diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte index 449e39f9..d4facb31 100644 --- a/src/OrderedList/OrderedList.svelte +++ b/src/OrderedList/OrderedList.svelte @@ -1,14 +1,8 @@ diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index 26121925..d7e01ea0 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -1,73 +1,61 @@ diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte index 0292d977..1e97b5e9 100644 --- a/src/PaginationNav/PaginationNav.svelte +++ b/src/PaginationNav/PaginationNav.svelte @@ -1,38 +1,20 @@ diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte index 3ed26843..29f67756 100644 --- a/src/ProgressIndicator/ProgressStep.svelte +++ b/src/ProgressIndicator/ProgressStep.svelte @@ -1,49 +1,28 @@ diff --git a/src/Search/Search.Skeleton.svelte b/src/Search/SearchSkeleton.svelte similarity index 88% rename from src/Search/Search.Skeleton.svelte rename to src/Search/SearchSkeleton.svelte index 8ca6a06c..a8059b17 100644 --- a/src/Search/Search.Skeleton.svelte +++ b/src/Search/SearchSkeleton.svelte @@ -2,13 +2,12 @@ /** * @deprecated this prop will be removed in the next major release * Set to `true` to use the small variant - * @type {boolean} [small=false] */ export let small = false; /** * Specify the size of the search input - * @type {"sm" | "lg" | "xl"} [size="xl"] + * @type {"sm" | "lg" | "xl"} */ export let size = "xl"; diff --git a/src/Search/index.js b/src/Search/index.js index 535981c0..5ce0608a 100644 --- a/src/Search/index.js +++ b/src/Search/index.js @@ -1,2 +1,2 @@ export { default as Search } from "./Search.svelte"; -export { default as SearchSkeleton } from "./Search.Skeleton.svelte"; +export { default as SearchSkeleton } from "./SearchSkeleton.svelte"; diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte index b6884aac..836cf4ad 100644 --- a/src/Select/Select.svelte +++ b/src/Select/Select.svelte @@ -1,85 +1,55 @@ diff --git a/src/Select/Select.Skeleton.svelte b/src/Select/SelectSkeleton.svelte similarity index 80% rename from src/Select/Select.Skeleton.svelte rename to src/Select/SelectSkeleton.svelte index df67e270..4b0382ef 100644 --- a/src/Select/Select.Skeleton.svelte +++ b/src/Select/SelectSkeleton.svelte @@ -1,8 +1,5 @@ diff --git a/src/Select/index.js b/src/Select/index.js index 22f8cd67..06350614 100644 --- a/src/Select/index.js +++ b/src/Select/index.js @@ -1,4 +1,4 @@ export { default as Select } from "./Select.svelte"; -export { default as SelectSkeleton } from "./Select.Skeleton.svelte"; +export { default as SelectSkeleton } from "./SelectSkeleton.svelte"; export { default as SelectItem } from "./SelectItem.svelte"; export { default as SelectItemGroup } from "./SelectItemGroup.svelte"; diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte index 0b8e0571..745d6299 100644 --- a/src/SkeletonText/SkeletonText.svelte +++ b/src/SkeletonText/SkeletonText.svelte @@ -1,33 +1,16 @@ diff --git a/src/Slider/index.js b/src/Slider/index.js index 558290e1..5f440043 100644 --- a/src/Slider/index.js +++ b/src/Slider/index.js @@ -1,2 +1,2 @@ export { default as Slider } from "./Slider.svelte"; -export { default as SliderSkeleton } from "./Slider.Skeleton.svelte"; +export { default as SliderSkeleton } from "./SliderSkeleton.svelte"; diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte index 7e4ab923..919b9fbd 100644 --- a/src/StructuredList/StructuredList.svelte +++ b/src/StructuredList/StructuredList.svelte @@ -1,20 +1,14 @@ diff --git a/src/StructuredList/StructuredListInput.svelte b/src/StructuredList/StructuredListInput.svelte index d1314b5f..050d3dae 100644 --- a/src/StructuredList/StructuredListInput.svelte +++ b/src/StructuredList/StructuredListInput.svelte @@ -1,37 +1,25 @@ diff --git a/src/StructuredList/StructuredList.Skeleton.svelte b/src/StructuredList/StructuredListSkeleton.svelte similarity index 86% rename from src/StructuredList/StructuredList.Skeleton.svelte rename to src/StructuredList/StructuredListSkeleton.svelte index 0b04ccdd..a52ede00 100644 --- a/src/StructuredList/StructuredList.Skeleton.svelte +++ b/src/StructuredList/StructuredListSkeleton.svelte @@ -1,14 +1,8 @@ diff --git a/src/StructuredList/index.js b/src/StructuredList/index.js index 6b3bf38e..41c131b0 100644 --- a/src/StructuredList/index.js +++ b/src/StructuredList/index.js @@ -1,5 +1,5 @@ export { default as StructuredList } from "./StructuredList.svelte"; -export { default as StructuredListSkeleton } from "./StructuredList.Skeleton.svelte"; +export { default as StructuredListSkeleton } from "./StructuredListSkeleton.svelte"; export { default as StructuredListBody } from "./StructuredListBody.svelte"; export { default as StructuredListHead } from "./StructuredListHead.svelte"; export { default as StructuredListCell } from "./StructuredListCell.svelte"; diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte index b8d53cca..66180897 100644 --- a/src/Tabs/Tab.svelte +++ b/src/Tabs/Tab.svelte @@ -2,37 +2,27 @@ /** * Specify the tab label * Alternatively, use the default slot (e.g. Label) - * @type {string} [label=""] */ export let label = ""; - /** - * Specify the href attribute - * @type {string} [href="#"] - */ + /** Specify the href attribute */ export let href = "#"; - /** - * Set to `true` to disable the tab - * @type {boolean} [disabled=false] - */ + /** Set to `true` to disable the tab */ export let disabled = false; - /** - * Specify the tabindex - * @type {string} [tabindex="0"] - */ + /** Specify the tabindex */ export let tabindex = "0"; /** * Set an id for the top-level element - * @type {string} [id] + * @type {string} */ export let id = "ccs-" + Math.random().toString(36); /** * Obtain a reference to the anchor HTML element - * @type {null | HTMLAnchorElement} [ref=null] + * @type {null | HTMLAnchorElement} */ export let ref = null; diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte index fcaa2dff..cc9068e5 100644 --- a/src/Tabs/TabContent.svelte +++ b/src/Tabs/TabContent.svelte @@ -1,7 +1,7 @@ diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte index eca4b4f5..41434643 100644 --- a/src/Tag/Tag.svelte +++ b/src/Tag/Tag.svelte @@ -7,36 +7,36 @@ /** * Set to `true` to use filterable variant - * @type {boolean} [filter=false] + * @type {boolean} */ export let filter = false; /** * Set to `true` to disable a filterable tag - * @type {boolean} [disabled=false] + * @type {boolean} */ export let disabled = false; /** * Set to `true` to display the skeleton state - * @type {boolean} [skeleton=false] + * @type {boolean} */ export let skeleton = false; /** * Set the title for the close button in a filterable tag - * @type {string} [title="Clear filter"] + * @type {string} */ export let title = "Clear filter"; /** * Set an id for the filterable tag - * @type {string} [id] + * @type {string} */ export let id = "ccs-" + Math.random().toString(36); import Close16 from "carbon-icons-svelte/lib/Close16"; - import TagSkeleton from "./Tag.Skeleton.svelte"; + import TagSkeleton from "./TagSkeleton.svelte"; {#if skeleton} diff --git a/src/Tag/Tag.Skeleton.svelte b/src/Tag/TagSkeleton.svelte similarity index 100% rename from src/Tag/Tag.Skeleton.svelte rename to src/Tag/TagSkeleton.svelte diff --git a/src/Tag/index.js b/src/Tag/index.js index 21b86b2c..b33646f6 100644 --- a/src/Tag/index.js +++ b/src/Tag/index.js @@ -1,2 +1,2 @@ export { default as Tag } from "./Tag.svelte"; -export { default as TagSkeleton } from "./Tag.Skeleton.svelte"; +export { default as TagSkeleton } from "./TagSkeleton.svelte"; diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte index edecf626..c7a1f903 100644 --- a/src/TextArea/TextArea.svelte +++ b/src/TextArea/TextArea.svelte @@ -1,85 +1,52 @@ diff --git a/src/TextArea/index.js b/src/TextArea/index.js index 74782672..91cd083d 100644 --- a/src/TextArea/index.js +++ b/src/TextArea/index.js @@ -1,2 +1,2 @@ export { default as TextArea } from "./TextArea.svelte"; -export { default as TextAreaSkeleton } from "./TextArea.Skeleton.svelte"; +export { default as TextAreaSkeleton } from "./TextAreaSkeleton.svelte"; diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte index c92f933f..5aeff02f 100644 --- a/src/TextInput/PasswordInput.svelte +++ b/src/TextInput/PasswordInput.svelte @@ -1,109 +1,73 @@ diff --git a/src/TextInput/index.js b/src/TextInput/index.js index 6a3d8273..a3399154 100644 --- a/src/TextInput/index.js +++ b/src/TextInput/index.js @@ -1,3 +1,3 @@ export { default as TextInput } from "./TextInput.svelte"; -export { default as TextInputSkeleton } from "./TextInput.Skeleton.svelte"; +export { default as TextInputSkeleton } from "./TextInputSkeleton.svelte"; export { default as PasswordInput } from "./PasswordInput.svelte"; diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte index 61dce622..980216c4 100644 --- a/src/Tile/ClickableTile.svelte +++ b/src/Tile/ClickableTile.svelte @@ -1,19 +1,13 @@ diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte index f47c933c..6c5fb61a 100644 --- a/src/Tile/ExpandableTile.svelte +++ b/src/Tile/ExpandableTile.svelte @@ -1,55 +1,34 @@ diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte index eda7a7c9..4a5cc508 100644 --- a/src/Tile/TileGroup.svelte +++ b/src/Tile/TileGroup.svelte @@ -1,20 +1,14 @@ diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte index 7cae55ad..238ab142 100644 --- a/src/TimePicker/TimePickerSelect.svelte +++ b/src/TimePicker/TimePickerSelect.svelte @@ -1,50 +1,37 @@ diff --git a/src/Toggle/Toggle.Skeleton.svelte b/src/Toggle/ToggleSkeleton.svelte similarity index 89% rename from src/Toggle/Toggle.Skeleton.svelte rename to src/Toggle/ToggleSkeleton.svelte index a063e6ae..c6b6d716 100644 --- a/src/Toggle/Toggle.Skeleton.svelte +++ b/src/Toggle/ToggleSkeleton.svelte @@ -1,13 +1,10 @@ diff --git a/src/Toggle/index.js b/src/Toggle/index.js index 47df71f0..44cffe37 100644 --- a/src/Toggle/index.js +++ b/src/Toggle/index.js @@ -1,2 +1,2 @@ export { default as Toggle } from "./Toggle.svelte"; -export { default as ToggleSkeleton } from "./Toggle.Skeleton.svelte"; +export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte"; diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte index dbba1bd5..219b86d6 100644 --- a/src/ToggleSmall/ToggleSmall.svelte +++ b/src/ToggleSmall/ToggleSmall.svelte @@ -1,43 +1,28 @@ diff --git a/src/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/ToggleSmall/ToggleSmallSkeleton.svelte similarity index 91% rename from src/ToggleSmall/ToggleSmall.Skeleton.svelte rename to src/ToggleSmall/ToggleSmallSkeleton.svelte index d55c6a1e..9e3d1d59 100644 --- a/src/ToggleSmall/ToggleSmall.Skeleton.svelte +++ b/src/ToggleSmall/ToggleSmallSkeleton.svelte @@ -1,13 +1,10 @@ diff --git a/src/ToggleSmall/index.js b/src/ToggleSmall/index.js index 48daac0b..ad88325b 100644 --- a/src/ToggleSmall/index.js +++ b/src/ToggleSmall/index.js @@ -1,2 +1,2 @@ export { default as ToggleSmall } from "./ToggleSmall.svelte"; -export { default as ToggleSmallSkeleton } from "./ToggleSmall.Skeleton.svelte"; +export { default as ToggleSmallSkeleton } from "./ToggleSmallSkeleton.svelte"; diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index 2eb7ee7a..0cb3e758 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/src/Tooltip/Tooltip.svelte @@ -1,19 +1,19 @@ - /** - * Specify the id for the main element - * @type {string} [id="main-content"] - */ + /** Specify the id for the main element */ export let id = "main-content"; diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte index 6c27ad17..e95d2d8c 100644 --- a/src/UIShell/GlobalHeader/Header.svelte +++ b/src/UIShell/GlobalHeader/Header.svelte @@ -1,44 +1,37 @@ diff --git a/src/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/UIShell/GlobalHeader/HeaderNavItem.svelte index b7dd47c4..c42736f2 100644 --- a/src/UIShell/GlobalHeader/HeaderNavItem.svelte +++ b/src/UIShell/GlobalHeader/HeaderNavItem.svelte @@ -1,19 +1,19 @@ diff --git a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte index 0d9506d0..91384b2e 100644 --- a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte +++ b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte @@ -1,32 +1,23 @@ diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte index 18d442b9..3a6dbdfe 100644 --- a/src/UIShell/HeaderGlobalAction.svelte +++ b/src/UIShell/HeaderGlobalAction.svelte @@ -1,19 +1,16 @@ diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte index 4e550d61..ce2552c8 100644 --- a/src/UIShell/SideNav/HamburgerMenu.svelte +++ b/src/UIShell/SideNav/HamburgerMenu.svelte @@ -1,19 +1,16 @@ diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte index 2443af4b..90220785 100644 --- a/src/UIShell/SideNav/SideNavLink.svelte +++ b/src/UIShell/SideNav/SideNavLink.svelte @@ -1,31 +1,28 @@ diff --git a/src/UIShell/SkipToContent.svelte b/src/UIShell/SkipToContent.svelte index 6fc15809..cbba79ce 100644 --- a/src/UIShell/SkipToContent.svelte +++ b/src/UIShell/SkipToContent.svelte @@ -1,14 +1,8 @@ diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte index 7ab560ae..83632d00 100644 --- a/src/UnorderedList/UnorderedList.svelte +++ b/src/UnorderedList/UnorderedList.svelte @@ -1,8 +1,5 @@ diff --git a/types/Breadcrumb/Breadcrumb.Skeleton.d.ts b/types/Breadcrumb/BreadcrumbSkeleton.d.ts similarity index 100% rename from types/Breadcrumb/Breadcrumb.Skeleton.d.ts rename to types/Breadcrumb/BreadcrumbSkeleton.d.ts diff --git a/types/Button/Button.Skeleton.d.ts b/types/Button/ButtonSkeleton.d.ts similarity index 100% rename from types/Button/Button.Skeleton.d.ts rename to types/Button/ButtonSkeleton.d.ts diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.d.ts index 22b602bf..5c38e95e 100644 --- a/types/Checkbox/Checkbox.d.ts +++ b/types/Checkbox/Checkbox.d.ts @@ -69,11 +69,11 @@ export default class Checkbox { $$slot_def: {}; + $on(eventname: "check", cb: (event: CustomEvent) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; - $on(eventname: "check", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/Checkbox/Checkbox.Skeleton.d.ts b/types/Checkbox/CheckboxSkeleton.d.ts similarity index 100% rename from types/Checkbox/Checkbox.Skeleton.d.ts rename to types/Checkbox/CheckboxSkeleton.d.ts diff --git a/types/CodeSnippet/CodeSnippet.Skeleton.d.ts b/types/CodeSnippet/CodeSnippetSkeleton.d.ts similarity index 100% rename from types/CodeSnippet/CodeSnippet.Skeleton.d.ts rename to types/CodeSnippet/CodeSnippetSkeleton.d.ts diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts index f1a28bd7..05984146 100644 --- a/types/ComboBox/ComboBox.d.ts +++ b/types/ComboBox/ComboBox.d.ts @@ -119,11 +119,14 @@ export default class ComboBox { $$slot_def: {}; + $on( + eventname: "select", + cb: (event: CustomEvent<{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }>) => void + ): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void; - $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts index 35069cb1..297f0a23 100644 --- a/types/ComposedModal/ComposedModal.d.ts +++ b/types/ComposedModal/ComposedModal.d.ts @@ -41,7 +41,7 @@ export default class ComposedModal { * Obtain a reference to the top-level HTML element * @default null */ - ref?: null | HTMLElement; + ref?: null | HTMLDivElement; }; $$slot_def: { diff --git a/types/ContentSwitcher/ContentSwitcher.d.ts b/types/ContentSwitcher/ContentSwitcher.d.ts index 87ba9635..a387c3e3 100644 --- a/types/ContentSwitcher/ContentSwitcher.d.ts +++ b/types/ContentSwitcher/ContentSwitcher.d.ts @@ -24,10 +24,10 @@ export default class ContentSwitcher { default: {}; }; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts index 0c011da4..d4cc66f7 100644 --- a/types/DataTable/DataTable.d.ts +++ b/types/DataTable/DataTable.d.ts @@ -1,13 +1,15 @@ /// -type Headers = { +interface Header { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; -}[]; +} + +type Headers = Header[]; export default class DataTable { $$prop_def: { @@ -106,17 +108,24 @@ export default class DataTable { $$slot_def: { default: {}; - cell: { row: any; cell: any }; - ["expanded-row"]: { row: any }; + ["expanded-row"]: { row: Object }; + ["cell-header"]: { header: Header }; + cell: { row: Object; cell: Object }; }; - $on(eventname: "click:header--expand", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click:header", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click:row", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "mouseenter:row", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "mouseleave:row", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click:row--expand", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "click:cell", cb: (event: CustomEvent) => void): () => void; + $on( + eventname: "click", + cb: (event: CustomEvent<{ header?: Header; row?: Object; cell?: Object }>) => void + ): () => void; + $on(eventname: "click:header--expand", cb: (event: CustomEvent<{ expanded: boolean }>) => void): () => void; + $on( + eventname: "click:header", + cb: (event: CustomEvent<{ header: Header; sortDirection: "ascending" | "descending" | "none" }>) => void + ): () => void; + $on(eventname: "click:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "mouseenter:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "mouseleave:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:row--expand", cb: (event: CustomEvent<{ expanded: boolean; row: Object }>) => void): () => void; + $on(eventname: "click:cell", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/DatePicker/DatePicker.Skeleton.d.ts b/types/DatePicker/DatePickerSkeleton.d.ts similarity index 100% rename from types/DatePicker/DatePicker.Skeleton.d.ts rename to types/DatePicker/DatePickerSkeleton.d.ts diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.d.ts index 691dec6c..539f2f49 100644 --- a/types/Dropdown/Dropdown.d.ts +++ b/types/Dropdown/Dropdown.d.ts @@ -116,6 +116,9 @@ export default class Dropdown { $$slot_def: {}; - $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on( + eventname: "select", + cb: (event: CustomEvent<{ selectedId: DropdownItemId; selectedIndex: number; selectedItem: DropdownItem }>) => void + ): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/Dropdown/Dropdown.Skeleton.d.ts b/types/Dropdown/DropdownSkeleton.d.ts similarity index 100% rename from types/Dropdown/Dropdown.Skeleton.d.ts rename to types/Dropdown/DropdownSkeleton.d.ts diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts index 22cf364d..3efc177b 100644 --- a/types/FileUploader/FileUploader.d.ts +++ b/types/FileUploader/FileUploader.d.ts @@ -1,5 +1,7 @@ /// +type Files = string[]; + export default class FileUploader { $$prop_def: svelte.JSX.HTMLAttributes & { /** @@ -12,13 +14,13 @@ export default class FileUploader { * Specify the accepted file types * @default [] */ - accept?: string[]; + accept?: Files; /** * Obtain the uploaded file names * @default [] */ - files?: string[]; + files?: Files; /** * Set to `true` to allow multiple files @@ -31,7 +33,7 @@ export default class FileUploader { * @constant * @default () => { files = []; } */ - clearFiles?: () => any; + clearFiles?: () => void; /** * Specify the label description @@ -72,13 +74,13 @@ export default class FileUploader { $$slot_def: {}; + $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "remove", cb: (event: CustomEvent) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "remove", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/FileUploader/FileUploaderButton.d.ts b/types/FileUploader/FileUploaderButton.d.ts index fc7246d3..629412bf 100644 --- a/types/FileUploader/FileUploaderButton.d.ts +++ b/types/FileUploader/FileUploaderButton.d.ts @@ -1,12 +1,14 @@ /// +type Files = string[]; + export default class FileUploaderButton { $$prop_def: svelte.JSX.HTMLAttributes & { /** * Specify the accepted file types * @default [] */ - accept?: string[]; + accept?: Files; /** * Set to `true` to allow multiple files diff --git a/types/FileUploader/FileUploaderDropContainer.d.ts b/types/FileUploader/FileUploaderDropContainer.d.ts index 74b309f6..3762138e 100644 --- a/types/FileUploader/FileUploaderDropContainer.d.ts +++ b/types/FileUploader/FileUploaderDropContainer.d.ts @@ -8,7 +8,7 @@ export default class FileUploaderDropContainer { * Specify the accepted file types * @default [] */ - accept?: string[]; + accept?: Files; /** * Set to `true` to allow multiple files @@ -67,12 +67,12 @@ export default class FileUploaderDropContainer { $$slot_def: {}; + $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; $on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void; $on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void; $on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/FileUploader/FileUploaderItem.d.ts b/types/FileUploader/FileUploaderItem.d.ts index 19fd8536..bcd2d5b8 100644 --- a/types/FileUploader/FileUploaderItem.d.ts +++ b/types/FileUploader/FileUploaderItem.d.ts @@ -46,9 +46,9 @@ export default class FileUploaderItem { $$slot_def: {}; + $on(eventname: "delete", cb: (event: CustomEvent) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "delete", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/FileUploader/FileUploader.Skeleton.d.ts b/types/FileUploader/FileUploaderSkeleton.d.ts similarity index 100% rename from types/FileUploader/FileUploader.Skeleton.d.ts rename to types/FileUploader/FileUploaderSkeleton.d.ts diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts index e3162fd9..fd9535ff 100644 --- a/types/Grid/Column.d.ts +++ b/types/Grid/Column.d.ts @@ -68,7 +68,7 @@ export default class Column { }; $$slot_def: { - default: { props: undefined }; + default: { props?: { class: string } }; }; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.d.ts index 4b4e9da5..1c6003df 100644 --- a/types/Grid/Grid.d.ts +++ b/types/Grid/Grid.d.ts @@ -47,7 +47,7 @@ export default class Grid { }; $$slot_def: { - default: { props: undefined }; + default: { props?: { class: string } }; }; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.d.ts index d2adef0b..65717339 100644 --- a/types/Grid/Row.d.ts +++ b/types/Grid/Row.d.ts @@ -41,7 +41,7 @@ export default class Row { }; $$slot_def: { - default: { props: undefined }; + default: { props?: { class: string } }; }; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/Icon/Icon.Skeleton.d.ts b/types/Icon/IconSkeleton.d.ts similarity index 100% rename from types/Icon/Icon.Skeleton.d.ts rename to types/Icon/IconSkeleton.d.ts diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts index e4427b10..443d6d52 100644 --- a/types/ListBox/ListBoxField.d.ts +++ b/types/ListBox/ListBoxField.d.ts @@ -44,7 +44,7 @@ export default class ListBoxField { * Obtain a reference to the top-level HTML element * @default null */ - ref?: null | HTMLElement; + ref?: null | HTMLDivElement; }; $$slot_def: { diff --git a/types/ListBox/ListBoxMenu.d.ts b/types/ListBox/ListBoxMenu.d.ts index 826c346d..c6c5d159 100644 --- a/types/ListBox/ListBoxMenu.d.ts +++ b/types/ListBox/ListBoxMenu.d.ts @@ -8,7 +8,7 @@ export default class ListBoxMenu { id?: string; /** - * Obtain a reference to the input HTML element + * Obtain a reference to the HTML element * @default null */ ref?: null | HTMLDivElement; diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts index 3cb86af3..7487297a 100644 --- a/types/Modal/Modal.d.ts +++ b/types/Modal/Modal.d.ts @@ -109,7 +109,7 @@ export default class Modal { * Obtain a reference to the top-level HTML element * @default null */ - ref?: null | HTMLElement; + ref?: null | HTMLDivElement; }; $$slot_def: { diff --git a/types/NumberInput/NumberInput.Skeleton.d.ts b/types/NumberInput/NumberInputSkeleton.d.ts similarity index 100% rename from types/NumberInput/NumberInput.Skeleton.d.ts rename to types/NumberInput/NumberInputSkeleton.d.ts diff --git a/types/Pagination/Pagination.Skeleton.d.ts b/types/Pagination/PaginationSkeleton.d.ts similarity index 100% rename from types/Pagination/Pagination.Skeleton.d.ts rename to types/Pagination/PaginationSkeleton.d.ts diff --git a/types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts b/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts similarity index 100% rename from types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts rename to types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts diff --git a/types/RadioButton/RadioButton.d.ts b/types/RadioButton/RadioButton.d.ts index c5c81164..84402be5 100644 --- a/types/RadioButton/RadioButton.d.ts +++ b/types/RadioButton/RadioButton.d.ts @@ -15,7 +15,7 @@ export default class RadioButton { checked?: boolean; /** - * Set to `true` to disable the radio button + * et to `true` to disable the radio button * @default false */ disabled?: boolean; diff --git a/types/RadioButton/RadioButton.Skeleton.d.ts b/types/RadioButton/RadioButtonSkeleton.d.ts similarity index 100% rename from types/RadioButton/RadioButton.Skeleton.d.ts rename to types/RadioButton/RadioButtonSkeleton.d.ts diff --git a/types/Search/Search.Skeleton.d.ts b/types/Search/SearchSkeleton.d.ts similarity index 100% rename from types/Search/Search.Skeleton.d.ts rename to types/Search/SearchSkeleton.d.ts diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts index 726a120f..e7792308 100644 --- a/types/Select/Select.d.ts +++ b/types/Select/Select.d.ts @@ -5,7 +5,7 @@ export default class Select { /** * Specify the selected item value */ - selected?: string; + selected?: undefined; /** * Set the size of the select input diff --git a/types/Select/Select.Skeleton.d.ts b/types/Select/SelectSkeleton.d.ts similarity index 100% rename from types/Select/Select.Skeleton.d.ts rename to types/Select/SelectSkeleton.d.ts diff --git a/types/Slider/Slider.Skeleton.d.ts b/types/Slider/SliderSkeleton.d.ts similarity index 100% rename from types/Slider/Slider.Skeleton.d.ts rename to types/Slider/SliderSkeleton.d.ts diff --git a/types/StructuredList/StructuredList.Skeleton.d.ts b/types/StructuredList/StructuredListSkeleton.d.ts similarity index 100% rename from types/StructuredList/StructuredList.Skeleton.d.ts rename to types/StructuredList/StructuredListSkeleton.d.ts diff --git a/types/Tag/Tag.Skeleton.d.ts b/types/Tag/TagSkeleton.d.ts similarity index 100% rename from types/Tag/Tag.Skeleton.d.ts rename to types/Tag/TagSkeleton.d.ts diff --git a/types/TextArea/TextArea.Skeleton.d.ts b/types/TextArea/TextAreaSkeleton.d.ts similarity index 100% rename from types/TextArea/TextArea.Skeleton.d.ts rename to types/TextArea/TextAreaSkeleton.d.ts diff --git a/types/TextInput/TextInput.Skeleton.d.ts b/types/TextInput/TextInputSkeleton.d.ts similarity index 100% rename from types/TextInput/TextInput.Skeleton.d.ts rename to types/TextInput/TextInputSkeleton.d.ts diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.d.ts index 380b8f43..46013a70 100644 --- a/types/Tile/ExpandableTile.d.ts +++ b/types/Tile/ExpandableTile.d.ts @@ -50,10 +50,10 @@ export default class ExpandableTile { id?: string; /** - * Obtain a reference to the input HTML element + * Obtain a reference to the top-level element * @default null */ - ref?: null | HTMLElement; + ref?: null | HTMLDivElement; }; $$slot_def: { diff --git a/types/Toggle/Toggle.Skeleton.d.ts b/types/Toggle/ToggleSkeleton.d.ts similarity index 100% rename from types/Toggle/Toggle.Skeleton.d.ts rename to types/Toggle/ToggleSkeleton.d.ts diff --git a/types/ToggleSmall/ToggleSmall.Skeleton.d.ts b/types/ToggleSmall/ToggleSmallSkeleton.d.ts similarity index 100% rename from types/ToggleSmall/ToggleSmall.Skeleton.d.ts rename to types/ToggleSmall/ToggleSmallSkeleton.d.ts diff --git a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts index 79e45517..6d6123a8 100644 --- a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts +++ b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts @@ -11,8 +11,8 @@ export default class HeaderActionSearch { $$slot_def: {}; + $on(eventname: "inputSearch", cb: (event: CustomEvent<{ action: "search"; textInput: string }>) => void): () => void; $on(eventname: "focusInputSearch", cb: (event: CustomEvent) => void): () => void; $on(eventname: "focusOutInputSearch", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "inputSearch", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/index.d.ts b/types/index.d.ts index 006ee9cf..3ce43582 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -3,14 +3,14 @@ export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton"; export { default as Accordion } from "./Accordion/Accordion"; export { default as AccordionItem } from "./Accordion/AccordionItem"; export { default as AspectRatio } from "./AspectRatio/AspectRatio"; -export { default as BreadcrumbSkeleton } from "./Breadcrumb/Breadcrumb.Skeleton"; +export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton"; export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb"; export { default as Link } from "./Link/Link"; export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem"; -export { default as ButtonSkeleton } from "./Button/Button.Skeleton"; +export { default as ButtonSkeleton } from "./Button/ButtonSkeleton"; export { default as Button } from "./Button/Button"; export { default as ButtonSet } from "./Button/ButtonSet"; -export { default as CheckboxSkeleton } from "./Checkbox/Checkbox.Skeleton"; +export { default as CheckboxSkeleton } from "./Checkbox/CheckboxSkeleton"; export { default as Checkbox } from "./Checkbox/Checkbox"; export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher"; export { default as Switch } from "./ContentSwitcher/Switch"; @@ -27,10 +27,10 @@ export { default as ComposedModal } from "./ComposedModal/ComposedModal"; export { default as ModalHeader } from "./ComposedModal/ModalHeader"; export { default as ModalBody } from "./ComposedModal/ModalBody"; export { default as ModalFooter } from "./ComposedModal/ModalFooter"; -export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippet.Skeleton"; +export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippetSkeleton"; export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet"; export { default as RadioButton } from "./RadioButton/RadioButton"; -export { default as RadioButtonSkeleton } from "./RadioButton/RadioButton.Skeleton"; +export { default as RadioButtonSkeleton } from "./RadioButton/RadioButtonSkeleton"; export { default as Table } from "./DataTable/Table"; export { default as TableBody } from "./DataTable/TableBody"; export { default as TableCell } from "./DataTable/TableCell"; @@ -41,7 +41,7 @@ export { default as TableRow } from "./DataTable/TableRow"; export { default as DataTable } from "./DataTable/DataTable"; export { default as Toolbar } from "./DataTable/Toolbar"; export { default as ToolbarContent } from "./DataTable/ToolbarContent"; -export { default as SearchSkeleton } from "./Search/Search.Skeleton"; +export { default as SearchSkeleton } from "./Search/SearchSkeleton"; export { default as Search } from "./Search/Search"; export { default as ToolbarSearch } from "./DataTable/ToolbarSearch"; export { default as ToolbarBatchActions } from "./DataTable/ToolbarBatchActions"; @@ -52,16 +52,16 @@ export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem"; export { default as DataTableSkeleton } from "./DataTableSkeleton/DataTableSkeleton"; export { default as DatePicker } from "./DatePicker/DatePicker"; export { default as DatePickerInput } from "./DatePicker/DatePickerInput"; -export { default as DatePickerSkeleton } from "./DatePicker/DatePicker.Skeleton"; +export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton"; export { default as Dropdown } from "./Dropdown/Dropdown"; -export { default as DropdownSkeleton } from "./Dropdown/Dropdown.Skeleton"; +export { default as DropdownSkeleton } from "./Dropdown/DropdownSkeleton"; export { default as Loading } from "./Loading/Loading"; export { default as Filename } from "./FileUploader/Filename"; export { default as FileUploaderButton } from "./FileUploader/FileUploaderButton"; export { default as FileUploader } from "./FileUploader/FileUploader"; export { default as FileUploaderItem } from "./FileUploader/FileUploaderItem"; export { default as FileUploaderDropContainer } from "./FileUploader/FileUploaderDropContainer"; -export { default as FileUploaderSkeleton } from "./FileUploader/FileUploader.Skeleton"; +export { default as FileUploaderSkeleton } from "./FileUploader/FileUploaderSkeleton"; export { default as Form } from "./Form/Form"; export { default as FluidForm } from "./FluidForm/FluidForm"; export { default as FormGroup } from "./FormGroup/FormGroup"; @@ -70,7 +70,7 @@ export { default as FormLabel } from "./FormLabel/FormLabel"; export { default as Grid } from "./Grid/Grid"; export { default as Row } from "./Grid/Row"; export { default as Column } from "./Grid/Column"; -export { default as IconSkeleton } from "./Icon/Icon.Skeleton"; +export { default as IconSkeleton } from "./Icon/IconSkeleton"; export { default as Icon } from "./Icon/Icon"; export { default as InlineLoading } from "./InlineLoading/InlineLoading"; export { default as ListItem } from "./ListItem/ListItem"; @@ -83,24 +83,24 @@ export { default as ToastNotification } from "./Notification/ToastNotification"; export { default as InlineNotification } from "./Notification/InlineNotification"; export { default as NotificationActionButton } from "./Notification/NotificationActionButton"; export { default as NumberInput } from "./NumberInput/NumberInput"; -export { default as NumberInputSkeleton } from "./NumberInput/NumberInput.Skeleton"; +export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton"; export { default as OrderedList } from "./OrderedList/OrderedList"; export { default as Select } from "./Select/Select"; -export { default as SelectSkeleton } from "./Select/Select.Skeleton"; +export { default as SelectSkeleton } from "./Select/SelectSkeleton"; export { default as SelectItem } from "./Select/SelectItem"; export { default as SelectItemGroup } from "./Select/SelectItemGroup"; export { default as Pagination } from "./Pagination/Pagination"; -export { default as PaginationSkeleton } from "./Pagination/Pagination.Skeleton"; +export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton"; export { default as PaginationNav } from "./PaginationNav/PaginationNav"; export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator"; -export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicator.Skeleton"; +export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton"; export { default as ProgressStep } from "./ProgressIndicator/ProgressStep"; export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup"; export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder"; export { default as Slider } from "./Slider/Slider"; -export { default as SliderSkeleton } from "./Slider/Slider.Skeleton"; +export { default as SliderSkeleton } from "./Slider/SliderSkeleton"; export { default as StructuredList } from "./StructuredList/StructuredList"; -export { default as StructuredListSkeleton } from "./StructuredList/StructuredList.Skeleton"; +export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton"; export { default as StructuredListBody } from "./StructuredList/StructuredListBody"; export { default as StructuredListHead } from "./StructuredList/StructuredListHead"; export { default as StructuredListCell } from "./StructuredList/StructuredListCell"; @@ -110,12 +110,12 @@ export { default as Tabs } from "./Tabs/Tabs"; export { default as Tab } from "./Tabs/Tab"; export { default as TabContent } from "./Tabs/TabContent"; export { default as TabsSkeleton } from "./Tabs/TabsSkeleton"; -export { default as TagSkeleton } from "./Tag/Tag.Skeleton"; +export { default as TagSkeleton } from "./Tag/TagSkeleton"; export { default as Tag } from "./Tag/Tag"; export { default as TextArea } from "./TextArea/TextArea"; -export { default as TextAreaSkeleton } from "./TextArea/TextArea.Skeleton"; +export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton"; export { default as TextInput } from "./TextInput/TextInput"; -export { default as TextInputSkeleton } from "./TextInput/TextInput.Skeleton"; +export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton"; export { default as PasswordInput } from "./TextInput/PasswordInput"; export { default as Tile } from "./Tile/Tile"; export { default as ClickableTile } from "./Tile/ClickableTile"; @@ -126,9 +126,9 @@ export { default as TileGroup } from "./Tile/TileGroup"; export { default as TimePicker } from "./TimePicker/TimePicker"; export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect"; export { default as Toggle } from "./Toggle/Toggle"; -export { default as ToggleSkeleton } from "./Toggle/Toggle.Skeleton"; +export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton"; export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall"; -export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmall.Skeleton"; +export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleton"; export { default as Tooltip } from "./Tooltip/Tooltip"; export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition"; export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon"; From 75d4b4cf036dd117542f3339b7fc035065eaf01f Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 6 Nov 2020 11:30:46 -0800 Subject: [PATCH 03/11] refactor(types): shorten ref, id JSDocs, use CarbonIcon type, export component props --- src/Button/Button.svelte | 7 +- src/Checkbox/Checkbox.svelte | 10 +- src/Checkbox/InlineCheckbox.svelte | 10 +- src/CodeSnippet/CodeSnippet.svelte | 10 +- src/ComboBox/ComboBox.svelte | 15 +- src/ComposedModal/ComposedModal.svelte | 5 +- src/ContentSwitcher/Switch.svelte | 10 +- src/Copy/Copy.svelte | 5 +- src/DataTable/TableHeader.svelte | 5 +- src/DatePicker/DatePicker.svelte | 5 +- src/DatePicker/DatePickerInput.svelte | 10 +- src/DatePicker/DatePickerSkeleton.svelte | 5 +- src/Dropdown/Dropdown.svelte | 15 +- src/FileUploader/FileUploaderButton.svelte | 10 +- .../FileUploaderDropContainer.svelte | 10 +- src/FileUploader/FileUploaderItem.svelte | 5 +- src/FormLabel/FormLabel.svelte | 5 +- src/Icon/Icon.svelte | 2 +- src/Link/Link.svelte | 5 +- src/ListBox/ListBoxField.svelte | 10 +- src/ListBox/ListBoxMenu.svelte | 10 +- src/ListBox/ListBoxSelection.svelte | 5 +- src/Loading/Loading.svelte | 5 +- src/Modal/Modal.svelte | 10 +- src/MultiSelect/MultiSelect.svelte | 5 +- src/Notification/NotificationButton.svelte | 2 +- src/NumberInput/NumberInput.svelte | 18 +- src/OverflowMenu/OverflowMenu.svelte | 17 +- src/OverflowMenu/OverflowMenuItem.svelte | 10 +- src/Pagination/Pagination.svelte | 5 +- src/ProgressIndicator/ProgressStep.svelte | 5 +- src/RadioButton/RadioButton.svelte | 10 +- src/Search/Search.svelte | 10 +- src/Select/Select.svelte | 10 +- src/Slider/Slider.svelte | 10 +- src/StructuredList/StructuredListInput.svelte | 10 +- src/Tabs/Tab.svelte | 10 +- src/Tabs/TabContent.svelte | 5 +- src/Tag/Tag.svelte | 5 +- src/TextArea/TextArea.svelte | 10 +- src/TextInput/PasswordInput.svelte | 10 +- src/TextInput/TextInput.svelte | 10 +- src/Tile/ExpandableTile.svelte | 10 +- src/Tile/RadioTile.svelte | 5 +- src/Tile/SelectableTile.svelte | 10 +- src/TimePicker/TimePicker.svelte | 10 +- src/TimePicker/TimePickerSelect.svelte | 10 +- src/Toggle/Toggle.svelte | 5 +- src/Toggle/ToggleSkeleton.svelte | 5 +- src/ToggleSmall/ToggleSmall.svelte | 5 +- src/ToggleSmall/ToggleSmallSkeleton.svelte | 5 +- src/Tooltip/Tooltip.svelte | 17 +- .../TooltipDefinition.svelte | 10 +- src/TooltipIcon/TooltipIcon.svelte | 10 +- src/UIShell/GlobalHeader/Header.svelte | 5 +- src/UIShell/GlobalHeader/HeaderAction.svelte | 7 +- .../GlobalHeader/HeaderActionLink.svelte | 7 +- src/UIShell/GlobalHeader/HeaderNavItem.svelte | 5 +- src/UIShell/GlobalHeader/HeaderNavMenu.svelte | 5 +- .../GlobalHeader/HeaderPanelLink.svelte | 5 +- src/UIShell/HeaderGlobalAction.svelte | 7 +- src/UIShell/SideNav/HamburgerMenu.svelte | 5 +- src/UIShell/SideNav/SideNavLink.svelte | 7 +- src/UIShell/SideNav/SideNavMenu.svelte | 7 +- src/UIShell/SideNav/SideNavMenuItem.svelte | 5 +- types/Accordion/Accordion.d.ts | 51 +-- types/Accordion/AccordionItem.d.ts | 55 ++-- types/Accordion/AccordionSkeleton.d.ts | 51 +-- types/AspectRatio/AspectRatio.d.ts | 17 +- types/Breadcrumb/Breadcrumb.d.ts | 29 +- types/Breadcrumb/BreadcrumbItem.d.ts | 27 +- types/Breadcrumb/BreadcrumbSkeleton.d.ts | 29 +- types/Button/Button.d.ts | 167 +++++----- types/Button/ButtonSet.d.ts | 17 +- types/Button/ButtonSkeleton.d.ts | 39 +-- types/Checkbox/Checkbox.d.ts | 134 ++++---- types/Checkbox/CheckboxSkeleton.d.ts | 5 +- types/CodeSnippet/CodeSnippet.d.ts | 198 ++++++------ types/CodeSnippet/CodeSnippetSkeleton.d.ts | 17 +- types/ComboBox/ComboBox.d.ts | 225 +++++++------- types/ComposedModal/ComposedModal.d.ts | 87 +++--- types/ComposedModal/ModalBody.d.ts | 29 +- types/ComposedModal/ModalFooter.d.ts | 73 ++--- types/ComposedModal/ModalHeader.d.ts | 89 +++--- types/ContentSwitcher/ContentSwitcher.d.ts | 39 +-- types/ContentSwitcher/Switch.d.ts | 66 ++-- types/Copy/Copy.d.ts | 41 +-- types/CopyButton/CopyButton.d.ts | 17 +- types/DataTable/DataTable.d.ts | 193 ++++++------ types/DataTable/Table.d.ts | 75 ++--- types/DataTable/TableBody.d.ts | 5 +- types/DataTable/TableCell.d.ts | 5 +- types/DataTable/TableContainer.d.ts | 41 +-- types/DataTable/TableHead.d.ts | 5 +- types/DataTable/TableHeader.d.ts | 40 +-- types/DataTable/TableRow.d.ts | 5 +- types/DataTable/Toolbar.d.ts | 17 +- types/DataTable/ToolbarBatchActions.d.ts | 17 +- types/DataTable/ToolbarContent.d.ts | 5 +- types/DataTable/ToolbarMenu.d.ts | 5 +- types/DataTable/ToolbarMenuItem.d.ts | 5 +- types/DataTable/ToolbarSearch.d.ts | 65 ++-- .../DataTableSkeleton/DataTableSkeleton.d.ts | 89 +++--- types/DatePicker/DatePicker.d.ts | 122 ++++---- types/DatePicker/DatePickerInput.d.ts | 156 +++++----- types/DatePicker/DatePickerSkeleton.d.ts | 28 +- types/Dropdown/Dropdown.d.ts | 211 ++++++------- types/Dropdown/DropdownSkeleton.d.ts | 17 +- types/FileUploader/FileUploader.d.ts | 139 ++++----- types/FileUploader/FileUploaderButton.d.ts | 136 ++++---- .../FileUploaderDropContainer.d.ts | 126 ++++---- types/FileUploader/FileUploaderItem.d.ts | 88 +++--- types/FileUploader/FileUploaderSkeleton.d.ts | 5 +- types/FileUploader/Filename.d.ts | 41 +-- types/FluidForm/FluidForm.d.ts | 5 +- types/Form/Form.d.ts | 5 +- types/FormGroup/FormGroup.d.ts | 53 ++-- types/FormItem/FormItem.d.ts | 5 +- types/FormLabel/FormLabel.d.ts | 16 +- types/Grid/Column.d.ts | 115 +++---- types/Grid/Grid.d.ts | 91 +++--- types/Grid/Row.d.ts | 79 ++--- types/Icon/Icon.d.ts | 29 +- types/Icon/IconSkeleton.d.ts | 17 +- types/InlineLoading/InlineLoading.d.ts | 49 +-- types/Link/Link.d.ts | 73 ++--- types/ListBox/ListBox.d.ts | 87 +++--- types/ListBox/ListBoxField.d.ts | 90 +++--- types/ListBox/ListBoxMenu.d.ts | 28 +- types/ListBox/ListBoxMenuIcon.d.ts | 43 +-- types/ListBox/ListBoxMenuItem.d.ts | 29 +- types/ListBox/ListBoxSelection.d.ts | 65 ++-- types/ListItem/ListItem.d.ts | 5 +- types/Loading/Loading.d.ts | 64 ++-- types/Modal/Modal.d.ts | 226 +++++++------- types/MultiSelect/MultiSelect.d.ts | 290 +++++++++--------- types/Notification/InlineNotification.d.ts | 113 +++---- .../NotificationActionButton.d.ts | 5 +- types/Notification/NotificationButton.d.ts | 49 +-- types/Notification/NotificationIcon.d.ts | 41 +-- .../Notification/NotificationTextDetails.d.ts | 53 ++-- types/Notification/ToastNotification.d.ts | 125 ++++---- types/NumberInput/NumberInput.d.ts | 250 +++++++-------- types/NumberInput/NumberInputSkeleton.d.ts | 17 +- types/OrderedList/OrderedList.d.ts | 29 +- types/OverflowMenu/OverflowMenu.d.ts | 140 ++++----- types/OverflowMenu/OverflowMenuItem.d.ts | 114 +++---- types/Pagination/Pagination.d.ts | 196 ++++++------ types/Pagination/PaginationSkeleton.d.ts | 5 +- types/PaginationNav/PaginationNav.d.ts | 77 ++--- .../ProgressIndicator/ProgressIndicator.d.ts | 53 ++-- .../ProgressIndicatorSkeleton.d.ts | 29 +- types/ProgressIndicator/ProgressStep.d.ts | 100 +++--- types/RadioButton/RadioButton.d.ts | 112 +++---- types/RadioButton/RadioButtonSkeleton.d.ts | 5 +- types/RadioButtonGroup/RadioButtonGroup.d.ts | 61 ++-- types/Search/Search.d.ts | 170 +++++----- types/Search/SearchSkeleton.d.ts | 27 +- types/Select/Select.d.ts | 166 +++++----- types/Select/SelectItem.d.ts | 53 ++-- types/Select/SelectItemGroup.d.ts | 29 +- types/Select/SelectSkeleton.d.ts | 17 +- .../SkeletonPlaceholder.d.ts | 5 +- types/SkeletonText/SkeletonText.d.ts | 53 ++-- types/Slider/Slider.d.ts | 208 ++++++------- types/Slider/SliderSkeleton.d.ts | 17 +- types/StructuredList/StructuredList.d.ts | 39 +-- types/StructuredList/StructuredListBody.d.ts | 5 +- types/StructuredList/StructuredListCell.d.ts | 29 +- types/StructuredList/StructuredListHead.d.ts | 5 +- types/StructuredList/StructuredListInput.d.ts | 76 ++--- types/StructuredList/StructuredListRow.d.ts | 41 +-- .../StructuredListSkeleton.d.ts | 29 +- types/Tabs/Tab.d.ts | 78 ++--- types/Tabs/TabContent.d.ts | 16 +- types/Tabs/Tabs.d.ts | 53 ++-- types/Tabs/TabsSkeleton.d.ts | 17 +- types/Tag/Tag.d.ts | 96 +++--- types/Tag/TagSkeleton.d.ts | 5 +- types/TextArea/TextArea.d.ts | 170 +++++----- types/TextArea/TextAreaSkeleton.d.ts | 17 +- types/TextInput/PasswordInput.d.ts | 212 ++++++------- types/TextInput/TextInput.d.ts | 216 ++++++------- types/TextInput/TextInputSkeleton.d.ts | 17 +- types/Tile/ClickableTile.d.ts | 39 +-- types/Tile/ExpandableTile.d.ts | 112 +++---- types/Tile/RadioTile.d.ts | 88 +++--- types/Tile/SelectableTile.d.ts | 112 +++---- types/Tile/Tile.d.ts | 17 +- types/Tile/TileGroup.d.ts | 39 +-- types/TimePicker/TimePicker.d.ts | 180 +++++------ types/TimePicker/TimePickerSelect.d.ts | 96 +++--- types/Toggle/Toggle.d.ts | 86 +++--- types/Toggle/ToggleSkeleton.d.ts | 28 +- types/ToggleSmall/ToggleSmall.d.ts | 86 +++--- types/ToggleSmall/ToggleSmallSkeleton.d.ts | 28 +- types/Tooltip/Tooltip.d.ts | 161 +++++----- .../TooltipDefinition/TooltipDefinition.d.ts | 64 ++-- types/TooltipIcon/TooltipIcon.d.ts | 64 ++-- types/UIShell/Content.d.ts | 17 +- types/UIShell/GlobalHeader/Header.d.ts | 87 +++--- types/UIShell/GlobalHeader/HeaderAction.d.ts | 51 +-- .../GlobalHeader/HeaderActionLink.d.ts | 49 +-- .../GlobalHeader/HeaderActionSearch.d.ts | 17 +- types/UIShell/GlobalHeader/HeaderNav.d.ts | 15 +- types/UIShell/GlobalHeader/HeaderNavItem.d.ts | 37 +-- types/UIShell/GlobalHeader/HeaderNavMenu.d.ts | 63 ++-- .../GlobalHeader/HeaderPanelDivider.d.ts | 5 +- .../UIShell/GlobalHeader/HeaderPanelLink.d.ts | 27 +- .../GlobalHeader/HeaderPanelLinks.d.ts | 5 +- .../UIShell/GlobalHeader/HeaderUtilities.d.ts | 5 +- types/UIShell/HeaderGlobalAction.d.ts | 39 +-- types/UIShell/SideNav/SideNav.d.ts | 39 +-- types/UIShell/SideNav/SideNavItems.d.ts | 5 +- types/UIShell/SideNav/SideNavLink.d.ts | 59 ++-- types/UIShell/SideNav/SideNavMenu.d.ts | 49 +-- types/UIShell/SideNav/SideNavMenuItem.d.ts | 47 +-- types/UIShell/SkipToContent.d.ts | 29 +- types/UnorderedList/UnorderedList.d.ts | 17 +- 219 files changed, 5168 insertions(+), 5259 deletions(-) diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 7e989669..9ce6c692 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -16,7 +16,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render - * @type {typeof import("carbon-icons-svelte/lib/Add16").default} + * @type {import("carbon-icons-svelte").CarbonIcon} */ export let icon = undefined; @@ -63,10 +63,7 @@ /** Specify the `type` attribute for the button element */ export let type = "button"; - /** - * Obtain a reference to the HTML element - * @type {null | HTMLAnchorElement | HTMLButtonElement} - */ + /** Obtain a reference to the HTML element */ export let ref = null; import { getContext } from "svelte"; diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index fba7beb6..f3c67062 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/src/Checkbox/Checkbox.svelte @@ -33,16 +33,10 @@ */ export let title = undefined; - /** - * Set an id for the input label - * @type {string} - */ + /** Set an id for the input label */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the input HTML element - * @type {null | HTMLInputElement} - */ + /** Obtain a reference to the input HTML element */ export let ref = null; import { createEventDispatcher } from "svelte"; diff --git a/src/Checkbox/InlineCheckbox.svelte b/src/Checkbox/InlineCheckbox.svelte index 962e52a3..7e21badd 100644 --- a/src/Checkbox/InlineCheckbox.svelte +++ b/src/Checkbox/InlineCheckbox.svelte @@ -11,16 +11,10 @@ */ export let title = undefined; - /** - * Set an id for the input label - * @type {string} - */ + /** Set an id for the input label */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the input HTML element - * @type {null | HTMLInputElement} - */ + /** Obtain a reference to the input HTML element */ export let ref = null; diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte index e50e069e..4e2178e1 100644 --- a/src/CodeSnippet/CodeSnippet.svelte +++ b/src/CodeSnippet/CodeSnippet.svelte @@ -63,16 +63,10 @@ /** Set to `true` to enable the show more/less button */ export let showMoreLess = false; - /** - * Set an id for the code element - * @type {string} - */ + /** Set an id for the code element */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the pre HTML element - * @type {null | HTMLPreElement} - */ + /** Obtain a reference to the pre HTML element */ export let ref = null; import { tick } from "svelte"; diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 70a61a36..c6ab6d32 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -16,10 +16,7 @@ */ export let itemToString = (item) => item.text || item.id; - /** - * Set the selected item by value index - * @type {number} - */ + /** Set the selected item by value index */ export let selectedIndex = -1; /** Specify the selected combobox value */ @@ -67,10 +64,7 @@ */ export let translateWithId = undefined; - /** - * Set an id for the list box component - * @type {string} - */ + /** Set an id for the list box component */ export let id = "ccs-" + Math.random().toString(36); /** @@ -79,10 +73,7 @@ */ export let name = undefined; - /** - * Obtain a reference to the input HTML element - * @type {null | HTMLInputElement} - */ + /** Obtain a reference to the input HTML element */ export let ref = null; /** diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte index 1f1f955c..af6ded96 100644 --- a/src/ComposedModal/ComposedModal.svelte +++ b/src/ComposedModal/ComposedModal.svelte @@ -20,10 +20,7 @@ /** Specify a selector to be focused when opening the modal */ export let selectorPrimaryFocus = "[data-modal-primary-focus]"; - /** - * Obtain a reference to the top-level HTML element - * @type {null | HTMLDivElement} - */ + /** Obtain a reference to the top-level HTML element */ export let ref = null; import { diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte index efaeebb1..4e6e5bf4 100644 --- a/src/ContentSwitcher/Switch.svelte +++ b/src/ContentSwitcher/Switch.svelte @@ -11,16 +11,10 @@ /** Set to `true` to disable the switch */ export let disabled = false; - /** - * Set an id for the button element - * @type {string} - */ + /** Set an id for the button element */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the button HTML element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the button HTML element */ export let ref = null; import { afterUpdate, getContext, onDestroy } from "svelte"; diff --git a/src/Copy/Copy.svelte b/src/Copy/Copy.svelte index 076095a4..9217446e 100644 --- a/src/Copy/Copy.svelte +++ b/src/Copy/Copy.svelte @@ -5,10 +5,7 @@ /** Set the timeout duration (ms) to display feedback text */ export let feedbackTimeout = 2000; - /** - * Obtain a reference to the button HTML element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the button HTML element */ export let ref = null; import { onMount } from "svelte"; diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte index 2bb7f400..88926c54 100644 --- a/src/DataTable/TableHeader.svelte +++ b/src/DataTable/TableHeader.svelte @@ -8,10 +8,7 @@ */ export let translateWithId = () => ""; - /** - * Set an id for the top-level element - * @type {string} - */ + /** Set an id for the top-level element */ export let id = "ccs-" + Math.random().toString(36); import { getContext } from "svelte"; diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index 7fa344a3..cf19673c 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -42,10 +42,7 @@ /** Set to `true` to enable the light variant */ export let light = false; - /** - * Set an id for the date picker element - * @type {string} - */ + /** Set an id for the date picker element */ export let id = "ccs-" + Math.random().toString(36); import { diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index ffd3f001..44108e34 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/src/DatePicker/DatePickerInput.svelte @@ -20,10 +20,7 @@ /** Specify the ARIA label for the calendar icon */ export let iconDescription = ""; - /** - * Set an id for the input element - * @type {string} - */ + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); /** Specify the label text */ @@ -44,10 +41,7 @@ */ export let name = undefined; - /** - * Obtain a reference to the input HTML element - * @type {null | HTMLInputElement} - */ + /** Obtain a reference to the input HTML element */ export let ref = null; import { getContext, onMount } from "svelte"; diff --git a/src/DatePicker/DatePickerSkeleton.svelte b/src/DatePicker/DatePickerSkeleton.svelte index 5708e1c3..839b61a8 100644 --- a/src/DatePicker/DatePickerSkeleton.svelte +++ b/src/DatePicker/DatePickerSkeleton.svelte @@ -2,10 +2,7 @@ /** Set to `true` to use the range variant */ export let range = false; - /** - * Set an id to be used by the label element - * @type {string} - */ + /** Set an id to be used by the label element */ export let id = "ccs-" + Math.random().toString(36); diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index f141ba8a..d0c93750 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -18,10 +18,7 @@ */ export let itemToString = (item) => item.text || item.id; - /** - * Specify the selected item index - * @type {number} - */ + /** Specify the selected item index */ export let selectedIndex = -1; /** @@ -72,10 +69,7 @@ */ export let translateWithId = undefined; - /** - * Set an id for the list box component - * @type {string} - */ + /** Set an id for the list box component */ export let id = "ccs-" + Math.random().toString(36); /** @@ -84,10 +78,7 @@ */ export let name = undefined; - /** - * Obtain a reference to the button HTML element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the button HTML element */ export let ref = null; import { createEventDispatcher } from "svelte"; diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte index 906a2585..3d27ded9 100644 --- a/src/FileUploader/FileUploaderButton.svelte +++ b/src/FileUploader/FileUploaderButton.svelte @@ -33,19 +33,13 @@ /** Specify `tabindex` attribute */ export let tabindex = "0"; - /** - * Set an id for the input element - * @type {string} - */ + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); /** Specify a name attribute for the input */ export let name = ""; - /** - * Obtain a reference to the input HTML element - * @type {null | HTMLInputElement} - */ + /** Obtain a reference to the input HTML element */ export let ref = null; diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte index 917ea08f..4fb71b91 100644 --- a/src/FileUploader/FileUploaderDropContainer.svelte +++ b/src/FileUploader/FileUploaderDropContainer.svelte @@ -32,19 +32,13 @@ /** Specify `tabindex` attribute */ export let tabindex = "0"; - /** - * Set an id for the input element - * @type {string} - */ + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); /** Specify a name attribute for the input */ export let name = ""; - /** - * Obtain a reference to the input HTML element - * @type {null | HTMLInputElement} - */ + /** Obtain a reference to the input HTML element */ export let ref = null; import { createEventDispatcher } from "svelte"; diff --git a/src/FileUploader/FileUploaderItem.svelte b/src/FileUploader/FileUploaderItem.svelte index 1b58dea0..74499847 100644 --- a/src/FileUploader/FileUploaderItem.svelte +++ b/src/FileUploader/FileUploaderItem.svelte @@ -21,10 +21,7 @@ /** Specify the error body text */ export let errorBody = ""; - /** - * Set an id for the top-level element - * @type {string} - */ + /** Set an id for the top-level element */ export let id = "ccs-" + Math.random().toString(36); /** Specify the file uploader name */ diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte index 054591b1..535e6dee 100644 --- a/src/FormLabel/FormLabel.svelte +++ b/src/FormLabel/FormLabel.svelte @@ -1,8 +1,5 @@ diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte index 5d99d2c1..8d83174e 100644 --- a/src/Icon/Icon.svelte +++ b/src/Icon/Icon.svelte @@ -2,7 +2,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render * Icon size must be 16px (e.g. `Add16`, `Task16`) - * @type {typeof import("carbon-icons-svelte/lib/Add16").default} + * @type {import("carbon-icons-svelte").CarbonIcon} */ export let render = undefined; diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte index 5fd30865..f63a2929 100644 --- a/src/Link/Link.svelte +++ b/src/Link/Link.svelte @@ -20,10 +20,7 @@ /** Set to `true` to allow visited styles */ export let visited = false; - /** - * Obtain a reference to the top-level HTML element - * @type {null | HTMLAnchorElement | HTMLParagraphElement} - */ + /** Obtain a reference to the top-level HTML element */ export let ref = null; diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte index 6f424728..5341a42e 100644 --- a/src/ListBox/ListBoxField.svelte +++ b/src/ListBox/ListBoxField.svelte @@ -21,16 +21,10 @@ */ export let translateWithId = (id) => defaultTranslations[id]; - /** - * Set an id for the top-level element - * @type {string} - */ + /** Set an id for the top-level element */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the top-level HTML element - * @type {null | HTMLDivElement} - */ + /** Obtain a reference to the top-level HTML element */ export let ref = null; import { getContext } from "svelte"; diff --git a/src/ListBox/ListBoxMenu.svelte b/src/ListBox/ListBoxMenu.svelte index fce1e377..1196ad70 100644 --- a/src/ListBox/ListBoxMenu.svelte +++ b/src/ListBox/ListBoxMenu.svelte @@ -1,14 +1,8 @@ diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte index 902a6c4f..6fc1d25e 100644 --- a/src/ListBox/ListBoxSelection.svelte +++ b/src/ListBox/ListBoxSelection.svelte @@ -24,10 +24,7 @@ */ export let translateWithId = (id) => defaultTranslations[id]; - /** - * Obtain a reference to the top-level HTML element - * @type {null | HTMLElement} - */ + /** Obtain a reference to the top-level HTML element */ export let ref = null; import { createEventDispatcher, getContext } from "svelte"; diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte index b9eec8c4..d4f8efb9 100644 --- a/src/Loading/Loading.svelte +++ b/src/Loading/Loading.svelte @@ -11,10 +11,7 @@ /** Specify the label description */ export let description = "Active loading indicator"; - /** - * Set an id for the label element - * @type {string} - */ + /** Set an id for the label element */ export let id = "ccs-" + Math.random().toString(36); $: spinnerRadius = small ? "26.8125" : "37.5"; diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index f32454ea..305fdb4d 100644 --- a/src/Modal/Modal.svelte +++ b/src/Modal/Modal.svelte @@ -62,16 +62,10 @@ /** Set to `true` to prevent the modal from closing when clicking outside */ export let preventCloseOnClickOutside = false; - /** - * Set an id for the top-level element - * @type {string} - */ + /** Set an id for the top-level element */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the top-level HTML element - * @type {null | HTMLDivElement} - */ + /** Obtain a reference to the top-level HTML element */ export let ref = null; import { createEventDispatcher, onMount, afterUpdate } from "svelte"; diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 0fe45898..a11f4482 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -96,10 +96,7 @@ /** Specify the list box label */ export let label = ""; - /** - * Set an id for the list box component - * @type {string} - */ + /** Set an id for the list box component */ export let id = "ccs-" + Math.random().toString(36); /** diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte index 738dddc4..17e181d1 100644 --- a/src/Notification/NotificationButton.svelte +++ b/src/Notification/NotificationButton.svelte @@ -7,7 +7,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render - * @type {typeof import("carbon-icons-svelte/lib/Add16").default} + * @type {import("carbon-icons-svelte").CarbonIcon} */ export let renderIcon = Close20; diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index d8964485..c71415ec 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -1,4 +1,8 @@ diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte index 238ab142..2704d50e 100644 --- a/src/TimePicker/TimePickerSelect.svelte +++ b/src/TimePicker/TimePickerSelect.svelte @@ -17,10 +17,7 @@ */ export let hideLabel = true; - /** - * Set an id for the select element - * @type {string} - */ + /** Set an id for the select element */ export let id = "ccs-" + Math.random().toString(36); /** @@ -29,10 +26,7 @@ */ export let name = undefined; - /** - * Obtain a reference to the select HTML element - * @type {null | HTMLSelectElement} - */ + /** Obtain a reference to the select HTML element */ export let ref = null; import { setContext } from "svelte"; diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte index 386e48f9..947554e6 100644 --- a/src/Toggle/Toggle.svelte +++ b/src/Toggle/Toggle.svelte @@ -14,10 +14,7 @@ /** Specify the label text */ export let labelText = ""; - /** - * Set an id for the input element - * @type {string} - */ + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); /** diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte index c6b6d716..0098a51e 100644 --- a/src/Toggle/ToggleSkeleton.svelte +++ b/src/Toggle/ToggleSkeleton.svelte @@ -2,10 +2,7 @@ /** Specify the label text */ export let labelText = ""; - /** - * Set an id for the input element - * @type {string} - */ + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte index 219b86d6..6afb4371 100644 --- a/src/ToggleSmall/ToggleSmall.svelte +++ b/src/ToggleSmall/ToggleSmall.svelte @@ -14,10 +14,7 @@ /** Specify the label text */ export let labelText = ""; - /** - * Set an id for the input element - * @type {string} - */ + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); /** diff --git a/src/ToggleSmall/ToggleSmallSkeleton.svelte b/src/ToggleSmall/ToggleSmallSkeleton.svelte index 9e3d1d59..98b61228 100644 --- a/src/ToggleSmall/ToggleSmallSkeleton.svelte +++ b/src/ToggleSmall/ToggleSmallSkeleton.svelte @@ -2,10 +2,7 @@ /** Specify the label text */ export let labelText = ""; - /** - * Set an id for the input element - * @type {string} - */ + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index 0cb3e758..0a42c95f 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/src/Tooltip/Tooltip.svelte @@ -20,7 +20,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render for the tooltip button * Icon size must be 16px (e.g. `Add16`, `Task16`) - * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon=Information16] + * @type {import("carbon-icons-svelte").CarbonIcon} [icon=Information16] */ export let icon = Information16; @@ -48,22 +48,13 @@ /** Set the tooltip button text */ export let triggerText = ""; - /** - * Obtain a reference to the trigger text HTML element - * @type {null | HTMLElement} - */ + /** Obtain a reference to the trigger text HTML element */ export let ref = null; - /** - * Obtain a reference to the tooltip HTML element - * @type {null | HTMLElement} - */ + /** Obtain a reference to the tooltip HTML element */ export let refTooltip = null; - /** - * Obtain a reference to the icon HTML element - * @type {null | HTMLElement} - */ + /** Obtain a reference to the icon HTML element */ export let refIcon = null; import { createEventDispatcher, afterUpdate } from "svelte"; diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte index 14ef34fc..e3b3b61f 100644 --- a/src/TooltipDefinition/TooltipDefinition.svelte +++ b/src/TooltipDefinition/TooltipDefinition.svelte @@ -14,16 +14,10 @@ */ export let direction = "bottom"; - /** - * Set an id for the tooltip div element - * @type {string} - */ + /** Set an id for the tooltip div element */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the button HTML element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the button HTML element */ export let ref = null; let visible = false; diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte index 0012b7e5..41521bf0 100644 --- a/src/TooltipIcon/TooltipIcon.svelte +++ b/src/TooltipIcon/TooltipIcon.svelte @@ -14,16 +14,10 @@ */ export let direction = "bottom"; - /** - * Set an id for the span element - * @type {string} - */ + /** Set an id for the span element */ export let id = "ccs-" + Math.random().toString(36); - /** - * Obtain a reference to the button HTML element - * @type {null | HTMLButtonElement} [ref=null] - */ + /** Obtain a reference to the button HTML element */ export let ref = null; let hidden = false; diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte index e95d2d8c..9705c377 100644 --- a/src/UIShell/GlobalHeader/Header.svelte +++ b/src/UIShell/GlobalHeader/Header.svelte @@ -29,10 +29,7 @@ */ export let platformName = ""; - /** - * Obtain a reference to the HTML anchor element - * @type {null | HTMLAnchorElement} - */ + /** Obtain a reference to the HTML anchor element */ export let ref = null; import HamburgerMenu from "../SideNav/HamburgerMenu.svelte"; diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte index a3add533..a6bf0b43 100644 --- a/src/UIShell/GlobalHeader/HeaderAction.svelte +++ b/src/UIShell/GlobalHeader/HeaderAction.svelte @@ -4,7 +4,7 @@ /** * Specify the icon props - * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} + * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} */ export let icon = undefined; @@ -15,10 +15,7 @@ */ export let text = undefined; - /** - * Obtain a reference to the button HTML element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the button HTML element */ export let ref = null; import { createEventDispatcher } from "svelte"; diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte index 5bfbcf29..8c80210e 100644 --- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte +++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte @@ -10,14 +10,11 @@ /** * Specify the icon props - * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} + * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} */ export let icon = undefined; - /** - * Obtain a reference to the HTML anchor element - * @type {null | HTMLAnchorElement} - */ + /** Obtain a reference to the HTML anchor element */ export let ref = null; import { Icon } from "../../Icon"; diff --git a/src/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/UIShell/GlobalHeader/HeaderNavItem.svelte index c42736f2..3d8c752e 100644 --- a/src/UIShell/GlobalHeader/HeaderNavItem.svelte +++ b/src/UIShell/GlobalHeader/HeaderNavItem.svelte @@ -11,10 +11,7 @@ */ export let text = undefined; - /** - * Obtain a reference to the HTML anchor element - * @type {null | HTMLAnchorElement} - */ + /** Obtain a reference to the HTML anchor element */ export let ref = null; diff --git a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte index 91384b2e..66e25483 100644 --- a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte +++ b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte @@ -11,10 +11,7 @@ */ export let text = undefined; - /** - * Obtain a reference to the HTML anchor element - * @type {null | HTMLAnchorElement} - */ + /** Obtain a reference to the HTML anchor element */ export let ref = null; /** Specify the ARIA label for the chevron icon */ diff --git a/src/UIShell/GlobalHeader/HeaderPanelLink.svelte b/src/UIShell/GlobalHeader/HeaderPanelLink.svelte index 1a31433a..e2dc9584 100644 --- a/src/UIShell/GlobalHeader/HeaderPanelLink.svelte +++ b/src/UIShell/GlobalHeader/HeaderPanelLink.svelte @@ -5,10 +5,7 @@ */ export let href = undefined; - /** - * Obtain a reference to the HTML anchor element - * @type {null | HTMLAnchorElement} - */ + /** Obtain a reference to the HTML anchor element */ export let ref = null; diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte index 3a6dbdfe..44c41374 100644 --- a/src/UIShell/HeaderGlobalAction.svelte +++ b/src/UIShell/HeaderGlobalAction.svelte @@ -4,14 +4,11 @@ /** * Specify the icon to render - * @type {typeof import("carbon-icons-svelte/lib/Add16").default} + * @type {import("carbon-icons-svelte").CarbonIcon} */ export let icon = undefined; - /** - * Obtain a reference to the HTML button element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the HTML button element */ export let ref = null; diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte index ce2552c8..c75aa8a3 100644 --- a/src/UIShell/SideNav/HamburgerMenu.svelte +++ b/src/UIShell/SideNav/HamburgerMenu.svelte @@ -8,10 +8,7 @@ /** Set to `true` to toggle the open state */ export let isOpen = false; - /** - * Obtain a reference to the HTML button element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the HTML button element */ export let ref = null; import { fly } from "svelte/transition"; diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte index 90220785..d79c59bf 100644 --- a/src/UIShell/SideNav/SideNavLink.svelte +++ b/src/UIShell/SideNav/SideNavLink.svelte @@ -16,14 +16,11 @@ /** * Specify the icon props - * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} + * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} */ export let icon = undefined; - /** - * Obtain a reference to the HTML anchor element - * @type {null | HTMLAnchorElement} - */ + /** Obtain a reference to the HTML anchor element */ export let ref = null; import { Icon } from "../../Icon"; diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte index cd0c6dea..e103e900 100644 --- a/src/UIShell/SideNav/SideNavMenu.svelte +++ b/src/UIShell/SideNav/SideNavMenu.svelte @@ -10,14 +10,11 @@ /** * Specify the icon props - * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} + * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} */ export let icon = undefined; - /** - * Obtain a reference to the HTML button element - * @type {null | HTMLButtonElement} - */ + /** Obtain a reference to the HTML button element */ export let ref = null; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16"; diff --git a/src/UIShell/SideNav/SideNavMenuItem.svelte b/src/UIShell/SideNav/SideNavMenuItem.svelte index 67a1302d..0347f0aa 100644 --- a/src/UIShell/SideNav/SideNavMenuItem.svelte +++ b/src/UIShell/SideNav/SideNavMenuItem.svelte @@ -17,10 +17,7 @@ */ export let text = undefined; - /** - * Obtain a reference to the HTML anchor element - * @type {null | HTMLAnchorElement} - */ + /** Obtain a reference to the HTML anchor element */ export let ref = null; diff --git a/types/Accordion/Accordion.d.ts b/types/Accordion/Accordion.d.ts index f7bc09e3..32fcfb24 100644 --- a/types/Accordion/Accordion.d.ts +++ b/types/Accordion/Accordion.d.ts @@ -1,31 +1,32 @@ /// +export interface AccordionProps { + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the accordion + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; +} + export default class Accordion { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the accordion - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - }; - + $$prop_def: AccordionProps; $$slot_def: { default: {}; }; diff --git a/types/Accordion/AccordionItem.d.ts b/types/Accordion/AccordionItem.d.ts index 66a7528b..b85ee925 100644 --- a/types/Accordion/AccordionItem.d.ts +++ b/types/Accordion/AccordionItem.d.ts @@ -1,33 +1,34 @@ /// +export interface AccordionItemProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the title of the accordion item heading + * Alternatively, use the named slot "title" (e.g.
...
) + * @default "title" + */ + title?: string; + + /** + * Set to `true` to open the first accordion item + * @default false + */ + open?: boolean; + + /** + * Set to `true` to disable the accordion item + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the accordion item chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; +} + export default class AccordionItem { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the title of the accordion item heading - * Alternatively, use the named slot "title" (e.g.
...
) - * @default "title" - */ - title?: string; - - /** - * Set to `true` to open the first accordion item - * @default false - */ - open?: boolean; - - /** - * Set to `true` to disable the accordion item - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the accordion item chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; - }; - + $$prop_def: AccordionItemProps; $$slot_def: { default: {}; title: {}; diff --git a/types/Accordion/AccordionSkeleton.d.ts b/types/Accordion/AccordionSkeleton.d.ts index 0a1f9e45..0d05c96a 100644 --- a/types/Accordion/AccordionSkeleton.d.ts +++ b/types/Accordion/AccordionSkeleton.d.ts @@ -1,31 +1,32 @@ /// +export interface AccordionSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the number of accordion items to render + * @default 4 + */ + count?: number; + + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + */ + size?: "sm" | "xl"; + + /** + * Set to `false` to close the first accordion item + * @default true + */ + open?: boolean; +} + export default class AccordionSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the number of accordion items to render - * @default 4 - */ - count?: number; - - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `false` to close the first accordion item - * @default true - */ - open?: boolean; - }; - + $$prop_def: AccordionSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/AspectRatio/AspectRatio.d.ts b/types/AspectRatio/AspectRatio.d.ts index a2d58318..89678b5d 100644 --- a/types/AspectRatio/AspectRatio.d.ts +++ b/types/AspectRatio/AspectRatio.d.ts @@ -1,14 +1,15 @@ /// -export default class AspectRatio { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the aspect ratio - * @default "2x1" - */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; - }; +export interface AspectRatioProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the aspect ratio + * @default "2x1" + */ + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; +} +export default class AspectRatio { + $$prop_def: AspectRatioProps; $$slot_def: { default: {}; }; diff --git a/types/Breadcrumb/Breadcrumb.d.ts b/types/Breadcrumb/Breadcrumb.d.ts index 7ec1eea1..aab8cf9d 100644 --- a/types/Breadcrumb/Breadcrumb.d.ts +++ b/types/Breadcrumb/Breadcrumb.d.ts @@ -1,20 +1,21 @@ /// +export interface BreadcrumbProps { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Set to `true` to display skeleton state + * @default false + */ + skeleton?: boolean; +} + export default class Breadcrumb { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Set to `true` to display skeleton state - * @default false - */ - skeleton?: boolean; - }; - + $$prop_def: BreadcrumbProps; $$slot_def: { default: {}; }; diff --git a/types/Breadcrumb/BreadcrumbItem.d.ts b/types/Breadcrumb/BreadcrumbItem.d.ts index 77b5dfe4..6e0914e9 100644 --- a/types/Breadcrumb/BreadcrumbItem.d.ts +++ b/types/Breadcrumb/BreadcrumbItem.d.ts @@ -1,19 +1,20 @@ /// +export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Set to `true` if the breadcrumb item represents the current page + * @default false + */ + isCurrentPage?: boolean; +} + export default class BreadcrumbItem { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Set to `true` if the breadcrumb item represents the current page - * @default false - */ - isCurrentPage?: boolean; - }; - + $$prop_def: BreadcrumbItemProps; $$slot_def: { default: {}; }; diff --git a/types/Breadcrumb/BreadcrumbSkeleton.d.ts b/types/Breadcrumb/BreadcrumbSkeleton.d.ts index 072b4f16..3f0caaaf 100644 --- a/types/Breadcrumb/BreadcrumbSkeleton.d.ts +++ b/types/Breadcrumb/BreadcrumbSkeleton.d.ts @@ -1,20 +1,21 @@ /// +export interface BreadcrumbSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Specify the number of breadcrumb items to render + * @default 3 + */ + count?: number; +} + export default class BreadcrumbSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Specify the number of breadcrumb items to render - * @default 3 - */ - count?: number; - }; - + $$prop_def: BreadcrumbSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts index 522fdacd..e7cb2ade 100644 --- a/types/Button/Button.d.ts +++ b/types/Button/Button.d.ts @@ -1,89 +1,90 @@ /// +export interface ButtonProps { + /** + * Specify the kind of button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"; + + /** + * Specify the size of button + * @default "default" + */ + size?: "default" | "field" | "small"; + + /** + * Set to `true` for the icon-only variant + * @default false + */ + hasIconOnly?: boolean; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the ARIA label for the button icon + */ + iconDescription?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * `hasIconOnly` must be set to `true` + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Set the position of the tooltip relative to the icon + */ + tooltipPosition?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g. ) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to disable the button + * @default false + */ + disabled?: boolean; + + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the `type` attribute for the button element + * @default "button" + */ + type?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLButtonElement; +} + export default class Button { - $$prop_def: { - /** - * Specify the kind of button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"; - - /** - * Specify the size of button - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` for the icon-only variant - * @default false - */ - hasIconOnly?: boolean; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the ARIA label for the button icon - */ - iconDescription?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * `hasIconOnly` must be set to `true` - */ - tooltipAlignment?: "start" | "center" | "end"; - - /** - * Set the position of the tooltip relative to the icon - */ - tooltipPosition?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g. ) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to disable the button - * @default false - */ - disabled?: boolean; - - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the `type` attribute for the button element - * @default "button" - */ - type?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLButtonElement; - }; - + $$prop_def: ButtonProps; $$slot_def: { default: { props: undefined }; }; diff --git a/types/Button/ButtonSet.d.ts b/types/Button/ButtonSet.d.ts index cb5277d2..3bddf6b6 100644 --- a/types/Button/ButtonSet.d.ts +++ b/types/Button/ButtonSet.d.ts @@ -1,14 +1,15 @@ /// -export default class ButtonSet { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to stack the buttons vertically - * @default false - */ - stacked?: boolean; - }; +export interface ButtonSetProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to stack the buttons vertically + * @default false + */ + stacked?: boolean; +} +export default class ButtonSet { + $$prop_def: ButtonSetProps; $$slot_def: { default: {}; }; diff --git a/types/Button/ButtonSkeleton.d.ts b/types/Button/ButtonSkeleton.d.ts index 4cd5aa0a..57ca1bd3 100644 --- a/types/Button/ButtonSkeleton.d.ts +++ b/types/Button/ButtonSkeleton.d.ts @@ -1,25 +1,26 @@ /// +export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Specify the size of button skeleton + * @default "default" + */ + size?: "default" | "field" | "small"; + + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; +} + export default class ButtonSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the size of button skeleton - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; - }; - + $$prop_def: ButtonSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.d.ts index 5c38e95e..19d4e3f4 100644 --- a/types/Checkbox/Checkbox.d.ts +++ b/types/Checkbox/Checkbox.d.ts @@ -1,72 +1,74 @@ /// +export interface CheckboxProps { + /** + * Specify whether the checkbox is checked + * @default false + */ + checked?: boolean; + + /** + * Specify whether the checkbox is indeterminate + * @default false + */ + indeterminate?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` for the checkbox to be read-only + * @default false + */ + readonly?: boolean; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set a name for the input element + * @default "" + */ + name?: string; + + /** + * Specify the title attribute for the label element + */ + title?: string; + + /** + * Set an id for the input label + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class Checkbox { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify whether the checkbox is checked - * @default false - */ - checked?: boolean; - - /** - * Specify whether the checkbox is indeterminate - * @default false - */ - indeterminate?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` for the checkbox to be read-only - * @default false - */ - readonly?: boolean; - - /** - * Set to `true` to disable the checkbox - * @default false - */ - disabled?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set a name for the input element - * @default "" - */ - name?: string; - - /** - * Specify the title attribute for the label element - */ - title?: string; - - /** - * Set an id for the input label - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: CheckboxProps; $$slot_def: {}; $on(eventname: "check", cb: (event: CustomEvent) => void): () => void; diff --git a/types/Checkbox/CheckboxSkeleton.d.ts b/types/Checkbox/CheckboxSkeleton.d.ts index b2eca382..080e5736 100644 --- a/types/Checkbox/CheckboxSkeleton.d.ts +++ b/types/Checkbox/CheckboxSkeleton.d.ts @@ -1,8 +1,9 @@ /// -export default class CheckboxSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface CheckboxSkeletonProps extends svelte.JSX.HTMLAttributes {} +export default class CheckboxSkeleton { + $$prop_def: CheckboxSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts index 4aeb2784..b9c0eaea 100644 --- a/types/CodeSnippet/CodeSnippet.d.ts +++ b/types/CodeSnippet/CodeSnippet.d.ts @@ -1,104 +1,106 @@ /// +export interface CodeSnippetProps { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; + + /** + * Set the code snippet text + * Alternatively, use the default slot (e.g. {`code`}) + */ + code?: string; + + /** + * Set to `true` to expand a multi-line code snippet (type="multi") + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to hide the copy button + * @default false + */ + hideCopyButton?: boolean; + + /** + * Set to `true` to wrap the text + * Note that `type` must be "multi" + * @default false + */ + wrapText?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Specify the ARIA label for the copy button icon + */ + copyButtonDescription?: string; + + /** + * Specify the ARIA label of the copy button + */ + copyLabel?: string; + + /** + * Specify the feedback text displayed when clicking the snippet + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Specify the show less text + * `type` must be "multi" + * @default "Show less" + */ + showLessText?: string; + + /** + * Specify the show more text + * `type` must be "multi" + * @default "Show more" + */ + showMoreText?: string; + + /** + * Set to `true` to enable the show more/less button + * @default false + */ + showMoreLess?: boolean; + + /** + * Set an id for the code element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the pre HTML element + * @default null + */ + ref?: null | HTMLPreElement; +} + export default class CodeSnippet { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; - - /** - * Set the code snippet text - * Alternatively, use the default slot (e.g. {`code`}) - */ - code?: string; - - /** - * Set to `true` to expand a multi-line code snippet (type="multi") - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to hide the copy button - * @default false - */ - hideCopyButton?: boolean; - - /** - * Set to `true` to wrap the text - * Note that `type` must be "multi" - * @default false - */ - wrapText?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Specify the ARIA label for the copy button icon - */ - copyButtonDescription?: string; - - /** - * Specify the ARIA label of the copy button - */ - copyLabel?: string; - - /** - * Specify the feedback text displayed when clicking the snippet - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Specify the show less text - * `type` must be "multi" - * @default "Show less" - */ - showLessText?: string; - - /** - * Specify the show more text - * `type` must be "multi" - * @default "Show more" - */ - showMoreText?: string; - - /** - * Set to `true` to enable the show more/less button - * @default false - */ - showMoreLess?: boolean; - - /** - * Set an id for the code element - */ - id?: string; - - /** - * Obtain a reference to the pre HTML element - * @default null - */ - ref?: null | HTMLPreElement; - }; - + $$prop_def: CodeSnippetProps; $$slot_def: { default: {}; }; diff --git a/types/CodeSnippet/CodeSnippetSkeleton.d.ts b/types/CodeSnippet/CodeSnippetSkeleton.d.ts index eebcfc80..aeee2546 100644 --- a/types/CodeSnippet/CodeSnippetSkeleton.d.ts +++ b/types/CodeSnippet/CodeSnippetSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class CodeSnippetSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; - }; +export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; +} +export default class CodeSnippetSkeleton { + $$prop_def: CodeSnippetSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts index 05984146..78d7a886 100644 --- a/types/ComboBox/ComboBox.d.ts +++ b/types/ComboBox/ComboBox.d.ts @@ -5,118 +5,121 @@ interface ComboBoxItem { text: string; } +export interface ComboBoxProps extends svelte.JSX.HTMLAttributes { + /** + * Set the combobox items + * @default [] + */ + items?: ComboBoxItem[]; + + /** + * Override the display of a combobox item + * @default (item) => item.text || item.id + */ + itemToString?: (item: ComboBoxItem) => string; + + /** + * Set the selected item by value index + * @default -1 + */ + selectedIndex?: number; + + /** + * Specify the selected combobox value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the combobox + * @default false + */ + disabled?: boolean; + + /** + * Specify the title text of the combobox + * @default "" + */ + titleText?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to open the combobox menu dropdown + * @default false + */ + open?: boolean; + + /** + * Determine if an item should be filtered given the current combobox value + * @default () => true + */ + shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Set an id for the list box component + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Obtain a reference to the list HTML element + * @default null + */ + listRef?: null | HTMLDivElement; +} + export default class ComboBox { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the combobox items - * @default [] - */ - items?: ComboBoxItem[]; - - /** - * Override the display of a combobox item - * @default (item) => item.text || item.id - */ - itemToString?: (item: ComboBoxItem) => string; - - /** - * Set the selected item by value index - */ - selectedIndex?: number; - - /** - * Specify the selected combobox value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the combobox - * @default false - */ - disabled?: boolean; - - /** - * Specify the title text of the combobox - * @default "" - */ - titleText?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to open the combobox menu dropdown - * @default false - */ - open?: boolean; - - /** - * Determine if an item should be filtered given the current combobox value - * @default () => true - */ - shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Obtain a reference to the list HTML element - * @default null - */ - listRef?: null | HTMLDivElement; - }; - + $$prop_def: ComboBoxProps; $$slot_def: {}; $on( diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts index 297f0a23..3209f348 100644 --- a/types/ComposedModal/ComposedModal.d.ts +++ b/types/ComposedModal/ComposedModal.d.ts @@ -1,49 +1,50 @@ /// +export interface ComposedModalProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the composed modal + */ + size?: "xs" | "sm" | "lg"; + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to prevent the modal from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + /** + * Specify a class for the inner modal + * @default "" + */ + containerClass?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLDivElement; +} + export default class ComposedModal { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the composed modal - */ - size?: "xs" | "sm" | "lg"; - - /** - * Set to `true` to open the modal - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `true` to prevent the modal from closing when clicking outside - * @default false - */ - preventCloseOnClickOutside?: boolean; - - /** - * Specify a class for the inner modal - * @default "" - */ - containerClass?: string; - - /** - * Specify a selector to be focused when opening the modal - * @default "[data-modal-primary-focus]" - */ - selectorPrimaryFocus?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLDivElement; - }; - + $$prop_def: ComposedModalProps; $$slot_def: { default: {}; }; diff --git a/types/ComposedModal/ModalBody.d.ts b/types/ComposedModal/ModalBody.d.ts index 0a0bfce7..d1bdc682 100644 --- a/types/ComposedModal/ModalBody.d.ts +++ b/types/ComposedModal/ModalBody.d.ts @@ -1,20 +1,21 @@ /// +export interface ModalBodyProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; +} + export default class ModalBody { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` if the modal contains form elements - * @default false - */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; - }; - + $$prop_def: ModalBodyProps; $$slot_def: { default: {}; }; diff --git a/types/ComposedModal/ModalFooter.d.ts b/types/ComposedModal/ModalFooter.d.ts index 63125f67..75f0e181 100644 --- a/types/ComposedModal/ModalFooter.d.ts +++ b/types/ComposedModal/ModalFooter.d.ts @@ -1,42 +1,43 @@ /// +export interface ModalFooterProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Specify a class for the primary button + */ + primaryClass?: string; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a class for the secondary button + */ + secondaryClass?: string; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; +} + export default class ModalFooter { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Specify a class for the primary button - */ - primaryClass?: string; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a class for the secondary button - */ - secondaryClass?: string; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - }; - + $$prop_def: ModalFooterProps; $$slot_def: { default: {}; }; diff --git a/types/ComposedModal/ModalHeader.d.ts b/types/ComposedModal/ModalHeader.d.ts index 3fccc16e..ff6e4cfe 100644 --- a/types/ComposedModal/ModalHeader.d.ts +++ b/types/ComposedModal/ModalHeader.d.ts @@ -1,50 +1,51 @@ /// +export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the modal title + * @default "" + */ + title?: string; + + /** + * Specify the modal label + * @default "" + */ + label?: string; + + /** + * Specify the label class + * @default "" + */ + labelClass?: string; + + /** + * Specify the title class + * @default "" + */ + titleClass?: string; + + /** + * Specify the close class + * @default "" + */ + closeClass?: string; + + /** + * Specify the close icon class + * @default "" + */ + closeIconClass?: string; + + /** + * Specify the ARIA label for the close icon + * @default "Close" + */ + iconDescription?: string; +} + export default class ModalHeader { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the modal title - * @default "" - */ - title?: string; - - /** - * Specify the modal label - * @default "" - */ - label?: string; - - /** - * Specify the label class - * @default "" - */ - labelClass?: string; - - /** - * Specify the title class - * @default "" - */ - titleClass?: string; - - /** - * Specify the close class - * @default "" - */ - closeClass?: string; - - /** - * Specify the close icon class - * @default "" - */ - closeIconClass?: string; - - /** - * Specify the ARIA label for the close icon - * @default "Close" - */ - iconDescription?: string; - }; - + $$prop_def: ModalHeaderProps; $$slot_def: { default: {}; }; diff --git a/types/ContentSwitcher/ContentSwitcher.d.ts b/types/ContentSwitcher/ContentSwitcher.d.ts index a387c3e3..078ca447 100644 --- a/types/ContentSwitcher/ContentSwitcher.d.ts +++ b/types/ContentSwitcher/ContentSwitcher.d.ts @@ -1,25 +1,26 @@ /// +export interface ContentSwitcherProps extends svelte.JSX.HTMLAttributes { + /** + * Set the selected index of the switch item + * @default 0 + */ + selectedIndex?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the size of the content switcher + */ + size?: "sm" | "xl"; +} + export default class ContentSwitcher { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the selected index of the switch item - * @default 0 - */ - selectedIndex?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the size of the content switcher - */ - size?: "sm" | "xl"; - }; - + $$prop_def: ContentSwitcherProps; $$slot_def: { default: {}; }; diff --git a/types/ContentSwitcher/Switch.d.ts b/types/ContentSwitcher/Switch.d.ts index 6281e9ff..52d2e83a 100644 --- a/types/ContentSwitcher/Switch.d.ts +++ b/types/ContentSwitcher/Switch.d.ts @@ -1,38 +1,40 @@ /// +export interface SwitchProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the switch text + * Alternatively, use the named slot "text" (e.g. ...) + * @default "Provide text" + */ + text?: string; + + /** + * Set to `true` for the switch to be selected + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to disable the switch + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the button element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class Switch { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the switch text - * Alternatively, use the named slot "text" (e.g. ...) - * @default "Provide text" - */ - text?: string; - - /** - * Set to `true` for the switch to be selected - * @default false - */ - selected?: boolean; - - /** - * Set to `true` to disable the switch - * @default false - */ - disabled?: boolean; - - /** - * Set an id for the button element - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: SwitchProps; $$slot_def: { default: {}; }; diff --git a/types/Copy/Copy.d.ts b/types/Copy/Copy.d.ts index 41292983..d66254ac 100644 --- a/types/Copy/Copy.d.ts +++ b/types/Copy/Copy.d.ts @@ -1,26 +1,27 @@ /// +export interface CopyProps extends svelte.JSX.HTMLAttributes { + /** + * Set the feedback text shown after clicking the button + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class Copy { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the feedback text shown after clicking the button - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: CopyProps; $$slot_def: { default: {}; }; diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts index c1c9f515..8cdfeba9 100644 --- a/types/CopyButton/CopyButton.d.ts +++ b/types/CopyButton/CopyButton.d.ts @@ -1,14 +1,15 @@ /// -export default class CopyButton { - $$prop_def: { - /** - * Set the title and ARIA label for the copy button - * @default "Copy to clipboard" - */ - iconDescription?: string; - }; +export interface CopyButtonProps { + /** + * Set the title and ARIA label for the copy button + * @default "Copy to clipboard" + */ + iconDescription?: string; +} +export default class CopyButton { + $$prop_def: CopyButtonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts index d4cc66f7..e578edf2 100644 --- a/types/DataTable/DataTable.d.ts +++ b/types/DataTable/DataTable.d.ts @@ -11,106 +11,107 @@ interface Header { type Headers = Header[]; +export interface DataTableProps { + /** + * Specify the data table headers + * @default [] + */ + headers?: Headers; + + /** + * Specify the rows the data table should render + * keys defined in `headers` are used for the row ids + * @default [] + */ + rows?: Object[]; + + /** + * Set the size of the data table + */ + size?: "compact" | "short" | "tall"; + + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` for the expandable variant + * Automatically set to `true` if `batchExpansion` is `true` + * @default false + */ + expandable?: boolean; + + /** + * Set to `true` to enable batch expansion + * @default false + */ + batchExpansion?: boolean; + + /** + * Specify the row ids to be expanded + * @default [] + */ + expandedRowIds?: string[]; + + /** + * Set to `true` for the radio selection variant + * @default false + */ + radio?: boolean; + + /** + * Set to `true` for the selectable variant + * Automatically set to `true` if `radio` or `batchSelection` are `true` + * @default false + */ + selectable?: boolean; + + /** + * Set to `true` to enable batch selection + * @default false + */ + batchSelection?: boolean; + + /** + * Specify the row ids to be selected + * @default [] + */ + selectedRowIds?: string[]; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; +} + export default class DataTable { - $$prop_def: { - /** - * Specify the data table headers - * @default [] - */ - headers?: Headers; - - /** - * Specify the rows the data table should render - * keys defined in `headers` are used for the row ids - * @default [] - */ - rows?: Object[]; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` for the expandable variant - * Automatically set to `true` if `batchExpansion` is `true` - * @default false - */ - expandable?: boolean; - - /** - * Set to `true` to enable batch expansion - * @default false - */ - batchExpansion?: boolean; - - /** - * Specify the row ids to be expanded - * @default [] - */ - expandedRowIds?: string[]; - - /** - * Set to `true` for the radio selection variant - * @default false - */ - radio?: boolean; - - /** - * Set to `true` for the selectable variant - * Automatically set to `true` if `radio` or `batchSelection` are `true` - * @default false - */ - selectable?: boolean; - - /** - * Set to `true` to enable batch selection - * @default false - */ - batchSelection?: boolean; - - /** - * Specify the row ids to be selected - * @default [] - */ - selectedRowIds?: string[]; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - + $$prop_def: DataTableProps; $$slot_def: { default: {}; - ["expanded-row"]: { row: Object }; - ["cell-header"]: { header: Header }; cell: { row: Object; cell: Object }; + ["cell-header"]: { header: Header }; + ["expanded-row"]: { row: Object }; }; $on( diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts index cbdbcaca..26de4a4e 100644 --- a/types/DataTable/Table.d.ts +++ b/types/DataTable/Table.d.ts @@ -1,43 +1,44 @@ /// +export interface TableProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the table + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; + + /** + * Set to `true` for the bordered variant + * @default false + */ + shouldShowBorder?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; +} + export default class Table { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` to use static width - * @default false - */ - useStaticWidth?: boolean; - - /** - * Set to `true` for the bordered variant - * @default false - */ - shouldShowBorder?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - + $$prop_def: TableProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/TableBody.d.ts b/types/DataTable/TableBody.d.ts index bcc26bd5..870bdce4 100644 --- a/types/DataTable/TableBody.d.ts +++ b/types/DataTable/TableBody.d.ts @@ -1,8 +1,9 @@ /// -export default class TableBody { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface TableBodyProps extends svelte.JSX.HTMLAttributes {} +export default class TableBody { + $$prop_def: TableBodyProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/TableCell.d.ts b/types/DataTable/TableCell.d.ts index 6eeb4538..9e927282 100644 --- a/types/DataTable/TableCell.d.ts +++ b/types/DataTable/TableCell.d.ts @@ -1,8 +1,9 @@ /// -export default class TableCell { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface TableCellProps extends svelte.JSX.HTMLAttributes {} +export default class TableCell { + $$prop_def: TableCellProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/TableContainer.d.ts b/types/DataTable/TableContainer.d.ts index 0afec925..fece36a0 100644 --- a/types/DataTable/TableContainer.d.ts +++ b/types/DataTable/TableContainer.d.ts @@ -1,26 +1,27 @@ /// +export interface TableContainerProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; +} + export default class TableContainer { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - + $$prop_def: TableContainerProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/TableHead.d.ts b/types/DataTable/TableHead.d.ts index d62cfad9..afa55613 100644 --- a/types/DataTable/TableHead.d.ts +++ b/types/DataTable/TableHead.d.ts @@ -1,8 +1,9 @@ /// -export default class TableHead { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface TableHeadProps extends svelte.JSX.HTMLAttributes {} +export default class TableHead { + $$prop_def: TableHeadProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/TableHeader.d.ts b/types/DataTable/TableHeader.d.ts index 9f0a97a7..1995d6fc 100644 --- a/types/DataTable/TableHeader.d.ts +++ b/types/DataTable/TableHeader.d.ts @@ -1,25 +1,27 @@ /// +export interface TableHeaderProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the `scope` attribute + * @default "col" + */ + scope?: string; + + /** + * Override the default id translations + * @default () => "" + */ + translateWithId?: () => string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class TableHeader { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the `scope` attribute - * @default "col" - */ - scope?: string; - - /** - * Override the default id translations - * @default () => "" - */ - translateWithId?: () => string; - - /** - * Set an id for the top-level element - */ - id?: string; - }; - + $$prop_def: TableHeaderProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/TableRow.d.ts b/types/DataTable/TableRow.d.ts index 5f6d8f8a..d18a7c1c 100644 --- a/types/DataTable/TableRow.d.ts +++ b/types/DataTable/TableRow.d.ts @@ -1,8 +1,9 @@ /// -export default class TableRow { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface TableRowProps extends svelte.JSX.HTMLAttributes {} +export default class TableRow { + $$prop_def: TableRowProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/Toolbar.d.ts b/types/DataTable/Toolbar.d.ts index 8bf7139c..9f44ef2d 100644 --- a/types/DataTable/Toolbar.d.ts +++ b/types/DataTable/Toolbar.d.ts @@ -1,14 +1,15 @@ /// -export default class Toolbar { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the toolbar size - * @default "default" - */ - size?: "sm" | "default"; - }; +export interface ToolbarProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the toolbar size + * @default "default" + */ + size?: "sm" | "default"; +} +export default class Toolbar { + $$prop_def: ToolbarProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/ToolbarBatchActions.d.ts b/types/DataTable/ToolbarBatchActions.d.ts index 31e79dad..a85a5aec 100644 --- a/types/DataTable/ToolbarBatchActions.d.ts +++ b/types/DataTable/ToolbarBatchActions.d.ts @@ -1,14 +1,15 @@ /// -export default class ToolbarBatchActions { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Override the total items selected text - * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected` - */ - formatTotalSelected?: (totalSelected: number) => string; - }; +export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes { + /** + * Override the total items selected text + * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected` + */ + formatTotalSelected?: (totalSelected: number) => string; +} +export default class ToolbarBatchActions { + $$prop_def: ToolbarBatchActionsProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/ToolbarContent.d.ts b/types/DataTable/ToolbarContent.d.ts index f263726d..df5bd531 100644 --- a/types/DataTable/ToolbarContent.d.ts +++ b/types/DataTable/ToolbarContent.d.ts @@ -1,8 +1,9 @@ /// -export default class ToolbarContent { - $$prop_def: {}; +export interface ToolbarContentProps {} +export default class ToolbarContent { + $$prop_def: ToolbarContentProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/ToolbarMenu.d.ts b/types/DataTable/ToolbarMenu.d.ts index ab04b15b..795d3e95 100644 --- a/types/DataTable/ToolbarMenu.d.ts +++ b/types/DataTable/ToolbarMenu.d.ts @@ -1,8 +1,9 @@ /// -export default class ToolbarMenu { - $$prop_def: {}; +export interface ToolbarMenuProps {} +export default class ToolbarMenu { + $$prop_def: ToolbarMenuProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/ToolbarMenuItem.d.ts b/types/DataTable/ToolbarMenuItem.d.ts index 95f5095b..dde29ef7 100644 --- a/types/DataTable/ToolbarMenuItem.d.ts +++ b/types/DataTable/ToolbarMenuItem.d.ts @@ -1,8 +1,9 @@ /// -export default class ToolbarMenuItem { - $$prop_def: {}; +export interface ToolbarMenuItemProps {} +export default class ToolbarMenuItem { + $$prop_def: ToolbarMenuItemProps; $$slot_def: { default: {}; }; diff --git a/types/DataTable/ToolbarSearch.d.ts b/types/DataTable/ToolbarSearch.d.ts index 7bec1b77..8fc82029 100644 --- a/types/DataTable/ToolbarSearch.d.ts +++ b/types/DataTable/ToolbarSearch.d.ts @@ -1,38 +1,39 @@ /// +export interface ToolbarSearchProps { + /** + * Specify the value of the search input + * @default "" + */ + value?: string; + + /** + * Set to `true` to expand the search bar + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to keep the search bar expanded + * @default false + */ + persistent?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class ToolbarSearch { - $$prop_def: { - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Set to `true` to expand the search bar - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to keep the search bar expanded - * @default false - */ - persistent?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: ToolbarSearchProps; $$slot_def: {}; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; diff --git a/types/DataTableSkeleton/DataTableSkeleton.d.ts b/types/DataTableSkeleton/DataTableSkeleton.d.ts index efe7bf3f..27ebf0f1 100644 --- a/types/DataTableSkeleton/DataTableSkeleton.d.ts +++ b/types/DataTableSkeleton/DataTableSkeleton.d.ts @@ -1,50 +1,51 @@ /// +export interface DataTableSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the number of columns + * @default 5 + */ + columns?: number; + + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set the size of the data table + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to apply zebra styles to the datatable rows + * @default false + */ + zebra?: boolean; + + /** + * Set to `false` to hide the header + * @default true + */ + showHeader?: boolean; + + /** + * Set the column headers + * If `headers` has one more items, `count` is ignored + * @default [] + */ + headers?: string[]; + + /** + * Set to `false` to hide the toolbar + * @default true + */ + showToolbar?: boolean; +} + export default class DataTableSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the number of columns - * @default 5 - */ - columns?: number; - - /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to apply zebra styles to the datatable rows - * @default false - */ - zebra?: boolean; - - /** - * Set to `false` to hide the header - * @default true - */ - showHeader?: boolean; - - /** - * Set the column headers - * If `headers` has one more items, `count` is ignored - * @default [] - */ - headers?: string[]; - - /** - * Set to `false` to hide the toolbar - * @default true - */ - showToolbar?: boolean; - }; - + $$prop_def: DataTableSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/DatePicker/DatePicker.d.ts b/types/DatePicker/DatePicker.d.ts index 6c74518c..7e950345 100644 --- a/types/DatePicker/DatePicker.d.ts +++ b/types/DatePicker/DatePicker.d.ts @@ -1,66 +1,68 @@ /// +export interface DatePickerProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the date picker type + * @default "simple" + */ + datePickerType?: "simple" | "single" | "range"; + + /** + * Specify the date picker input value + * @default "" + */ + value?: string; + + /** + * Specify the element to append the calendar to + */ + appendTo?: HTMLElement; + + /** + * Specify the date format + * @default "m/d/Y" + */ + dateFormat?: string; + + /** + * Specify the maximum date + * @default null + */ + maxDate?: null | string | Date; + + /** + * Specify the minimum date + * @default null + */ + minDate?: null | string | Date; + + /** + * Specify the locale + * @default "en" + */ + locale?: string; + + /** + * Set to `true` to use the short variant + * @default false + */ + short?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set an id for the date picker element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class DatePicker { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the date picker type - * @default "simple" - */ - datePickerType?: "simple" | "single" | "range"; - - /** - * Specify the date picker input value - * @default "" - */ - value?: string; - - /** - * Specify the element to append the calendar to - */ - appendTo?: HTMLElement; - - /** - * Specify the date format - * @default "m/d/Y" - */ - dateFormat?: string; - - /** - * Specify the maximum date - * @default null - */ - maxDate?: null | string | Date; - - /** - * Specify the minimum date - * @default null - */ - minDate?: null | string | Date; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Set to `true` to use the short variant - * @default false - */ - short?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set an id for the date picker element - */ - id?: string; - }; - + $$prop_def: DatePickerProps; $$slot_def: { default: {}; }; diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts index 74e73908..312cfbf1 100644 --- a/types/DatePicker/DatePickerInput.d.ts +++ b/types/DatePicker/DatePickerInput.d.ts @@ -1,83 +1,85 @@ /// +export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input type + * @default "text" + */ + type?: string; + + /** + * Specify the input placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the Regular Expression for the input value + * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" + */ + pattern?: string; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the calendar icon + * @default "" + */ + iconDescription?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set a name for the input element + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class DatePickerInput { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input type - * @default "text" - */ - type?: string; - - /** - * Specify the input placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the Regular Expression for the input value - * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" - */ - pattern?: string; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the calendar icon - * @default "" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set a name for the input element - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: DatePickerInputProps; $$slot_def: {}; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; diff --git a/types/DatePicker/DatePickerSkeleton.d.ts b/types/DatePicker/DatePickerSkeleton.d.ts index b545fd96..71d8588f 100644 --- a/types/DatePicker/DatePickerSkeleton.d.ts +++ b/types/DatePicker/DatePickerSkeleton.d.ts @@ -1,19 +1,21 @@ /// +export interface DatePickerSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the range variant + * @default false + */ + range?: boolean; + + /** + * Set an id to be used by the label element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class DatePickerSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the range variant - * @default false - */ - range?: boolean; - - /** - * Set an id to be used by the label element - */ - id?: string; - }; - + $$prop_def: DatePickerSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.d.ts index 539f2f49..44adc8ba 100644 --- a/types/Dropdown/Dropdown.d.ts +++ b/types/Dropdown/Dropdown.d.ts @@ -9,111 +9,114 @@ interface DropdownItem { text: DropdownItemText; } +export interface DropdownProps extends svelte.JSX.HTMLAttributes { + /** + * Set the dropdown items + * @default [] + */ + items?: DropdownItem[]; + + /** + * Override the display of a dropdown item + * @default (item) => item.text || item.id + */ + itemToString?: (item: DropdownItem) => string; + + /** + * Specify the selected item index + * @default -1 + */ + selectedIndex?: number; + + /** + * Specify the type of dropdown + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the size of the dropdown field + */ + size?: "sm" | "lg" | "xl"; + + /** + * Set to `true` to open the dropdown + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the dropdown + * @default false + */ + disabled?: boolean; + + /** + * Specify the title text + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the list box label + */ + label?: string; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Set an id for the list box component + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the list box + */ + name?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class Dropdown { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the dropdown items - * @default [] - */ - items?: DropdownItem[]; - - /** - * Override the display of a dropdown item - * @default (item) => item.text || item.id - */ - itemToString?: (item: DropdownItem) => string; - - /** - * Specify the selected item index - */ - selectedIndex?: number; - - /** - * Specify the type of dropdown - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Specify the size of the dropdown field - */ - size?: "sm" | "lg" | "xl"; - - /** - * Set to `true` to open the dropdown - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the dropdown - * @default false - */ - disabled?: boolean; - - /** - * Specify the title text - * @default "" - */ - titleText?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the list box label - */ - label?: string; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the list box - */ - name?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: DropdownProps; $$slot_def: {}; $on( diff --git a/types/Dropdown/DropdownSkeleton.d.ts b/types/Dropdown/DropdownSkeleton.d.ts index 0066d3e5..66319de3 100644 --- a/types/Dropdown/DropdownSkeleton.d.ts +++ b/types/Dropdown/DropdownSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class DropdownSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - }; +export interface DropdownSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; +} +export default class DropdownSkeleton { + $$prop_def: DropdownSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts index 3efc177b..aadde0a5 100644 --- a/types/FileUploader/FileUploader.d.ts +++ b/types/FileUploader/FileUploader.d.ts @@ -2,76 +2,77 @@ type Files = string[]; +export interface FileUploaderProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the accepted file types + * @default [] + */ + accept?: Files; + + /** + * Obtain the uploaded file names + * @default [] + */ + files?: Files; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of clearing the array of uploaded files + * @constant + * @default () => { files = []; } + */ + clearFiles?: () => void; + + /** + * Specify the label description + * @default "" + */ + labelDescription?: string; + + /** + * Specify the label title + * @default "" + */ + labelTitle?: string; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the button label + * @default "" + */ + buttonLabel?: string; + + /** + * Specify the ARIA label used for the status icons + * @default "Provide icon description" + */ + iconDescription?: string; + + /** + * Specify a name attribute for the file button uploader input + * @default "" + */ + name?: string; +} + export default class FileUploader { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the file uploader status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the accepted file types - * @default [] - */ - accept?: Files; - - /** - * Obtain the uploaded file names - * @default [] - */ - files?: Files; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of clearing the array of uploaded files - * @constant - * @default () => { files = []; } - */ - clearFiles?: () => void; - - /** - * Specify the label description - * @default "" - */ - labelDescription?: string; - - /** - * Specify the label title - * @default "" - */ - labelTitle?: string; - - /** - * Specify the kind of file uploader button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; - - /** - * Specify the button label - * @default "" - */ - buttonLabel?: string; - - /** - * Specify the ARIA label used for the status icons - * @default "Provide icon description" - */ - iconDescription?: string; - - /** - * Specify a name attribute for the file button uploader input - * @default "" - */ - name?: string; - }; - + $$prop_def: FileUploaderProps; $$slot_def: {}; $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; diff --git a/types/FileUploader/FileUploaderButton.d.ts b/types/FileUploader/FileUploaderButton.d.ts index 629412bf..03e1f992 100644 --- a/types/FileUploader/FileUploaderButton.d.ts +++ b/types/FileUploader/FileUploaderButton.d.ts @@ -2,74 +2,76 @@ type Files = string[]; +export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the accepted file types + * @default [] + */ + accept?: Files; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to disable label changes + * @default false + */ + disableLabelChanges?: boolean; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the label role + * @default "button" + */ + role?: string; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class FileUploaderButton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the accepted file types - * @default [] - */ - accept?: Files; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to disable label changes - * @default false - */ - disableLabelChanges?: boolean; - - /** - * Specify the kind of file uploader button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; - - /** - * Specify the label text - * @default "Add file" - */ - labelText?: string; - - /** - * Specify the label role - * @default "button" - */ - role?: string; - - /** - * Specify `tabindex` attribute - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: FileUploaderButtonProps; $$slot_def: {}; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; diff --git a/types/FileUploader/FileUploaderDropContainer.d.ts b/types/FileUploader/FileUploaderDropContainer.d.ts index 3762138e..86917250 100644 --- a/types/FileUploader/FileUploaderDropContainer.d.ts +++ b/types/FileUploader/FileUploaderDropContainer.d.ts @@ -2,69 +2,71 @@ type Files = string[]; +export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the accepted file types + * @default [] + */ + accept?: Files; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of validating uploaded files + * The default behavior does not validate files + * @default (files) => files + */ + validateFiles?: (files: Files) => Files; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the `role` attribute of the drop container + * @default "button" + */ + role?: string; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class FileUploaderDropContainer { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the accepted file types - * @default [] - */ - accept?: Files; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of validating uploaded files - * The default behavior does not validate files - * @default (files) => files - */ - validateFiles?: (files: Files) => Files; - - /** - * Specify the label text - * @default "Add file" - */ - labelText?: string; - - /** - * Specify the `role` attribute of the drop container - * @default "button" - */ - role?: string; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify `tabindex` attribute - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: FileUploaderDropContainerProps; $$slot_def: {}; $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; diff --git a/types/FileUploader/FileUploaderItem.d.ts b/types/FileUploader/FileUploaderItem.d.ts index bcd2d5b8..63e66aba 100644 --- a/types/FileUploader/FileUploaderItem.d.ts +++ b/types/FileUploader/FileUploaderItem.d.ts @@ -1,49 +1,51 @@ /// +export interface FileUploaderItemProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the error subject text + * @default "" + */ + errorSubject?: string; + + /** + * Specify the error body text + * @default "" + */ + errorBody?: string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify the file uploader name + * @default "" + */ + name?: string; +} + export default class FileUploaderItem { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the file uploader status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the ARIA label used for the status icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the error subject text - * @default "" - */ - errorSubject?: string; - - /** - * Specify the error body text - * @default "" - */ - errorBody?: string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Specify the file uploader name - * @default "" - */ - name?: string; - }; - + $$prop_def: FileUploaderItemProps; $$slot_def: {}; $on(eventname: "delete", cb: (event: CustomEvent) => void): () => void; diff --git a/types/FileUploader/FileUploaderSkeleton.d.ts b/types/FileUploader/FileUploaderSkeleton.d.ts index 0a553f94..c5d3f72c 100644 --- a/types/FileUploader/FileUploaderSkeleton.d.ts +++ b/types/FileUploader/FileUploaderSkeleton.d.ts @@ -1,8 +1,9 @@ /// -export default class FileUploaderSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface FileUploaderSkeletonProps extends svelte.JSX.HTMLAttributes {} +export default class FileUploaderSkeleton { + $$prop_def: FileUploaderSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/FileUploader/Filename.d.ts b/types/FileUploader/Filename.d.ts index aef005d4..52336e7a 100644 --- a/types/FileUploader/Filename.d.ts +++ b/types/FileUploader/Filename.d.ts @@ -1,26 +1,27 @@ /// +export interface FilenameProps { + /** + * Specify the file name status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; +} + export default class Filename { - $$prop_def: { - /** - * Specify the file name status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the ARIA label used for the status icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - }; - + $$prop_def: FilenameProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/FluidForm/FluidForm.d.ts b/types/FluidForm/FluidForm.d.ts index c3bcbd43..3408ebf2 100644 --- a/types/FluidForm/FluidForm.d.ts +++ b/types/FluidForm/FluidForm.d.ts @@ -1,8 +1,9 @@ /// -export default class FluidForm { - $$prop_def: {}; +export interface FluidFormProps {} +export default class FluidForm { + $$prop_def: FluidFormProps; $$slot_def: { default: {}; }; diff --git a/types/Form/Form.d.ts b/types/Form/Form.d.ts index e5e78ac9..8c8e1e9b 100644 --- a/types/Form/Form.d.ts +++ b/types/Form/Form.d.ts @@ -1,8 +1,9 @@ /// -export default class Form { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface FormProps extends svelte.JSX.HTMLAttributes {} +export default class Form { + $$prop_def: FormProps; $$slot_def: { default: {}; }; diff --git a/types/FormGroup/FormGroup.d.ts b/types/FormGroup/FormGroup.d.ts index e7a156d2..d55aa8f9 100644 --- a/types/FormGroup/FormGroup.d.ts +++ b/types/FormGroup/FormGroup.d.ts @@ -1,32 +1,33 @@ /// +export interface FormGroupProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to render a form requirement + * @default false + */ + message?: boolean; + + /** + * Specify the message text + * @default "" + */ + messageText?: string; + + /** + * Specify the legend text + * @default "" + */ + legendText?: string; +} + export default class FormGroup { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to render a form requirement - * @default false - */ - message?: boolean; - - /** - * Specify the message text - * @default "" - */ - messageText?: string; - - /** - * Specify the legend text - * @default "" - */ - legendText?: string; - }; - + $$prop_def: FormGroupProps; $$slot_def: { default: {}; }; diff --git a/types/FormItem/FormItem.d.ts b/types/FormItem/FormItem.d.ts index 55cf3eac..9ff7d823 100644 --- a/types/FormItem/FormItem.d.ts +++ b/types/FormItem/FormItem.d.ts @@ -1,8 +1,9 @@ /// -export default class FormItem { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface FormItemProps extends svelte.JSX.HTMLAttributes {} +export default class FormItem { + $$prop_def: FormItemProps; $$slot_def: { default: {}; }; diff --git a/types/FormLabel/FormLabel.d.ts b/types/FormLabel/FormLabel.d.ts index ee9f97e2..0a38b73e 100644 --- a/types/FormLabel/FormLabel.d.ts +++ b/types/FormLabel/FormLabel.d.ts @@ -1,13 +1,15 @@ /// -export default class FormLabel { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set an id to be used by the label element - */ - id?: string; - }; +export interface FormLabelProps extends svelte.JSX.HTMLAttributes { + /** + * Set an id to be used by the label element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} +export default class FormLabel { + $$prop_def: FormLabelProps; $$slot_def: { default: {}; }; diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts index fd9535ff..92343b8f 100644 --- a/types/Grid/Column.d.ts +++ b/types/Grid/Column.d.ts @@ -9,64 +9,65 @@ interface ColumnSizeDescriptor { type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; +export interface ColumnProps { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + + /** + * Specify the aspect ratio of the column + */ + aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; + + /** + * Set the small breakpoint + */ + sm?: ColumnBreakpoint; + + /** + * Set the medium breakpoint + */ + md?: ColumnBreakpoint; + + /** + * Set the large breakpoint + */ + lg?: ColumnBreakpoint; + + /** + * Set the extra large breakpoint + */ + xlg?: ColumnBreakpoint; + + /** + * Set the maximum breakpoint + */ + max?: ColumnBreakpoint; +} + export default class Column { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - - /** - * Specify the aspect ratio of the column - */ - aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; - - /** - * Set the small breakpoint - */ - sm?: ColumnBreakpoint; - - /** - * Set the medium breakpoint - */ - md?: ColumnBreakpoint; - - /** - * Set the large breakpoint - */ - lg?: ColumnBreakpoint; - - /** - * Set the extra large breakpoint - */ - xlg?: ColumnBreakpoint; - - /** - * Set the maximum breakpoint - */ - max?: ColumnBreakpoint; - }; - + $$prop_def: ColumnProps; $$slot_def: { default: { props?: { class: string } }; }; diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.d.ts index 1c6003df..aee92876 100644 --- a/types/Grid/Grid.d.ts +++ b/types/Grid/Grid.d.ts @@ -1,51 +1,52 @@ /// +export interface GridProps { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to use the narrow variant + * @default false + */ + narrow?: boolean; + + /** + * Set to `true` to use the fullWidth variant + * @default false + */ + fullWidth?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; +} + export default class Grid { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to use the condensed variant - * @default false - */ - condensed?: boolean; - - /** - * Set to `true` to use the narrow variant - * @default false - */ - narrow?: boolean; - - /** - * Set to `true` to use the fullWidth variant - * @default false - */ - fullWidth?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - }; - + $$prop_def: GridProps; $$slot_def: { default: { props?: { class: string } }; }; diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.d.ts index 65717339..670732bf 100644 --- a/types/Grid/Row.d.ts +++ b/types/Grid/Row.d.ts @@ -1,45 +1,46 @@ /// +export interface RowProps { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to use the narrow variant + * @default false + */ + narrow?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; +} + export default class Row { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to use the condensed variant - * @default false - */ - condensed?: boolean; - - /** - * Set to `true` to use the narrow variant - * @default false - */ - narrow?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - }; - + $$prop_def: RowProps; $$slot_def: { default: { props?: { class: string } }; }; diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts index a5d23bd7..d180bfe1 100644 --- a/types/Icon/Icon.d.ts +++ b/types/Icon/Icon.d.ts @@ -1,20 +1,21 @@ /// +export interface IconProps { + /** + * Specify the icon from `carbon-icons-svelte` to render + * Icon size must be 16px (e.g. `Add16`, `Task16`) + */ + render?: import("carbon-icons-svelte").CarbonIcon; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; +} + export default class Icon { - $$prop_def: { - /** - * Specify the icon from `carbon-icons-svelte` to render - * Icon size must be 16px (e.g. `Add16`, `Task16`) - */ - render?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - }; - + $$prop_def: IconProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Icon/IconSkeleton.d.ts b/types/Icon/IconSkeleton.d.ts index 0726550a..f4f860bb 100644 --- a/types/Icon/IconSkeleton.d.ts +++ b/types/Icon/IconSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class IconSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the icon - * @default 16 - */ - size?: number; - }; +export interface IconSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the icon + * @default 16 + */ + size?: number; +} +export default class IconSkeleton { + $$prop_def: IconSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/InlineLoading/InlineLoading.d.ts b/types/InlineLoading/InlineLoading.d.ts index 1b7cf01f..4e8c8416 100644 --- a/types/InlineLoading/InlineLoading.d.ts +++ b/types/InlineLoading/InlineLoading.d.ts @@ -1,30 +1,31 @@ /// +export interface InlineLoadingProps extends svelte.JSX.HTMLAttributes { + /** + * Set the loading status + * @default "active" + */ + status?: "active" | "inactive" | "finished" | "error"; + + /** + * Set the loading description + */ + description?: string; + + /** + * Specify the ARIA label for the loading icon + */ + iconDescription?: string; + + /** + * Specify the timeout delay (ms) after `status` is set to "success" + * @default 1500 + */ + successDelay?: number; +} + export default class InlineLoading { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the loading status - * @default "active" - */ - status?: "active" | "inactive" | "finished" | "error"; - - /** - * Set the loading description - */ - description?: string; - - /** - * Specify the ARIA label for the loading icon - */ - iconDescription?: string; - - /** - * Specify the timeout delay (ms) after `status` is set to "success" - * @default 1500 - */ - successDelay?: number; - }; - + $$prop_def: InlineLoadingProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts index 357137ff..209e0d9c 100644 --- a/types/Link/Link.d.ts +++ b/types/Link/Link.d.ts @@ -1,42 +1,43 @@ /// +export interface LinkProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the size of the link + */ + size?: "sm" | "lg"; + + /** + * Specify the href value + */ + href?: string; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to allow visited styles + * @default false + */ + visited?: boolean; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLParagraphElement; +} + export default class Link { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the size of the link - */ - size?: "sm" | "lg"; - - /** - * Specify the href value - */ - href?: string; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to disable the checkbox - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to allow visited styles - * @default false - */ - visited?: boolean; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLParagraphElement; - }; - + $$prop_def: LinkProps; $$slot_def: { default: {}; }; diff --git a/types/ListBox/ListBox.d.ts b/types/ListBox/ListBox.d.ts index 778c1d15..d82cfc8f 100644 --- a/types/ListBox/ListBox.d.ts +++ b/types/ListBox/ListBox.d.ts @@ -1,49 +1,50 @@ /// +export interface ListBoxProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the list box + */ + size?: "sm" | "xl"; + + /** + * Set the type of the list box + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Set to `true` to open the list box + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the list box + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; +} + export default class ListBox { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the list box - */ - size?: "sm" | "xl"; - - /** - * Set the type of the list box - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Set to `true` to open the list box - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the list box - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - }; - + $$prop_def: ListBoxProps; $$slot_def: { default: {}; }; diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts index 443d6d52..2a147651 100644 --- a/types/ListBox/ListBoxField.d.ts +++ b/types/ListBox/ListBoxField.d.ts @@ -2,51 +2,53 @@ type ListBoxFieldTranslationId = "close" | "open"; +export interface ListBoxFieldProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to disable the list box field + * @default false + */ + disabled?: boolean; + + /** + * Specify the role attribute + * @default "combobox" + */ + role?: string; + + /** + * Specify the tabindex + * @default "-1" + */ + tabindex?: string; + + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds?: { close: "close"; open: "open" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxFieldTranslationId) => string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLDivElement; +} + export default class ListBoxField { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to disable the list box field - * @default false - */ - disabled?: boolean; - - /** - * Specify the role attribute - * @default "combobox" - */ - role?: string; - - /** - * Specify the tabindex - * @default "-1" - */ - tabindex?: string; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - * @default (id) => defaultTranslations[id] - */ - translateWithId?: (id: ListBoxFieldTranslationId) => string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLDivElement; - }; - + $$prop_def: ListBoxFieldProps; $$slot_def: { default: {}; }; diff --git a/types/ListBox/ListBoxMenu.d.ts b/types/ListBox/ListBoxMenu.d.ts index c6c5d159..d0c9c70e 100644 --- a/types/ListBox/ListBoxMenu.d.ts +++ b/types/ListBox/ListBoxMenu.d.ts @@ -1,19 +1,21 @@ /// +export interface ListBoxMenuProps extends svelte.JSX.HTMLAttributes { + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLDivElement; +} + export default class ListBoxMenu { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLDivElement; - }; - + $$prop_def: ListBoxMenuProps; $$slot_def: { default: {}; }; diff --git a/types/ListBox/ListBoxMenuIcon.d.ts b/types/ListBox/ListBoxMenuIcon.d.ts index 36b04bd3..29203c07 100644 --- a/types/ListBox/ListBoxMenuIcon.d.ts +++ b/types/ListBox/ListBoxMenuIcon.d.ts @@ -2,28 +2,29 @@ type ListBoxMenuIconTranslationId = "close" | "open"; +export interface ListBoxMenuIconProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to open the list box menu icon + * @default false + */ + open?: boolean; + + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds?: { close: "close"; open: "open" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxMenuIconTranslationId) => string; +} + export default class ListBoxMenuIcon { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to open the list box menu icon - * @default false - */ - open?: boolean; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - * @default (id) => defaultTranslations[id] - */ - translateWithId?: (id: ListBoxMenuIconTranslationId) => string; - }; - + $$prop_def: ListBoxMenuIconProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/ListBox/ListBoxMenuItem.d.ts b/types/ListBox/ListBoxMenuItem.d.ts index b351a6e0..a4724c5e 100644 --- a/types/ListBox/ListBoxMenuItem.d.ts +++ b/types/ListBox/ListBoxMenuItem.d.ts @@ -1,20 +1,21 @@ /// +export interface ListBoxMenuItemProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to enable the active state + * @default false + */ + active?: boolean; + + /** + * Set to `true` to enable the highlighted state + * @default false + */ + highlighted?: boolean; +} + export default class ListBoxMenuItem { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to enable the active state - * @default false - */ - active?: boolean; - - /** - * Set to `true` to enable the highlighted state - * @default false - */ - highlighted?: boolean; - }; - + $$prop_def: ListBoxMenuItemProps; $$slot_def: { default: {}; }; diff --git a/types/ListBox/ListBoxSelection.d.ts b/types/ListBox/ListBoxSelection.d.ts index d177ca03..a9b0d3e8 100644 --- a/types/ListBox/ListBoxSelection.d.ts +++ b/types/ListBox/ListBoxSelection.d.ts @@ -2,39 +2,40 @@ type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; +export interface ListBoxSelectionProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the number of selected items + */ + selectionCount?: any; + + /** + * Set to `true` to disable the list box selection + * @default false + */ + disabled?: boolean; + + /** + * Default translation ids + * @constant + * @default { clearAll: "clearAll", clearSelection: "clearSelection", } + */ + translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxSelectionTranslationId) => string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLDivElement; +} + export default class ListBoxSelection { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the number of selected items - */ - selectionCount?: any; - - /** - * Set to `true` to disable the list box selection - * @default false - */ - disabled?: boolean; - - /** - * Default translation ids - * @constant - * @default { clearAll: "clearAll", clearSelection: "clearSelection", } - */ - translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; - - /** - * Override the default translation ids - * @default (id) => defaultTranslations[id] - */ - translateWithId?: (id: ListBoxSelectionTranslationId) => string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - + $$prop_def: ListBoxSelectionProps; $$slot_def: {}; $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; diff --git a/types/ListItem/ListItem.d.ts b/types/ListItem/ListItem.d.ts index c0842915..4ef4aaad 100644 --- a/types/ListItem/ListItem.d.ts +++ b/types/ListItem/ListItem.d.ts @@ -1,8 +1,9 @@ /// -export default class ListItem { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface ListItemProps extends svelte.JSX.HTMLAttributes {} +export default class ListItem { + $$prop_def: ListItemProps; $$slot_def: { default: {}; }; diff --git a/types/Loading/Loading.d.ts b/types/Loading/Loading.d.ts index a56718b5..77af289c 100644 --- a/types/Loading/Loading.d.ts +++ b/types/Loading/Loading.d.ts @@ -1,37 +1,39 @@ /// +export interface LoadingProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + + /** + * Set to `false` to disable the active state + * @default true + */ + active?: boolean; + + /** + * Set to `false` to disable the overlay + * @default true + */ + withOverlay?: boolean; + + /** + * Specify the label description + * @default "Active loading indicator" + */ + description?: string; + + /** + * Set an id for the label element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class Loading { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; - - /** - * Set to `false` to disable the active state - * @default true - */ - active?: boolean; - - /** - * Set to `false` to disable the overlay - * @default true - */ - withOverlay?: boolean; - - /** - * Specify the label description - * @default "Active loading indicator" - */ - description?: string; - - /** - * Set an id for the label element - */ - id?: string; - }; - + $$prop_def: LoadingProps; $$slot_def: {}; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts index 7487297a..8f6e8dbb 100644 --- a/types/Modal/Modal.d.ts +++ b/types/Modal/Modal.d.ts @@ -1,121 +1,123 @@ /// +export interface ModalProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the modal + */ + size?: "xs" | "sm" | "lg"; + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to enable alert mode + * @default false + */ + alert?: boolean; + + /** + * Set to `true` to use the passive variant + * @default false + */ + passiveModal?: boolean; + + /** + * Specify the modal heading + */ + modalHeading?: string; + + /** + * Specify the modal label + */ + modalLabel?: string; + + /** + * Specify the ARIA label for the modal + */ + modalAriaLabel?: string; + + /** + * Specify the ARIA label for the close icon + * @default "Close the modal" + */ + iconDescription?: string; + + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Set to `true` for the primary button to be triggered when pressing "Enter" + * @default true + */ + shouldSubmitOnEnter?: boolean; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Set to `true` to prevent the modal from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLDivElement; +} + export default class Modal { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the modal - */ - size?: "xs" | "sm" | "lg"; - - /** - * Set to `true` to open the modal - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `true` to enable alert mode - * @default false - */ - alert?: boolean; - - /** - * Set to `true` to use the passive variant - * @default false - */ - passiveModal?: boolean; - - /** - * Specify the modal heading - */ - modalHeading?: string; - - /** - * Specify the modal label - */ - modalLabel?: string; - - /** - * Specify the ARIA label for the modal - */ - modalAriaLabel?: string; - - /** - * Specify the ARIA label for the close icon - * @default "Close the modal" - */ - iconDescription?: string; - - /** - * Set to `true` if the modal contains form elements - * @default false - */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; - - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Set to `true` for the primary button to be triggered when pressing "Enter" - * @default true - */ - shouldSubmitOnEnter?: boolean; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a selector to be focused when opening the modal - * @default "[data-modal-primary-focus]" - */ - selectorPrimaryFocus?: string; - - /** - * Set to `true` to prevent the modal from closing when clicking outside - * @default false - */ - preventCloseOnClickOutside?: boolean; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLDivElement; - }; - + $$prop_def: ModalProps; $$slot_def: { default: {}; - label: {}; heading: {}; + label: {}; }; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts index 1dd9e4db..d1a86cda 100644 --- a/types/MultiSelect/MultiSelect.d.ts +++ b/types/MultiSelect/MultiSelect.d.ts @@ -9,151 +9,153 @@ interface MultiSelectItem { text: MultiSelectItemText; } +export interface MultiSelectProps extends svelte.JSX.HTMLAttributes { + /** + * Set the multiselect items + * @default [] + */ + items?: MultiSelectItem[]; + + /** + * Override the display of a multiselect item + * @default (item) => item.text || item.id + */ + itemToString?: (item: MultiSelectItem) => string; + + /** + * Set the selected ids + * @default [] + */ + selectedIds?: MultiSelectItemId[]; + + /** + * Specify the multiselect value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ + size?: "sm" | "lg" | "xl"; + + /** + * Specify the type of multiselect + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the selection feedback after selecting items + * @default "top-after-reopen" + */ + selectionFeedback?: "top" | "fixed" | "top-after-reopen"; + + /** + * Set to `true` to disable the dropdown + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to filter items + * @default false + */ + filterable?: boolean; + + /** + * Override the filtering logic + * The default filtering is an exact string comparison + * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) + */ + filterItem?: (item: MultiSelectItem, value: string) => string; + + /** + * Set to `true` to open the dropdown + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the locale + * @default "en" + */ + locale?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Override the sorting logic + * The default sorting compare the item text value + * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) + */ + sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Specify the title text + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to pass the item to `itemToString` in the checkbox + * @default false + */ + useTitleInItem?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the list box label + * @default "" + */ + label?: string; + + /** + * Set an id for the list box component + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the select + */ + name?: string; +} + export default class MultiSelect { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the multiselect items - * @default [] - */ - items?: MultiSelectItem[]; - - /** - * Override the display of a multiselect item - * @default (item) => item.text || item.id - */ - itemToString?: (item: MultiSelectItem) => string; - - /** - * Set the selected ids - * @default [] - */ - selectedIds?: MultiSelectItemId[]; - - /** - * Specify the multiselect value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "lg" | "xl"; - - /** - * Specify the type of multiselect - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Specify the selection feedback after selecting items - * @default "top-after-reopen" - */ - selectionFeedback?: "top" | "fixed" | "top-after-reopen"; - - /** - * Set to `true` to disable the dropdown - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to filter items - * @default false - */ - filterable?: boolean; - - /** - * Override the filtering logic - * The default filtering is an exact string comparison - * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) - */ - filterItem?: (item: MultiSelectItem, value: string) => string; - - /** - * Set to `true` to open the dropdown - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Override the sorting logic - * The default sorting compare the item text value - * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) - */ - sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Specify the title text - * @default "" - */ - titleText?: string; - - /** - * Set to `true` to pass the item to `itemToString` in the checkbox - * @default false - */ - useTitleInItem?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the list box label - * @default "" - */ - label?: string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the select - */ - name?: string; - }; - + $$prop_def: MultiSelectProps; $$slot_def: {}; $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; diff --git a/types/Notification/InlineNotification.d.ts b/types/Notification/InlineNotification.d.ts index 54a96b07..3c625396 100644 --- a/types/Notification/InlineNotification.d.ts +++ b/types/Notification/InlineNotification.d.ts @@ -1,62 +1,63 @@ /// +export interface InlineNotificationProps extends svelte.JSX.HTMLAttributes { + /** + * Set the type of notification + * @default "inline" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the kind of notification + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; +} + export default class InlineNotification { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the type of notification - * @default "inline" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - }; - + $$prop_def: InlineNotificationProps; $$slot_def: { default: {}; actions: {}; diff --git a/types/Notification/NotificationActionButton.d.ts b/types/Notification/NotificationActionButton.d.ts index 86fc5a36..10ea1deb 100644 --- a/types/Notification/NotificationActionButton.d.ts +++ b/types/Notification/NotificationActionButton.d.ts @@ -1,8 +1,9 @@ /// -export default class NotificationActionButton { - $$prop_def: {}; +export interface NotificationActionButtonProps {} +export default class NotificationActionButton { + $$prop_def: NotificationActionButtonProps; $$slot_def: { default: {}; }; diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts index 2f526c01..a3b7c44d 100644 --- a/types/Notification/NotificationButton.d.ts +++ b/types/Notification/NotificationButton.d.ts @@ -1,30 +1,31 @@ /// +export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + renderIcon?: import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the title of the icon + */ + title?: string; + + /** + * Specify the ARIA label for the icon + * @default "Close icon" + */ + iconDescription?: string; +} + export default class NotificationButton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - renderIcon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the title of the icon - */ - title?: string; - - /** - * Specify the ARIA label for the icon - * @default "Close icon" - */ - iconDescription?: string; - }; - + $$prop_def: NotificationButtonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Notification/NotificationIcon.d.ts b/types/Notification/NotificationIcon.d.ts index f391d511..1441aab4 100644 --- a/types/Notification/NotificationIcon.d.ts +++ b/types/Notification/NotificationIcon.d.ts @@ -1,26 +1,27 @@ /// +export interface NotificationIconProps { + /** + * Specify the kind of notification icon + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; +} + export default class NotificationIcon { - $$prop_def: { - /** - * Specify the kind of notification icon - * @default "error" - */ - kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; - - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - }; - + $$prop_def: NotificationIconProps; $$slot_def: {}; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/Notification/NotificationTextDetails.d.ts b/types/Notification/NotificationTextDetails.d.ts index 3445a04f..0bc3f7a2 100644 --- a/types/Notification/NotificationTextDetails.d.ts +++ b/types/Notification/NotificationTextDetails.d.ts @@ -1,32 +1,33 @@ /// +export interface NotificationTextDetailsProps { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; +} + export default class NotificationTextDetails { - $$prop_def: { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; - }; - + $$prop_def: NotificationTextDetailsProps; $$slot_def: { default: {}; }; diff --git a/types/Notification/ToastNotification.d.ts b/types/Notification/ToastNotification.d.ts index fd0436e8..1894d000 100644 --- a/types/Notification/ToastNotification.d.ts +++ b/types/Notification/ToastNotification.d.ts @@ -1,68 +1,69 @@ /// +export interface ToastNotificationProps extends svelte.JSX.HTMLAttributes { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the kind of notification + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; +} + export default class ToastNotification { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - }; - + $$prop_def: ToastNotificationProps; $$slot_def: { default: {}; }; diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts index 0eb5011e..89322970 100644 --- a/types/NumberInput/NumberInput.d.ts +++ b/types/NumberInput/NumberInput.d.ts @@ -2,131 +2,133 @@ type NumberInputTranslationId = "increment" | "decrement"; +export interface NumberInputProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the step increment + * @default 1 + */ + step?: number; + + /** + * Specify the maximum value + */ + max?: number; + + /** + * Specify the minimum value + */ + min?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` for the input to be read-only + * @default false + */ + readonly?: boolean; + + /** + * Set to `true` to enable the mobile variant + * @default false + */ + mobile?: boolean; + + /** + * Set to `true` to allow for an empty value + * @default false + */ + allowEmpty?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the increment icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + label?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: NumberInputTranslationId) => string; + + /** + * Default translation ids + * @constant + * @default { increment: "increment", decrement: "decrement", } + */ + translationIds?: { increment: "increment"; decrement: "decrement" }; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class NumberInput { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the step increment - * @default 1 - */ - step?: number; - - /** - * Specify the maximum value - */ - max?: number; - - /** - * Specify the minimum value - */ - min?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` for the input to be read-only - * @default false - */ - readonly?: boolean; - - /** - * Set to `true` to enable the mobile variant - * @default false - */ - mobile?: boolean; - - /** - * Set to `true` to allow for an empty value - * @default false - */ - allowEmpty?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the increment icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the label text - * @default "" - */ - label?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Override the default translation ids - * @default (id) => defaultTranslations[id] - */ - translateWithId?: (id: NumberInputTranslationId) => string; - - /** - * Default translation ids - * @constant - * @default { increment: "increment", decrement: "decrement", } - */ - translationIds?: { increment: "increment"; decrement: "decrement" }; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: NumberInputProps; $$slot_def: { label: {}; }; diff --git a/types/NumberInput/NumberInputSkeleton.d.ts b/types/NumberInput/NumberInputSkeleton.d.ts index 9761bb4d..63906cb4 100644 --- a/types/NumberInput/NumberInputSkeleton.d.ts +++ b/types/NumberInput/NumberInputSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class NumberInputSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; +export interface NumberInputSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; +} +export default class NumberInputSkeleton { + $$prop_def: NumberInputSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/OrderedList/OrderedList.d.ts b/types/OrderedList/OrderedList.d.ts index 840e4c07..2da61249 100644 --- a/types/OrderedList/OrderedList.d.ts +++ b/types/OrderedList/OrderedList.d.ts @@ -1,20 +1,21 @@ /// +export interface OrderedListProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + + /** + * Set to `true` to use native list styles + * @default false + */ + native?: boolean; +} + export default class OrderedList { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; - - /** - * Set to `true` to use native list styles - * @default false - */ - native?: boolean; - }; - + $$prop_def: OrderedListProps; $$slot_def: { default: {}; }; diff --git a/types/OverflowMenu/OverflowMenu.d.ts b/types/OverflowMenu/OverflowMenu.d.ts index fabd27dd..194995c0 100644 --- a/types/OverflowMenu/OverflowMenu.d.ts +++ b/types/OverflowMenu/OverflowMenu.d.ts @@ -1,75 +1,77 @@ /// +export interface OverflowMenuProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the size of the overflow menu + */ + size?: "sm" | "xl"; + + /** + * Specify the direction of the overflow menu relative to the button + * @default "bottom" + */ + direction?: "top" | "bottom"; + + /** + * Set to `true` to open the menu + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to flip the menu relative to the button + * @default false + */ + flipped?: boolean; + + /** + * Specify the menu options class + */ + menuOptionsClass?: string; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the icon class + */ + iconClass?: string; + + /** + * Specify the ARIA label for the icon + * @default "Open and close list of options" + */ + iconDescription?: string; + + /** + * Set an id for the button element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the trigger button element + * @default null + */ + buttonRef?: null | HTMLButtonElement; + + /** + * Obtain a reference to the overflow menu element + * @default null + */ + menuRef?: null | HTMLUListElement; +} + export default class OverflowMenu { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the size of the overflow menu - */ - size?: "sm" | "xl"; - - /** - * Specify the direction of the overflow menu relative to the button - * @default "bottom" - */ - direction?: "top" | "bottom"; - - /** - * Set to `true` to open the menu - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to flip the menu relative to the button - * @default false - */ - flipped?: boolean; - - /** - * Specify the menu options class - */ - menuOptionsClass?: string; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the icon class - */ - iconClass?: string; - - /** - * Specify the ARIA label for the icon - * @default "Open and close list of options" - */ - iconDescription?: string; - - /** - * Set an id for the button element - */ - id?: string; - - /** - * Obtain a reference to the trigger button element - * @default null - */ - buttonRef?: null | HTMLButtonElement; - - /** - * Obtain a reference to the overflow menu element - * @default null - */ - menuRef?: null | HTMLUListElement; - }; - + $$prop_def: OverflowMenuProps; $$slot_def: { default: {}; menu: {}; diff --git a/types/OverflowMenu/OverflowMenuItem.d.ts b/types/OverflowMenu/OverflowMenuItem.d.ts index e3270bf1..01062634 100644 --- a/types/OverflowMenu/OverflowMenuItem.d.ts +++ b/types/OverflowMenu/OverflowMenuItem.d.ts @@ -1,62 +1,64 @@ /// +export interface OverflowMenuItemProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the item text + * Alternatively, use the default slot for a custom element + * @default "Provide text" + */ + text?: string; + + /** + * Specify the `href` attribute if the item is a link + * @default "" + */ + href?: string; + + /** + * Set to `true` if the item should be focused when opening the menu + * @default false + */ + primaryFocus?: boolean; + + /** + * Set to `true` to disable the item + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to include a divider + * @default false + */ + hasDivider?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `false` to omit the button `title` attribute + * @default true + */ + requireTitle?: boolean; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLButtonElement; +} + export default class OverflowMenuItem { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the item text - * Alternatively, use the default slot for a custom element - * @default "Provide text" - */ - text?: string; - - /** - * Specify the `href` attribute if the item is a link - * @default "" - */ - href?: string; - - /** - * Set to `true` if the item should be focused when opening the menu - * @default false - */ - primaryFocus?: boolean; - - /** - * Set to `true` to disable the item - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to include a divider - * @default false - */ - hasDivider?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `false` to omit the button `title` attribute - * @default true - */ - requireTitle?: boolean; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLButtonElement; - }; - + $$prop_def: OverflowMenuItemProps; $$slot_def: { default: {}; }; diff --git a/types/Pagination/Pagination.d.ts b/types/Pagination/Pagination.d.ts index 0ff0c2b5..e0356a35 100644 --- a/types/Pagination/Pagination.d.ts +++ b/types/Pagination/Pagination.d.ts @@ -1,103 +1,105 @@ /// +export interface PaginationProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the current page index + * @default 1 + */ + page?: number; + + /** + * Specify the total number of items + * @default 0 + */ + totalItems?: number; + + /** + * Set to `true` to disable the pagination + * @default false + */ + disabled?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; + + /** + * Specify the items per page text + * @default "Items per page:" + */ + itemsPerPageText?: string; + + /** + * Override the item text + * @default (min, max) => `${min}–${max} items` + */ + itemText?: (min: number, max: number) => string; + + /** + * Override the item range text + * @default (min, max, total) => `${min}–${max} of ${total} items` + */ + itemRangeText?: (min: number, max: number, total: number) => string; + + /** + * Set to `true` to disable the page input + * @default false + */ + pageInputDisabled?: boolean; + + /** + * Set to `true` to disable the page size input + * @default false + */ + pageSizeInputDisabled?: boolean; + + /** + * Specify the number of items to display in a page + * @default 10 + */ + pageSize?: number; + + /** + * Specify the available page sizes + * @default [10] + */ + pageSizes?: number[]; + + /** + * Set to `true` if the number of pages is unknown + * @default false + */ + pagesUnknown?: boolean; + + /** + * Override the page text + * @default (page) => `page ${page}` + */ + pageText?: (page: number) => string; + + /** + * Override the page range text + * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}` + */ + pageRangeText?: (current: number, total: number) => string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class Pagination { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the current page index - * @default 1 - */ - page?: number; - - /** - * Specify the total number of items - * @default 0 - */ - totalItems?: number; - - /** - * Set to `true` to disable the pagination - * @default false - */ - disabled?: boolean; - - /** - * Specify the forward button text - * @default "Next page" - */ - forwardText?: string; - - /** - * Specify the backward button text - * @default "Previous page" - */ - backwardText?: string; - - /** - * Specify the items per page text - * @default "Items per page:" - */ - itemsPerPageText?: string; - - /** - * Override the item text - * @default (min, max) => `${min}–${max} items` - */ - itemText?: (min: number, max: number) => string; - - /** - * Override the item range text - * @default (min, max, total) => `${min}–${max} of ${total} items` - */ - itemRangeText?: (min: number, max: number, total: number) => string; - - /** - * Set to `true` to disable the page input - * @default false - */ - pageInputDisabled?: boolean; - - /** - * Set to `true` to disable the page size input - * @default false - */ - pageSizeInputDisabled?: boolean; - - /** - * Specify the number of items to display in a page - * @default 10 - */ - pageSize?: number; - - /** - * Specify the available page sizes - * @default [10] - */ - pageSizes?: number[]; - - /** - * Set to `true` if the number of pages is unknown - * @default false - */ - pagesUnknown?: boolean; - - /** - * Override the page text - * @default (page) => `page ${page}` - */ - pageText?: (page: number) => string; - - /** - * Override the page range text - * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}` - */ - pageRangeText?: (current: number, total: number) => string; - - /** - * Set an id for the top-level element - */ - id?: string; - }; - + $$prop_def: PaginationProps; $$slot_def: {}; $on(eventname: "update", cb: (event: CustomEvent) => void): () => void; diff --git a/types/Pagination/PaginationSkeleton.d.ts b/types/Pagination/PaginationSkeleton.d.ts index 3947119d..c6512a99 100644 --- a/types/Pagination/PaginationSkeleton.d.ts +++ b/types/Pagination/PaginationSkeleton.d.ts @@ -1,8 +1,9 @@ /// -export default class PaginationSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface PaginationSkeletonProps extends svelte.JSX.HTMLAttributes {} +export default class PaginationSkeleton { + $$prop_def: PaginationSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/PaginationNav/PaginationNav.d.ts b/types/PaginationNav/PaginationNav.d.ts index 9f448952..faaa7180 100644 --- a/types/PaginationNav/PaginationNav.d.ts +++ b/types/PaginationNav/PaginationNav.d.ts @@ -1,44 +1,45 @@ /// +export interface PaginationNavProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the current page index + * @default 0 + */ + page?: number; + + /** + * Specify the total number of pages + * @default 10 + */ + total?: number; + + /** + * Specify the total number of pages to show + * @default 10 + */ + shown?: number; + + /** + * Set to `true` to loop the navigation + * @default false + */ + loop?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; +} + export default class PaginationNav { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the current page index - * @default 0 - */ - page?: number; - - /** - * Specify the total number of pages - * @default 10 - */ - total?: number; - - /** - * Specify the total number of pages to show - * @default 10 - */ - shown?: number; - - /** - * Set to `true` to loop the navigation - * @default false - */ - loop?: boolean; - - /** - * Specify the forward button text - * @default "Next page" - */ - forwardText?: string; - - /** - * Specify the backward button text - * @default "Previous page" - */ - backwardText?: string; - }; - + $$prop_def: PaginationNavProps; $$slot_def: {}; $on(eventname: "click:button--previous", cb: (event: CustomEvent) => void): () => void; diff --git a/types/ProgressIndicator/ProgressIndicator.d.ts b/types/ProgressIndicator/ProgressIndicator.d.ts index 5caab63d..0241fab3 100644 --- a/types/ProgressIndicator/ProgressIndicator.d.ts +++ b/types/ProgressIndicator/ProgressIndicator.d.ts @@ -1,32 +1,33 @@ /// +export interface ProgressIndicatorProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the current step index + * @default 0 + */ + currentIndex?: number; + + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Set to `true` to specify whether the progress steps should be split equally in size in the div + * @default false + */ + spaceEqually?: boolean; + + /** + * Set to `true` to prevent updating `currentIndex` + * @default false + */ + preventChangeOnClick?: boolean; +} + export default class ProgressIndicator { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the current step index - * @default 0 - */ - currentIndex?: number; - - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Set to `true` to specify whether the progress steps should be split equally in size in the div - * @default false - */ - spaceEqually?: boolean; - - /** - * Set to `true` to prevent updating `currentIndex` - * @default false - */ - preventChangeOnClick?: boolean; - }; - + $$prop_def: ProgressIndicatorProps; $$slot_def: { default: {}; }; diff --git a/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts b/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts index c646df9a..d77c1aa5 100644 --- a/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts +++ b/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts @@ -1,20 +1,21 @@ /// +export interface ProgressIndicatorSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Specify the number of steps to render + * @default 4 + */ + count?: number; +} + export default class ProgressIndicatorSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Specify the number of steps to render - * @default 4 - */ - count?: number; - }; - + $$prop_def: ProgressIndicatorSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/ProgressIndicator/ProgressStep.d.ts b/types/ProgressIndicator/ProgressStep.d.ts index f56ccf9a..425ae4b2 100644 --- a/types/ProgressIndicator/ProgressStep.d.ts +++ b/types/ProgressIndicator/ProgressStep.d.ts @@ -1,55 +1,57 @@ /// +export interface ProgressStepProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` for the complete variant + * @default false + */ + complete?: boolean; + + /** + * Set to `true` to use the current variant + * @default false + */ + current?: boolean; + + /** + * Set to `true` to disable the progress step + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the step description + * @default "" + */ + description?: string; + + /** + * Specify the step label + * @default "" + */ + label?: string; + + /** + * Specify the step secondary label + * @default "" + */ + secondaryLabel?: string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class ProgressStep { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` for the complete variant - * @default false - */ - complete?: boolean; - - /** - * Set to `true` to use the current variant - * @default false - */ - current?: boolean; - - /** - * Set to `true` to disable the progress step - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the step description - * @default "" - */ - description?: string; - - /** - * Specify the step label - * @default "" - */ - label?: string; - - /** - * Specify the step secondary label - * @default "" - */ - secondaryLabel?: string; - - /** - * Set an id for the top-level element - */ - id?: string; - }; - + $$prop_def: ProgressStepProps; $$slot_def: { default: { props: { class: "bx--progress-label" } }; }; diff --git a/types/RadioButton/RadioButton.d.ts b/types/RadioButton/RadioButton.d.ts index 84402be5..ede21976 100644 --- a/types/RadioButton/RadioButton.d.ts +++ b/types/RadioButton/RadioButton.d.ts @@ -1,61 +1,63 @@ /// +export interface RadioButtonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the value of the radio button + * @default "" + */ + value?: string; + + /** + * Set to `true` to check the radio button + * @default false + */ + checked?: boolean; + + /** + * et to `true` to disable the radio button + * @default false + */ + disabled?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class RadioButton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the value of the radio button - * @default "" - */ - value?: string; - - /** - * Set to `true` to check the radio button - * @default false - */ - checked?: boolean; - - /** - * et to `true` to disable the radio button - * @default false - */ - disabled?: boolean; - - /** - * Specify the label position - * @default "right" - */ - labelPosition?: "right" | "left"; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: RadioButtonProps; $$slot_def: {}; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; diff --git a/types/RadioButton/RadioButtonSkeleton.d.ts b/types/RadioButton/RadioButtonSkeleton.d.ts index bf50fc5c..bb06a92f 100644 --- a/types/RadioButton/RadioButtonSkeleton.d.ts +++ b/types/RadioButton/RadioButtonSkeleton.d.ts @@ -1,8 +1,9 @@ /// -export default class RadioButtonSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface RadioButtonSkeletonProps extends svelte.JSX.HTMLAttributes {} +export default class RadioButtonSkeleton { + $$prop_def: RadioButtonSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/RadioButtonGroup/RadioButtonGroup.d.ts b/types/RadioButtonGroup/RadioButtonGroup.d.ts index 3f93e4a0..9166f83b 100644 --- a/types/RadioButtonGroup/RadioButtonGroup.d.ts +++ b/types/RadioButtonGroup/RadioButtonGroup.d.ts @@ -1,36 +1,37 @@ /// +export interface RadioButtonGroupProps extends svelte.JSX.HTMLAttributes { + /** + * Set the selected radio button value + */ + selected?: string; + + /** + * Set to `true` to disable the radio buttons + * @default false + */ + disabled?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the orientation of the radio buttons + * @default "horizontal" + */ + orientation?: "horizontal" | "vertical"; + + /** + * Set an id for the container div element + */ + id?: string; +} + export default class RadioButtonGroup { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the selected radio button value - */ - selected?: string; - - /** - * Set to `true` to disable the radio buttons - * @default false - */ - disabled?: boolean; - - /** - * Specify the label position - * @default "right" - */ - labelPosition?: "right" | "left"; - - /** - * Specify the orientation of the radio buttons - * @default "horizontal" - */ - orientation?: "horizontal" | "vertical"; - - /** - * Set an id for the container div element - */ - id?: string; - }; - + $$prop_def: RadioButtonGroupProps; $$slot_def: { default: {}; }; diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts index 8f936cb2..494e369d 100644 --- a/types/Search/Search.d.ts +++ b/types/Search/Search.d.ts @@ -1,90 +1,92 @@ /// +export interface SearchProps { + /** + * @default false + */ + small?: boolean; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the search input + * @default false + */ + disabled?: boolean; + + /** + * Specify the value of the search input + * @default "" + */ + value?: string; + + /** + * Specify the `type` attribute of the search input + * @default "text" + */ + type?: string; + + /** + * Specify the `placeholder` attribute of the search input + * @default "Search..." + */ + placeholder?: string; + + /** + * Specify the `autocomplete` attribute + * @default "off" + */ + autocomplete?: "on" | "off"; + + /** + * Set to `true` to auto focus the search element + * @default false + */ + autofocus?: boolean; + + /** + * Specify the close button label text + * @default "Clear search input" + */ + closeButtonLabelText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class Search { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the search input - * @default false - */ - disabled?: boolean; - - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Specify the `type` attribute of the search input - * @default "text" - */ - type?: string; - - /** - * Specify the `placeholder` attribute of the search input - * @default "Search..." - */ - placeholder?: string; - - /** - * Specify the `autocomplete` attribute - * @default "off" - */ - autocomplete?: "on" | "off"; - - /** - * Set to `true` to auto focus the search element - * @default false - */ - autofocus?: boolean; - - /** - * Specify the close button label text - * @default "Clear search input" - */ - closeButtonLabelText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: SearchProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Search/SearchSkeleton.d.ts b/types/Search/SearchSkeleton.d.ts index e08b82de..7b9ffe3b 100644 --- a/types/Search/SearchSkeleton.d.ts +++ b/types/Search/SearchSkeleton.d.ts @@ -1,19 +1,20 @@ /// +export interface SearchSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * @default false + */ + small?: boolean; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; +} + export default class SearchSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; - }; - + $$prop_def: SearchSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts index e7792308..a078fad3 100644 --- a/types/Select/Select.d.ts +++ b/types/Select/Select.d.ts @@ -1,88 +1,90 @@ /// +export interface SelectProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the selected item value + */ + selected?: undefined; + + /** + * Set the size of the select input + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the select element + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the select element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the select element + */ + name?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Set to `true` to not render a label + * @default false + */ + noLabel?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Obtain a reference to the select HTML element + * @default null + */ + ref?: null | HTMLSelectElement; +} + export default class Select { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the selected item value - */ - selected?: undefined; - - /** - * Set the size of the select input - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the select element - * @default false - */ - disabled?: boolean; - - /** - * Set an id for the select element - */ - id?: string; - - /** - * Specify a name attribute for the select element - */ - name?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Set to `true` to not render a label - * @default false - */ - noLabel?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Obtain a reference to the select HTML element - * @default null - */ - ref?: null | HTMLSelectElement; - }; - + $$prop_def: SelectProps; $$slot_def: { default: {}; }; diff --git a/types/Select/SelectItem.d.ts b/types/Select/SelectItem.d.ts index c2d925dc..b08ba976 100644 --- a/types/Select/SelectItem.d.ts +++ b/types/Select/SelectItem.d.ts @@ -1,32 +1,33 @@ /// +export interface SelectItemProps { + /** + * Specify the option value + * @default "" + */ + value?: string; + + /** + * Specify the option text + * @default "" + */ + text?: string; + + /** + * Set to `true` to hide the option + * @default false + */ + hidden?: boolean; + + /** + * Set to `true` to disable the option + * @default false + */ + disabled?: boolean; +} + export default class SelectItem { - $$prop_def: { - /** - * Specify the option value - * @default "" - */ - value?: string; - - /** - * Specify the option text - * @default "" - */ - text?: string; - - /** - * Set to `true` to hide the option - * @default false - */ - hidden?: boolean; - - /** - * Set to `true` to disable the option - * @default false - */ - disabled?: boolean; - }; - + $$prop_def: SelectItemProps; $$slot_def: {}; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/Select/SelectItemGroup.d.ts b/types/Select/SelectItemGroup.d.ts index fafae7e0..8e47c5db 100644 --- a/types/Select/SelectItemGroup.d.ts +++ b/types/Select/SelectItemGroup.d.ts @@ -1,20 +1,21 @@ /// +export interface SelectItemGroupProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to disable the optgroup element + * @default false + */ + disabled?: boolean; + + /** + * Specify the label attribute of the optgroup element + * @default "Provide label" + */ + label?: string; +} + export default class SelectItemGroup { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to disable the optgroup element - * @default false - */ - disabled?: boolean; - - /** - * Specify the label attribute of the optgroup element - * @default "Provide label" - */ - label?: string; - }; - + $$prop_def: SelectItemGroupProps; $$slot_def: { default: {}; }; diff --git a/types/Select/SelectSkeleton.d.ts b/types/Select/SelectSkeleton.d.ts index a8924f96..39ba59ec 100644 --- a/types/Select/SelectSkeleton.d.ts +++ b/types/Select/SelectSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class SelectSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; +export interface SelectSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; +} +export default class SelectSkeleton { + $$prop_def: SelectSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts index 369d2597..378ab06c 100644 --- a/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts +++ b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts @@ -1,8 +1,9 @@ /// -export default class SkeletonPlaceholder { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface SkeletonPlaceholderProps extends svelte.JSX.HTMLAttributes {} +export default class SkeletonPlaceholder { + $$prop_def: SkeletonPlaceholderProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/SkeletonText/SkeletonText.d.ts b/types/SkeletonText/SkeletonText.d.ts index 4fddde79..d9a83b47 100644 --- a/types/SkeletonText/SkeletonText.d.ts +++ b/types/SkeletonText/SkeletonText.d.ts @@ -1,32 +1,33 @@ /// +export interface SkeletonTextProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the number of lines to render + * @default 3 + */ + lines?: number; + + /** + * Set to `true` to use the heading size variant + * @default false + */ + heading?: boolean; + + /** + * Set to `true` to use the paragraph size variant + * @default false + */ + paragraph?: boolean; + + /** + * Specify the width of the text (% or px) + * @default "100%" + */ + width?: string; +} + export default class SkeletonText { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the number of lines to render - * @default 3 - */ - lines?: number; - - /** - * Set to `true` to use the heading size variant - * @default false - */ - heading?: boolean; - - /** - * Set to `true` to use the paragraph size variant - * @default false - */ - paragraph?: boolean; - - /** - * Specify the width of the text (% or px) - * @default "100%" - */ - width?: string; - }; - + $$prop_def: SkeletonTextProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Slider/Slider.d.ts b/types/Slider/Slider.d.ts index b78b1c2e..e360a07a 100644 --- a/types/Slider/Slider.d.ts +++ b/types/Slider/Slider.d.ts @@ -1,109 +1,111 @@ /// +export interface SliderProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the value of the slider + * @default 0 + */ + value?: number; + + /** + * Set the maximum slider value + * @default 100 + */ + max?: number; + + /** + * Specify the label for the max value + * @default "" + */ + maxLabel?: string; + + /** + * Set the minimum slider value + * @default 0 + */ + min?: number; + + /** + * Specify the label for the min value + * @default "" + */ + minLabel?: string; + + /** + * Set the step value + * @default 1 + */ + step?: number; + + /** + * Set the step multiplier value + * @default 4 + */ + stepMultiplier?: number; + + /** + * Set to `true` to require a value + * @default false + */ + required?: boolean; + + /** + * Specify the input type + * @default "number" + */ + inputType?: string; + + /** + * Set to `true` to disable the slider + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to hide the text input + * @default false + */ + hideTextInput?: boolean; + + /** + * Set an id for the slider div element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set a name for the slider element + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLDivElement; +} + export default class Slider { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the value of the slider - * @default 0 - */ - value?: number; - - /** - * Set the maximum slider value - * @default 100 - */ - max?: number; - - /** - * Specify the label for the max value - * @default "" - */ - maxLabel?: string; - - /** - * Set the minimum slider value - * @default 0 - */ - min?: number; - - /** - * Specify the label for the min value - * @default "" - */ - minLabel?: string; - - /** - * Set the step value - * @default 1 - */ - step?: number; - - /** - * Set the step multiplier value - * @default 4 - */ - stepMultiplier?: number; - - /** - * Set to `true` to require a value - * @default false - */ - required?: boolean; - - /** - * Specify the input type - * @default "number" - */ - inputType?: string; - - /** - * Set to `true` to disable the slider - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to hide the text input - * @default false - */ - hideTextInput?: boolean; - - /** - * Set an id for the slider div element - */ - id?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set a name for the slider element - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - + $$prop_def: SliderProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Slider/SliderSkeleton.d.ts b/types/Slider/SliderSkeleton.d.ts index 12c9a388..f46c18b9 100644 --- a/types/Slider/SliderSkeleton.d.ts +++ b/types/Slider/SliderSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class SliderSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; +export interface SliderSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; +} +export default class SliderSkeleton { + $$prop_def: SliderSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/StructuredList/StructuredList.d.ts b/types/StructuredList/StructuredList.d.ts index 9010508d..e67a46f7 100644 --- a/types/StructuredList/StructuredList.d.ts +++ b/types/StructuredList/StructuredList.d.ts @@ -1,25 +1,26 @@ /// +export interface StructuredListProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the selected structured list row value + */ + selected?: string; + + /** + * Set to `true` to use the bordered variant + * @default false + */ + border?: boolean; + + /** + * Set to `true` to use the selection variant + * @default false + */ + selection?: boolean; +} + export default class StructuredList { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the selected structured list row value - */ - selected?: string; - - /** - * Set to `true` to use the bordered variant - * @default false - */ - border?: boolean; - - /** - * Set to `true` to use the selection variant - * @default false - */ - selection?: boolean; - }; - + $$prop_def: StructuredListProps; $$slot_def: { default: {}; }; diff --git a/types/StructuredList/StructuredListBody.d.ts b/types/StructuredList/StructuredListBody.d.ts index 6511b0d0..4efa751d 100644 --- a/types/StructuredList/StructuredListBody.d.ts +++ b/types/StructuredList/StructuredListBody.d.ts @@ -1,8 +1,9 @@ /// -export default class StructuredListBody { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface StructuredListBodyProps extends svelte.JSX.HTMLAttributes {} +export default class StructuredListBody { + $$prop_def: StructuredListBodyProps; $$slot_def: { default: {}; }; diff --git a/types/StructuredList/StructuredListCell.d.ts b/types/StructuredList/StructuredListCell.d.ts index bb3ce0f4..f0745595 100644 --- a/types/StructuredList/StructuredListCell.d.ts +++ b/types/StructuredList/StructuredListCell.d.ts @@ -1,20 +1,21 @@ /// +export interface StructuredListCellProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use as a header + * @default false + */ + head?: boolean; + + /** + * Set to `true` to prevent wrapping + * @default false + */ + noWrap?: boolean; +} + export default class StructuredListCell { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use as a header - * @default false - */ - head?: boolean; - - /** - * Set to `true` to prevent wrapping - * @default false - */ - noWrap?: boolean; - }; - + $$prop_def: StructuredListCellProps; $$slot_def: { default: {}; }; diff --git a/types/StructuredList/StructuredListHead.d.ts b/types/StructuredList/StructuredListHead.d.ts index 247bf484..145b8baa 100644 --- a/types/StructuredList/StructuredListHead.d.ts +++ b/types/StructuredList/StructuredListHead.d.ts @@ -1,8 +1,9 @@ /// -export default class StructuredListHead { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface StructuredListHeadProps extends svelte.JSX.HTMLAttributes {} +export default class StructuredListHead { + $$prop_def: StructuredListHeadProps; $$slot_def: { default: {}; }; diff --git a/types/StructuredList/StructuredListInput.d.ts b/types/StructuredList/StructuredListInput.d.ts index 75ac8264..2844ea76 100644 --- a/types/StructuredList/StructuredListInput.d.ts +++ b/types/StructuredList/StructuredListInput.d.ts @@ -1,43 +1,45 @@ /// +export interface StructuredListInputProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to check the input + * @default false + */ + checked?: boolean; + + /** + * Specify the title of the input + * @default "title" + */ + title?: string; + + /** + * Specify the value of the input + * @default "value" + */ + value?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class StructuredListInput { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to check the input - * @default false - */ - checked?: boolean; - - /** - * Specify the title of the input - * @default "title" - */ - title?: string; - - /** - * Specify the value of the input - * @default "value" - */ - value?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: StructuredListInputProps; $$slot_def: {}; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/StructuredList/StructuredListRow.d.ts b/types/StructuredList/StructuredListRow.d.ts index d66bacf9..33071469 100644 --- a/types/StructuredList/StructuredListRow.d.ts +++ b/types/StructuredList/StructuredListRow.d.ts @@ -1,26 +1,27 @@ /// +export interface StructuredListRowProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use as a header + * @default false + */ + head?: boolean; + + /** + * Set to `true` to render a label slot + * @default false + */ + label?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; +} + export default class StructuredListRow { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use as a header - * @default false - */ - head?: boolean; - - /** - * Set to `true` to render a label slot - * @default false - */ - label?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - }; - + $$prop_def: StructuredListRowProps; $$slot_def: { default: {}; }; diff --git a/types/StructuredList/StructuredListSkeleton.d.ts b/types/StructuredList/StructuredListSkeleton.d.ts index 06029486..63fa81ae 100644 --- a/types/StructuredList/StructuredListSkeleton.d.ts +++ b/types/StructuredList/StructuredListSkeleton.d.ts @@ -1,20 +1,21 @@ /// +export interface StructuredListSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set to `true` to use the bordered variant + * @default false + */ + border?: boolean; +} + export default class StructuredListSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set to `true` to use the bordered variant - * @default false - */ - border?: boolean; - }; - + $$prop_def: StructuredListSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Tabs/Tab.d.ts b/types/Tabs/Tab.d.ts index 65378f14..04585573 100644 --- a/types/Tabs/Tab.d.ts +++ b/types/Tabs/Tab.d.ts @@ -1,44 +1,46 @@ /// +export interface TabProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the tab label + * Alternatively, use the default slot (e.g. Label) + * @default "" + */ + label?: string; + + /** + * Specify the href attribute + * @default "#" + */ + href?: string; + + /** + * Set to `true` to disable the tab + * @default false + */ + disabled?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the anchor HTML element + * @default null + */ + ref?: null | HTMLAnchorElement; +} + export default class Tab { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the tab label - * Alternatively, use the default slot (e.g. Label) - * @default "" - */ - label?: string; - - /** - * Specify the href attribute - * @default "#" - */ - href?: string; - - /** - * Set to `true` to disable the tab - * @default false - */ - disabled?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the anchor HTML element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - + $$prop_def: TabProps; $$slot_def: { default: {}; }; diff --git a/types/Tabs/TabContent.d.ts b/types/Tabs/TabContent.d.ts index 0deb1a25..73ace54e 100644 --- a/types/Tabs/TabContent.d.ts +++ b/types/Tabs/TabContent.d.ts @@ -1,13 +1,15 @@ /// -export default class TabContent { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set an id for the top-level element - */ - id?: string; - }; +export interface TabContentProps extends svelte.JSX.HTMLAttributes { + /** + * Set an id for the top-level element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} +export default class TabContent { + $$prop_def: TabContentProps; $$slot_def: { default: {}; }; diff --git a/types/Tabs/Tabs.d.ts b/types/Tabs/Tabs.d.ts index acde5530..48eafc01 100644 --- a/types/Tabs/Tabs.d.ts +++ b/types/Tabs/Tabs.d.ts @@ -1,32 +1,33 @@ /// +export interface TabsProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the selected tab index + * @default 0 + */ + selected?: number; + + /** + * Specify the type of tabs + * @default "default" + */ + type?: "default" | "container"; + + /** + * Specify the ARIA label for the chevron icon + * @default "Show menu options" + */ + iconDescription?: string; + + /** + * Specify the tab trigger href attribute + * @default "#" + */ + triggerHref?: string; +} + export default class Tabs { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the selected tab index - * @default 0 - */ - selected?: number; - - /** - * Specify the type of tabs - * @default "default" - */ - type?: "default" | "container"; - - /** - * Specify the ARIA label for the chevron icon - * @default "Show menu options" - */ - iconDescription?: string; - - /** - * Specify the tab trigger href attribute - * @default "#" - */ - triggerHref?: string; - }; - + $$prop_def: TabsProps; $$slot_def: { default: {}; content: {}; diff --git a/types/Tabs/TabsSkeleton.d.ts b/types/Tabs/TabsSkeleton.d.ts index d1a1deca..78d6bd9d 100644 --- a/types/Tabs/TabsSkeleton.d.ts +++ b/types/Tabs/TabsSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class TabsSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the number of tabs to render - * @default 4 - */ - count?: number; - }; +export interface TabsSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the number of tabs to render + * @default 4 + */ + count?: number; +} +export default class TabsSkeleton { + $$prop_def: TabsSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts index 1aac8261..11ee667c 100644 --- a/types/Tag/Tag.d.ts +++ b/types/Tag/Tag.d.ts @@ -1,53 +1,55 @@ /// +export interface TagProps { + /** + * Specify the type of tag + */ + type?: + | "red" + | "magenta" + | "purple" + | "blue" + | "cyan" + | "teal" + | "green" + | "gray" + | "cool-gray" + | "warm-gray" + | "high-contrast"; + + /** + * Set to `true` to use filterable variant + * @default false + */ + filter?: boolean; + + /** + * Set to `true` to disable a filterable tag + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set the title for the close button in a filterable tag + * @default "Clear filter" + */ + title?: string; + + /** + * Set an id for the filterable tag + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class Tag { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the type of tag - */ - type?: - | "red" - | "magenta" - | "purple" - | "blue" - | "cyan" - | "teal" - | "green" - | "gray" - | "cool-gray" - | "warm-gray" - | "high-contrast"; - - /** - * Set to `true` to use filterable variant - * @default false - */ - filter?: boolean; - - /** - * Set to `true` to disable a filterable tag - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set the title for the close button in a filterable tag - * @default "Clear filter" - */ - title?: string; - - /** - * Set an id for the filterable tag - */ - id?: string; - }; - + $$prop_def: TagProps; $$slot_def: { default: { props: { class: "bx--tag__label" } }; }; diff --git a/types/Tag/TagSkeleton.d.ts b/types/Tag/TagSkeleton.d.ts index 326858a7..09ef38f2 100644 --- a/types/Tag/TagSkeleton.d.ts +++ b/types/Tag/TagSkeleton.d.ts @@ -1,8 +1,9 @@ /// -export default class TagSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & {}; +export interface TagSkeletonProps extends svelte.JSX.HTMLAttributes {} +export default class TagSkeleton { + $$prop_def: TagSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/TextArea/TextArea.d.ts b/types/TextArea/TextArea.d.ts index 1b943998..467eac3b 100644 --- a/types/TextArea/TextArea.d.ts +++ b/types/TextArea/TextArea.d.ts @@ -1,90 +1,92 @@ /// +export interface TextAreaProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the textarea value + * @default "" + */ + value?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the number of cols + * @default 50 + */ + cols?: number; + + /** + * Specify the number of rows + * @default 4 + */ + rows?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the text for the invalid state + * @default "" + */ + invalidText?: string; + + /** + * Set an id for the textarea element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the textarea HTML element + * @default null + */ + ref?: null | HTMLTextAreaElement; +} + export default class TextArea { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the textarea value - * @default "" - */ - value?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the number of cols - * @default 50 - */ - cols?: number; - - /** - * Specify the number of rows - * @default 4 - */ - rows?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the text for the invalid state - * @default "" - */ - invalidText?: string; - - /** - * Set an id for the textarea element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the textarea HTML element - * @default null - */ - ref?: null | HTMLTextAreaElement; - }; - + $$prop_def: TextAreaProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/TextArea/TextAreaSkeleton.d.ts b/types/TextArea/TextAreaSkeleton.d.ts index 5be5edc6..996f4c5d 100644 --- a/types/TextArea/TextAreaSkeleton.d.ts +++ b/types/TextArea/TextAreaSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class TextAreaSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - }; +export interface TextAreaSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; +} +export default class TextAreaSkeleton { + $$prop_def: TextAreaSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts index cd9a40ff..56f27b0c 100644 --- a/types/TextInput/PasswordInput.d.ts +++ b/types/TextInput/PasswordInput.d.ts @@ -1,111 +1,113 @@ /// +export interface PasswordInputProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the input type + * @default "password" + */ + type?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the hide password label text + * @default "Hide password" + */ + hidePasswordLabel?: string; + + /** + * Specify the show password label text + * @default "Show password" + */ + showPasswordLabel?: string; + + /** + * Set the alignment of the tooltip relative to the icon + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Set the position of the tooltip relative to the icon + */ + tooltipPosition?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the text for the invalid state + * @default "" + */ + invalidText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class PasswordInput { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the input type - * @default "password" - */ - type?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the hide password label text - * @default "Hide password" - */ - hidePasswordLabel?: string; - - /** - * Specify the show password label text - * @default "Show password" - */ - showPasswordLabel?: string; - - /** - * Set the alignment of the tooltip relative to the icon - */ - tooltipAlignment?: "start" | "center" | "end"; - - /** - * Set the position of the tooltip relative to the icon - */ - tooltipPosition?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the text for the invalid state - * @default "" - */ - invalidText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: PasswordInputProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.d.ts index f2cfb6cf..a1439280 100644 --- a/types/TextInput/TextInput.d.ts +++ b/types/TextInput/TextInput.d.ts @@ -1,113 +1,115 @@ /// +export interface TextInputProps extends svelte.JSX.HTMLAttributes { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the input type + * @default "" + */ + type?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Set to `true` to mark the field as required + * @default false + */ + required?: boolean; + + /** + * Set to `true` to use inline version + * @default false + */ + inline?: boolean; +} + export default class TextInput { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the input type - * @default "" - */ - type?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set to `true` to indicate an warning state - * @default false - */ - warn?: boolean; - - /** - * Specify the warning state text - * @default "" - */ - warnText?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Set to `true` to mark the field as required - * @default false - */ - required?: boolean; - - /** - * Set to `true` to use inline version - * @default false - */ - inline?: boolean; - }; - + $$prop_def: TextInputProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/TextInput/TextInputSkeleton.d.ts b/types/TextInput/TextInputSkeleton.d.ts index 8d3e0daf..813af0ff 100644 --- a/types/TextInput/TextInputSkeleton.d.ts +++ b/types/TextInput/TextInputSkeleton.d.ts @@ -1,14 +1,15 @@ /// -export default class TextInputSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; +export interface TextInputSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; +} +export default class TextInputSkeleton { + $$prop_def: TextInputSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Tile/ClickableTile.d.ts b/types/Tile/ClickableTile.d.ts index 1f54c8e2..f4018bca 100644 --- a/types/Tile/ClickableTile.d.ts +++ b/types/Tile/ClickableTile.d.ts @@ -1,25 +1,26 @@ /// +export interface ClickableTileProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to click the tile + * @default false + */ + clicked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set the `href` + */ + href?: string; +} + export default class ClickableTile { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to click the tile - * @default false - */ - clicked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set the `href` - */ - href?: string; - }; - + $$prop_def: ClickableTileProps; $$slot_def: { default: {}; }; diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.d.ts index 46013a70..c5ffb7c0 100644 --- a/types/Tile/ExpandableTile.d.ts +++ b/types/Tile/ExpandableTile.d.ts @@ -1,61 +1,63 @@ /// +export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to expand the tile + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the max height of the tile (number of pixels) + * @default 0 + */ + tileMaxHeight?: number; + + /** + * Specify the padding of the tile (number of pixels) + * @default 0 + */ + tilePadding?: number; + + /** + * Specify the icon text of the collapsed tile + * @default "Interact to expand Tile" + */ + tileCollapsedIconText?: string; + + /** + * Specify the icon text of the expanded tile + * @default "Interact to collapse Tile" + */ + tileExpandedIconText?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the top-level div element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the top-level element + * @default null + */ + ref?: null | HTMLDivElement; +} + export default class ExpandableTile { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to expand the tile - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the max height of the tile (number of pixels) - * @default 0 - */ - tileMaxHeight?: number; - - /** - * Specify the padding of the tile (number of pixels) - * @default 0 - */ - tilePadding?: number; - - /** - * Specify the icon text of the collapsed tile - * @default "Interact to expand Tile" - */ - tileCollapsedIconText?: string; - - /** - * Specify the icon text of the expanded tile - * @default "Interact to collapse Tile" - */ - tileExpandedIconText?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the top-level div element - */ - id?: string; - - /** - * Obtain a reference to the top-level element - * @default null - */ - ref?: null | HTMLDivElement; - }; - + $$prop_def: ExpandableTileProps; $$slot_def: { above: {}; below: {}; diff --git a/types/Tile/RadioTile.d.ts b/types/Tile/RadioTile.d.ts index 03312c5a..54c3db2a 100644 --- a/types/Tile/RadioTile.d.ts +++ b/types/Tile/RadioTile.d.ts @@ -1,49 +1,51 @@ /// +export interface RadioTileProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to check the tile + * @default false + */ + checked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the value of the radio input + * @default "" + */ + value?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the ARIA label for the radio tile checkmark icon + * @default "Tile checkmark" + */ + iconDescription?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; +} + export default class RadioTile { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to check the tile - * @default false - */ - checked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the value of the radio input - * @default "" - */ - value?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the ARIA label for the radio tile checkmark icon - * @default "Tile checkmark" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - }; - + $$prop_def: RadioTileProps; $$slot_def: { default: {}; }; diff --git a/types/Tile/SelectableTile.d.ts b/types/Tile/SelectableTile.d.ts index a688f8a5..7d6b9f1a 100644 --- a/types/Tile/SelectableTile.d.ts +++ b/types/Tile/SelectableTile.d.ts @@ -1,61 +1,63 @@ /// +export interface SelectableTileProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to select the tile + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the title of the selectable tile + * @default "title" + */ + title?: string; + + /** + * Specify the value of the selectable tile + * @default "value" + */ + value?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the ARIA label for the selectable tile checkmark icon + * @default "Tile checkmark" + */ + iconDescription?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class SelectableTile { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to select the tile - * @default false - */ - selected?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the title of the selectable tile - * @default "title" - */ - title?: string; - - /** - * Specify the value of the selectable tile - * @default "value" - */ - value?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the ARIA label for the selectable tile checkmark icon - * @default "Tile checkmark" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: SelectableTileProps; $$slot_def: { default: {}; }; diff --git a/types/Tile/Tile.d.ts b/types/Tile/Tile.d.ts index 717b0be7..5930a798 100644 --- a/types/Tile/Tile.d.ts +++ b/types/Tile/Tile.d.ts @@ -1,14 +1,15 @@ /// -export default class Tile { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - }; +export interface TileProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; +} +export default class Tile { + $$prop_def: TileProps; $$slot_def: { default: {}; }; diff --git a/types/Tile/TileGroup.d.ts b/types/Tile/TileGroup.d.ts index 98b1b307..ca41bde8 100644 --- a/types/Tile/TileGroup.d.ts +++ b/types/Tile/TileGroup.d.ts @@ -1,25 +1,26 @@ /// +export interface TileGroupProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the selected tile value + */ + selected?: string; + + /** + * Set to `true` to disable the tile group + * @default false + */ + disabled?: boolean; + + /** + * Specify the legend text + * @default "" + */ + legend?: string; +} + export default class TileGroup { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the selected tile value - */ - selected?: string; - - /** - * Set to `true` to disable the tile group - * @default false - */ - disabled?: boolean; - - /** - * Specify the legend text - * @default "" - */ - legend?: string; - }; - + $$prop_def: TileGroupProps; $$slot_def: { default: {}; }; diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.d.ts index 77a53d4f..7429f046 100644 --- a/types/TimePicker/TimePicker.d.ts +++ b/types/TimePicker/TimePicker.d.ts @@ -1,95 +1,97 @@ /// +export interface TimePickerProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the input type + * @default "text" + */ + type?: string; + + /** + * Specify the input placeholder text + * @default "hh=mm" + */ + placeholder?: string; + + /** + * Specify the `pattern` attribute for the input element + * @default "(1[012]|[1-9]):[0-5][0-9](\\s)?" + */ + pattern?: string; + + /** + * Specify the `maxlength` input attribute + * @default 5 + */ + maxlength?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; +} + export default class TimePicker { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the input type - * @default "text" - */ - type?: string; - - /** - * Specify the input placeholder text - * @default "hh=mm" - */ - placeholder?: string; - - /** - * Specify the `pattern` attribute for the input element - * @default "(1[012]|[1-9]):[0-5][0-9](\\s)?" - */ - pattern?: string; - - /** - * Specify the `maxlength` input attribute - * @default 5 - */ - maxlength?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - + $$prop_def: TimePickerProps; $$slot_def: { default: {}; }; diff --git a/types/TimePicker/TimePickerSelect.d.ts b/types/TimePicker/TimePickerSelect.d.ts index e0218924..81f71f81 100644 --- a/types/TimePicker/TimePickerSelect.d.ts +++ b/types/TimePicker/TimePickerSelect.d.ts @@ -1,53 +1,55 @@ /// +export interface TimePickerSelectProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the select value + * @default "" + */ + value?: string; + + /** + * Set to `true` to disable the select + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the chevron icon + * @default "Open list of options" + */ + iconDescription?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * @default true + */ + hideLabel?: boolean; + + /** + * Set an id for the select element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the select element + */ + name?: string; + + /** + * Obtain a reference to the select HTML element + * @default null + */ + ref?: null | HTMLSelectElement; +} + export default class TimePickerSelect { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the select value - * @default "" - */ - value?: string; - - /** - * Set to `true` to disable the select - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the chevron icon - * @default "Open list of options" - */ - iconDescription?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * @default true - */ - hideLabel?: boolean; - - /** - * Set an id for the select element - */ - id?: string; - - /** - * Specify a name attribute for the select element - */ - name?: string; - - /** - * Obtain a reference to the select HTML element - * @default null - */ - ref?: null | HTMLSelectElement; - }; - + $$prop_def: TimePickerSelectProps; $$slot_def: { default: {}; }; diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts index d1631a85..74fb30e4 100644 --- a/types/Toggle/Toggle.d.ts +++ b/types/Toggle/Toggle.d.ts @@ -1,48 +1,50 @@ /// +export interface ToggleProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to toggle the checkbox input + * @default false + */ + toggled?: boolean; + + /** + * Set to `true` to disable checkbox input + * @default false + */ + disabled?: boolean; + + /** + * Specify the label for the untoggled state + * @default "Off" + */ + labelA?: string; + + /** + * Specify the label for the toggled state + * @default "On" + */ + labelB?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + */ + name?: string; +} + export default class Toggle { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to toggle the checkbox input - * @default false - */ - toggled?: boolean; - - /** - * Set to `true` to disable checkbox input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label for the untoggled state - * @default "Off" - */ - labelA?: string; - - /** - * Specify the label for the toggled state - * @default "On" - */ - labelB?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - */ - name?: string; - }; - + $$prop_def: ToggleProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Toggle/ToggleSkeleton.d.ts b/types/Toggle/ToggleSkeleton.d.ts index c4edef3a..c7901e77 100644 --- a/types/Toggle/ToggleSkeleton.d.ts +++ b/types/Toggle/ToggleSkeleton.d.ts @@ -1,19 +1,21 @@ /// +export interface ToggleSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class ToggleSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - }; - + $$prop_def: ToggleSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/ToggleSmall/ToggleSmall.d.ts b/types/ToggleSmall/ToggleSmall.d.ts index d03bb6f0..dc7be03e 100644 --- a/types/ToggleSmall/ToggleSmall.d.ts +++ b/types/ToggleSmall/ToggleSmall.d.ts @@ -1,48 +1,50 @@ /// +export interface ToggleSmallProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to toggle the checkbox input + * @default false + */ + toggled?: boolean; + + /** + * Set to `true` to disable checkbox input + * @default false + */ + disabled?: boolean; + + /** + * Specify the label for the untoggled state + * @default "Off" + */ + labelA?: string; + + /** + * Specify the label for the toggled state + * @default "On" + */ + labelB?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + */ + name?: string; +} + export default class ToggleSmall { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to toggle the checkbox input - * @default false - */ - toggled?: boolean; - - /** - * Set to `true` to disable checkbox input - * @default false - */ - disabled?: boolean; - - /** - * Specify the label for the untoggled state - * @default "Off" - */ - labelA?: string; - - /** - * Specify the label for the toggled state - * @default "On" - */ - labelB?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the checkbox input - */ - name?: string; - }; - + $$prop_def: ToggleSmallProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/ToggleSmall/ToggleSmallSkeleton.d.ts b/types/ToggleSmall/ToggleSmallSkeleton.d.ts index 7ee04409..21bcbe9f 100644 --- a/types/ToggleSmall/ToggleSmallSkeleton.d.ts +++ b/types/ToggleSmall/ToggleSmallSkeleton.d.ts @@ -1,19 +1,21 @@ /// +export interface ToggleSmallSkeletonProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + export default class ToggleSmallSkeleton { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - }; - + $$prop_def: ToggleSmallSkeletonProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.d.ts index a1026aaa..eb9cdf21 100644 --- a/types/Tooltip/Tooltip.d.ts +++ b/types/Tooltip/Tooltip.d.ts @@ -1,88 +1,91 @@ /// +export interface TooltipProps extends svelte.JSX.HTMLAttributes { + /** + * Set the direction of the tooltip relative to the button + * @default "bottom" + */ + direction?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to open the tooltip + * @default false + */ + open?: boolean; + + /** + * Set to `true` to hide the tooltip icon + * @default false + */ + hideIcon?: boolean; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the tooltip button + * Icon size must be 16px (e.g. `Add16`, `Task16`) + */ + icon?: import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the ARIA label for the tooltip button + * @default "" + */ + iconDescription?: string; + + /** + * Specify the icon name attribute + * @default "" + */ + iconName?: string; + + /** + * Set the button tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the tooltip + * @default "ccs-" + Math.random().toString(36) + */ + tooltipId?: string; + + /** + * Set an id for the tooltip button + * @default "ccs-" + Math.random().toString(36) + */ + triggerId?: string; + + /** + * Set the tooltip button text + * @default "" + */ + triggerText?: string; + + /** + * Obtain a reference to the trigger text HTML element + * @default null + */ + ref?: null | HTMLDivElement; + + /** + * Obtain a reference to the tooltip HTML element + * @default null + */ + refTooltip?: null | HTMLDivElement; + + /** + * Obtain a reference to the icon HTML element + * @default null + */ + refIcon?: null | HTMLDivElement; +} + export default class Tooltip { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set the direction of the tooltip relative to the button - * @default "bottom" - */ - direction?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to open the tooltip - * @default false - */ - open?: boolean; - - /** - * Set to `true` to hide the tooltip icon - * @default false - */ - hideIcon?: boolean; - - /** - * Specify the icon from `carbon-icons-svelte` to render for the tooltip button - * Icon size must be 16px (e.g. `Add16`, `Task16`) - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the ARIA label for the tooltip button - * @default "" - */ - iconDescription?: string; - - /** - * Specify the icon name attribute - * @default "" - */ - iconName?: string; - - /** - * Set the button tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the tooltip - */ - tooltipId?: string; - - /** - * Set an id for the tooltip button - */ - triggerId?: string; - - /** - * Set the tooltip button text - * @default "" - */ - triggerText?: string; - - /** - * Obtain a reference to the trigger text HTML element - * @default null - */ - ref?: null | HTMLElement; - - /** - * Obtain a reference to the tooltip HTML element - * @default null - */ - refTooltip?: null | HTMLElement; - - /** - * Obtain a reference to the icon HTML element - * @default null - */ - refIcon?: null | HTMLElement; - }; - + $$prop_def: TooltipProps; $$slot_def: { default: {}; - triggerText: {}; icon: {}; + triggerText: {}; }; $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; diff --git a/types/TooltipDefinition/TooltipDefinition.d.ts b/types/TooltipDefinition/TooltipDefinition.d.ts index a9bec238..e1788509 100644 --- a/types/TooltipDefinition/TooltipDefinition.d.ts +++ b/types/TooltipDefinition/TooltipDefinition.d.ts @@ -1,37 +1,39 @@ /// +export interface TooltipDefinitionProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the tooltip text + * @default "" + */ + tooltipText?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * @default "center" + */ + align?: "start" | "center" | "end"; + + /** + * Set the direction of the tooltip relative to the icon + * @default "bottom" + */ + direction?: "top" | "bottom"; + + /** + * Set an id for the tooltip div element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class TooltipDefinition { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the tooltip text - * @default "" - */ - tooltipText?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * @default "center" - */ - align?: "start" | "center" | "end"; - - /** - * Set the direction of the tooltip relative to the icon - * @default "bottom" - */ - direction?: "top" | "bottom"; - - /** - * Set an id for the tooltip div element - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: TooltipDefinitionProps; $$slot_def: { default: {}; tooltip: {}; diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts index 4d8b7492..265b1157 100644 --- a/types/TooltipIcon/TooltipIcon.d.ts +++ b/types/TooltipIcon/TooltipIcon.d.ts @@ -1,37 +1,39 @@ /// +export interface TooltipIconProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the tooltip text + * @default "" + */ + tooltipText?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * @default "center" + */ + align?: "start" | "center" | "end"; + + /** + * Set the direction of the tooltip relative to the icon + * @default "bottom" + */ + direction?: "top" | "right" | "bottom" | "left"; + + /** + * Set an id for the span element + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class TooltipIcon { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the tooltip text - * @default "" - */ - tooltipText?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * @default "center" - */ - align?: "start" | "center" | "end"; - - /** - * Set the direction of the tooltip relative to the icon - * @default "bottom" - */ - direction?: "top" | "right" | "bottom" | "left"; - - /** - * Set an id for the span element - */ - id?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: TooltipIconProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/Content.d.ts b/types/UIShell/Content.d.ts index f2956ecd..f4412ee7 100644 --- a/types/UIShell/Content.d.ts +++ b/types/UIShell/Content.d.ts @@ -1,14 +1,15 @@ /// -export default class Content { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the id for the main element - * @default "main-content" - */ - id?: string; - }; +export interface ContentProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the id for the main element + * @default "main-content" + */ + id?: string; +} +export default class Content { + $$prop_def: ContentProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts index ec195157..21d64958 100644 --- a/types/UIShell/GlobalHeader/Header.d.ts +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -1,52 +1,53 @@ /// +export interface HeaderProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `false` to hide the side nav by default + * @default true + */ + expandedByDefault?: boolean; + + /** + * Set to `true` to open the side nav + * @default false + */ + isSideNavOpen?: boolean; + + /** + * Specify the ARIA label for the header + */ + uiShellAriaLabel?: string; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the company name + */ + company?: string; + + /** + * Specify the platform name + * Alternatively, use the named slot "platform" (e.g. ...) + * @default "" + */ + platformName?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; +} + export default class Header { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `false` to hide the side nav by default - * @default true - */ - expandedByDefault?: boolean; - - /** - * Set to `true` to open the side nav - * @default false - */ - isSideNavOpen?: boolean; - - /** - * Specify the ARIA label for the header - */ - uiShellAriaLabel?: string; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the company name - */ - company?: string; - - /** - * Specify the platform name - * Alternatively, use the named slot "platform" (e.g. ...) - * @default "" - */ - platformName?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - + $$prop_def: HeaderProps; $$slot_def: { default: {}; - ["skip-to-content"]: {}; platform: {}; + ["skip-to-content"]: {}; }; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts index a588430a..7075079c 100644 --- a/types/UIShell/GlobalHeader/HeaderAction.d.ts +++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts @@ -1,31 +1,32 @@ /// +export interface HeaderActionProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to open the panel + * @default false + */ + isOpen?: boolean; + + /** + * Specify the icon props + */ + icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; + + /** + * Specify the text + * Alternatively, use the named slot "text" (e.g.
...
) + */ + text?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class HeaderAction { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to open the panel - * @default false - */ - isOpen?: boolean; - - /** - * Specify the icon props - */ - icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; - - /** - * Specify the text - * Alternatively, use the named slot "text" (e.g.
...
) - */ - text?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: HeaderActionProps; $$slot_def: { default: {}; text: {}; diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts index d69ea619..7d474c44 100644 --- a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts +++ b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts @@ -1,30 +1,31 @@ /// +export interface HeaderActionLinkProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the active state + * @default false + */ + linkIsActive?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the icon props + */ + icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; +} + export default class HeaderActionLink { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the active state - * @default false - */ - linkIsActive?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the icon props - */ - icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - + $$prop_def: HeaderActionLinkProps; $$slot_def: {}; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts index 6d6123a8..ece86ec0 100644 --- a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts +++ b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts @@ -1,14 +1,15 @@ /// -export default class HeaderActionSearch { - $$prop_def: { - /** - * Set to `true` to focus the search - * @default false - */ - searchIsActive?: boolean; - }; +export interface HeaderActionSearchProps { + /** + * Set to `true` to focus the search + * @default false + */ + searchIsActive?: boolean; +} +export default class HeaderActionSearch { + $$prop_def: HeaderActionSearchProps; $$slot_def: {}; $on(eventname: "inputSearch", cb: (event: CustomEvent<{ action: "search"; textInput: string }>) => void): () => void; diff --git a/types/UIShell/GlobalHeader/HeaderNav.d.ts b/types/UIShell/GlobalHeader/HeaderNav.d.ts index 0682d233..4afb7eca 100644 --- a/types/UIShell/GlobalHeader/HeaderNav.d.ts +++ b/types/UIShell/GlobalHeader/HeaderNav.d.ts @@ -1,13 +1,14 @@ /// -export default class HeaderNav { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - }; +export interface HeaderNavProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the ARIA label for the nav + */ + ariaLabel?: string; +} +export default class HeaderNav { + $$prop_def: HeaderNavProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts index c33b9d5f..a44bbe67 100644 --- a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts +++ b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts @@ -1,24 +1,25 @@ /// +export interface HeaderNavItemProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; +} + export default class HeaderNavItem { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - + $$prop_def: HeaderNavItemProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts index 68c03b0d..80903c90 100644 --- a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts +++ b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts @@ -1,37 +1,38 @@ /// +export interface HeaderNavMenuProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the `href` attribute + * @default "/" + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + /** + * Specify the ARIA label for the chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; +} + export default class HeaderNavMenu { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the `href` attribute - * @default "/" - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - - /** - * Specify the ARIA label for the chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; - }; - + $$prop_def: HeaderNavMenuProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts index d119f1d7..0c6d781e 100644 --- a/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts +++ b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts @@ -1,8 +1,9 @@ /// -export default class HeaderPanelDivider { - $$prop_def: {}; +export interface HeaderPanelDividerProps {} +export default class HeaderPanelDivider { + $$prop_def: HeaderPanelDividerProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts index 719fd36b..0723479f 100644 --- a/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts +++ b/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts @@ -1,19 +1,20 @@ /// +export interface HeaderPanelLinkProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; +} + export default class HeaderPanelLink { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - + $$prop_def: HeaderPanelLinkProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts index c9e0c119..5dbe3138 100644 --- a/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts +++ b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts @@ -1,8 +1,9 @@ /// -export default class HeaderPanelLinks { - $$prop_def: {}; +export interface HeaderPanelLinksProps {} +export default class HeaderPanelLinks { + $$prop_def: HeaderPanelLinksProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/GlobalHeader/HeaderUtilities.d.ts b/types/UIShell/GlobalHeader/HeaderUtilities.d.ts index 27451169..7c4cc4bb 100644 --- a/types/UIShell/GlobalHeader/HeaderUtilities.d.ts +++ b/types/UIShell/GlobalHeader/HeaderUtilities.d.ts @@ -1,8 +1,9 @@ /// -export default class HeaderUtilities { - $$prop_def: {}; +export interface HeaderUtilitiesProps {} +export default class HeaderUtilities { + $$prop_def: HeaderUtilitiesProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/HeaderGlobalAction.d.ts b/types/UIShell/HeaderGlobalAction.d.ts index cefda50a..6b6cc185 100644 --- a/types/UIShell/HeaderGlobalAction.d.ts +++ b/types/UIShell/HeaderGlobalAction.d.ts @@ -1,25 +1,26 @@ /// +export interface HeaderGlobalActionProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the active variant + * @default false + */ + isActive?: boolean; + + /** + * Specify the icon to render + */ + icon?: import("carbon-icons-svelte").CarbonIcon; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class HeaderGlobalAction { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the active variant - * @default false - */ - isActive?: boolean; - - /** - * Specify the icon to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: HeaderGlobalActionProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts index 84f3aed3..e493381e 100644 --- a/types/UIShell/SideNav/SideNav.d.ts +++ b/types/UIShell/SideNav/SideNav.d.ts @@ -1,25 +1,26 @@ /// +export interface SideNavProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the fixed variant + * @default false + */ + fixed?: boolean; + + /** + * Specify the ARIA label for the nav + */ + ariaLabel?: string; + + /** + * Set to `true` to toggle the expanded state + * @default false + */ + isOpen?: boolean; +} + export default class SideNav { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the fixed variant - * @default false - */ - fixed?: boolean; - - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - - /** - * Set to `true` to toggle the expanded state - * @default false - */ - isOpen?: boolean; - }; - + $$prop_def: SideNavProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/SideNav/SideNavItems.d.ts b/types/UIShell/SideNav/SideNavItems.d.ts index 1380a084..3c55cbca 100644 --- a/types/UIShell/SideNav/SideNavItems.d.ts +++ b/types/UIShell/SideNav/SideNavItems.d.ts @@ -1,8 +1,9 @@ /// -export default class SideNavItems { - $$prop_def: {}; +export interface SideNavItemsProps {} +export default class SideNavItems { + $$prop_def: SideNavItemsProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/SideNav/SideNavLink.d.ts b/types/UIShell/SideNav/SideNavLink.d.ts index 7d961a5f..4ec630b5 100644 --- a/types/UIShell/SideNav/SideNavLink.d.ts +++ b/types/UIShell/SideNav/SideNavLink.d.ts @@ -1,35 +1,36 @@ /// +export interface SideNavLinkProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to select the current link + * @default false + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; +} + export default class SideNavLink { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to select the current link - * @default false - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - + $$prop_def: SideNavLinkProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/UIShell/SideNav/SideNavMenu.d.ts b/types/UIShell/SideNav/SideNavMenu.d.ts index 19d0b427..91f7d4f5 100644 --- a/types/UIShell/SideNav/SideNavMenu.d.ts +++ b/types/UIShell/SideNav/SideNavMenu.d.ts @@ -1,30 +1,31 @@ /// +export interface SideNavMenuProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; +} + export default class SideNavMenu { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - + $$prop_def: SideNavMenuProps; $$slot_def: { default: {}; }; diff --git a/types/UIShell/SideNav/SideNavMenuItem.d.ts b/types/UIShell/SideNav/SideNavMenuItem.d.ts index 701fbd44..2fc2e92e 100644 --- a/types/UIShell/SideNav/SideNavMenuItem.d.ts +++ b/types/UIShell/SideNav/SideNavMenuItem.d.ts @@ -1,29 +1,30 @@ /// +export interface SideNavMenuItemProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to select the item + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the item text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; +} + export default class SideNavMenuItem { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to select the item - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the item text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - + $$prop_def: SideNavMenuItemProps; $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; diff --git a/types/UIShell/SkipToContent.d.ts b/types/UIShell/SkipToContent.d.ts index fd95515c..23c99591 100644 --- a/types/UIShell/SkipToContent.d.ts +++ b/types/UIShell/SkipToContent.d.ts @@ -1,20 +1,21 @@ /// +export interface SkipToContentProps extends svelte.JSX.HTMLAttributes { + /** + * Specify the `href` attribute + * @default "#main-content" + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; +} + export default class SkipToContent { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Specify the `href` attribute - * @default "#main-content" - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - }; - + $$prop_def: SkipToContentProps; $$slot_def: { default: {}; }; diff --git a/types/UnorderedList/UnorderedList.d.ts b/types/UnorderedList/UnorderedList.d.ts index ae7c3839..4c18f46d 100644 --- a/types/UnorderedList/UnorderedList.d.ts +++ b/types/UnorderedList/UnorderedList.d.ts @@ -1,14 +1,15 @@ /// -export default class UnorderedList { - $$prop_def: svelte.JSX.HTMLAttributes & { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; - }; +export interface UnorderedListProps extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; +} +export default class UnorderedList { + $$prop_def: UnorderedListProps; $$slot_def: { default: {}; }; From 380a780b6589bebb6d580bf58abee9ebb20e3dc3 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 16 Nov 2020 11:13:18 -0800 Subject: [PATCH 04/11] chore: use sveld to generate types, component docs --- COMPONENT_API.json | 10185 +++++++++++++++++++++++ COMPONENT_INDEX.md | 7466 +++++++---------- package.json | 2 +- rollup.config.js | 19 +- scripts/rollup/generate-index.js | 117 - scripts/rollup/generate-public-api.js | 29 - scripts/rollup/generate-types.js | 82 - scripts/rollup/parse-component.js | 137 - scripts/rollup/plugin-generate-docs.js | 84 - src/Accordion/AccordionItem.svelte | 2 +- src/Button/Button.svelte | 4 + src/Grid/Row.svelte | 2 +- types/Button/Button.d.ts | 12 +- types/Grid/Row.d.ts | 2 +- yarn.lock | 43 + 15 files changed, 13298 insertions(+), 4888 deletions(-) create mode 100644 COMPONENT_API.json delete mode 100644 scripts/rollup/generate-index.js delete mode 100644 scripts/rollup/generate-public-api.js delete mode 100644 scripts/rollup/generate-types.js delete mode 100644 scripts/rollup/parse-component.js delete mode 100644 scripts/rollup/plugin-generate-docs.js diff --git a/COMPONENT_API.json b/COMPONENT_API.json new file mode 100644 index 00000000..693a8d3a --- /dev/null +++ b/COMPONENT_API.json @@ -0,0 +1,10185 @@ +{ + "total": 154, + "components": [ + { + "moduleName": "SkeletonText", + "filePath": "/src/SkeletonText/SkeletonText.svelte", + "props": [ + { + "name": "lines", + "kind": "let", + "description": "Specify the number of lines to render", + "type": "number", + "value": "3", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "heading", + "kind": "let", + "description": "Set to `true` to use the heading size variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "paragraph", + "kind": "let", + "description": "Set to `true` to use the paragraph size variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "width", + "kind": "let", + "description": "Specify the width of the text (% or px)", + "type": "string", + "value": "\"100%\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "AccordionSkeleton", + "filePath": "/src/Accordion/AccordionSkeleton.svelte", + "props": [ + { + "name": "count", + "kind": "let", + "description": "Specify the number of accordion items to render", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "align", + "kind": "let", + "description": "Specify alignment of accordion item chevron icon", + "type": "\"start\" | \"end\"", + "value": "\"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the accordion", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `false` to close the first accordion item", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + }, + { + "moduleName": "Accordion", + "filePath": "/src/Accordion/Accordion.svelte", + "props": [ + { + "name": "align", + "kind": "let", + "description": "Specify alignment of accordion item chevron icon", + "type": "\"start\" | \"end\"", + "value": "\"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the accordion", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the accordion", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { + "type": "forwarded", + "name": "click", + "element": "AccordionSkeleton" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "AccordionSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "AccordionSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "AccordionSkeleton" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" } + }, + { + "moduleName": "AccordionItem", + "filePath": "/src/Accordion/AccordionItem.svelte", + "props": [ + { + "name": "title", + "kind": "let", + "description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g.
...
)", + "type": "string", + "value": "\"title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the first accordion item", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the accordion item", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the accordion item chevron icon", + "type": "string", + "value": "\"Expand/Collapse\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "title", + "default": false, + "fallback": "{title}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "animationend", "element": "li" }, + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "AspectRatio", + "filePath": "/src/AspectRatio/AspectRatio.svelte", + "props": [ + { + "name": "ratio", + "kind": "let", + "description": "Specify the aspect ratio", + "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"", + "value": "\"2x1\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "BreadcrumbSkeleton", + "filePath": "/src/Breadcrumb/BreadcrumbSkeleton.svelte", + "props": [ + { + "name": "noTrailingSlash", + "kind": "let", + "description": "Set to `true` to hide the breadcrumb trailing slash", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "count", + "kind": "let", + "description": "Specify the number of breadcrumb items to render", + "type": "number", + "value": "3", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Breadcrumb", + "filePath": "/src/Breadcrumb/Breadcrumb.svelte", + "props": [ + { + "name": "noTrailingSlash", + "kind": "let", + "description": "Set to `true` to hide the breadcrumb trailing slash", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { + "type": "forwarded", + "name": "click", + "element": "BreadcrumbSkeleton" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "BreadcrumbSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "BreadcrumbSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "BreadcrumbSkeleton" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" } + }, + { + "moduleName": "Link", + "filePath": "/src/Link/Link.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the size of the link", + "type": "\"sm\" | \"lg\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the href value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the checkbox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "visited", + "kind": "let", + "description": "Set to `true` to allow visited styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLAnchorElement | HTMLParagraphElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "p" }, + { "type": "forwarded", "name": "mouseover", "element": "p" }, + { "type": "forwarded", "name": "mouseenter", "element": "p" }, + { "type": "forwarded", "name": "mouseleave", "element": "p" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "p" } + }, + { + "moduleName": "BreadcrumbItem", + "filePath": "/src/Breadcrumb/BreadcrumbItem.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Set the `href` to use an anchor link", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "isCurrentPage", + "kind": "let", + "description": "Set to `true` if the breadcrumb item represents the current page", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "li" }, + { "type": "forwarded", "name": "mouseover", "element": "li" }, + { "type": "forwarded", "name": "mouseenter", "element": "li" }, + { "type": "forwarded", "name": "mouseleave", "element": "li" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "ButtonSkeleton", + "filePath": "/src/Button/ButtonSkeleton.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Set the `href` to use an anchor link", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of button skeleton", + "type": "\"default\" | \"field\" | \"small\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "small", + "kind": "let", + "description": "Set to `true` to use the small variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "Button", + "filePath": "/src/Button/Button.svelte", + "props": [ + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of button", + "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"", + "value": "\"primary\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of button", + "type": "\"default\" | \"field\" | \"small\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasIconOnly", + "kind": "let", + "description": "Set to `true` for the icon-only variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the button icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipAlignment", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`", + "type": "\"start\" | \"center\" | \"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipPosition", + "kind": "let", + "description": "Set the position of the tooltip relative to the icon", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. )", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Set the `href` to use an anchor link", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Specify the `type` attribute for the button element", + "type": "string", + "value": "\"button\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLAnchorElement | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { role: \"button\"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } }" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" }, + { + "type": "forwarded", + "name": "mouseover", + "element": "ButtonSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "ButtonSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "ButtonSkeleton" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "ButtonSkeleton" } + }, + { + "moduleName": "ButtonSet", + "filePath": "/src/Button/ButtonSet.svelte", + "props": [ + { + "name": "stacked", + "kind": "let", + "description": "Set to `true` to stack the buttons vertically", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "CheckboxSkeleton", + "filePath": "/src/Checkbox/CheckboxSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Checkbox", + "filePath": "/src/Checkbox/Checkbox.svelte", + "props": [ + { + "name": "checked", + "kind": "let", + "description": "Specify whether the checkbox is checked", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "indeterminate", + "kind": "let", + "description": "Specify whether the checkbox is indeterminate", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "readonly", + "kind": "let", + "description": "Set to `true` for the checkbox to be read-only", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the checkbox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Set a name for the input element", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title attribute for the label element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input label", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "check", "detail": "boolean" }, + { "type": "forwarded", "name": "click", "element": "CheckboxSkeleton" }, + { + "type": "forwarded", + "name": "mouseover", + "element": "CheckboxSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "CheckboxSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "CheckboxSkeleton" + }, + { "type": "forwarded", "name": "change", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "CheckboxSkeleton" } + }, + { + "moduleName": "ContentSwitcher", + "filePath": "/src/ContentSwitcher/ContentSwitcher.svelte", + "props": [ + { + "name": "selectedIndex", + "kind": "let", + "description": "Set the selected index of the switch item", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the content switcher", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "dispatched", "name": "change", "detail": "number" }, + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Switch", + "filePath": "/src/ContentSwitcher/Switch.svelte", + "props": [ + { + "name": "text", + "kind": "let", + "description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g. ...)", + "type": "string", + "value": "\"Provide text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selected", + "kind": "let", + "description": "Set to `true` for the switch to be selected", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the switch", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the button element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{text}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "Copy", + "filePath": "/src/Copy/Copy.svelte", + "props": [ + { + "name": "feedback", + "kind": "let", + "description": "Set the feedback text shown after clicking the button", + "type": "string", + "value": "\"Copied!\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "feedbackTimeout", + "kind": "let", + "description": "Set the timeout duration (ms) to display feedback text", + "type": "number", + "value": "2000", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{#if animation}{feedback || $$restProps['aria-label']}{/if}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "animationend", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "CopyButton", + "filePath": "/src/CopyButton/CopyButton.svelte", + "props": [ + { + "name": "iconDescription", + "kind": "let", + "description": "Set the title and ARIA label for the copy button", + "type": "string", + "value": "\"Copy to clipboard\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "Copy" }, + { "type": "forwarded", "name": "animationend", "element": "Copy" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Copy" } + }, + { + "moduleName": "ListBox", + "filePath": "/src/ListBox/ListBox.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the list box", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Set the type of the list box", + "type": "\"default\" | \"inline\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the list box", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the list box", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "div" }, + { "type": "forwarded", "name": "click", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxField", + "filePath": "/src/ListBox/ListBoxField.svelte", + "props": [ + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the list box field", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Specify the role attribute", + "type": "string", + "value": "\"combobox\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"-1\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ close: \"close\", open: \"open\" }", + "value": "{ close: \"close\", open: \"open\" }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: ListBoxFieldTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "keydown", "element": "div" }, + { "type": "forwarded", "name": "blur", "element": "div" } + ], + "typedefs": [ + { + "type": "\"close\" | \"open\"", + "name": "ListBoxFieldTranslationId", + "ts": "type ListBoxFieldTranslationId = \"close\" | \"open\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxMenu", + "filePath": "/src/ListBox/ListBoxMenu.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "scroll", "element": "div" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxMenuIcon", + "filePath": "/src/ListBox/ListBoxMenuIcon.svelte", + "props": [ + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the list box menu icon", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ close: \"close\", open: \"open\" }", + "value": "{ close: \"close\", open: \"open\" }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: ListBoxMenuIconTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "click", "element": "div" }], + "typedefs": [ + { + "type": "\"close\" | \"open\"", + "name": "ListBoxMenuIconTranslationId", + "ts": "type ListBoxMenuIconTranslationId = \"close\" | \"open\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxMenuItem", + "filePath": "/src/ListBox/ListBoxMenuItem.svelte", + "props": [ + { + "name": "active", + "kind": "let", + "description": "Set to `true` to enable the active state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "highlighted", + "kind": "let", + "description": "Set to `true` to enable the highlighted state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxSelection", + "filePath": "/src/ListBox/ListBoxSelection.svelte", + "props": [ + { + "name": "selectionCount", + "kind": "let", + "description": "Specify the number of selected items", + "type": "any", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the list box selection", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", + "value": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: ListBoxSelectionTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "dispatched", "name": "clear" }], + "typedefs": [ + { + "type": "\"clearAll\" | \"clearSelection\"", + "name": "ListBoxSelectionTranslationId", + "ts": "type ListBoxSelectionTranslationId = \"clearAll\" | \"clearSelection\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ComboBox", + "filePath": "/src/ComboBox/ComboBox.svelte", + "props": [ + { + "name": "items", + "kind": "let", + "description": "Set the combobox items", + "type": "ComboBoxItem[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemToString", + "kind": "let", + "description": "Override the display of a combobox item", + "type": "(item: ComboBoxItem) => string", + "value": "(item) => item.text || item.id", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "selectedIndex", + "kind": "let", + "description": "Set the selected item by value index", + "type": "number", + "value": "-1", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "value", + "kind": "let", + "description": "Specify the selected combobox value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the combobox", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the combobox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleText", + "kind": "let", + "description": "Specify the title text of the combobox", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the combobox menu dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "shouldFilterItem", + "kind": "let", + "description": "Determine if an item should be filtered given the current combobox value", + "type": "(item: ComboBoxItem, value: string) => boolean", + "value": "() => true", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: any) => string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the list box component", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "listRef", + "kind": "let", + "description": "Obtain a reference to the list HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { + "type": "dispatched", + "name": "select", + "detail": "{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }" + }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" }, + { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" }, + { "type": "forwarded", "name": "scroll", "element": "ListBoxMenu" } + ], + "typedefs": [ + { + "type": "{ id: string; text: string; }", + "name": "ComboBoxItem", + "ts": "interface ComboBoxItem { id: string; text: string; }" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ComposedModal", + "filePath": "/src/ComposedModal/ComposedModal.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the composed modal", + "type": "\"xs\" | \"sm\" | \"lg\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the modal", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "preventCloseOnClickOutside", + "kind": "let", + "description": "Set to `true` to prevent the modal from closing when clicking outside", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "containerClass", + "kind": "let", + "description": "Specify a class for the inner modal", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectorPrimaryFocus", + "kind": "let", + "description": "Specify a selector to be focused when opening the modal", + "type": "string", + "value": "\"[data-modal-primary-focus]\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "transitionend", "element": "div" }, + { "type": "dispatched", "name": "submit" }, + { "type": "dispatched", "name": "close" }, + { "type": "dispatched", "name": "open" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ModalHeader", + "filePath": "/src/ComposedModal/ModalHeader.svelte", + "props": [ + { + "name": "title", + "kind": "let", + "description": "Specify the modal title", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the modal label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelClass", + "kind": "let", + "description": "Specify the label class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleClass", + "kind": "let", + "description": "Specify the title class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "closeClass", + "kind": "let", + "description": "Specify the close class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "closeIconClass", + "kind": "let", + "description": "Specify the close icon class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the close icon", + "type": "string", + "value": "\"Close\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "click", "element": "button" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ModalBody", + "filePath": "/src/ComposedModal/ModalBody.svelte", + "props": [ + { + "name": "hasForm", + "kind": "let", + "description": "Set to `true` if the modal contains form elements", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasScrollingContent", + "kind": "let", + "description": "Set to `true` if the modal contains scrolling content", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ModalFooter", + "filePath": "/src/ComposedModal/ModalFooter.svelte", + "props": [ + { + "name": "primaryButtonText", + "kind": "let", + "description": "Specify the primary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryButtonDisabled", + "kind": "let", + "description": "Set to `true` to disable the primary button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryClass", + "kind": "let", + "description": "Specify a class for the primary button", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryButtonText", + "kind": "let", + "description": "Specify the secondary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryClass", + "kind": "let", + "description": "Specify a class for the secondary button", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "CodeSnippetSkeleton", + "filePath": "/src/CodeSnippet/CodeSnippetSkeleton.svelte", + "props": [ + { + "name": "type", + "kind": "let", + "description": "Set the type of code snippet", + "type": "\"single\" | \"inline\" | \"multi\"", + "value": "\"single\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "CodeSnippet", + "filePath": "/src/CodeSnippet/CodeSnippet.svelte", + "props": [ + { + "name": "type", + "kind": "let", + "description": "Set the type of code snippet", + "type": "\"single\" | \"inline\" | \"multi\"", + "value": "\"single\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "code", + "kind": "let", + "description": "Set the code snippet text\nAlternatively, use the default slot (e.g. {`code`})", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to expand a multi-line code snippet (type=\"multi\")", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "hideCopyButton", + "kind": "let", + "description": "Set to `true` to hide the copy button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "wrapText", + "kind": "let", + "description": "Set to `true` to wrap the text\nNote that `type` must be \"multi\"", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "copyButtonDescription", + "kind": "let", + "description": "Specify the ARIA label for the copy button icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "copyLabel", + "kind": "let", + "description": "Specify the ARIA label of the copy button", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "feedback", + "kind": "let", + "description": "Specify the feedback text displayed when clicking the snippet", + "type": "string", + "value": "\"Copied!\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "feedbackTimeout", + "kind": "let", + "description": "Set the timeout duration (ms) to display feedback text", + "type": "number", + "value": "2000", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showLessText", + "kind": "let", + "description": "Specify the show less text\n`type` must be \"multi\"", + "type": "string", + "value": "\"Show less\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showMoreText", + "kind": "let", + "description": "Specify the show more text\n`type` must be \"multi\"", + "type": "string", + "value": "\"Show more\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showMoreLess", + "kind": "let", + "description": "Set to `true` to enable the show more/less button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the code element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the pre HTML element", + "type": "null | HTMLPreElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{code}", + "slot_props": "{}" + } + ], + "events": [ + { + "type": "forwarded", + "name": "click", + "element": "CodeSnippetSkeleton" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "CodeSnippetSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "CodeSnippetSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "CodeSnippetSkeleton" + }, + { "type": "forwarded", "name": "animationend", "element": "CopyButton" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" } + }, + { + "moduleName": "RadioButton", + "filePath": "/src/RadioButton/RadioButton.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the radio button", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the radio button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "et to `true` to disable the radio button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelPosition", + "kind": "let", + "description": "Specify the label position", + "type": "\"right\" | \"left\"", + "value": "\"right\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the checkbox input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "change", "element": "input" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "RadioButtonSkeleton", + "filePath": "/src/RadioButton/RadioButtonSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Table", + "filePath": "/src/DataTable/Table.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the table", + "type": "\"compact\" | \"short\" | \"tall\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "zebra", + "kind": "let", + "description": "Set to `true` to use zebra styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "useStaticWidth", + "kind": "let", + "description": "Set to `true` to use static width", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "shouldShowBorder", + "kind": "let", + "description": "Set to `true` for the bordered variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sortable", + "kind": "let", + "description": "Set to `true` for the sortable variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "stickyHeader", + "kind": "let", + "description": "Set to `true` to enable a sticky header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "section" } + }, + { + "moduleName": "TableBody", + "filePath": "/src/DataTable/TableBody.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "tbody" } + }, + { + "moduleName": "TableCell", + "filePath": "/src/DataTable/TableCell.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "td" }, + { "type": "forwarded", "name": "mouseover", "element": "td" }, + { "type": "forwarded", "name": "mouseenter", "element": "td" }, + { "type": "forwarded", "name": "mouseleave", "element": "td" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "td" } + }, + { + "moduleName": "TableContainer", + "filePath": "/src/DataTable/TableContainer.svelte", + "props": [ + { + "name": "title", + "kind": "let", + "description": "Specify the title of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the description of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "stickyHeader", + "kind": "let", + "description": "Set to `true` to enable a sticky header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TableHead", + "filePath": "/src/DataTable/TableHead.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "thead" }, + { "type": "forwarded", "name": "mouseover", "element": "thead" }, + { "type": "forwarded", "name": "mouseenter", "element": "thead" }, + { "type": "forwarded", "name": "mouseleave", "element": "thead" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "thead" } + }, + { + "moduleName": "TableHeader", + "filePath": "/src/DataTable/TableHeader.svelte", + "props": [ + { + "name": "scope", + "kind": "let", + "description": "Specify the `scope` attribute", + "type": "string", + "value": "\"col\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default id translations", + "type": "() => string", + "value": "() => \"\"", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "mouseover", "element": "th" }, + { "type": "forwarded", "name": "mouseenter", "element": "th" }, + { "type": "forwarded", "name": "mouseleave", "element": "th" }, + { "type": "forwarded", "name": "click", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "th" } + }, + { + "moduleName": "TableRow", + "filePath": "/src/DataTable/TableRow.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "tr" }, + { "type": "forwarded", "name": "mouseover", "element": "tr" }, + { "type": "forwarded", "name": "mouseenter", "element": "tr" }, + { "type": "forwarded", "name": "mouseleave", "element": "tr" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "tr" } + }, + { + "moduleName": "DataTable", + "filePath": "/src/DataTable/DataTable.svelte", + "props": [ + { + "name": "headers", + "kind": "let", + "description": "Specify the data table headers", + "type": "Headers", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "rows", + "kind": "let", + "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids", + "type": "Object[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the data table", + "type": "\"compact\" | \"short\" | \"tall\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the description of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "zebra", + "kind": "let", + "description": "Set to `true` to use zebra styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sortable", + "kind": "let", + "description": "Set to `true` for the sortable variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "expandable", + "kind": "let", + "description": "Set to `true` for the expandable variant\nAutomatically set to `true` if `batchExpansion` is `true`", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "batchExpansion", + "kind": "let", + "description": "Set to `true` to enable batch expansion", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "expandedRowIds", + "kind": "let", + "description": "Specify the row ids to be expanded", + "type": "string[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "radio", + "kind": "let", + "description": "Set to `true` for the radio selection variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectable", + "kind": "let", + "description": "Set to `true` for the selectable variant\nAutomatically set to `true` if `radio` or `batchSelection` are `true`", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "batchSelection", + "kind": "let", + "description": "Set to `true` to enable batch selection", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectedRowIds", + "kind": "let", + "description": "Specify the row ids to be selected", + "type": "string[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "stickyHeader", + "kind": "let", + "description": "Set to `true` to enable a sticky header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "cell", + "default": false, + "fallback": "{headers[j].display ? headers[j].display(cell.value) : cell.value}", + "slot_props": "{ row: Object; cell: Object; }" + }, + { + "name": "cell-header", + "default": false, + "fallback": "{header.value}", + "slot_props": "{ header: Header}" + }, + { + "name": "expanded-row", + "default": false, + "slot_props": "{ row: Object; }" + } + ], + "events": [ + { + "type": "dispatched", + "name": "click", + "detail": "{ header?: Header; row?: Object; cell?: Object; }" + }, + { + "type": "dispatched", + "name": "click:header--expand", + "detail": "{ expanded: boolean; }" + }, + { + "type": "dispatched", + "name": "click:header", + "detail": "{ header: Header; sortDirection: \"ascending\" | \"descending\" | \"none\" }" + }, + { "type": "dispatched", "name": "click:row", "detail": "Object" }, + { "type": "dispatched", "name": "mouseenter:row", "detail": "Object" }, + { "type": "dispatched", "name": "mouseleave:row", "detail": "Object" }, + { + "type": "dispatched", + "name": "click:row--expand", + "detail": "{ expanded: boolean; row: Object; }" + }, + { "type": "dispatched", "name": "click:cell", "detail": "Object" } + ], + "typedefs": [ + { + "type": "{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }", + "name": "Header", + "ts": "interface Header { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }" + }, + { + "type": "Header[]", + "name": "Headers", + "ts": "type Headers = Header[]" + } + ], + "rest_props": { "type": "InlineComponent", "name": "TableContainer" } + }, + { + "moduleName": "Toolbar", + "filePath": "/src/DataTable/Toolbar.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the toolbar size", + "type": "\"sm\" | \"default\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "section" } + }, + { + "moduleName": "ToolbarContent", + "filePath": "/src/DataTable/ToolbarContent.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SearchSkeleton", + "filePath": "/src/Search/SearchSkeleton.svelte", + "props": [ + { + "name": "small", + "kind": "let", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the search input", + "type": "\"sm\" | \"lg\" | \"xl\"", + "value": "\"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Search", + "filePath": "/src/Search/Search.svelte", + "props": [ + { + "name": "small", + "kind": "let", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the search input", + "type": "\"sm\" | \"lg\" | \"xl\"", + "value": "\"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the search input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the search input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the `type` attribute of the search input", + "type": "string", + "value": "\"text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the `placeholder` attribute of the search input", + "type": "string", + "value": "\"Search...\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "autocomplete", + "kind": "let", + "description": "Specify the `autocomplete` attribute", + "type": "\"on\" | \"off\"", + "value": "\"off\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "autofocus", + "kind": "let", + "description": "Set to `true` to auto focus the search element", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "closeButtonLabelText", + "kind": "let", + "description": "Specify the close button label text", + "type": "string", + "value": "\"Clear search input\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "SearchSkeleton" }, + { + "type": "forwarded", + "name": "mouseover", + "element": "SearchSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "SearchSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "SearchSkeleton" + }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" }, + { "type": "dispatched", "name": "clear" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "SearchSkeleton" } + }, + { + "moduleName": "ToolbarSearch", + "filePath": "/src/DataTable/ToolbarSearch.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the search input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to expand the search bar", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "persistent", + "kind": "let", + "description": "Set to `true` to keep the search bar expanded", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "change", "element": "Search" }, + { "type": "forwarded", "name": "input", "element": "Search" }, + { "type": "forwarded", "name": "focus", "element": "Search" }, + { "type": "forwarded", "name": "blur", "element": "Search" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Search" } + }, + { + "moduleName": "ToolbarBatchActions", + "filePath": "/src/DataTable/ToolbarBatchActions.svelte", + "props": [ + { + "name": "formatTotalSelected", + "kind": "let", + "description": "Override the total items selected text", + "type": "(totalSelected: number) => string", + "value": "(totalSelected) => `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", + "isFunction": true, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "OverflowMenu", + "filePath": "/src/OverflowMenu/OverflowMenu.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the size of the overflow menu", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "direction", + "kind": "let", + "description": "Specify the direction of the overflow menu relative to the button", + "type": "\"top\" | \"bottom\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the menu", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "flipped", + "kind": "let", + "description": "Set to `true` to flip the menu relative to the button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "menuOptionsClass", + "kind": "let", + "description": "Specify the menu options class", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconClass", + "kind": "let", + "description": "Specify the icon class", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Open and close list of options\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the button element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "buttonRef", + "kind": "let", + "description": "Obtain a reference to the trigger button element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "menuRef", + "kind": "let", + "description": "Obtain a reference to the overflow menu element", + "type": "null | HTMLUListElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "menu", + "default": false, + "fallback": "", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" }, + { "type": "dispatched", "name": "close" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "OverflowMenuItem", + "filePath": "/src/OverflowMenu/OverflowMenuItem.svelte", + "props": [ + { + "name": "text", + "kind": "let", + "description": "Specify the item text\nAlternatively, use the default slot for a custom element", + "type": "string", + "value": "\"Provide text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute if the item is a link", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryFocus", + "kind": "let", + "description": "Set to `true` if the item should be focused when opening the menu", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the item", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasDivider", + "kind": "let", + "description": "Set to `true` to include a divider", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "requireTitle", + "kind": "let", + "description": "Set to `false` to omit the button `title` attribute", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLAnchorElement | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "
\n {text}\n
", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "keydown", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "ToolbarMenu", + "filePath": "/src/DataTable/ToolbarMenu.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" } + }, + { + "moduleName": "ToolbarMenuItem", + "filePath": "/src/DataTable/ToolbarMenuItem.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "OverflowMenuItem" }, + { + "type": "forwarded", + "name": "keydown", + "element": "OverflowMenuItem" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" } + }, + { + "moduleName": "DataTableSkeleton", + "filePath": "/src/DataTableSkeleton/DataTableSkeleton.svelte", + "props": [ + { + "name": "columns", + "kind": "let", + "description": "Specify the number of columns", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "rows", + "kind": "let", + "description": "Specify the number of rows", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the data table", + "type": "\"compact\" | \"short\" | \"tall\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "zebra", + "kind": "let", + "description": "Set to `true` to apply zebra styles to the datatable rows", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showHeader", + "kind": "let", + "description": "Set to `false` to hide the header", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "headers", + "kind": "let", + "description": "Set the column headers\nIf `headers` has one more items, `count` is ignored", + "type": "string[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showToolbar", + "kind": "let", + "description": "Set to `false` to hide the toolbar", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "table" }, + { "type": "forwarded", "name": "mouseover", "element": "table" }, + { "type": "forwarded", "name": "mouseenter", "element": "table" }, + { "type": "forwarded", "name": "mouseleave", "element": "table" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "table" } + }, + { + "moduleName": "DatePicker", + "filePath": "/src/DatePicker/DatePicker.svelte", + "props": [ + { + "name": "datePickerType", + "kind": "let", + "description": "Specify the date picker type", + "type": "\"simple\" | \"single\" | \"range\"", + "value": "\"simple\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the date picker input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "appendTo", + "kind": "let", + "description": "Specify the element to append the calendar to", + "type": "HTMLElement", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "dateFormat", + "kind": "let", + "description": "Specify the date format", + "type": "string", + "value": "\"m/d/Y\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "maxDate", + "kind": "let", + "description": "Specify the maximum date", + "type": "null | string | Date", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "minDate", + "kind": "let", + "description": "Specify the minimum date", + "type": "null | string | Date", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "locale", + "kind": "let", + "description": "Specify the locale", + "type": "string", + "value": "\"en\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "short", + "kind": "let", + "description": "Set to `true` to use the short variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the date picker element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" }, + { "type": "dispatched" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "DatePickerInput", + "filePath": "/src/DatePicker/DatePickerInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the input placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pattern", + "kind": "let", + "description": "Specify the Regular Expression for the input value", + "type": "string", + "value": "\"\\\\d{1,2}\\\\/\\\\d{1,2}\\\\/\\\\d{4}\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the calendar icon", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Set a name for the input element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "DatePickerSkeleton", + "filePath": "/src/DatePicker/DatePickerSkeleton.svelte", + "props": [ + { + "name": "range", + "kind": "let", + "description": "Set to `true` to use the range variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id to be used by the label element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Dropdown", + "filePath": "/src/Dropdown/Dropdown.svelte", + "props": [ + { + "name": "items", + "kind": "let", + "description": "Set the dropdown items", + "type": "DropdownItem[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemToString", + "kind": "let", + "description": "Override the display of a dropdown item", + "type": "(item: DropdownItem) => string", + "value": "(item) => item.text || item.id", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "selectedIndex", + "kind": "let", + "description": "Specify the selected item index", + "type": "number", + "value": "-1", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the type of dropdown", + "type": "\"default\" | \"inline\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the dropdown field", + "type": "\"sm\" | \"lg\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleText", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the list box label", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: any) => string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the list box component", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the list box", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { + "type": "dispatched", + "name": "select", + "detail": "{ selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem }" + } + ], + "typedefs": [ + { + "type": "string", + "name": "DropdownItemId", + "ts": "type DropdownItemId = string" + }, + { + "type": "string", + "name": "DropdownItemText", + "ts": "type DropdownItemText = string" + }, + { + "type": "{ id: DropdownItemId; text: DropdownItemText; }", + "name": "DropdownItem", + "ts": "interface DropdownItem { id: DropdownItemId; text: DropdownItemText; }" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "DropdownSkeleton", + "filePath": "/src/Dropdown/DropdownSkeleton.svelte", + "props": [ + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Loading", + "filePath": "/src/Loading/Loading.svelte", + "props": [ + { + "name": "small", + "kind": "let", + "description": "Set to `true` to use the small variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "active", + "kind": "let", + "description": "Set to `false` to disable the active state", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "withOverlay", + "kind": "let", + "description": "Set to `false` to disable the overlay", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the label description", + "type": "string", + "value": "\"Active loading indicator\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the label element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Filename", + "filePath": "/src/FileUploader/Filename.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Specify the file name status", + "type": "\"uploading\" | \"edit\" | \"complete\"", + "value": "\"uploading\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label used for the status icons", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "Close16" }, + { "type": "forwarded", "name": "keydown", "element": "Close16" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Loading" } + }, + { + "moduleName": "FileUploaderButton", + "filePath": "/src/FileUploader/FileUploaderButton.svelte", + "props": [ + { + "name": "accept", + "kind": "let", + "description": "Specify the accepted file types", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "multiple", + "kind": "let", + "description": "Set to `true` to allow multiple files", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disableLabelChanges", + "kind": "let", + "description": "Set to `true` to disable label changes", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of file uploader button", + "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"", + "value": "\"primary\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"Add file\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "role", + "kind": "let", + "description": "Specify the label role", + "type": "string", + "value": "\"button\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify `tabindex` attribute", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "label" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "click", "element": "input" } + ], + "typedefs": [ + { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } + ], + "rest_props": { "type": "Element", "name": "input" } + }, + { + "moduleName": "FileUploader", + "filePath": "/src/FileUploader/FileUploader.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Specify the file uploader status", + "type": "\"uploading\" | \"edit\" | \"complete\"", + "value": "\"uploading\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "accept", + "kind": "let", + "description": "Specify the accepted file types", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "files", + "kind": "let", + "description": "Obtain the uploaded file names", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "multiple", + "kind": "let", + "description": "Set to `true` to allow multiple files", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "clearFiles", + "kind": "const", + "description": "Override the default behavior of clearing the array of uploaded files", + "type": "() => void", + "value": "() => { files = []; }", + "isFunction": true, + "constant": true, + "reactive": false + }, + { + "name": "labelDescription", + "kind": "let", + "description": "Specify the label description", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelTitle", + "kind": "let", + "description": "Specify the label title", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of file uploader button", + "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"", + "value": "\"primary\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "buttonLabel", + "kind": "let", + "description": "Specify the button label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label used for the status icons", + "type": "string", + "value": "\"Provide icon description\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the file button uploader input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "add", "detail": "Files" }, + { "type": "dispatched", "name": "remove", "detail": "Files" }, + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { + "type": "forwarded", + "name": "change", + "element": "FileUploaderButton" + }, + { "type": "forwarded", "name": "keydown", "element": "Filename" } + ], + "typedefs": [ + { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "FileUploaderItem", + "filePath": "/src/FileUploader/FileUploaderItem.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Specify the file uploader status", + "type": "\"uploading\" | \"edit\" | \"complete\"", + "value": "\"uploading\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label used for the status icons", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "errorSubject", + "kind": "let", + "description": "Specify the error subject text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "errorBody", + "kind": "let", + "description": "Specify the error body text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify the file uploader name", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "delete", "detail": "string" }, + { "type": "forwarded", "name": "mouseover", "element": "span" }, + { "type": "forwarded", "name": "mouseenter", "element": "span" }, + { "type": "forwarded", "name": "mouseleave", "element": "span" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "span" } + }, + { + "moduleName": "FileUploaderDropContainer", + "filePath": "/src/FileUploader/FileUploaderDropContainer.svelte", + "props": [ + { + "name": "accept", + "kind": "let", + "description": "Specify the accepted file types", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "multiple", + "kind": "let", + "description": "Set to `true` to allow multiple files", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "validateFiles", + "kind": "let", + "description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files", + "type": "(files: Files) => Files", + "value": "(files) => files", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"Add file\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Specify the `role` attribute of the drop container", + "type": "string", + "value": "\"button\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify `tabindex` attribute", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "add", "detail": "Files" }, + { "type": "forwarded", "name": "dragover", "element": "div" }, + { "type": "forwarded", "name": "dragleave", "element": "div" }, + { "type": "forwarded", "name": "drop", "element": "div" }, + { "type": "forwarded", "name": "keydown", "element": "label" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "click", "element": "input" } + ], + "typedefs": [ + { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "FileUploaderSkeleton", + "filePath": "/src/FileUploader/FileUploaderSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Form", + "filePath": "/src/Form/Form.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "form" }, + { "type": "forwarded", "name": "mouseover", "element": "form" }, + { "type": "forwarded", "name": "mouseenter", "element": "form" }, + { "type": "forwarded", "name": "mouseleave", "element": "form" }, + { "type": "forwarded", "name": "submit", "element": "form" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "form" } + }, + { + "moduleName": "FluidForm", + "filePath": "/src/FluidForm/FluidForm.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Form" } + }, + { + "moduleName": "FormGroup", + "filePath": "/src/FormGroup/FormGroup.svelte", + "props": [ + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "message", + "kind": "let", + "description": "Set to `true` to render a form requirement", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "messageText", + "kind": "let", + "description": "Specify the message text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "legendText", + "kind": "let", + "description": "Specify the legend text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "fieldset" }, + { "type": "forwarded", "name": "mouseover", "element": "fieldset" }, + { "type": "forwarded", "name": "mouseenter", "element": "fieldset" }, + { "type": "forwarded", "name": "mouseleave", "element": "fieldset" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "fieldset" } + }, + { + "moduleName": "FormItem", + "filePath": "/src/FormItem/FormItem.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "FormLabel", + "filePath": "/src/FormLabel/FormLabel.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Set an id to be used by the label element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "Grid", + "filePath": "/src/Grid/Grid.svelte", + "props": [ + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "condensed", + "kind": "let", + "description": "Set to `true` to use the condensed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "narrow", + "kind": "let", + "description": "Set to `true` to use the narrow variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "fullWidth", + "kind": "let", + "description": "Set to `true` to use the fullWidth variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutter", + "kind": "let", + "description": "Set to `true` to remove the gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterLeft", + "kind": "let", + "description": "Set to `true` to remove the left gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterRight", + "kind": "let", + "description": "Set to `true` to remove the right gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { class: string; } }" + } + ], + "events": [], + "typedefs": [] + }, + { + "moduleName": "Row", + "filePath": "/src/Grid/Row.svelte", + "props": [ + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "condensed", + "kind": "let", + "description": "Set to `true` to use the condensed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "narrow", + "kind": "let", + "description": "Set to `true` to use the narrow variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutter", + "kind": "let", + "description": "Set to `true` to remove the gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterLeft", + "kind": "let", + "description": "Set to `true` to remove the left gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterRight", + "kind": "let", + "description": "Set to `true` to remove the right gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { class: string; [key: string]: any; } }" + } + ], + "events": [], + "typedefs": [] + }, + { + "moduleName": "Column", + "filePath": "/src/Grid/Column.svelte", + "props": [ + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutter", + "kind": "let", + "description": "Set to `true` to remove the gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterLeft", + "kind": "let", + "description": "Set to `true` to remove the left gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterRight", + "kind": "let", + "description": "Set to `true` to remove the right gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "aspectRatio", + "kind": "let", + "description": "Specify the aspect ratio of the column", + "type": "\"2x1\" | \"16x9\" | \"9x16\" | \"1x2\" | \"4x3\" | \"3x4\" | \"1x1\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sm", + "kind": "let", + "description": "Set the small breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "md", + "kind": "let", + "description": "Set the medium breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "lg", + "kind": "let", + "description": "Set the large breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "xlg", + "kind": "let", + "description": "Set the extra large breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "max", + "kind": "let", + "description": "Set the maximum breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { class: string; } }" + } + ], + "events": [], + "typedefs": [ + { + "type": "boolean | number", + "name": "ColumnSize", + "ts": "type ColumnSize = boolean | number" + }, + { + "type": "{span?: ColumnSize; offset: number;}", + "name": "ColumnSizeDescriptor", + "ts": "interface ColumnSizeDescriptor {span?: ColumnSize; offset: number;}" + }, + { + "type": "ColumnSize | ColumnSizeDescriptor", + "name": "ColumnBreakpoint", + "ts": "type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor" + } + ] + }, + { + "moduleName": "IconSkeleton", + "filePath": "/src/Icon/IconSkeleton.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the icon", + "type": "number", + "value": "16", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Icon", + "filePath": "/src/Icon/Icon.svelte", + "props": [ + { + "name": "render", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon size must be 16px (e.g. `Add16`, `Task16`)", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "IconSkeleton" }, + { "type": "forwarded", "name": "mouseover", "element": "IconSkeleton" }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "IconSkeleton" + }, + { "type": "forwarded", "name": "mouseleave", "element": "IconSkeleton" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "IconSkeleton" } + }, + { + "moduleName": "InlineLoading", + "filePath": "/src/InlineLoading/InlineLoading.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Set the loading status", + "type": "\"active\" | \"inactive\" | \"finished\" | \"error\"", + "value": "\"active\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Set the loading description", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the loading icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "successDelay", + "kind": "let", + "description": "Specify the timeout delay (ms) after `status` is set to \"success\"", + "type": "number", + "value": "1500", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "success" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListItem", + "filePath": "/src/ListItem/ListItem.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "li" }, + { "type": "forwarded", "name": "mouseover", "element": "li" }, + { "type": "forwarded", "name": "mouseenter", "element": "li" }, + { "type": "forwarded", "name": "mouseleave", "element": "li" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "MultiSelect", + "filePath": "/src/MultiSelect/MultiSelect.svelte", + "props": [ + { + "name": "items", + "kind": "let", + "description": "Set the multiselect items", + "type": "MultiSelectItem[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "itemToString", + "kind": "let", + "description": "Override the display of a multiselect item", + "type": "(item: MultiSelectItem) => string", + "value": "(item) => item.text || item.id", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "selectedIds", + "kind": "let", + "description": "Set the selected ids", + "type": "MultiSelectItemId[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "value", + "kind": "let", + "description": "Specify the multiselect value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the combobox", + "type": "\"sm\" | \"lg\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Specify the type of multiselect", + "type": "\"default\" | \"inline\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectionFeedback", + "kind": "let", + "description": "Specify the selection feedback after selecting items", + "type": "\"top\" | \"fixed\" | \"top-after-reopen\"", + "value": "\"top-after-reopen\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "filterable", + "kind": "let", + "description": "Set to `true` to filter items", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "filterItem", + "kind": "let", + "description": "Override the filtering logic\nThe default filtering is an exact string comparison", + "type": "(item: MultiSelectItem, value: string) => string", + "value": "(item, value) => item.text.toLowerCase().includes(value.toLowerCase())", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "locale", + "kind": "let", + "description": "Specify the locale", + "type": "string", + "value": "\"en\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sortItem", + "kind": "let", + "description": "Override the sorting logic\nThe default sorting compare the item text value", + "type": "(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem", + "value": "(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: any) => string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleText", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "useTitleInItem", + "kind": "let", + "description": "Set to `true` to pass the item to `itemToString` in the checkbox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the list box label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the list box component", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the select", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" }, + { "type": "dispatched", "name": "select" } + ], + "typedefs": [ + { + "type": "string", + "name": "MultiSelectItemId", + "ts": "type MultiSelectItemId = string" + }, + { + "type": "string", + "name": "MultiSelectItemText", + "ts": "type MultiSelectItemText = string" + }, + { + "type": "{ id: MultiSelectItemId; text: MultiSelectItemText; }", + "name": "MultiSelectItem", + "ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; }" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Modal", + "filePath": "/src/Modal/Modal.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the modal", + "type": "\"xs\" | \"sm\" | \"lg\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the modal", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "alert", + "kind": "let", + "description": "Set to `true` to enable alert mode", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "passiveModal", + "kind": "let", + "description": "Set to `true` to use the passive variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "modalHeading", + "kind": "let", + "description": "Specify the modal heading", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "modalLabel", + "kind": "let", + "description": "Specify the modal label", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "modalAriaLabel", + "kind": "let", + "description": "Specify the ARIA label for the modal", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the close icon", + "type": "string", + "value": "\"Close the modal\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasForm", + "kind": "let", + "description": "Set to `true` if the modal contains form elements", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasScrollingContent", + "kind": "let", + "description": "Set to `true` if the modal contains scrolling content", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryButtonText", + "kind": "let", + "description": "Specify the primary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryButtonDisabled", + "kind": "let", + "description": "Set to `true` to disable the primary button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "shouldSubmitOnEnter", + "kind": "let", + "description": "Set to `true` for the primary button to be triggered when pressing \"Enter\"", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryButtonText", + "kind": "let", + "description": "Specify the secondary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectorPrimaryFocus", + "kind": "let", + "description": "Specify a selector to be focused when opening the modal", + "type": "string", + "value": "\"[data-modal-primary-focus]\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "preventCloseOnClickOutside", + "kind": "let", + "description": "Set to `true` to prevent the modal from closing when clicking outside", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "heading", + "default": false, + "fallback": "{modalHeading}", + "slot_props": "{}" + }, + { + "name": "label", + "default": false, + "fallback": "{modalLabel}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "div" }, + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "submit" }, + { "type": "dispatched", "name": "click:button--secondary" }, + { "type": "dispatched", "name": "close" }, + { "type": "dispatched", "name": "open" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "NotificationButton", + "filePath": "/src/Notification/NotificationButton.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "renderIcon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Close icon\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "NotificationIcon", + "filePath": "/src/Notification/NotificationIcon.svelte", + "props": [ + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of notification icon", + "type": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", + "value": "\"error\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Closes notification\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [], + "typedefs": [] + }, + { + "moduleName": "NotificationTextDetails", + "filePath": "/src/Notification/NotificationTextDetails.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"Title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "subtitle", + "kind": "let", + "description": "Specify the subtitle text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "caption", + "kind": "let", + "description": "Specify the caption text", + "type": "string", + "value": "\"Caption\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "ToastNotification", + "filePath": "/src/Notification/ToastNotification.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of notification", + "type": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", + "value": "\"error\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "lowContrast", + "kind": "let", + "description": "Set to `true` to use the low contrast variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "timeout", + "kind": "let", + "description": "Set the timeout duration (ms) to hide the notification after opening it", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Set the `role` attribute", + "type": "string", + "value": "\"alert\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"Title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "subtitle", + "kind": "let", + "description": "Specify the subtitle text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "caption", + "kind": "let", + "description": "Specify the caption text", + "type": "string", + "value": "\"Caption\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Closes notification\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideCloseButton", + "kind": "let", + "description": "Set to `true` to hide the close button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "close" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "InlineNotification", + "filePath": "/src/Notification/InlineNotification.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"inline\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of notification", + "type": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", + "value": "\"error\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "lowContrast", + "kind": "let", + "description": "Set to `true` to use the low contrast variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "timeout", + "kind": "let", + "description": "Set the timeout duration (ms) to hide the notification after opening it", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Set the `role` attribute", + "type": "string", + "value": "\"alert\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"Title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "subtitle", + "kind": "let", + "description": "Specify the subtitle text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideCloseButton", + "kind": "let", + "description": "Set to `true` to hide the close button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Closes notification\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { "name": "actions", "default": false, "slot_props": "{}" } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "close" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "NotificationActionButton", + "filePath": "/src/Notification/NotificationActionButton.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "Button" }, + { "type": "forwarded", "name": "mouseover", "element": "Button" }, + { "type": "forwarded", "name": "mouseenter", "element": "Button" }, + { "type": "forwarded", "name": "mouseleave", "element": "Button" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Button" } + }, + { + "moduleName": "NumberInput", + "filePath": "/src/NumberInput/NumberInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "step", + "kind": "let", + "description": "Specify the step increment", + "type": "number", + "value": "1", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "max", + "kind": "let", + "description": "Specify the maximum value", + "type": "number", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "min", + "kind": "let", + "description": "Specify the minimum value", + "type": "number", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "readonly", + "kind": "let", + "description": "Set to `true` for the input to be read-only", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "mobile", + "kind": "let", + "description": "Set to `true` to enable the mobile variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "allowEmpty", + "kind": "let", + "description": "Set to `true` to allow for an empty value", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the increment icons", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: NumberInputTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ increment: \"increment\"; decrement: \"decrement\" }", + "value": "{ increment: \"increment\", decrement: \"decrement\", }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "label", + "default": false, + "fallback": "{label}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [ + { + "type": "\"increment\" | \"decrement\"", + "name": "NumberInputTranslationId", + "ts": "type NumberInputTranslationId = \"increment\" | \"decrement\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "NumberInputSkeleton", + "filePath": "/src/NumberInput/NumberInputSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "OrderedList", + "filePath": "/src/OrderedList/OrderedList.svelte", + "props": [ + { + "name": "nested", + "kind": "let", + "description": "Set to `true` to use the nested variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "native", + "kind": "let", + "description": "Set to `true` to use native list styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "ol" }, + { "type": "forwarded", "name": "mouseover", "element": "ol" }, + { "type": "forwarded", "name": "mouseenter", "element": "ol" }, + { "type": "forwarded", "name": "mouseleave", "element": "ol" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ol" } + }, + { + "moduleName": "Select", + "filePath": "/src/Select/Select.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected item value", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the select input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the select element", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the select element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the select element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noLabel", + "kind": "let", + "description": "Set to `true` to not render a label", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the select HTML element", + "type": "null | HTMLSelectElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "blur", "element": "select" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SelectSkeleton", + "filePath": "/src/Select/SelectSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SelectItem", + "filePath": "/src/Select/SelectItem.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the option value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the option text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hidden", + "kind": "let", + "description": "Set to `true` to hide the option", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the option", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SelectItemGroup", + "filePath": "/src/Select/SelectItemGroup.svelte", + "props": [ + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the optgroup element", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the label attribute of the optgroup element", + "type": "string", + "value": "\"Provide label\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "optgroup" } + }, + { + "moduleName": "Pagination", + "filePath": "/src/Pagination/Pagination.svelte", + "props": [ + { + "name": "page", + "kind": "let", + "description": "Specify the current page index", + "type": "number", + "value": "1", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "totalItems", + "kind": "let", + "description": "Specify the total number of items", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the pagination", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "forwardText", + "kind": "let", + "description": "Specify the forward button text", + "type": "string", + "value": "\"Next page\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "backwardText", + "kind": "let", + "description": "Specify the backward button text", + "type": "string", + "value": "\"Previous page\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemsPerPageText", + "kind": "let", + "description": "Specify the items per page text", + "type": "string", + "value": "\"Items per page:\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemText", + "kind": "let", + "description": "Override the item text", + "type": "(min: number, max: number) => string", + "value": "(min, max) => `${min}–${max} items`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "itemRangeText", + "kind": "let", + "description": "Override the item range text", + "type": "(min: number, max: number, total: number) => string", + "value": "(min, max, total) => `${min}–${max} of ${total} items`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "pageInputDisabled", + "kind": "let", + "description": "Set to `true` to disable the page input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pageSizeInputDisabled", + "kind": "let", + "description": "Set to `true` to disable the page size input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pageSize", + "kind": "let", + "description": "Specify the number of items to display in a page", + "type": "number", + "value": "10", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "pageSizes", + "kind": "let", + "description": "Specify the available page sizes", + "type": "number[]", + "value": "[10]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pagesUnknown", + "kind": "let", + "description": "Set to `true` if the number of pages is unknown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pageText", + "kind": "let", + "description": "Override the page text", + "type": "(page: number) => string", + "value": "(page) => `page ${page}`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "pageRangeText", + "kind": "let", + "description": "Override the page range text", + "type": "(current: number, total: number) => string", + "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [{ "type": "dispatched", "name": "update" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "PaginationSkeleton", + "filePath": "/src/Pagination/PaginationSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "PaginationNav", + "filePath": "/src/PaginationNav/PaginationNav.svelte", + "props": [ + { + "name": "page", + "kind": "let", + "description": "Specify the current page index", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "total", + "kind": "let", + "description": "Specify the total number of pages", + "type": "number", + "value": "10", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "shown", + "kind": "let", + "description": "Specify the total number of pages to show", + "type": "number", + "value": "10", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "loop", + "kind": "let", + "description": "Set to `true` to loop the navigation", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "forwardText", + "kind": "let", + "description": "Specify the forward button text", + "type": "string", + "value": "\"Next page\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "backwardText", + "kind": "let", + "description": "Specify the backward button text", + "type": "string", + "value": "\"Previous page\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "click:button--previous" }, + { "type": "dispatched", "name": "click:button--next" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "nav" } + }, + { + "moduleName": "ProgressIndicator", + "filePath": "/src/ProgressIndicator/ProgressIndicator.svelte", + "props": [ + { + "name": "currentIndex", + "kind": "let", + "description": "Specify the current step index", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "vertical", + "kind": "let", + "description": "Set to `true` to use the vertical variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "spaceEqually", + "kind": "let", + "description": "Set to `true` to specify whether the progress steps should be split equally in size in the div", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "preventChangeOnClick", + "kind": "let", + "description": "Set to `true` to prevent updating `currentIndex`", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + }, + { + "moduleName": "ProgressIndicatorSkeleton", + "filePath": "/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte", + "props": [ + { + "name": "vertical", + "kind": "let", + "description": "Set to `true` to use the vertical variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "count", + "kind": "let", + "description": "Specify the number of steps to render", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + }, + { + "moduleName": "ProgressStep", + "filePath": "/src/ProgressIndicator/ProgressStep.svelte", + "props": [ + { + "name": "complete", + "kind": "let", + "description": "Set to `true` for the complete variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "current", + "kind": "let", + "description": "Set to `true` to use the current variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the progress step", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the step description", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the step label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryLabel", + "kind": "let", + "description": "Specify the step secondary label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "

{label}

", + "slot_props": "{ props: { class: 'bx--progress-label' } }" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "RadioButtonGroup", + "filePath": "/src/RadioButtonGroup/RadioButtonGroup.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Set the selected radio button value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the radio buttons", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelPosition", + "kind": "let", + "description": "Specify the label position", + "type": "\"right\" | \"left\"", + "value": "\"right\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "orientation", + "kind": "let", + "description": "Specify the orientation of the radio buttons", + "type": "\"horizontal\" | \"vertical\"", + "value": "\"horizontal\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the container div element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SkeletonPlaceholder", + "filePath": "/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Slider", + "filePath": "/src/Slider/Slider.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the slider", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "max", + "kind": "let", + "description": "Set the maximum slider value", + "type": "number", + "value": "100", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "maxLabel", + "kind": "let", + "description": "Specify the label for the max value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "min", + "kind": "let", + "description": "Set the minimum slider value", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "minLabel", + "kind": "let", + "description": "Specify the label for the min value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "step", + "kind": "let", + "description": "Set the step value", + "type": "number", + "value": "1", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "stepMultiplier", + "kind": "let", + "description": "Set the step multiplier value", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to require a value", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inputType", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"number\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the slider", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideTextInput", + "kind": "let", + "description": "Set to `true` to hide the text input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the slider div element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Set a name for the slider element", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SliderSkeleton", + "filePath": "/src/Slider/SliderSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredList", + "filePath": "/src/StructuredList/StructuredList.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected structured list row value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "border", + "kind": "let", + "description": "Set to `true` to use the bordered variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selection", + "kind": "let", + "description": "Set to `true` to use the selection variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListSkeleton", + "filePath": "/src/StructuredList/StructuredListSkeleton.svelte", + "props": [ + { + "name": "rows", + "kind": "let", + "description": "Specify the number of rows", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "border", + "kind": "let", + "description": "Set to `true` to use the bordered variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListBody", + "filePath": "/src/StructuredList/StructuredListBody.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListHead", + "filePath": "/src/StructuredList/StructuredListHead.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListCell", + "filePath": "/src/StructuredList/StructuredListCell.svelte", + "props": [ + { + "name": "head", + "kind": "let", + "description": "Set to `true` to use as a header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noWrap", + "kind": "let", + "description": "Set to `true` to prevent wrapping", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListRow", + "filePath": "/src/StructuredList/StructuredListRow.svelte", + "props": [ + { + "name": "head", + "kind": "let", + "description": "Set to `true` to use as a header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Set to `true` to render a label slot", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" }, + { "type": "forwarded", "name": "keydown", "element": "label" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "StructuredListInput", + "filePath": "/src/StructuredList/StructuredListInput.svelte", + "props": [ + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the input", + "type": "string", + "value": "\"title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the input", + "type": "string", + "value": "\"value\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "input" } + }, + { + "moduleName": "Tabs", + "filePath": "/src/Tabs/Tabs.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected tab index", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the type of tabs", + "type": "\"default\" | \"container\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the chevron icon", + "type": "string", + "value": "\"Show menu options\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "triggerHref", + "kind": "let", + "description": "Specify the tab trigger href attribute", + "type": "string", + "value": "\"#\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { "name": "content", "default": false, "slot_props": "{}" } + ], + "events": [ + { "type": "forwarded", "name": "keypress", "element": "div" }, + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Tab", + "filePath": "/src/Tabs/Tab.svelte", + "props": [ + { + "name": "label", + "kind": "let", + "description": "Specify the tab label\nAlternatively, use the default slot (e.g. Label)", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the href attribute", + "type": "string", + "value": "\"#\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tab", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the anchor HTML element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{label}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "mouseover", "element": "li" }, + { "type": "forwarded", "name": "mouseenter", "element": "li" }, + { "type": "forwarded", "name": "mouseleave", "element": "li" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "TabContent", + "filePath": "/src/Tabs/TabContent.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TabsSkeleton", + "filePath": "/src/Tabs/TabsSkeleton.svelte", + "props": [ + { + "name": "count", + "kind": "let", + "description": "Specify the number of tabs to render", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TagSkeleton", + "filePath": "/src/Tag/TagSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "span" }, + { "type": "forwarded", "name": "mouseover", "element": "span" }, + { "type": "forwarded", "name": "mouseenter", "element": "span" }, + { "type": "forwarded", "name": "mouseleave", "element": "span" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "span" } + }, + { + "moduleName": "Tag", + "filePath": "/src/Tag/Tag.svelte", + "props": [ + { + "name": "type", + "kind": "let", + "description": "Specify the type of tag", + "type": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "filter", + "kind": "let", + "description": "Set to `true` to use filterable variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable a filterable tag", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Set the title for the close button in a filterable tag", + "type": "string", + "value": "\"Clear filter\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the filterable tag", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props: { class: 'bx--tag__label' } }" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "TagSkeleton" }, + { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" }, + { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" }, + { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "TagSkeleton" } + }, + { + "moduleName": "TextArea", + "filePath": "/src/TextArea/TextArea.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the textarea value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "cols", + "kind": "let", + "description": "Specify the number of cols", + "type": "number", + "value": "50", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "rows", + "kind": "let", + "description": "Specify the number of rows", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the text for the invalid state", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the textarea element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the textarea HTML element", + "type": "null | HTMLTextAreaElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "textarea" }, + { "type": "forwarded", "name": "input", "element": "textarea" }, + { "type": "forwarded", "name": "focus", "element": "textarea" }, + { "type": "forwarded", "name": "blur", "element": "textarea" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "textarea" } + }, + { + "moduleName": "TextAreaSkeleton", + "filePath": "/src/TextArea/TextAreaSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TextInput", + "filePath": "/src/TextInput/TextInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "warn", + "kind": "let", + "description": "Set to `true` to indicate an warning state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "warnText", + "kind": "let", + "description": "Specify the warning state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to mark the field as required", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use inline version", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TextInputSkeleton", + "filePath": "/src/TextInput/TextInputSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "PasswordInput", + "filePath": "/src/TextInput/PasswordInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"password\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hidePasswordLabel", + "kind": "let", + "description": "Specify the hide password label text", + "type": "string", + "value": "\"Hide password\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showPasswordLabel", + "kind": "let", + "description": "Specify the show password label text", + "type": "string", + "value": "\"Show password\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipAlignment", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon", + "type": "\"start\" | \"center\" | \"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipPosition", + "kind": "let", + "description": "Set the position of the tooltip relative to the icon", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the text for the invalid state", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Tile", + "filePath": "/src/Tile/Tile.svelte", + "props": [ + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ClickableTile", + "filePath": "/src/Tile/ClickableTile.svelte", + "props": [ + { + "name": "clicked", + "kind": "let", + "description": "Set to `true` to click the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Set the `href`", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "keydown", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "ExpandableTile", + "filePath": "/src/Tile/ExpandableTile.svelte", + "props": [ + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to expand the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tileMaxHeight", + "kind": "let", + "description": "Specify the max height of the tile (number of pixels)", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "tilePadding", + "kind": "let", + "description": "Specify the padding of the tile (number of pixels)", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "tileCollapsedIconText", + "kind": "let", + "description": "Specify the icon text of the collapsed tile", + "type": "string", + "value": "\"Interact to expand Tile\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tileExpandedIconText", + "kind": "let", + "description": "Specify the icon text of the expanded tile", + "type": "string", + "value": "\"Interact to collapse Tile\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level div element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "above", "default": false, "slot_props": "{}" }, + { "name": "below", "default": false, "slot_props": "{}" } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "keypress", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SelectableTile", + "filePath": "/src/Tile/SelectableTile.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Set to `true` to select the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the selectable tile", + "type": "string", + "value": "\"title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the selectable tile", + "type": "string", + "value": "\"value\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the selectable tile checkmark icon", + "type": "string", + "value": "\"Tile checkmark\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" }, + { "type": "forwarded", "name": "keydown", "element": "label" }, + { "type": "dispatched" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "RadioTile", + "filePath": "/src/Tile/RadioTile.svelte", + "props": [ + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the radio input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the radio tile checkmark icon", + "type": "string", + "value": "\"Tile checkmark\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "TileGroup", + "filePath": "/src/Tile/TileGroup.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected tile value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tile group", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "legend", + "kind": "let", + "description": "Specify the legend text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "dispatched", "name": "select" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "fieldset" } + }, + { + "moduleName": "TimePicker", + "filePath": "/src/TimePicker/TimePicker.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the input placeholder text", + "type": "string", + "value": "\"hh=mm\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pattern", + "kind": "let", + "description": "Specify the `pattern` attribute for the input element", + "type": "string", + "value": "\"(1[012]|[1-9]):[0-5][0-9](\\\\s)?\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "maxlength", + "kind": "let", + "description": "Specify the `maxlength` input attribute", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TimePickerSelect", + "filePath": "/src/TimePicker/TimePickerSelect.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the select value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the select", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the chevron icon", + "type": "string", + "value": "\"Open list of options\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the select element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the select element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the select HTML element", + "type": "null | HTMLSelectElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Toggle", + "filePath": "/src/Toggle/Toggle.svelte", + "props": [ + { + "name": "toggled", + "kind": "let", + "description": "Set to `true` to toggle the checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelA", + "kind": "let", + "description": "Specify the label for the untoggled state", + "type": "string", + "value": "\"Off\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelB", + "kind": "let", + "description": "Specify the label for the toggled state", + "type": "string", + "value": "\"On\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the checkbox input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ToggleSkeleton", + "filePath": "/src/Toggle/ToggleSkeleton.svelte", + "props": [ + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ToggleSmall", + "filePath": "/src/ToggleSmall/ToggleSmall.svelte", + "props": [ + { + "name": "toggled", + "kind": "let", + "description": "Set to `true` to toggle the checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelA", + "kind": "let", + "description": "Specify the label for the untoggled state", + "type": "string", + "value": "\"Off\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelB", + "kind": "let", + "description": "Specify the label for the toggled state", + "type": "string", + "value": "\"On\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the checkbox input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ToggleSmallSkeleton", + "filePath": "/src/ToggleSmall/ToggleSmallSkeleton.svelte", + "props": [ + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Tooltip", + "filePath": "/src/Tooltip/Tooltip.svelte", + "props": [ + { + "name": "direction", + "kind": "let", + "description": "Set the direction of the tooltip relative to the button", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the tooltip", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "hideIcon", + "kind": "let", + "description": "Set to `true` to hide the tooltip icon", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g. `Add16`, `Task16`)", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the tooltip button", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconName", + "kind": "let", + "description": "Specify the icon name attribute", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Set the button tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipId", + "kind": "let", + "description": "Set an id for the tooltip", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "triggerId", + "kind": "let", + "description": "Set an id for the tooltip button", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "triggerText", + "kind": "let", + "description": "Set the tooltip button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the trigger text HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "refTooltip", + "kind": "let", + "description": "Obtain a reference to the tooltip HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "refIcon", + "kind": "let", + "description": "Obtain a reference to the icon HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "icon", + "default": false, + "fallback": "", + "slot_props": "{}" + }, + { + "name": "triggerText", + "default": false, + "fallback": "{triggerText}", + "slot_props": "{}" + } + ], + "events": [{ "type": "dispatched" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TooltipDefinition", + "filePath": "/src/TooltipDefinition/TooltipDefinition.svelte", + "props": [ + { + "name": "tooltipText", + "kind": "let", + "description": "Specify the tooltip text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "align", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon", + "type": "\"start\" | \"center\" | \"end\"", + "value": "\"center\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "direction", + "kind": "let", + "description": "Set the direction of the tooltip relative to the icon", + "type": "\"top\" | \"bottom\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the tooltip div element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "tooltip", + "default": false, + "fallback": "{tooltipText}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "focus", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TooltipIcon", + "filePath": "/src/TooltipIcon/TooltipIcon.svelte", + "props": [ + { + "name": "tooltipText", + "kind": "let", + "description": "Specify the tooltip text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "align", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon", + "type": "\"start\" | \"center\" | \"end\"", + "value": "\"center\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "direction", + "kind": "let", + "description": "Set the direction of the tooltip relative to the icon", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the span element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "focus", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "Header", + "filePath": "/src/UIShell/GlobalHeader/Header.svelte", + "props": [ + { + "name": "expandedByDefault", + "kind": "let", + "description": "Set to `false` to hide the side nav by default", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "isSideNavOpen", + "kind": "let", + "description": "Set to `true` to open the side nav", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "uiShellAriaLabel", + "kind": "let", + "description": "Specify the ARIA label for the header", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "company", + "kind": "let", + "description": "Specify the company name", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "platformName", + "kind": "let", + "description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. ...)", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "platform", + "default": false, + "fallback": "{platformName}", + "slot_props": "{}" + }, + { "name": "skip-to-content", "default": false, "slot_props": "{}" } + ], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderAction", + "filePath": "/src/UIShell/GlobalHeader/HeaderAction.svelte", + "props": [ + { + "name": "isOpen", + "kind": "let", + "description": "Set to `true` to open the panel", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g.
...
)", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "text", + "default": false, + "fallback": "{#if text}{text}{/if}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "dispatched", "name": "close" }, + { "type": "dispatched" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "HeaderActionLink", + "filePath": "/src/UIShell/GlobalHeader/HeaderActionLink.svelte", + "props": [ + { + "name": "linkIsActive", + "kind": "let", + "description": "Set to `true` to use the active state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderActionSearch", + "filePath": "/src/UIShell/GlobalHeader/HeaderActionSearch.svelte", + "props": [ + { + "name": "searchIsActive", + "kind": "let", + "description": "Set to `true` to focus the search", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { + "type": "dispatched", + "name": "inputSearch", + "detail": "{ action: \"search\"; textInput: string; }" + }, + { "type": "dispatched", "name": "focusInputSearch" }, + { "type": "dispatched", "name": "focusOutInputSearch" } + ], + "typedefs": [] + }, + { + "moduleName": "HeaderNav", + "filePath": "/src/UIShell/GlobalHeader/HeaderNav.svelte", + "props": [ + { + "name": "ariaLabel", + "kind": "let", + "description": "Specify the ARIA label for the nav", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "nav" } + }, + { + "moduleName": "HeaderNavItem", + "filePath": "/src/UIShell/GlobalHeader/HeaderNavItem.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" }, + { "type": "forwarded", "name": "keyup", "element": "a" }, + { "type": "forwarded", "name": "keydown", "element": "a" }, + { "type": "forwarded", "name": "focus", "element": "a" }, + { "type": "forwarded", "name": "blur", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderNavMenu", + "filePath": "/src/UIShell/GlobalHeader/HeaderNavMenu.svelte", + "props": [ + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to toggle the expanded state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "value": "\"/\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the chevron icon", + "type": "string", + "value": "\"Expand/Collapse\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "a" }, + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" }, + { "type": "forwarded", "name": "keyup", "element": "a" }, + { "type": "forwarded", "name": "focus", "element": "a" }, + { "type": "forwarded", "name": "blur", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderPanelDivider", + "filePath": "/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "HeaderPanelLink", + "filePath": "/src/UIShell/GlobalHeader/HeaderPanelLink.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderPanelLinks", + "filePath": "/src/UIShell/GlobalHeader/HeaderPanelLinks.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "HeaderUtilities", + "filePath": "/src/UIShell/GlobalHeader/HeaderUtilities.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SideNav", + "filePath": "/src/UIShell/SideNav/SideNav.svelte", + "props": [ + { + "name": "fixed", + "kind": "let", + "description": "Set to `true` to use the fixed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ariaLabel", + "kind": "let", + "description": "Specify the ARIA label for the nav", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "isOpen", + "kind": "let", + "description": "Set to `true` to toggle the expanded state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "nav" } + }, + { + "moduleName": "SideNavItems", + "filePath": "/src/UIShell/SideNav/SideNavItems.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SideNavLink", + "filePath": "/src/UIShell/SideNav/SideNavLink.svelte", + "props": [ + { + "name": "isSelected", + "kind": "let", + "description": "Set to `true` to select the current link", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "SideNavMenu", + "filePath": "/src/UIShell/SideNav/SideNavMenu.svelte", + "props": [ + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to toggle the expanded state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML button element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "click", "element": "button" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "SideNavMenuItem", + "filePath": "/src/UIShell/SideNav/SideNavMenuItem.svelte", + "props": [ + { + "name": "isSelected", + "kind": "let", + "description": "Set to `true` to select the item", + "type": "boolean", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the item text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "Content", + "filePath": "/src/UIShell/Content.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Specify the id for the main element", + "type": "string", + "value": "\"main-content\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "main" } + }, + { + "moduleName": "SkipToContent", + "filePath": "/src/UIShell/SkipToContent.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "value": "\"#main-content\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "Skip to main content", + "slot_props": "{}" + } + ], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderGlobalAction", + "filePath": "/src/UIShell/HeaderGlobalAction.svelte", + "props": [ + { + "name": "isActive", + "kind": "let", + "description": "Set to `true` to use the active variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML button element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "", + "slot_props": "{}" + } + ], + "events": [{ "type": "forwarded", "name": "click", "element": "button" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "UnorderedList", + "filePath": "/src/UnorderedList/UnorderedList.svelte", + "props": [ + { + "name": "nested", + "kind": "let", + "description": "Set to `true` to use the nested variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + } + ] +} diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 1d741a4b..4ddf4455 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,727 +1,553 @@ # Component Index -> 154 components exported from carbon-components-svelte 0.22.0 +> 154 components exported from carbon-components-svelte@0.22.0. -- Accordion - - [Accordion](#accordion) - - [AccordionItem](#accordionitem) - - [AccordionSkeleton](#accordionskeleton) -- [AspectRatio](#aspectratio) -- Breadcrumb - - [Breadcrumb](#breadcrumb) - - [BreadcrumbItem](#breadcrumbitem) - - [BreadcrumbSkeleton](#breadcrumbskeleton) -- Button - - [Button](#button) - - [ButtonSet](#buttonset) - - [ButtonSkeleton](#buttonskeleton) -- Checkbox - - [Checkbox](#checkbox) - - [CheckboxSkeleton](#checkboxskeleton) -- CodeSnippet - - [CodeSnippet](#codesnippet) - - [CodeSnippetSkeleton](#codesnippetskeleton) -- [ComboBox](#combobox) -- ComposedModal - - [ComposedModal](#composedmodal) - - [ModalBody](#modalbody) - - [ModalFooter](#modalfooter) - - [ModalHeader](#modalheader) -- ContentSwitcher - - [ContentSwitcher](#contentswitcher) - - [Switch](#switch) -- [Copy](#copy) -- [CopyButton](#copybutton) -- DataTable - - [DataTable](#datatable) - - [Table](#table) - - [TableBody](#tablebody) - - [TableCell](#tablecell) - - [TableContainer](#tablecontainer) - - [TableHead](#tablehead) - - [TableHeader](#tableheader) - - [TableRow](#tablerow) - - [Toolbar](#toolbar) - - [ToolbarBatchActions](#toolbarbatchactions) - - [ToolbarContent](#toolbarcontent) - - [ToolbarMenu](#toolbarmenu) - - [ToolbarMenuItem](#toolbarmenuitem) - - [ToolbarSearch](#toolbarsearch) -- [DataTableSkeleton](#datatableskeleton) -- DatePicker - - [DatePicker](#datepicker) - - [DatePickerInput](#datepickerinput) - - [DatePickerSkeleton](#datepickerskeleton) -- Dropdown - - [Dropdown](#dropdown) - - [DropdownSkeleton](#dropdownskeleton) -- FileUploader - - [FileUploader](#fileuploader) - - [FileUploaderButton](#fileuploaderbutton) - - [FileUploaderDropContainer](#fileuploaderdropcontainer) - - [FileUploaderItem](#fileuploaderitem) - - [FileUploaderSkeleton](#fileuploaderskeleton) - - [Filename](#filename) -- [FluidForm](#fluidform) -- [Form](#form) -- [FormGroup](#formgroup) -- [FormItem](#formitem) -- [FormLabel](#formlabel) -- Grid - - [Column](#column) - - [Grid](#grid) - - [Row](#row) -- Icon - - [Icon](#icon) - - [IconSkeleton](#iconskeleton) -- [InlineLoading](#inlineloading) -- [Link](#link) -- ListBox - - [ListBox](#listbox) - - [ListBoxField](#listboxfield) - - [ListBoxMenu](#listboxmenu) - - [ListBoxMenuIcon](#listboxmenuicon) - - [ListBoxMenuItem](#listboxmenuitem) - - [ListBoxSelection](#listboxselection) -- [ListItem](#listitem) -- [Loading](#loading) -- [Modal](#modal) -- [MultiSelect](#multiselect) -- Notification - - [InlineNotification](#inlinenotification) - - [NotificationActionButton](#notificationactionbutton) - - [NotificationButton](#notificationbutton) - - [NotificationIcon](#notificationicon) - - [NotificationTextDetails](#notificationtextdetails) - - [ToastNotification](#toastnotification) -- NumberInput - - [NumberInput](#numberinput) - - [NumberInputSkeleton](#numberinputskeleton) -- [OrderedList](#orderedlist) -- OverflowMenu - - [OverflowMenu](#overflowmenu) - - [OverflowMenuItem](#overflowmenuitem) -- Pagination - - [Pagination](#pagination) - - [PaginationSkeleton](#paginationskeleton) -- [PaginationNav](#paginationnav) -- ProgressIndicator - - [ProgressIndicator](#progressindicator) - - [ProgressIndicatorSkeleton](#progressindicatorskeleton) - - [ProgressStep](#progressstep) -- RadioButton - - [RadioButton](#radiobutton) - - [RadioButtonSkeleton](#radiobuttonskeleton) -- [RadioButtonGroup](#radiobuttongroup) -- Search - - [Search](#search) - - [SearchSkeleton](#searchskeleton) -- Select - - [Select](#select) - - [SelectItem](#selectitem) - - [SelectItemGroup](#selectitemgroup) - - [SelectSkeleton](#selectskeleton) -- [SkeletonPlaceholder](#skeletonplaceholder) -- [SkeletonText](#skeletontext) -- Slider - - [Slider](#slider) - - [SliderSkeleton](#sliderskeleton) -- StructuredList - - [StructuredList](#structuredlist) - - [StructuredListBody](#structuredlistbody) - - [StructuredListCell](#structuredlistcell) - - [StructuredListHead](#structuredlisthead) - - [StructuredListInput](#structuredlistinput) - - [StructuredListRow](#structuredlistrow) - - [StructuredListSkeleton](#structuredlistskeleton) -- Tabs - - [Tab](#tab) - - [TabContent](#tabcontent) - - [Tabs](#tabs) - - [TabsSkeleton](#tabsskeleton) -- Tag - - [Tag](#tag) - - [TagSkeleton](#tagskeleton) -- TextArea - - [TextArea](#textarea) - - [TextAreaSkeleton](#textareaskeleton) -- TextInput - - [PasswordInput](#passwordinput) - - [TextInput](#textinput) - - [TextInputSkeleton](#textinputskeleton) -- Tile - - [ClickableTile](#clickabletile) - - [ExpandableTile](#expandabletile) - - [RadioTile](#radiotile) - - [SelectableTile](#selectabletile) - - [Tile](#tile) - - [TileGroup](#tilegroup) -- TimePicker - - [TimePicker](#timepicker) - - [TimePickerSelect](#timepickerselect) -- Toggle - - [Toggle](#toggle) - - [ToggleSkeleton](#toggleskeleton) -- ToggleSmall - - [ToggleSmall](#togglesmall) - - [ToggleSmallSkeleton](#togglesmallskeleton) -- [Tooltip](#tooltip) -- [TooltipDefinition](#tooltipdefinition) -- [TooltipIcon](#tooltipicon) -- UIShell - - [Content](#content) - - [Header](#header) - - [HeaderAction](#headeraction) - - [HeaderActionLink](#headeractionlink) - - [HeaderActionSearch](#headeractionsearch) - - [HeaderGlobalAction](#headerglobalaction) - - [HeaderNav](#headernav) - - [HeaderNavItem](#headernavitem) - - [HeaderNavMenu](#headernavmenu) - - [HeaderPanelDivider](#headerpaneldivider) - - [HeaderPanelLink](#headerpanellink) - - [HeaderPanelLinks](#headerpanellinks) - - [HeaderUtilities](#headerutilities) - - [SideNav](#sidenav) - - [SideNavItems](#sidenavitems) - - [SideNavLink](#sidenavlink) - - [SideNavMenu](#sidenavmenu) - - [SideNavMenuItem](#sidenavmenuitem) - - [SkipToContent](#skiptocontent) -- [UnorderedList](#unorderedlist) +## Components + +- [`Accordion`](#accordion) +- [`AccordionItem`](#accordionitem) +- [`AccordionSkeleton`](#accordionskeleton) +- [`AspectRatio`](#aspectratio) +- [`Breadcrumb`](#breadcrumb) +- [`BreadcrumbItem`](#breadcrumbitem) +- [`BreadcrumbSkeleton`](#breadcrumbskeleton) +- [`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) +- [`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) +- [`HeaderUtilities`](#headerutilities) +- [`Icon`](#icon) +- [`IconSkeleton`](#iconskeleton) +- [`InlineLoading`](#inlineloading) +- [`InlineNotification`](#inlinenotification) +- [`Link`](#link) +- [`ListBox`](#listbox) +- [`ListBoxField`](#listboxfield) +- [`ListBoxMenu`](#listboxmenu) +- [`ListBoxMenuIcon`](#listboxmenuicon) +- [`ListBoxMenuItem`](#listboxmenuitem) +- [`ListBoxSelection`](#listboxselection) +- [`ListItem`](#listitem) +- [`Loading`](#loading) +- [`Modal`](#modal) +- [`ModalBody`](#modalbody) +- [`ModalFooter`](#modalfooter) +- [`ModalHeader`](#modalheader) +- [`MultiSelect`](#multiselect) +- [`NotificationActionButton`](#notificationactionbutton) +- [`NotificationButton`](#notificationbutton) +- [`NotificationIcon`](#notificationicon) +- [`NotificationTextDetails`](#notificationtextdetails) +- [`NumberInput`](#numberinput) +- [`NumberInputSkeleton`](#numberinputskeleton) +- [`OrderedList`](#orderedlist) +- [`OverflowMenu`](#overflowmenu) +- [`OverflowMenuItem`](#overflowmenuitem) +- [`Pagination`](#pagination) +- [`PaginationNav`](#paginationnav) +- [`PaginationSkeleton`](#paginationskeleton) +- [`PasswordInput`](#passwordinput) +- [`ProgressIndicator`](#progressindicator) +- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton) +- [`ProgressStep`](#progressstep) +- [`RadioButton`](#radiobutton) +- [`RadioButtonGroup`](#radiobuttongroup) +- [`RadioButtonSkeleton`](#radiobuttonskeleton) +- [`RadioTile`](#radiotile) +- [`Row`](#row) +- [`Search`](#search) +- [`SearchSkeleton`](#searchskeleton) +- [`Select`](#select) +- [`SelectItem`](#selectitem) +- [`SelectItemGroup`](#selectitemgroup) +- [`SelectSkeleton`](#selectskeleton) +- [`SelectableTile`](#selectabletile) +- [`SideNav`](#sidenav) +- [`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) +- [`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) +- [`TooltipIcon`](#tooltipicon) +- [`UnorderedList`](#unorderedlist) --- -## Accordion - -### Import path - -```js -import { Accordion } from "carbon-components-svelte"; -``` +## `Accordion` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------- | :------------ | :------------------------------------------------ | -| align | "start" | "end" | `"end"` | Specify alignment of accordion item chevron icon. | -| size | "sm" | "xl" | -- | Specify the size of the accordion. | -| disabled | boolean | `false` | Set to `true` to disable the accordion. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ | +| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | let | No | "sm" | "xl" | -- | 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## AccordionItem - -### Import path - -```js -import { AccordionItem } from "carbon-components-svelte"; -``` +## `AccordionItem` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------- | -| title | string | `"title"` | Specify the title of the accordion item heading. Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>). | -| open | boolean | `false` | Set to `true` to open the first accordion item. | -| disabled | boolean | `false` | Set to `true` to disable the accordion item. | -| iconDescription | string | `"Expand/Collapse"` | Specify the ARIA label for the accordion item chevron icon. | +| Prop name | 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 named slot "title" (e.g. <div slot="title">...</div>) | +| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots -- **default**: `
...
` -- **"title"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------- | +| -- | Yes | -- | -- | +| title | No | -- | {title} | -### Forwarded events +### Events -- `on:animationend` -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| animationend | forwarded | -- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## AccordionSkeleton - -### Import path - -```js -import { AccordionSkeleton } from "carbon-components-svelte"; -``` +## `AccordionSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------- | :------------ | :------------------------------------------------ | -| count | number | `4` | Specify the number of accordion items to render. | -| align | "start" | "end" | `"end"` | Specify alignment of accordion item chevron icon. | -| size | "sm" | "xl" | -- | Specify the size of the accordion. | -| open | boolean | `true` | Set to `false` to close the first accordion item. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ | +| count | let | No | number | 4 | Specify the number of accordion items to render | +| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion | +| open | let | No | boolean | true | Set to `false` to close the first accordion item | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## AspectRatio - -### Import path - -```js -import { AspectRatio } from "carbon-components-svelte"; -``` +## `AspectRatio` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------ | -| ratio | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | `"2x1"` | Specify the aspect ratio. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## Breadcrumb - -### Import path - -```js -import { Breadcrumb } from "carbon-components-svelte"; -``` +## `Breadcrumb` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :------------ | :--------------------------------------------------- | -| noTrailingSlash | boolean | `false` | Set to `true` to hide the breadcrumb trailing slash. | -| skeleton | boolean | `false` | Set to `true` to display skeleton state. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | +| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| skeleton | let | No | boolean | false | Set to `true` to display skeleton state | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## BreadcrumbItem - -### Import path - -```js -import { BreadcrumbItem } from "carbon-components-svelte"; -``` +## `BreadcrumbItem` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :------------------- | :------------ | :---------------------------------------------------------------- | -| href | string | -- | Set the `href` to use an anchor link. | -| isCurrentPage | boolean | `false` | Set to `true` if the breadcrumb item represents the current page. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------- | +| href | let | No | string | -- | 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## BreadcrumbSkeleton - -### Import path - -```js -import { BreadcrumbSkeleton } from "carbon-components-svelte"; -``` +## `BreadcrumbSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :------------ | :--------------------------------------------------- | -| noTrailingSlash | boolean | `false` | Set to `true` to hide the breadcrumb trailing slash. | -| count | number | `3` | Specify the number of breadcrumb items to render. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | +| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| count | let | No | number | 3 | Specify the number of breadcrumb items to render | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Button - -### Import path - -```js -import { Button } from "carbon-components-svelte"; -``` +## `Button` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | `"primary"` | Specify the kind of button. | -| size | "default" | "field" | "small" | `"default"` | Specify the size of button. | -| hasIconOnly | boolean | `false` | Set to `true` for the icon-only variant. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | -| iconDescription | string | -- | Specify the ARIA label for the button icon. | -| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>). | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| disabled | boolean | `false` | Set to `true` to disable the button. | -| href | string | -- | Set the `href` to use an anchor link. | -| tabindex | string | `"0"` | Specify the tabindex. | -| type | string | `"button"` | Specify the `type` attribute for the button element. | -| ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | +| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | +| hasIconOnly | let | No | boolean | false | Set to `true` for the icon-only variant | +| icon | let | No | 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" | -- | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | +| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | +| -- | Yes | { props?: { role: "button"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ButtonSet - -### Import path - -```js -import { ButtonSet } from "carbon-components-svelte"; -``` +## `ButtonSet` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------------- | -| stacked | boolean | `false` | Set to `true` to stack the buttons vertically. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | +| stacked | let | No | boolean | false | Set to `true` to stack the buttons vertically | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ButtonSkeleton - -### Import path - -```js -import { ButtonSkeleton } from "carbon-components-svelte"; -``` +## `ButtonSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :--------------------------------------------------- | :------------ | :-------------------------------------- | -| href | string | -- | Set the `href` to use an anchor link. | -| size | "default" | "field" | "small" | `"default"` | Specify the size of button skeleton. | -| small | boolean | `false` | Set to `true` to use the small variant. | +| 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" | "default" | Specify the size of button skeleton | +| small | let | No | boolean | false | Set to `true` to use the small variant | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Checkbox - -### Import path - -```js -import { Checkbox } from "carbon-components-svelte"; -``` +## `Checkbox` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------------------- | :------------ | :------------------------------------------------- | -| checked | boolean | `false` | Specify whether the checkbox is checked. | -| indeterminate | boolean | `false` | Specify whether the checkbox is indeterminate. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| readonly | boolean | `false` | Set to `true` for the checkbox to be read-only. | -| disabled | boolean | `false` | Set to `true` to disable the checkbox. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| name | string | `""` | Set a name for the input element. | -| title | string | -- | Specify the title attribute for the label element. | -| id | string | -- | Set an id for the input label. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| 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 -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` +| Event name | Type | Detail | +| :--------- | :--------- | :------------------- | +| check | dispatched | boolean | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | -### Dispatched events - -- `on:check` - ---- - -## CheckboxSkeleton - -### Import path - -```js -import { CheckboxSkeleton } from "carbon-components-svelte"; -``` +## `CheckboxSkeleton` ### Props -No exported props. +None. ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ClickableTile - -### Import path - -```js -import { ClickableTile } from "carbon-components-svelte"; -``` +## `ClickableTile` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| clicked | boolean | `false` | Set to `true` to click the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| href | string | -- | Set the `href`. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| clicked | let | Yes | boolean | false | Set to `true` to click the tile | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| href | let | No | string | -- | Set the `href` | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:keydown` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keydown | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## CodeSnippet - -### Import path - -```js -import { CodeSnippet } from "carbon-components-svelte"; -``` +## `CodeSnippet` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------- | -| type | "single" | "inline" | "multi" | `"single"` | Set the type of code snippet. | -| code | string | -- | Set the code snippet text. Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>). | -| expanded | boolean | `false` | Set to `true` to expand a multi-line code snippet (type="multi"). | -| hideCopyButton | boolean | `false` | Set to `true` to hide the copy button. | -| wrapText | boolean | `false` | Set to `true` to wrap the text. Note that `type` must be "multi". | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| copyButtonDescription | string | -- | Specify the ARIA label for the copy button icon. | -| copyLabel | string | -- | Specify the ARIA label of the copy button. | -| feedback | string | `"Copied!"` | Specify the feedback text displayed when clicking the snippet. | -| feedbackTimeout | number | `2000` | Set the timeout duration (ms) to display feedback text. | -| showLessText | string | `"Show less"` | Specify the show less text. `type` must be "multi". | -| showMoreText | string | `"Show more"` | Specify the show more text. `type` must be "multi". | -| showMoreLess | boolean | `false` | Set to `true` to enable the show more/less button. | -| id | string | -- | Set an id for the code element. | -| ref | null | HTMLPreElement | `null` | Obtain a reference to the pre HTML element. | +| Prop name | 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>) | +| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | +| 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------ | +| -- | Yes | -- | {code} | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:animationend` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| animationend | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## CodeSnippetSkeleton - -### Import path - -```js -import { CodeSnippetSkeleton } from "carbon-components-svelte"; -``` +## `CodeSnippetSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :--------------------------------------------------- | :------------ | :---------------------------- | -| type | "single" | "inline" | "multi" | `"single"` | Set the type of code snippet. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------- | --------------------- | ---------------------------- | +| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events +## `Column` -No dispatched events. - ---- - -## Column - -### Import path - -```js -import { Column } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `Column` type definitions - type ColumnSize = boolean | number; interface ColumnSizeDescriptor { @@ -732,469 +558,379 @@ interface ColumnSizeDescriptor { type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ``` -| Prop name | Type | Default value | Description | -| :------------ | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>). | -| noGutter | boolean | `false` | Set to `true` to remove the gutter. | -| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | -| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | -| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column. | -| sm | ColumnBreakpoint | -- | Set the small breakpoint. | -| md | ColumnBreakpoint | -- | Set the medium breakpoint. | -| lg | ColumnBreakpoint | -- | Set the large breakpoint. | -| xlg | ColumnBreakpoint | -- | Set the extra large breakpoint. | -| max | ColumnBreakpoint | -- | Set the maximum breakpoint. | +### 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 | +| 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------- | :------- | +| -- | Yes | { props?: { class: string; } } | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events +## `ComboBox` -No dispatched events. - ---- - -## ComboBox - -### Import path - -```js -import { ComboBox } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ComboBox` type definitions - interface ComboBoxItem { id: string; text: string; } ``` -| Prop name | Type | Default value | Description | -| :--------------- | :---------------------------------------------------------- | :------------ | :------------------------------------------------------------------------ | -| items | ComboBoxItem[] | `[]` | Set the combobox items. | -| itemToString | (item: ComboBoxItem) => string | -- | Override the display of a combobox item. | -| selectedIndex | number | -- | Set the selected item by value index. | -| value | string | `""` | Specify the selected combobox value. | -| size | "sm" | "xl" | -- | Set the size of the combobox. | -| disabled | boolean | `false` | Set to `true` to disable the combobox. | -| titleText | string | `""` | Specify the title text of the combobox. | -| placeholder | string | `""` | Specify the placeholder text. | -| helperText | string | `""` | Specify the helper text. | -| invalidText | string | `""` | Specify the invalid state text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| open | boolean | `false` | Set to `true` to open the combobox menu dropdown. | -| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- | Determine if an item should be filtered given the current combobox value. | -| translateWithId | (id: any) => string | -- | Override the default translation ids. | -| id | string | -- | Set an id for the list box component. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | -| listRef | null | HTMLDivElement | `null` | Obtain a reference to the list HTML element. | +### 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 | +| 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 | +| 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 -No slots. +None. -### Forwarded events +### Events -- `on:keydown` -- `on:focus` -- `on:blur` -- `on:clear` -- `on:scroll` +| Event name | Type | Detail | +| :--------- | :--------- | :------------------------------------------------------------------------------------- | +| select | dispatched | { selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem } | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| clear | forwarded | -- | +| scroll | forwarded | -- | -### Dispatched events - -- `on:select` - ---- - -## ComposedModal - -### Import path - -```js -import { ComposedModal } from "carbon-components-svelte"; -``` +## `ComposedModal` ### Props -| Prop name | Type | Default value | Description | -| :------------------------- | :---------------------------------------- | :----------------------------- | :--------------------------------------------------------------------- | -| size | "xs" | "sm" | "lg" | -- | Set the size of the composed modal. | -| open | boolean | `false` | Set to `true` to open the modal. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | -| preventCloseOnClickOutside | boolean | `false` | Set to `true` to prevent the modal from closing when clicking outside. | -| containerClass | string | `""` | Specify a class for the inner modal. | -| selectorPrimaryFocus | string | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the modal | +| size | let | No | "xs" | "sm" | "lg" | -- | 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 | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:transitionend` +| Event name | Type | Detail | +| :------------ | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| transitionend | forwarded | -- | +| submit | dispatched | -- | +| close | dispatched | -- | +| open | dispatched | -- | -### Dispatched events - -- `on:submit` -- `on:close` -- `on:open` - ---- - -## Content - -### Import path - -```js -import { Content } from "carbon-components-svelte"; -``` +## `Content` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :--------------- | :----------------------------------- | -| id | string | `"main-content"` | Specify the id for the main element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | --------------------------- | ----------------------------------- | +| id | let | No | string | "main-content" | Specify the id for the main element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ContentSwitcher - -### Import path - -```js -import { ContentSwitcher } from "carbon-components-svelte"; -``` +## `ContentSwitcher` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------- | :------------ | :----------------------------------------- | -| selectedIndex | number | `0` | Set the selected index of the switch item. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| size | "sm" | "xl" | -- | Specify the size of the content switcher. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :---------------------------- | ------------------ | ----------------------------------------- | +| selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| size | let | No | "sm" | "xl" | -- | Specify the size of the content switcher | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :--------- | :------------------ | +| change | dispatched | number | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -- `on:change` - ---- - -## Copy - -### Import path - -```js -import { Copy } from "carbon-components-svelte"; -``` +## `Copy` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :----------------------------------------- | :------------ | :------------------------------------------------------ | -| feedback | string | `"Copied!"` | Set the feedback text shown after clicking the button. | -| feedbackTimeout | number | `2000` | Set the timeout duration (ms) to display feedback text. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------------------------------------------------------------------- | +| -- | Yes | -- | {#if animation}{feedback || \$\$restProps['aria-label']}{/if} | -### Forwarded events +### Events -- `on:click` -- `on:animationend` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| animationend | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## CopyButton - -### Import path - -```js -import { CopyButton } from "carbon-components-svelte"; -``` +## `CopyButton` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------ | :-------------------- | :------------------------------------------------ | -| iconDescription | string | `"Copy to clipboard"` | Set the title and ARIA label for the copy button. | +| 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 | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:animationend` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| animationend | forwarded | -- | -### Dispatched events +## `DataTable` -No dispatched events. - ---- - -## DataTable - -### Import path - -```js -import { DataTable } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- | -| headers | { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[] | `[]` | Specify the data table headers. | -| rows | Object[] | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. | -| size | "compact" | "short" | "tall" | -- | Set the size of the data table. | -| title | string | `""` | Specify the title of the data table. | -| description | string | `""` | Specify the description of the data table. | -| zebra | boolean | `false` | Set to `true` to use zebra styles. | -| sortable | boolean | `false` | Set to `true` for the sortable variant. | -| expandable | boolean | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. | -| batchExpansion | boolean | `false` | Set to `true` to enable batch expansion. | -| expandedRowIds | string[] | `[]` | Specify the row ids to be expanded. | -| radio | boolean | `false` | Set to `true` for the radio selection variant. | -| selectable | boolean | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. | -| batchSelection | boolean | `false` | Set to `true` to enable batch selection. | -| selectedRowIds | string[] | `[]` | Specify the row ids to be selected. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | - -### Slots - -- **default**: `
...
` -- **"cell-header"**: `
...
` -- **"cell"**: `
...
` -- **"expanded-row"**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:click:header--expand` -- `on:click` -- `on:click:header` -- `on:click:row` -- `on:mouseenter:row` -- `on:mouseleave:row` -- `on:click:row--expand` -- `on:click:cell` - ---- - -## DataTableSkeleton - -### Import path - -```js -import { DataTableSkeleton } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :---------- | :-------------------------------------------------- | :------------ | :--------------------------------------------------------------------------- | -| columns | number | `5` | Specify the number of columns. | -| rows | number | `5` | Specify the number of rows. | -| size | "compact" | "short" | "tall" | -- | Set the size of the data table. | -| zebra | boolean | `false` | Set to `true` to apply zebra styles to the datatable rows. | -| showHeader | boolean | `true` | Set to `false` to hide the header. | -| headers | string[] | `[]` | Set the column headers. If `headers` has one more items, `count` is ignored. | -| showToolbar | boolean | `true` | Set to `false` to hide the toolbar. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## DatePicker - -### Import path - -```js -import { DatePicker } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------- | -| datePickerType | "simple" | "single" | "range" | `"simple"` | Specify the date picker type. | -| value | string | `""` | Specify the date picker input value. | -| appendTo | HTMLElement | -- | Specify the element to append the calendar to. | -| dateFormat | string | `"m/d/Y"` | Specify the date format. | -| maxDate | null | string | Date | `null` | Specify the maximum date. | -| minDate | null | string | Date | `null` | Specify the minimum date. | -| locale | string | `"en"` | Specify the locale. | -| short | boolean | `false` | Set to `true` to use the short variant. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| id | string | -- | Set an id for the date picker element. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -- `on:change` - ---- - -## DatePickerInput - -### Import path - -```js -import { DatePickerInput } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------------- | :---------------------------------------- | :------------------------------- | :-------------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| type | string | `"text"` | Specify the input type. | -| placeholder | string | `""` | Specify the input placeholder text. | -| pattern | string | `"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"` | Specify the Regular Expression for the input value. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| iconDescription | string | `""` | Specify the ARIA label for the calendar icon. | -| id | string | -- | Set an id for the input element. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| name | string | -- | Set a name for the input element. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | - -### Slots - -No slots. - -### Forwarded events - -- `on:input` -- `on:keydown` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- - -## DatePickerSkeleton - -### Import path - -```js -import { DatePickerSkeleton } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| range | boolean | `false` | Set to `true` to use the range variant. | -| id | string | -- | Set an id to be used by the label element. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## Dropdown - -### Import path - -```js -import { Dropdown } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `Dropdown` type definitions +interface Header { + key: string; + value: string; + display?: (item) => string; + sort?: (a, b) => number; + empty?: boolean; + columnMenu?: boolean; +} +type Headers = Header[]; +``` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- | +| selectedRowIds | let | Yes | string[] | [] | 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 | string[] | [] | 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 | Object[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| headers | let | No | Headers | [] | Specify the data table headers | +| size | let | No | "compact" | "short" | "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 | + +### Slots + +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :------------------------------------------- | :------------------------------------------------------------------------------ | +| -- | Yes | -- | -- | +| cell | No | { row: Object; cell: Object; } | {headers[j].display ? headers[j].display(cell.value) : cell.value} | +| cell-header | No | { header: Header} | {header.value} | +| expanded-row | No | { row: Object; } | -- | + +### Events + +| Event name | Type | Detail | +| :------------------- | :--------- | :-------------------------------------------------------------------------------------------- | +| click | dispatched | { header?: Header; row?: Object; cell?: Object; } | +| click:header--expand | dispatched | { expanded: boolean; } | +| click:header | dispatched | { header: Header; sortDirection: "ascending" | "descending" | "none" } | +| click:row | dispatched | Object | +| mouseenter:row | dispatched | Object | +| mouseleave:row | dispatched | Object | +| click:row--expand | dispatched | { expanded: boolean; row: Object; } | +| click:cell | dispatched | Object | + +## `DataTableSkeleton` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------- | +| columns | let | No | number | 5 | Specify the number of columns | +| 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[] | [] | Set the column headers
If `headers` has one more items, `count` is ignored | +| 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 | +| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | +| value | let | Yes | string | "" | Specify the date picker input value | +| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | +| appendTo | let | No | HTMLElement | -- | Specify the element to append the calendar to | +| 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 | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | +| undefined | dispatched | -- | + +## `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 | +| 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 | +| name | let | No | string | -- | Set a name for the input element | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| input | forwarded | -- | +| keydown | 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 type DropdownItemId = string; type DropdownItemText = string; @@ -1205,1507 +941,1121 @@ interface DropdownItem { } ``` -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------ | :------------ | :--------------------------------------------- | -| items | DropdownItem[] | `[]` | Set the dropdown items. | -| itemToString | (item: DropdownItem) => string | -- | Override the display of a dropdown item. | -| selectedIndex | number | -- | Specify the selected item index. | -| type | "default" | "inline" | `"default"` | Specify the type of dropdown. | -| size | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field. | -| open | boolean | `false` | Set to `true` to open the dropdown. | -| inline | boolean | `false` | Set to `true` to use the inline variant. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the dropdown. | -| titleText | string | `""` | Specify the title text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| label | string | -- | Specify the list box label. | -| translateWithId | (id: any) => string | -- | Override the default translation ids. | -| id | string | -- | Set an id for the list box component. | -| name | string | -- | Specify a name attribute for the list box. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +### 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 | +| 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 | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | -- | Specify the list box label | +| 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 -No slots. +None. -### Forwarded events +### Events -No forwarded events. +| Event name | Type | Detail | +| :--------- | :--------- | :--------------------------------------------------------------------------------------------- | +| select | dispatched | { selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem } | -### Dispatched events - -- `on:select` - ---- - -## DropdownSkeleton - -### Import path - -```js -import { DropdownSkeleton } from "carbon-components-svelte"; -``` +## `DropdownSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| inline | boolean | `false` | Set to `true` to use the inline variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | +| inline | let | No | boolean | false | Set to `true` to use the inline variant | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ExpandableTile - -### Import path - -```js -import { ExpandableTile } from "carbon-components-svelte"; -``` +## `ExpandableTile` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :----------------------------------- | :---------------------------- | :----------------------------------------------------- | -| expanded | boolean | `false` | Set to `true` to expand the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| tileMaxHeight | number | `0` | Specify the max height of the tile (number of pixels). | -| tilePadding | number | `0` | Specify the padding of the tile (number of pixels). | -| tileCollapsedIconText | string | `"Interact to expand Tile"` | Specify the icon text of the collapsed tile. | -| tileExpandedIconText | string | `"Interact to collapse Tile"` | Specify the icon text of the expanded tile. | -| tabindex | string | `"0"` | Specify the tabindex. | -| id | string | -- | Set an id for the top-level div element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | 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 | +| 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 -- **"above"**: `
...
` -- **"below"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| above | No | -- | -- | +| below | No | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:keypress` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keypress | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events +## `FileUploader` -No dispatched events. - ---- - -## FileUploader - -### Import path - -```js -import { FileUploader } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :---------------------- | :----------------------------------------------------------------------------------------- | :--------------------------- | :--------------------------------------------------------------------- | -| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. | -| accept | string[] | `[]` | Specify the accepted file types. | -| files | string[] | `[]` | Obtain the uploaded file names. | -| multiple | boolean | `false` | Set to `true` to allow multiple files. | -| clearFiles (`constant`) | () => any | -- | Override the default behavior of clearing the array of uploaded files. | -| labelDescription | string | `""` | Specify the label description. | -| labelTitle | string | `""` | Specify the label title. | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. | -| buttonLabel | string | `""` | Specify the button label. | -| iconDescription | string | `"Provide icon description"` | Specify the ARIA label used for the status icons. | -| name | string | `""` | Specify a name attribute for the file button uploader input. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:keydown` - -### Dispatched events - -- `on:add` -- `on:remove` - ---- - -## FileUploaderButton - -### Import path - -```js -import { FileUploaderButton } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :------------------ | :----------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | -| accept | string[] | `[]` | Specify the accepted file types. | -| multiple | boolean | `false` | Set to `true` to allow multiple files. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| disableLabelChanges | boolean | `false` | Set to `true` to disable label changes. | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. | -| labelText | string | `"Add file"` | Specify the label text. | -| role | string | `"button"` | Specify the label role. | -| tabindex | string | `"0"` | Specify `tabindex` attribute. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | - -### Slots - -No slots. - -### Forwarded events - -- `on:keydown` -- `on:change` -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## FileUploaderDropContainer - -### Import path - -```js -import { FileUploaderDropContainer } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `FileUploaderDropContainer` type definitions - type Files = string[]; ``` -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- | -| accept | string[] | `[]` | Specify the accepted file types. | -| multiple | boolean | `false` | Set to `true` to allow multiple files. | -| validateFiles | (files: Files) => Files | -- | Override the default behavior of validating uploaded files. The default behavior does not validate files. | -| labelText | string | `"Add file"` | Specify the label text. | -| role | string | `"button"` | Specify the `role` attribute of the drop container. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| tabindex | string | `"0"` | Specify `tabindex` attribute. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | +| files | let | Yes | Files | [] | Obtain the uploaded file names | +| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| accept | let | No | Files | [] | 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 -No slots. +None. -### Forwarded events +### Events -- `on:dragover` -- `on:dragleave` -- `on:drop` -- `on:keydown` -- `on:change` -- `on:click` +| Event name | Type | Detail | +| :--------- | :--------- | :----------------- | +| add | dispatched | Files | +| remove | dispatched | Files | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keydown | forwarded | -- | -### Dispatched events +## `FileUploaderButton` -- `on:add` - ---- - -## FileUploaderItem - -### Import path - -```js -import { FileUploaderItem } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ | -| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. | -| iconDescription | string | `""` | Specify the ARIA label used for the status icons. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| errorSubject | string | `""` | Specify the error subject text. | -| errorBody | string | `""` | Specify the error body text. | -| id | string | -- | Set an id for the top-level element. | -| name | string | `""` | Specify the file uploader name. | - -### Slots - -No slots. - -### Forwarded events - -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -- `on:delete` - ---- - -## FileUploaderSkeleton - -### Import path - -```js -import { FileUploaderSkeleton } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## Filename - -### Import path - -```js -import { Filename } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ | -| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file name status. | -| iconDescription | string | `""` | Specify the ARIA label used for the status icons. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:keydown` - -### Dispatched events - -No dispatched events. - ---- - -## FluidForm - -### Import path - -```js -import { FluidForm } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## Form - -### Import path - -```js -import { Form } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:submit` - -### Dispatched events - -No dispatched events. - ---- - -## FormGroup - -### Import path - -```js -import { FormGroup } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :---------- | :------------------- | :------------ | :------------------------------------------ | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| message | boolean | `false` | Set to `true` to render a form requirement. | -| messageText | string | `""` | Specify the message text. | -| legendText | string | `""` | Specify the legend text. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## FormItem - -### Import path - -```js -import { FormItem } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## FormLabel - -### Import path - -```js -import { FormLabel } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :----------------------------------------- | -| id | string | -- | Set an id to be used by the label element. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## Grid - -### Import path - -```js -import { Grid } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>). | -| condensed | boolean | `false` | Set to `true` to use the condensed variant. | -| narrow | boolean | `false` | Set to `true` to use the narrow variant. | -| fullWidth | boolean | `false` | Set to `true` to use the fullWidth variant. | -| noGutter | boolean | `false` | Set to `true` to remove the gutter. | -| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | -| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## Header - -### Import path - -```js -import { Header } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :---------------- | :----------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------- | -| expandedByDefault | boolean | `true` | Set to `false` to hide the side nav by default. | -| isSideNavOpen | boolean | `false` | Set to `true` to open the side nav. | -| uiShellAriaLabel | string | -- | Specify the ARIA label for the header. | -| href | string | -- | Specify the `href` attribute. | -| company | string | -- | Specify the company name. | -| platformName | string | `""` | Specify the platform name. Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>). | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### Slots - -- **default**: `
...
` -- **"skip-to-content"**: `
...
` -- **"platform"**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## HeaderAction - -### Import path - -```js -import { HeaderAction } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- | -| isOpen | boolean | `false` | Set to `true` to open the panel. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| text | string | -- | Specify the text. Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>). | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | - -### Slots - -- **default**: `
...
` -- **"text"**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -- `on:close` - ---- - -## HeaderActionLink - -### Import path - -```js -import { HeaderActionLink } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | -| linkIsActive | boolean | `false` | Set to `true` to use the active state. | -| href | string | -- | Specify the `href` attribute. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### Slots - -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## HeaderActionSearch - -### Import path - -```js -import { HeaderActionSearch } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :------------- | :------------------- | :------------ | :--------------------------------- | -| searchIsActive | boolean | `false` | Set to `true` to focus the search. | - -### Slots - -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:focusInputSearch` -- `on:focusOutInputSearch` -- `on:inputSearch` - ---- - -## HeaderGlobalAction - -### Import path - -```js -import { HeaderGlobalAction } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------------------------------------------------------ | :------------ | :--------------------------------------------- | -| isActive | boolean | `false` | Set to `true` to use the active variant. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon to render. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button element. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## HeaderNav - -### Import path - -```js -import { HeaderNav } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :---------------------------------- | -| ariaLabel | string | -- | Specify the ARIA label for the nav. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## HeaderNavItem - -### Import path - -```js -import { HeaderNavItem } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- | -| href | string | -- | Specify the `href` attribute. | -| text | string | -- | Specify the text. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keyup` -- `on:keydown` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- - -## HeaderNavMenu - -### Import path - -```js -import { HeaderNavMenu } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------------- | :----------------------------------------- | :------------------ | :--------------------------------------------- | -| expanded | boolean | `false` | Set to `true` to toggle the expanded state. | -| href | string | `"/"` | Specify the `href` attribute. | -| text | string | -- | Specify the text. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | -| iconDescription | string | `"Expand/Collapse"` | Specify the ARIA label for the chevron icon. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:keydown` -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keyup` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- - -## HeaderPanelDivider - -### Import path - -```js -import { HeaderPanelDivider } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## HeaderPanelLink - -### Import path - -```js -import { HeaderPanelLink } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- | -| href | string | -- | Specify the `href` attribute. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## HeaderPanelLinks - -### Import path - -```js -import { HeaderPanelLinks } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## HeaderUtilities - -### Import path - -```js -import { HeaderUtilities } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## Icon - -### Import path - -```js -import { Icon } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------------------------------------------------------ | :------------ | :------------------------------------------------------------------------------------------------------ | -| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. Icon size must be 16px (e.g. `Add16`, `Task16`). | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## IconSkeleton - -### Import path - -```js -import { IconSkeleton } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :------------------------ | -| size | number | `16` | Set the size of the icon. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## InlineLoading - -### Import path - -```js -import { InlineLoading } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------------- | :----------------------------------------------------------------------- | :------------ | :----------------------------------------------------------------- | -| status | "active" | "inactive" | "finished" | "error" | `"active"` | Set the loading status. | -| description | string | -- | Set the loading description. | -| iconDescription | string | -- | Specify the ARIA label for the loading icon. | -| successDelay | number | `1500` | Specify the timeout delay (ms) after `status` is set to "success". | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -- `on:success` - ---- - -## InlineNotification - -### Import path - -```js -import { InlineNotification } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- | -| notificationType | "toast" | "inline" | `"inline"` | Set the type of notification. | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. | -| lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. | -| timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. | -| role | string | `"alert"` | Set the `role` attribute. | -| title | string | `"Title"` | Specify the title text. | -| subtitle | string | `""` | Specify the subtitle text. | -| hideCloseButton | boolean | `false` | Set to `true` to hide the close button. | -| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | - -### Slots - -- **default**: `
...
` -- **"actions"**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -- `on:close` - ---- - -## Link - -### Import path - -```js -import { Link } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ | -| size | "sm" | "lg" | -- | Specify the size of the link. | -| href | string | -- | Specify the href value. | -| inline | boolean | `false` | Set to `true` to use the inline variant. | -| disabled | boolean | `false` | Set to `true` to disable the checkbox. | -| visited | boolean | `false` | Set to `true` to allow visited styles. | -| ref | null | HTMLAnchorElement | HTMLParagraphElement | `null` | Obtain a reference to the top-level HTML element. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## ListBox - -### Import path - -```js -import { ListBox } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :---------- | :------------------------------------- | :------------ | :------------------------------------------ | -| size | "sm" | "xl" | -- | Set the size of the list box. | -| type | "default" | "inline" | `"default"` | Set the type of the list box. | -| open | boolean | `false` | Set to `true` to open the list box. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the list box. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:keydown` -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## ListBoxField - -### Import path - -```js -import { ListBoxField } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ListBoxField` type definitions +type Files = string[]; +``` +### 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 | Files | [] | 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 + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| keydown | forwarded | -- | +| change | forwarded | -- | +| click | forwarded | -- | + +## `FileUploaderDropContainer` + +### Types + +```ts +type Files = string[]; +``` + +### 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 | Files | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| validateFiles | let | No | (files: Files) => Files | (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 + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----------------- | +| add | dispatched | Files | +| 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 | +| 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 + +None. + +## `Form` + +### Props + +None. + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| submit | forwarded | -- | + +## `FormGroup` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ | +| 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 | + +### 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 | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------- | :------- | +| -- | Yes | { props?: { class: string; } } | -- | + +### 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>) | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------------- | :------ | :---- | :-------------------------- | +| -- | Yes | -- | -- | +| platform | No | -- | {platformName} | +| skip-to-content | No | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | + +## `HeaderAction` + +### 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 | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | +| text | let | No | string | -- | Specify the text
Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>) | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------------- | +| -- | Yes | -- | -- | +| text | No | -- | {#if text}<span>{text}</span>{/if} | + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| close | dispatched | -- | +| undefined | 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 | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | + +### 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 | 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 | + +### 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 | +| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the chevron icon | + +### 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. + +## `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 | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render
Icon size must be 16px (e.g. `Add16`, `Task16`) | +| 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 | -- | + +## `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 | +| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | +| notificationType | let | No | "toast" | "inline" | "inline" | Set the type of notification | +| 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 | "Title" | 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 | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| close | dispatched | -- | + +## `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 | +| 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 | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| keydown | forwarded | -- | +| click | forwarded | -- | + +## `ListBoxField` + +### Types + +```ts type ListBoxFieldTranslationId = "close" | "open"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :----------------------------------------------------- | :--------------------------------- | :------------------------------------------------ | -| disabled | boolean | `false` | Set to `true` to disable the list box field. | -| role | string | `"combobox"` | Specify the role attribute. | -| tabindex | string | `"-1"` | Specify the tabindex. | -| translationIds (`constant`) | { close: "close"; open: "open"; } | `{ close: "close", open: "open" }` | Default translation ids. | -| translateWithId | (id: ListBoxFieldTranslationId) => string | -- | Override the default translation ids. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +### 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` -- `on:blur` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| blur | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ListBoxMenu - -### Import path - -```js -import { ListBoxMenu } from "carbon-components-svelte"; -``` +## `ListBoxMenu` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------------- | :------------ | :-------------------------------------------- | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLDivElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:scroll` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| scroll | forwarded | -- | -### Dispatched events +## `ListBoxMenuIcon` -No dispatched events. - ---- - -## ListBoxMenuIcon - -### Import path - -```js -import { ListBoxMenuIcon } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ListBoxMenuIcon` type definitions - type ListBoxMenuIconTranslationId = "close" | "open"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :-------------------------------------------------------- | :--------------------------------- | :-------------------------------------------- | -| open | boolean | `false` | Set to `true` to open the list box menu icon. | -| translationIds (`constant`) | { close: "close"; open: "open" } | `{ close: "close", open: "open" }` | Default translation ids. | -| translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | Override the default translation ids. | +### 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 -No slots. +None. -### Forwarded events +### Events -- `on:click` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ListBoxMenuItem - -### Import path - -```js -import { ListBoxMenuItem } from "carbon-components-svelte"; -``` +## `ListBoxMenuItem` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------- | :------------ | :--------------------------------------------- | -| active | boolean | `false` | Set to `true` to enable the active state. | -| highlighted | boolean | `false` | Set to `true` to enable the highlighted state. | +| 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events +## `ListBoxSelection` -No dispatched events. - ---- - -## ListBoxSelection - -### Import path - -```js -import { ListBoxSelection } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ListBoxSelection` type definitions - type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :---------------------------------------------------------------------- | :------------------------------------------------------------ | :------------------------------------------------ | -| selectionCount | any | -- | Specify the number of selected items. | -| disabled | boolean | `false` | Set to `true` to disable the list box selection. | -| translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | `{ clearAll: "clearAll", clearSelection: "clearSelection", }` | Default translation ids. | -| translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | Override the default translation ids. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +### 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 | any | -- | 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 -No slots. +None. -### Forwarded events +### Events -No forwarded events. +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| clear | dispatched | -- | -### Dispatched events - -- `on:clear` - ---- - -## ListItem - -### Import path - -```js -import { ListItem } from "carbon-components-svelte"; -``` +## `ListItem` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Loading - -### Import path - -```js -import { Loading } from "carbon-components-svelte"; -``` +## `Loading` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------- | :--------------------------- | :------------------------------------------ | -| small | boolean | `false` | Set to `true` to use the small variant. | -| active | boolean | `true` | Set to `false` to disable the active state. | -| withOverlay | boolean | `true` | Set to `false` to disable the overlay. | -| description | string | `"Active loading indicator"` | Specify the label description. | -| id | string | -- | Set an id for the label element. | +| 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 -No slots. +None. -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## Modal - -### Import path - -```js -import { Modal } from "carbon-components-svelte"; -``` +## `Modal` ### Props -| Prop name | Type | Default value | Description | -| :------------------------- | :---------------------------------------- | :----------------------------- | :-------------------------------------------------------------------------- | -| size | "xs" | "sm" | "lg" | -- | Set the size of the modal. | -| open | boolean | `false` | Set to `true` to open the modal. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | -| alert | boolean | `false` | Set to `true` to enable alert mode. | -| passiveModal | boolean | `false` | Set to `true` to use the passive variant. | -| modalHeading | string | -- | Specify the modal heading. | -| modalLabel | string | -- | Specify the modal label. | -| modalAriaLabel | string | -- | Specify the ARIA label for the modal. | -| iconDescription | string | `"Close the modal"` | Specify the ARIA label for the close icon. | -| hasForm | boolean | `false` | Set to `true` if the modal contains form elements. | -| hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. | -| primaryButtonText | string | `""` | Specify the primary button text. | -| primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. | -| shouldSubmitOnEnter | boolean | `true` | Set to `true` for the primary button to be triggered when pressing "Enter". | -| secondaryButtonText | string | `""` | Specify the secondary button text. | -| selectorPrimaryFocus | string | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. | -| preventCloseOnClickOutside | boolean | `false` | Set to `true` to prevent the modal from closing when clicking outside. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the modal | +| size | let | No | "xs" | "sm" | "lg" | -- | 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 | +| 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 -- **default**: `
...
` -- **"label"**: `
...
` -- **"heading"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :-------------------------- | +| -- | Yes | -- | -- | +| heading | No | -- | {modalHeading} | +| label | No | -- | {modalLabel} | -### Forwarded events +### Events -- `on:keydown` -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :---------------------- | :--------- | :----- | +| keydown | forwarded | -- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| submit | dispatched | -- | +| click:button--secondary | dispatched | -- | +| close | dispatched | -- | +| open | dispatched | -- | -### Dispatched events - -- `on:submit` -- `on:click:button--secondary` -- `on:close` -- `on:open` - ---- - -## ModalBody - -### Import path - -```js -import { ModalBody } from "carbon-components-svelte"; -``` +## `ModalBody` ### Props -| Prop name | Type | Default value | Description | -| :------------------ | :------------------- | :------------ | :----------------------------------------------------- | -| hasForm | boolean | `false` | Set to `true` if the modal contains form elements. | -| hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------- | +| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ModalFooter - -### Import path - -```js -import { ModalFooter } from "carbon-components-svelte"; -``` +## `ModalFooter` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :------------------- | :------------ | :------------------------------------------- | -| primaryButtonText | string | `""` | Specify the primary button text. | -| primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. | -| primaryClass | string | -- | Specify a class for the primary button. | -| secondaryButtonText | string | `""` | Specify the secondary button text. | -| secondaryClass | string | -- | Specify a class for the secondary button. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------- | +| primaryButtonText | let | No | string | "" | Specify the primary button text | +| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryClass | let | No | string | -- | Specify a class for the primary button | +| secondaryButtonText | let | No | string | "" | Specify the secondary button text | +| 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ModalHeader - -### Import path - -```js -import { ModalHeader } from "carbon-components-svelte"; -``` +## `ModalHeader` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------ | :------------ | :----------------------------------------- | -| title | string | `""` | Specify the modal title. | -| label | string | `""` | Specify the modal label. | -| labelClass | string | `""` | Specify the label class. | -| titleClass | string | `""` | Specify the title class. | -| closeClass | string | `""` | Specify the close class. | -| closeIconClass | string | `""` | Specify the close icon class. | -| iconDescription | string | `"Close"` | Specify the ARIA label for the close icon. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------ | -------------------- | ----------------------------------------- | +| title | let | No | string | "" | Specify the modal title | +| label | let | No | string | "" | Specify the modal label | +| labelClass | let | No | string | "" | Specify the label class | +| titleClass | let | No | string | "" | Specify the title class | +| closeClass | let | No | string | "" | Specify the close class | +| closeIconClass | let | No | string | "" | Specify the close icon class | +| iconDescription | let | No | string | "Close" | Specify the ARIA label for the close icon | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -### Dispatched events +## `MultiSelect` -No dispatched events. - ---- - -## MultiSelect - -### Import path - -```js -import { MultiSelect } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `MultiSelect` type definitions - type MultiSelectItemId = string; type MultiSelectItemText = string; @@ -2716,2853 +2066,2109 @@ interface MultiSelectItem { } ``` -| Prop name | Type | Default value | Description | -| :---------------- | :----------------------------------------------------------------------- | :------------------- | :--------------------------------------------------------------------------------- | -| items | MultiSelectItem[] | `[]` | Set the multiselect items. | -| itemToString | (item: MultiSelectItem) => string | -- | Override the display of a multiselect item. | -| selectedIds | MultiSelectItemId[] | `[]` | Set the selected ids. | -| value | string | `""` | Specify the multiselect value. | -| size | "sm" | "lg" | "xl" | -- | Set the size of the combobox. | -| type | "default" | "inline" | `"default"` | Specify the type of multiselect. | -| selectionFeedback | "top" | "fixed" | "top-after-reopen" | `"top-after-reopen"` | Specify the selection feedback after selecting items. | -| disabled | boolean | `false` | Set to `true` to disable the dropdown. | -| filterable | boolean | `false` | Set to `true` to filter items. | -| filterItem | (item: MultiSelectItem, value: string) => string | -- | Override the filtering logic. The default filtering is an exact string comparison. | -| open | boolean | `false` | Set to `true` to open the dropdown. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| locale | string | `"en"` | Specify the locale. | -| placeholder | string | `""` | Specify the placeholder text. | -| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | Override the sorting logic. The default sorting compare the item text value. | -| translateWithId | (id: any) => string | -- | Override the default translation ids. | -| titleText | string | `""` | Specify the title text. | -| useTitleInItem | boolean | `false` | Set to `true` to pass the item to `itemToString` in the checkbox. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| label | string | `""` | Specify the list box label. | -| id | string | -- | Set an id for the list box component. | -| name | string | -- | Specify a name attribute for the select. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | +| 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 | +| 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 | (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 | +| 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 -No slots. +None. -### Forwarded events +### Events -- `on:clear` -- `on:keydown` -- `on:focus` -- `on:blur` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| clear | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| select | dispatched | -- | -### Dispatched events - -- `on:select` - ---- - -## NotificationActionButton - -### Import path - -```js -import { NotificationActionButton } from "carbon-components-svelte"; -``` +## `NotificationActionButton` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## NotificationButton - -### Import path - -```js -import { NotificationButton } from "carbon-components-svelte"; -``` +## `NotificationButton` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------ | :------------- | :----------------------------------------------------- | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | -| title | string | -- | Specify the title of the icon. | -| iconDescription | string | `"Close icon"` | Specify the ARIA label for the icon. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------- | ----------------------------------------------------- | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| renderIcon | let | No | 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 -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## NotificationIcon - -### Import path - -```js -import { NotificationIcon } from "carbon-components-svelte"; -``` +## `NotificationIcon` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :------------------------------------- | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification icon. | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- | +| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | ### Slots -No slots. +None. -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## NotificationTextDetails - -### Import path - -```js -import { NotificationTextDetails } from "carbon-components-svelte"; -``` +## `NotificationTextDetails` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :----------------------------------- | :------------ | :---------------------------- | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| title | string | `"Title"` | Specify the title text. | -| subtitle | string | `""` | Specify the subtitle text. | -| caption | string | `"Caption"` | Specify the caption text. | +| 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events +## `NumberInput` -No dispatched events. - ---- - -## NumberInput - -### Import path - -```js -import { NumberInput } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `NumberInput` type definitions - type NumberInputTranslationId = "increment" | "decrement"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :---------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| value | string | `""` | Specify the input value. | -| step | number | `1` | Specify the step increment. | -| max | number | -- | Specify the maximum value. | -| min | number | -- | Specify the minimum value. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| readonly | boolean | `false` | Set to `true` for the input to be read-only. | -| mobile | boolean | `false` | Set to `true` to enable the mobile variant. | -| allowEmpty | boolean | `false` | Set to `true` to allow for an empty value. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| iconDescription | string | `""` | Specify the ARIA label for the increment icons. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| label | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| translateWithId | (id: NumberInputTranslationId) => string | -- | Override the default translation ids. | -| translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | `{ increment: "increment", decrement: "decrement", }` | Default translation ids. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | - -### Slots - -- **"label"**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:input` +### Props -### Dispatched events +| 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" | -- | 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 | +| 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 | +| 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 | -- `on:change` +### Slots ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------- | +| label | No | -- | {label} | -## NumberInputSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| input | forwarded | -- | +| change | dispatched | -- | -```js -import { NumberInputSkeleton } from "carbon-components-svelte"; -``` +## `NumberInputSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## OrderedList - -### Import path - -```js -import { OrderedList } from "carbon-components-svelte"; -``` +## `OrderedList` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| nested | boolean | `false` | Set to `true` to use the nested variant. | -| native | boolean | `false` | Set to `true` to use native list styles. | +| 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 | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## OverflowMenu - -### Import path - -```js -import { OverflowMenu } from "carbon-components-svelte"; -``` +## `OverflowMenu` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- | -| size | "sm" | "xl" | -- | Specify the size of the overflow menu. | -| direction | "top" | "bottom" | `"bottom"` | Specify the direction of the overflow menu relative to the button. | -| open | boolean | `false` | Set to `true` to open the menu. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| flipped | boolean | `false` | Set to `true` to flip the menu relative to the button. | -| menuOptionsClass | string | -- | Specify the menu options class. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | -| iconClass | string | -- | Specify the icon class. | -| iconDescription | string | `"Open and close list of options"` | Specify the ARIA label for the icon. | -| id | string | -- | Set an id for the button element. | -| buttonRef | null | HTMLButtonElement | `null` | Obtain a reference to the trigger button element. | -| menuRef | null | HTMLUListElement | `null` | Obtain a reference to the overflow menu element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | +| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | +| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| 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 | +| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| 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 -- **default**: `
...
` -- **"menu"**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> | -### Dispatched events +### Events -- `on:close` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| close | dispatched | -- | ---- - -## OverflowMenuItem - -### Import path - -```js -import { OverflowMenuItem } from "carbon-components-svelte"; -``` +## `OverflowMenuItem` ### Props -| Prop name | Type | Default value | Description | -| :----------- | :------------------------------------------------------------------ | :--------------- | :------------------------------------------------------------------------------- | -| text | string | `"Provide text"` | Specify the item text. Alternatively, use the default slot for a custom element. | -| href | string | `""` | Specify the `href` attribute if the item is a link. | -| primaryFocus | boolean | `false` | Set to `true` if the item should be focused when opening the menu. | -| disabled | boolean | `false` | Set to `true` to disable the item. | -| hasDivider | boolean | `false` | Set to `true` to include a divider. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | -| requireTitle | boolean | `true` | Set to `false` to omit the button `title` attribute. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | +| Prop name | 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 -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:keydown` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ | +| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keydown | forwarded | -- | -## Pagination - -### Import path - -```js -import { Pagination } from "carbon-components-svelte"; -``` +## `Pagination` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :--------------------------------------------------------------- | :------------------ | :------------------------------------------------ | -| page | number | `1` | Specify the current page index. | -| totalItems | number | `0` | Specify the total number of items. | -| disabled | boolean | `false` | Set to `true` to disable the pagination. | -| forwardText | string | `"Next page"` | Specify the forward button text. | -| backwardText | string | `"Previous page"` | Specify the backward button text. | -| itemsPerPageText | string | `"Items per page:"` | Specify the items per page text. | -| itemText | (min: number, max: number) => string | -- | Override the item text. | -| itemRangeText | (min: number, max: number, total: number) => string | -- | Override the item range text. | -| pageInputDisabled | boolean | `false` | Set to `true` to disable the page input. | -| pageSizeInputDisabled | boolean | `false` | Set to `true` to disable the page size input. | -| pageSize | number | `10` | Specify the number of items to display in a page. | -| pageSizes | number[] | `[10]` | Specify the available page sizes. | -| pagesUnknown | boolean | `false` | Set to `true` if the number of pages is unknown. | -| pageText | (page: number) => string | -- | Override the page text. | -| pageRangeText | (current: number, total: number) => string | -- | Override the page range text. | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ | +| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page | +| page | let | Yes | number | 1 | Specify the current page index | +| totalItems | let | No | number | 0 | Specify the total number of items | +| disabled | let | No | boolean | false | Set to `true` to disable the pagination | +| forwardText | let | No | string | "Next page" | Specify the forward button text | +| backwardText | let | No | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | let | No | string | "Items per page:" | Specify the items per page text | +| itemText | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} items\` | Override the item text | +| itemRangeText | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of \${total} items\` | Override the item range text | +| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | let | No | boolean | false | Set to `true` to disable the page size input | +| pageSizes | let | No | number[] | [10] | Specify the available page sizes | +| pagesUnknown | let | No | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | let | No | (page: number) => string | (page) => \`page \${page}\` | Override the page text | +| pageRangeText | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:update` +None. ---- +### Events -## PaginationNav +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| update | dispatched | -- | -### Import path - -```js -import { PaginationNav } from "carbon-components-svelte"; -``` +## `PaginationNav` ### Props -| Prop name | Type | Default value | Description | -| :----------- | :------------------- | :---------------- | :----------------------------------------- | -| page | number | `0` | Specify the current page index. | -| total | number | `10` | Specify the total number of pages. | -| shown | number | `10` | Specify the total number of pages to show. | -| loop | boolean | `false` | Set to `true` to loop the navigation. | -| forwardText | string | `"Next page"` | Specify the forward button text. | -| backwardText | string | `"Previous page"` | Specify the backward button text. | +| 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 -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:click:button--previous` -- `on:click:button--next` -- `on:change` - ---- +None. -## PaginationSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------------------- | :--------- | :----- | +| click:button--previous | dispatched | -- | +| click:button--next | dispatched | -- | +| change | dispatched | -- | -```js -import { PaginationSkeleton } from "carbon-components-svelte"; -``` +## `PaginationSkeleton` ### Props -No exported props. +None. ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## PasswordInput - -### Import path - -```js -import { PasswordInput } from "carbon-components-svelte"; -``` +## `PasswordInput` ### Props -| Prop name | Type | Default value | Description | -| :---------------- | :-------------------------------------------------------------- | :---------------- | :----------------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| value | string | `""` | Specify the input value. | -| type | string | `"password"` | Specify the input type. | -| placeholder | string | `""` | Specify the placeholder text. | -| hidePasswordLabel | string | `"Hide password"` | Specify the hide password label text. | -| showPasswordLabel | string | `"Show password"` | Specify the show password label text. | -| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| helperText | string | `""` | Specify the helper text. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the text for the invalid state. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| type | let | Yes | string | "password" | Specify the input type | +| value | let | Yes | 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" | -- | Set the alignment of the tooltip relative to the icon | +| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | 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 | +| 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 -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:keydown` -- `on:focus` -- `on:blur` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -No dispatched events. - ---- - -## ProgressIndicator - -### Import path - -```js -import { ProgressIndicator } from "carbon-components-svelte"; -``` +## `ProgressIndicator` ### Props -| Prop name | Type | Default value | Description | -| :------------------- | :------------------- | :------------ | :---------------------------------------------------------------------------------------------- | -| currentIndex | number | `0` | Specify the current step index. | -| vertical | boolean | `false` | Set to `true` to use the vertical variant. | -| spaceEqually | boolean | `false` | Set to `true` to specify whether the progress steps should be split equally in size in the div. | -| preventChangeOnClick | boolean | `false` | Set to `true` to prevent updating `currentIndex`. | +| 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 updating `currentIndex` | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -- `on:change` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | ---- - -## ProgressIndicatorSkeleton - -### Import path - -```js -import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; -``` +## `ProgressIndicatorSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| vertical | boolean | `false` | Set to `true` to use the vertical variant. | -| count | number | `4` | Specify the number of steps to render. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| vertical | let | No | boolean | false | Set to `true` to use the vertical variant | +| count | let | No | number | 4 | Specify the number of steps to render | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. +None. ---- +### Events -## ProgressStep +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Import path - -```js -import { ProgressStep } from "carbon-components-svelte"; -``` +## `ProgressStep` ### Props -| Prop name | Type | Default value | Description | -| :------------- | :------------------- | :------------ | :------------------------------------------ | -| complete | boolean | `false` | Set to `true` for the complete variant. | -| current | boolean | `false` | Set to `true` to use the current variant. | -| disabled | boolean | `false` | Set to `true` to disable the progress step. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| description | string | `""` | Specify the step description. | -| label | string | `""` | Specify the step label. | -| secondaryLabel | string | `""` | Specify the step secondary label. | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | +| current | let | Yes | boolean | false | Set to `true` to use the current variant | +| complete | let | Yes | boolean | false | Set to `true` for the complete variant | +| disabled | let | No | boolean | false | Set to `true` to disable the progress step | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| description | let | No | string | "" | Specify the step description | +| label | let | No | string | "" | Specify the step label | +| secondaryLabel | let | No | string | "" | Specify the step secondary label | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ | +| -- | Yes | { props: { class: 'bx--progress-label' } } | <p class:bx--progress-label="{true}">{label}</p> | -## RadioButton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -```js -import { RadioButton } from "carbon-components-svelte"; -``` +## `RadioButton` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------------------- | :------------ | :----------------------------------------------- | -| value | string | `""` | Specify the value of the radio button. | -| checked | boolean | `false` | Set to `true` to check the radio button. | -| disabled | boolean | `false` | Set to `true` to disable the radio button. | -| labelPosition | "right" | "left" | `"right"` | Specify the label position. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the checkbox input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| 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 -No slots. +None. -### Forwarded events +### Events -- `on:change` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| change | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## RadioButtonGroup - -### Import path - -```js -import { RadioButtonGroup } from "carbon-components-svelte"; -``` +## `RadioButtonGroup` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :------------------------------------------ | :------------- | :-------------------------------------------- | -| selected | string | -- | Set the selected radio button value. | -| disabled | boolean | `false` | Set to `true` to disable the radio buttons. | -| labelPosition | "right" | "left" | `"right"` | Specify the label position. | -| orientation | "horizontal" | "vertical" | `"horizontal"` | Specify the orientation of the radio buttons. | -| id | string | -- | Set an id for the container div element. | +| 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 | +| 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 -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | -- `on:change` - ---- - -## RadioButtonSkeleton - -### Import path - -```js -import { RadioButtonSkeleton } from "carbon-components-svelte"; -``` +## `RadioButtonSkeleton` ### Props -No exported props. +None. ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +None. -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## RadioTile - -### Import path - -```js -import { RadioTile } from "carbon-components-svelte"; -``` +## `RadioTile` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :----------------- | :-------------------------------------------------------- | -| checked | boolean | `false` | Set to `true` to check the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| value | string | `""` | Specify the value of the radio input. | -| tabindex | string | `"0"` | Specify the tabindex. | -| iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the radio tile checkmark icon. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- | +| checked | let | Yes | boolean | false | Set to `true` to check the tile | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| 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 -- **default**: `
...
` - -### Forwarded events - -- `on:change` -- `on:keydown` -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| change | forwarded | -- | +| keydown | forwarded | -- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## Row - -### Import path - -```js -import { Row } from "carbon-components-svelte"; -``` +## `Row` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>). | -| condensed | boolean | `false` | Set to `true` to use the condensed variant. | -| narrow | boolean | `false` | Set to `true` to use the narrow variant. | -| noGutter | boolean | `false` | Set to `true` to remove the gutter. | -| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | -| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | +| Prop name | 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 | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :--------------------------------------------------------------- | :------- | +| -- | Yes | { props?: { class: string; [key: string]: any; } } | -- | ---- +### Events -## Search +None. -### Import path - -```js -import { Search } from "carbon-components-svelte"; -``` +## `Search` ### Props -| Prop name | Type | Default value | Description | -| :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- | -| small | boolean | `false` | . | -| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the search input. | -| value | string | `""` | Specify the value of the search input. | -| type | string | `"text"` | Specify the `type` attribute of the search input. | -| placeholder | string | `"Search..."` | Specify the `placeholder` attribute of the search input. | -| autocomplete | "on" | "off" | `"off"` | Specify the `autocomplete` attribute. | -| autofocus | boolean | `false` | Set to `true` to auto focus the search element. | -| closeButtonLabelText | string | `"Clear search input"` | Specify the close button label text. | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | string | "" | Specify the value of the search input | +| small | let | No | boolean | false | -- | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| 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 | +| 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 | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:focus` -- `on:blur` - -### Dispatched events - -- `on:clear` - ---- +None. -## SearchSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| clear | dispatched | -- | -```js -import { SearchSkeleton } from "carbon-components-svelte"; -``` +## `SearchSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :---------------------------------------- | :------------ | :------------------------------------ | -| small | boolean | `false` | . | -| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ | +| small | let | No | boolean | false | -- | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Select - -### Import path - -```js -import { Select } from "carbon-components-svelte"; -``` +## `Select` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :----------------------------------------- | :------------ | :----------------------------------------------- | -| selected | string | -- | Specify the selected item value. | -| size | "sm" | "xl" | -- | Set the size of the select input. | -| inline | boolean | `false` | Set to `true` to use the inline variant. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the select element. | -| id | string | -- | Set an id for the select element. | -| name | string | -- | Specify a name attribute for the select element. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| noLabel | boolean | `false` | Set to `true` to not render a label. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. | +| 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 | -- | -- | 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 | +| 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 -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:blur` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| blur | forwarded | -- | +| change | dispatched | -- | -- `on:change` - ---- - -## SelectItem - -### Import path - -```js -import { SelectItem } from "carbon-components-svelte"; -``` +## `SelectItem` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------- | -| value | string | `""` | Specify the option value. | -| text | string | `""` | Specify the option text. | -| hidden | boolean | `false` | Set to `true` to hide the option. | -| disabled | boolean | `false` | Set to `true` to disable the option. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------- | +| value | let | No | string | "" | Specify the option value | +| text | let | No | string | "" | Specify the option text | +| hidden | let | No | boolean | false | Set to `true` to hide the option | +| disabled | let | No | boolean | false | Set to `true` to disable the option | ### Slots -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events +None. -No dispatched events. +### Events ---- +None. -## SelectItemGroup - -### Import path - -```js -import { SelectItemGroup } from "carbon-components-svelte"; -``` +## `SelectItemGroup` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :---------------- | :--------------------------------------------------- | -| disabled | boolean | `false` | Set to `true` to disable the optgroup element. | -| label | string | `"Provide label"` | Specify the label attribute of the optgroup element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ---------------------------- | --------------------------------------------------- | +| disabled | let | No | boolean | false | Set to `true` to disable the optgroup element | +| label | let | No | string | "Provide label" | Specify the label attribute of the optgroup element | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## SelectSkeleton +None. -### Import path - -```js -import { SelectSkeleton } from "carbon-components-svelte"; -``` +## `SelectSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +None. -## SelectableTile +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { SelectableTile } from "carbon-components-svelte"; -``` +## `SelectableTile` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :---------------------------------------- | :----------------- | :------------------------------------------------------------- | -| selected | boolean | `false` | Set to `true` to select the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| title | string | `"title"` | Specify the title of the selectable tile. | -| value | string | `"value"` | Specify the value of the selectable tile. | -| tabindex | string | `"0"` | Specify the tabindex. | -| iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the selectable tile checkmark icon. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | 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 | +| 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| undefined | dispatched | -- | -### Dispatched events - -No dispatched events. - ---- - -## SideNav - -### Import path - -```js -import { SideNav } from "carbon-components-svelte"; -``` +## `SideNav` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------------ | -| fixed | boolean | `false` | Set to `true` to use the fixed variant. | -| ariaLabel | string | -- | Specify the ARIA label for the nav. | -| isOpen | boolean | `false` | Set to `true` to toggle the expanded state. | +| 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 | +| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No forwarded events. +### Events -### Dispatched events +None. -No dispatched events. - ---- - -## SideNavItems - -### Import path - -```js -import { SideNavItems } from "carbon-components-svelte"; -``` +## `SideNavItems` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +None. ---- - -## SideNavLink - -### Import path - -```js -import { SideNavLink } from "carbon-components-svelte"; -``` +## `SideNavLink` ### Props -| Prop name | Type | Default value | Description | -| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | -| isSelected | boolean | `false` | Set to `true` to select the current link. | -| href | string | -- | Specify the `href` attribute. | -| text | string | -- | Specify the text. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | +| 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 | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | ### Slots -No slots. - -### Forwarded events - -- `on:click` - -### Dispatched events +None. -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -## SideNavMenu - -### Import path - -```js -import { SideNavMenu } from "carbon-components-svelte"; -``` +## `SideNavMenu` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | -| expanded | boolean | `false` | Set to `true` to toggle the expanded state. | -| text | string | -- | Specify the text. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button element. | +| 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 | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## SideNavMenuItem +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -### Import path - -```js -import { SideNavMenuItem } from "carbon-components-svelte"; -``` +## `SideNavMenuItem` ### Props -| Prop name | Type | Default value | Description | -| :--------- | :----------------------------------------- | :------------ | :--------------------------------------------- | -| isSelected | boolean | -- | Set to `true` to select the item. | -| href | string | -- | Specify the `href` attribute. | -| text | string | -- | Specify the item text. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | +| 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 | -- | Set to `true` to select the item | +| href | let | No | string | -- | Specify the `href` attribute | +| text | let | No | string | -- | Specify the item text | ### Slots -No slots. - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. - ---- +None. -## SkeletonPlaceholder +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -```js -import { SkeletonPlaceholder } from "carbon-components-svelte"; -``` +## `SkeletonPlaceholder` ### Props -No exported props. +None. ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## SkeletonText - -### Import path - -```js -import { SkeletonText } from "carbon-components-svelte"; -``` +## `SkeletonText` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------------- | -| lines | number | `3` | Specify the number of lines to render. | -| heading | boolean | `false` | Set to `true` to use the heading size variant. | -| paragraph | boolean | `false` | Set to `true` to use the paragraph size variant. | -| width | string | `"100%"` | Specify the width of the text (% or px). | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------- | ----------------------------------------------- | +| lines | let | No | number | 3 | Specify the number of lines to render | +| heading | let | No | boolean | false | Set to `true` to use the heading size variant | +| paragraph | let | No | boolean | false | Set to `true` to use the paragraph size variant | +| width | let | No | string | "100%" | Specify the width of the text (% or px) | ### Slots -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## SkipToContent - -### Import path - -```js -import { SkipToContent } from "carbon-components-svelte"; -``` +## `SkipToContent` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :---------------- | :---------------------------- | -| href | string | `"#main-content"` | Specify the `href` attribute. | -| tabindex | string | `"0"` | Specify the tabindex. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ---------------------------- | ---------------------------- | +| href | let | No | string | "#main-content" | Specify the `href` attribute | +| tabindex | let | No | string | "0" | Specify the tabindex | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :-------------------------------- | +| -- | Yes | -- | Skip to main content | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | ---- - -## Slider - -### Import path - -```js -import { Slider } from "carbon-components-svelte"; -``` +## `Slider` ### Props -| Prop name | Type | Default value | Description | -| :------------- | :----------------------------------- | :------------ | :------------------------------------------ | -| value | number | `0` | Specify the value of the slider. | -| max | number | `100` | Set the maximum slider value. | -| maxLabel | string | `""` | Specify the label for the max value. | -| min | number | `0` | Set the minimum slider value. | -| minLabel | string | `""` | Specify the label for the min value. | -| step | number | `1` | Set the step value. | -| stepMultiplier | number | `4` | Set the step multiplier value. | -| required | boolean | `false` | Set to `true` to require a value. | -| inputType | string | `"number"` | Specify the input type. | -| disabled | boolean | `false` | Set to `true` to disable the slider. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| hideTextInput | boolean | `false` | Set to `true` to hide the text input. | -| id | string | -- | Set an id for the slider div element. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| labelText | string | `""` | Specify the label text. | -| name | string | `""` | Set a name for the slider element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | +| value | let | Yes | number | 0 | Specify the value of the slider | +| max | let | No | number | 100 | Set the maximum slider value | +| maxLabel | let | No | string | "" | Specify the label for the max value | +| min | let | No | number | 0 | Set the minimum slider value | +| minLabel | let | No | string | "" | Specify the label for the min value | +| step | let | No | number | 1 | Set the step value | +| stepMultiplier | let | No | number | 4 | Set the step multiplier value | +| required | let | No | boolean | false | Set to `true` to require a value | +| inputType | let | No | string | "number" | Specify the input type | +| disabled | let | No | boolean | false | Set to `true` to disable the slider | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| hideTextInput | let | No | boolean | false | Set to `true` to hide the text input | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| labelText | let | No | string | "" | Specify the label text | +| name | let | No | string | "" | Set a name for the slider element | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +None. -- `on:change` +### Events ---- +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | -## SliderSkeleton - -### Import path - -```js -import { SliderSkeleton } from "carbon-components-svelte"; -``` +## `SliderSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. +None. ---- +### Events -## StructuredList +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Import path - -```js -import { StructuredList } from "carbon-components-svelte"; -``` +## `StructuredList` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :---------------------------------------------- | -| selected | string | -- | Specify the selected structured list row value. | -| border | boolean | `false` | Set to `true` to use the bordered variant. | -| selection | boolean | `false` | Set to `true` to use the selection variant. | +| 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 | +| selection | let | No | boolean | false | Set to `true` to use the selection variant | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -- `on:change` - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## StructuredListBody +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | -```js -import { StructuredListBody } from "carbon-components-svelte"; -``` +## `StructuredListBody` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## StructuredListCell - -### Import path - -```js -import { StructuredListCell } from "carbon-components-svelte"; -``` +## `StructuredListCell` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------- | -| head | boolean | `false` | Set to `true` to use as a header. | -| noWrap | boolean | `false` | Set to `true` to prevent wrapping. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | +| head | let | No | boolean | false | Set to `true` to use as a header | +| noWrap | let | No | boolean | false | Set to `true` to prevent wrapping | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## StructuredListHead - -### Import path - -```js -import { StructuredListHead } from "carbon-components-svelte"; -``` +## `StructuredListHead` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## StructuredListInput - -### Import path - -```js -import { StructuredListInput } from "carbon-components-svelte"; -``` +## `StructuredListInput` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :---------------------------------------- | :------------ | :-------------------------------------------- | -| checked | boolean | `false` | Set to `true` to check the input. | -| title | string | `"title"` | Specify the title of the input. | -| value | string | `"value"` | Specify the value of the input. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | 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 -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events +None. -No dispatched events. +### Events ---- +None. -## StructuredListRow - -### Import path - -```js -import { StructuredListRow } from "carbon-components-svelte"; -``` +## `StructuredListRow` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| head | boolean | `false` | Set to `true` to use as a header. | -| label | boolean | `false` | Set to `true` to render a label slot. | -| tabindex | string | `"0"` | Specify the tabindex. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| head | let | No | boolean | false | Set to `true` to use as a header | +| label | let | No | boolean | false | Set to `true` to render a label slot | +| tabindex | let | No | string | "0" | Specify the tabindex | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## StructuredListSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -```js -import { StructuredListSkeleton } from "carbon-components-svelte"; -``` +## `StructuredListSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| rows | number | `5` | Specify the number of rows. | -| border | boolean | `false` | Set to `true` to use the bordered variant. | +| 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 -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Switch - -### Import path - -```js -import { Switch } from "carbon-components-svelte"; -``` +## `Switch` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :----------------------------------------- | :--------------- | :----------------------------------------------------------------------------------------------------------------- | -| text | string | `"Provide text"` | Specify the switch text. Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>). | -| selected | boolean | `false` | Set to `true` for the switch to be selected. | -| disabled | boolean | `false` | Set to `true` to disable the switch. | -| id | string | -- | Set an id for the button element. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| Prop name | 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 named slot "text" (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 -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------ | +| -- | Yes | -- | {text} | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -No dispatched events. - ---- - -## Tab - -### Import path - -```js -import { Tab } from "carbon-components-svelte"; -``` +## `Tab` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :----------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- | -| label | string | `""` | Specify the tab label. Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>). | -| href | string | `"#"` | Specify the href attribute. | -| disabled | boolean | `false` | Set to `true` to disable the tab. | -| tabindex | string | `"0"` | Specify the tabindex. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the anchor HTML element. | +| Prop name | 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 -- **default**: `
...
` - -### Forwarded events - -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------- | +| -- | Yes | -- | {label} | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## TabContent - -### Import path - -```js -import { TabContent } from "carbon-components-svelte"; -``` +## `TabContent` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :----------------------------------- | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------- | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +None. -## Table - -### Import path - -```js -import { Table } from "carbon-components-svelte"; -``` +## `Table` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :-------------------------------------------------- | :------------ | :--------------------------------------- | -| size | "compact" | "short" | "tall" | -- | Set the size of the table. | -| zebra | boolean | `false` | Set to `true` to use zebra styles. | -| useStaticWidth | boolean | `false` | Set to `true` to use static width. | -| shouldShowBorder | boolean | `false` | Set to `true` for the bordered variant. | -| sortable | boolean | `false` | Set to `true` for the sortable variant. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- | +| size | let | No | "compact" | "short" | "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 -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## TableBody +None. -### Import path - -```js -import { TableBody } from "carbon-components-svelte"; -``` +## `TableBody` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## TableCell +### Events -### Import path +None. -```js -import { TableCell } from "carbon-components-svelte"; -``` +## `TableCell` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## TableContainer - -### Import path - -```js -import { TableContainer } from "carbon-components-svelte"; -``` +## `TableContainer` ### Props -| Prop name | Type | Default value | Description | -| :----------- | :------------------- | :------------ | :----------------------------------------- | -| title | string | `""` | Specify the title of the data table. | -| description | string | `""` | Specify the description of the data table. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | +| 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 -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No forwarded events. +### Events -### Dispatched events +None. -No dispatched events. - ---- - -## TableHead - -### Import path - -```js -import { TableHead } from "carbon-components-svelte"; -``` +## `TableHead` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## TableHeader - -### Import path - -```js -import { TableHeader } from "carbon-components-svelte"; -``` +## `TableHeader` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------ | :------------ | :------------------------------------ | -| scope | string | `"col"` | Specify the `scope` attribute. | -| translateWithId | () => string | -- | Override the default id translations. | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------ | +| 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 -- **default**: `
...
` - -### Forwarded events - -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:click` - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## TableRow +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| click | forwarded | -- | -### Import path - -```js -import { TableRow } from "carbon-components-svelte"; -``` +## `TableRow` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## Tabs +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { Tabs } from "carbon-components-svelte"; -``` +## `Tabs` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :---------------------------------------- | :-------------------- | :------------------------------------------- | -| selected | number | `0` | Specify the selected tab index. | -| type | "default" | "container" | `"default"` | Specify the type of tabs. | -| iconDescription | string | `"Show menu options"` | Specify the ARIA label for the chevron icon. | -| triggerHref | string | `"#"` | Specify the tab trigger href attribute. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- | +| selected | let | Yes | number | 0 | Specify the selected tab index | +| type | let | No | "default" | "container" | "default" | Specify the type of tabs | +| 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 -- **default**: `
...
` -- **"content"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | +| content | No | -- | -- | -### Forwarded events +### Events -- `on:keypress` -- `on:click` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| keypress | forwarded | -- | +| click | forwarded | -- | +| change | dispatched | -- | -### Dispatched events - -- `on:change` - ---- - -## TabsSkeleton - -### Import path - -```js -import { TabsSkeleton } from "carbon-components-svelte"; -``` +## `TabsSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :------------------------------------ | -| count | number | `4` | Specify the number of tabs to render. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | -------------- | ------------------------------------ | +| count | let | No | number | 4 | Specify the number of tabs to render | ### Slots -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## Tag - -### Import path - -```js -import { Tag } from "carbon-components-svelte"; -``` +## `Tag` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------- | :------------------------------------------------------ | -| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag. | -| filter | boolean | `false` | Set to `true` to use filterable variant. | -| disabled | boolean | `false` | Set to `true` to disable a filterable tag. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| title | string | `"Clear filter"` | Set the title for the close button in a filterable tag. | -| id | string | -- | Set an id for the filterable tag. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------ | +| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag | +| 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 | +| 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 | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :----------------------------------------------------- | :------- | +| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## TagSkeleton - -### Import path - -```js -import { TagSkeleton } from "carbon-components-svelte"; -``` +## `TagSkeleton` ### Props -No exported props. +None. ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +None. -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## TextArea - -### Import path - -```js -import { TextArea } from "carbon-components-svelte"; -``` +## `TextArea` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------------------------------- | :------------ | :----------------------------------------------- | -| value | string | `""` | Specify the textarea value. | -| placeholder | string | `""` | Specify the placeholder text. | -| cols | number | `50` | Specify the number of cols. | -| rows | number | `4` | Specify the number of rows. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| helperText | string | `""` | Specify the helper text. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the text for the invalid state. | -| id | string | -- | Set an id for the textarea element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLTextAreaElement | `null` | Obtain a reference to the textarea HTML element. | +| 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 -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. +None. ---- +### Events -## TextAreaSkeleton +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -### Import path - -```js -import { TextAreaSkeleton } from "carbon-components-svelte"; -``` +## `TextAreaSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------------- | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +None. -## TextInput +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { TextInput } from "carbon-components-svelte"; -``` +## `TextInput` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| value | string | `""` | Specify the input value. | -| type | string | `""` | Specify the input type. | -| placeholder | string | `""` | Specify the placeholder text. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| helperText | string | `""` | Specify the helper text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| warn | boolean | `false` | Set to `true` to indicate an warning state. | -| warnText | string | `""` | Specify the warning state text. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | -| required | boolean | `false` | Set to `true` to mark the field as required. | -| inline | boolean | `false` | Set to `true` to use inline version. | +| 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" | -- | 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 inline version | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:keydown` -- `on:focus` -- `on:blur` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## TextInputSkeleton - -### Import path - -```js -import { TextInputSkeleton } from "carbon-components-svelte"; -``` +## `TextInputSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## Tile - -### Import path - -```js -import { Tile } from "carbon-components-svelte"; -``` +## `Tile` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| light | boolean | `false` | Set to `true` to enable the light variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| light | let | No | boolean | false | Set to `true` to enable the light variant | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## TileGroup - -### Import path - -```js -import { TileGroup } from "carbon-components-svelte"; -``` +## `TileGroup` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| selected | string | -- | Specify the selected tile value. | -| disabled | boolean | `false` | Set to `true` to disable the tile group. | -| legend | string | `""` | Specify the legend text. | +| 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 -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:select` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## TimePicker +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| select | dispatched | -- | -### Import path - -```js -import { TimePicker } from "carbon-components-svelte"; -``` +## `TimePicker` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- | -| size | "sm" | "xl" | -- | Specify the size of the input. | -| value | string | `""` | Specify the input value. | -| type | string | `"text"` | Specify the input type. | -| placeholder | string | `"hh=mm"` | Specify the input placeholder text. | -| pattern | string | `"(1[012] | [1-9]):[0-5][0-9](\\s)?"` | Specify the `pattern` attribute for the input element. | -| maxlength | number | `5` | Specify the `maxlength` input attribute. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | 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 -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## TimePickerSelect +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -```js -import { TimePickerSelect } from "carbon-components-svelte"; -``` +## `TimePickerSelect` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :----------------------------------------- | :----------------------- | :----------------------------------------------- | -| value | string | `""` | Specify the select value. | -| disabled | boolean | `false` | Set to `true` to disable the select. | -| iconDescription | string | `"Open list of options"` | Specify the ARIA label for the chevron icon. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `true` | . | -| id | string | -- | Set an id for the select element. | -| name | string | -- | Specify a name attribute for the select element. | -| ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | +| value | let | Yes | 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 -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ToastNotification - -### Import path - -```js -import { ToastNotification } from "carbon-components-svelte"; -``` +## `ToastNotification` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. | -| lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. | -| timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. | -| role | string | `"alert"` | Set the `role` attribute. | -| title | string | `"Title"` | Specify the title text. | -| subtitle | string | `""` | Specify the subtitle text. | -| caption | string | `"Caption"` | Specify the caption text. | -| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | -| hideCloseButton | boolean | `false` | Set to `true` to hide the close button. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| 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 | "Title" | Specify the title text | +| subtitle | let | No | string | "" | Specify the subtitle text | +| caption | let | No | string | "Caption" | 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 -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| close | dispatched | -- | -- `on:close` - ---- - -## Toggle - -### Import path - -```js -import { Toggle } from "carbon-components-svelte"; -``` +## `Toggle` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------------- | -| toggled | boolean | `false` | Set to `true` to toggle the checkbox input. | -| disabled | boolean | `false` | Set to `true` to disable checkbox input. | -| labelA | string | `"Off"` | Specify the label for the untoggled state. | -| labelB | string | `"On"` | Specify the label for the toggled state. | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the checkbox input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- | +| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| 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 -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:keyup` -- `on:focus` -- `on:blur` +None. -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | ---- - -## ToggleSkeleton - -### Import path - -```js -import { ToggleSkeleton } from "carbon-components-svelte"; -``` +## `ToggleSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :------------------------------- | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | +| 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 -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +None. -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## ToggleSmall - -### Import path - -```js -import { ToggleSmall } from "carbon-components-svelte"; -``` +## `ToggleSmall` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------------- | -| toggled | boolean | `false` | Set to `true` to toggle the checkbox input. | -| disabled | boolean | `false` | Set to `true` to disable checkbox input. | -| labelA | string | `"Off"` | Specify the label for the untoggled state. | -| labelB | string | `"On"` | Specify the label for the toggled state. | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the checkbox input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- | +| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| 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 -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:keyup` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. +None. ---- +### Events -## ToggleSmallSkeleton +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -### Import path - -```js -import { ToggleSmallSkeleton } from "carbon-components-svelte"; -``` +## `ToggleSmallSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :------------------------------- | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | +| 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 -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +None. -## Toolbar +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { Toolbar } from "carbon-components-svelte"; -``` +## `Toolbar` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :--------------------------------- | :------------ | :------------------------ | -| size | "sm" | "default" | `"default"` | Specify the toolbar size. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ | +| size | let | No | "sm" | "default" | "default" | Specify the toolbar size | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ToolbarBatchActions - -### Import path - -```js -import { ToolbarBatchActions } from "carbon-components-svelte"; -``` +## `ToolbarBatchActions` ### Props -| Prop name | Type | Default value | Description | -| :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- | -| formatTotalSelected | (totalSelected: number) => string | -- | Override the total items selected text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :--------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- | +| formatTotalSelected | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No forwarded events. +### Events -### Dispatched events +None. -No dispatched events. - ---- - -## ToolbarContent - -### Import path - -```js -import { ToolbarContent } from "carbon-components-svelte"; -``` +## `ToolbarContent` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +None. ---- - -## ToolbarMenu - -### Import path - -```js -import { ToolbarMenu } from "carbon-components-svelte"; -``` +## `ToolbarMenu` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +None. -## ToolbarMenuItem - -### Import path - -```js -import { ToolbarMenuItem } from "carbon-components-svelte"; -``` +## `ToolbarMenuItem` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:keydown` - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## ToolbarSearch +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keydown | forwarded | -- | -### Import path - -```js -import { ToolbarSearch } from "carbon-components-svelte"; -``` +## `ToolbarSearch` ### Props -| Prop name | Type | Default value | Description | -| :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- | -| value | string | `""` | Specify the value of the search input. | -| expanded | boolean | `false` | Set to `true` to expand the search bar. | -| persistent | boolean | `false` | Set to `true` to keep the search bar expanded. | -| tabindex | string | `"0"` | Specify the tabindex. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| 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 | string | "" | Specify the value of the search input | +| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | +| tabindex | let | No | string | "0" | Specify the tabindex | ### Slots -No slots. - -### Forwarded events - -- `on:change` -- `on:input` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- +None. -## Tooltip +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -```js -import { Tooltip } from "carbon-components-svelte"; -``` +## `Tooltip` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------------------------------ | :------------ | :----------------------------------------------------------------------------------------------------------------------------- | -| direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the button. | -| open | boolean | `false` | Set to `true` to open the tooltip. | -| hideIcon | boolean | `false` | Set to `true` to hide the tooltip icon. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button. Icon size must be 16px (e.g. `Add16`, `Task16`). | -| iconDescription | string | `""` | Specify the ARIA label for the tooltip button. | -| iconName | string | `""` | Specify the icon name attribute. | -| tabindex | string | `"0"` | Set the button tabindex. | -| tooltipId | string | -- | Set an id for the tooltip. | -| triggerId | string | -- | Set an id for the tooltip button. | -| triggerText | string | `""` | Set the tooltip button text. | -| ref | null | HTMLElement | `null` | Obtain a reference to the trigger text HTML element. | -| refTooltip | null | HTMLElement | `null` | Obtain a reference to the tooltip HTML element. | -| refIcon | null | HTMLElement | `null` | Obtain a reference to the icon HTML element. | +| Prop name | 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 | +| 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 | 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 -- **default**: `
...
` -- **"triggerText"**: `
...
` -- **"icon"**: `
...
` +| Slot name | Default | Props | Fallback | +| :---------- | :------ | :---- | :---------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this="{icon}" name="{iconName}" /> | +| triggerText | No | -- | {triggerText} | -### Forwarded events +### Events -No forwarded events. +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| undefined | dispatched | -- | -### Dispatched events - -No dispatched events. - ---- - -## TooltipDefinition - -### Import path - -```js -import { TooltipDefinition } from "carbon-components-svelte"; -``` +## `TooltipDefinition` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------------------------------------ | :------------ | :----------------------------------------------------- | -| tooltipText | string | `""` | Specify the tooltip text. | -| align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. | -| direction | "top" | "bottom" | `"bottom"` | Set the direction of the tooltip relative to the icon. | -| id | string | -- | Set an id for the tooltip div element. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| tooltipText | let | No | string | "" | Specify the tooltip text | +| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element | ### Slots -- **default**: `
...
` -- **"tooltip"**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------- | +| -- | Yes | -- | -- | +| tooltip | No | -- | {tooltipText} | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:focus` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| focus | forwarded | -- | -No dispatched events. - ---- - -## TooltipIcon - -### Import path - -```js -import { TooltipIcon } from "carbon-components-svelte"; -``` +## `TooltipIcon` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :-------------------------------------------------------------- | :------------ | :----------------------------------------------------- | -| tooltipText | string | `""` | Specify the tooltip text. | -| align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. | -| direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the icon. | -| id | string | -- | Set an id for the span element. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| tooltipText | let | No | string | "" | Specify the tooltip text | +| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | let | No | "top" | "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 -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:focus` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| focus | forwarded | -- | ---- - -## UnorderedList - -### Import path - -```js -import { UnorderedList } from "carbon-components-svelte"; -``` +## `UnorderedList` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| nested | boolean | `false` | Set to `true` to use the nested variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | +| nested | let | No | boolean | false | Set to `true` to use the nested variant | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | diff --git a/package.json b/package.json index 5cb52e32..fb961ed2 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^9.8.6", "carbon-components-10.23": "npm:carbon-components@10.23.1", - "comment-parser": "^0.7.6", "gh-pages": "^3.1.0", "husky": "^4.3.0", "lint-staged": "^10.5.0", @@ -39,6 +38,7 @@ "rollup": "^2.32.1", "rollup-plugin-svelte": "^6.1.0", "rollup-plugin-terser": "^7.0.2", + "sveld": "^0.1.0-rc.0", "svelte": "^3.29.4", "svelte-check": "^1.1.6", "svelte-loader": "^2.13.6", diff --git a/rollup.config.js b/rollup.config.js index 5cbf4381..7481381c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -3,7 +3,7 @@ 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 generateDocs from "./scripts/rollup/plugin-generate-docs"; +import sveld from "sveld"; export default ["es", "umd"].map((format) => { const UMD = format === "umd"; @@ -22,9 +22,20 @@ export default ["es", "umd"].map((format) => { resolve(), commonjs(), UMD && terser(), - - // TODO: replace - // !UMD && generateDocs(), + UMD && + sveld({ + markdown: true, + markdownOptions: { + onAppend: (type, document, components) => { + if (type === "h1") + document.append( + "quote", + `${components.size} components exported from ${pkg.name}@${pkg.version}.` + ); + }, + }, + json: true, + }), ], }; }); diff --git a/scripts/rollup/generate-index.js b/scripts/rollup/generate-index.js deleted file mode 100644 index 6ffbb264..00000000 --- a/scripts/rollup/generate-index.js +++ /dev/null @@ -1,117 +0,0 @@ -const toLink = (text) => text.toLowerCase().replace(/\s+/g, "-"); - -const toMdLink = (text) => `[${text}](#${toLink(text)})`; - -const formatType = (type) => `${type.replace(/\|/g, "|")}`; - -const escapeHtml = (text) => text.replace(/\/g, ">"); - -const HEADER_PROPS = - "| Prop name | Type | Default value | Description |\n| :- | :- | :- | :- |\n"; - -/** - * Use library component metadata to generate component documentation in markdown format. - * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components - * @param {Map} groups - * @param {{name: string; version: string; homepage: string;}} pkg - */ -export function generateIndex(components, groups, pkg) { - let code = `# Component Index\n\n`; - - code += `> ${components.size} components exported from ${pkg.name} ${pkg.version}\n\n`; - - groups.forEach((group, component_group) => { - if (group.length > 1) { - code += `- ${component_group}\n`; - group.sort().forEach((component) => { - code += ` - ${toMdLink(component)}\n`; - }); - } else { - code += `- ${toMdLink(component_group)}\n`; - } - }); - - code += "---\n"; - - components.forEach((component, moduleName) => { - const { - typedefs, - component: { exported_props, slots, forwarded_events, dispatched_events }, - } = component; - - code += `## ${moduleName}\n\n`; - code += `### Import path\n\n`; - code += `\`\`\`js\nimport { ${moduleName} } from "${pkg.name}";\n\`\`\`\n\n`; - - code += "### Props\n\n"; - - if (exported_props.size > 0) { - if (typedefs.length > 0) { - let definitions = ""; - - typedefs.forEach(({ name, type }) => { - const typedef = type.startsWith("{") - ? `interface ${name} ${type}` - : `type ${name} = ${type};`; - - definitions += `${typedef}\n\n`; - }); - - code += `\`\`\`ts\n// \`${moduleName}\` type definitions\n\n${definitions}\n\`\`\`\n\n`; - } - - code += HEADER_PROPS; - - exported_props.forEach((prop, name) => { - code += `| ${name}${ - prop.kind === "const" ? " (`constant`)" : "" - } | ${formatType(prop.type)} | ${ - prop.value ? "`" + prop.value + "`" : "--" - } | ${escapeHtml(prop.description).replace(/\n/g, ". ")}. |\n`; - }); - } else { - code += "No exported props.\n\n"; - } - - code += "### Slots\n\n"; - - if (slots.size > 0) { - if (slots.get("default")) { - code += "- **default**: `
...
`\n"; - } - - slots.forEach((slot, name) => { - if (slot.default) return; - code += `- **"${name}"**: \`
`let:${attr.name}`) - .join(" ")}>...
\`\n`; - }); - } else { - code += "No slots.\n\n"; - } - - code += "### Forwarded events\n\n"; - - if (forwarded_events.size > 0) { - forwarded_events.forEach((event, name) => { - code += `- \`on:${name}\`\n`; - }); - } else { - code += "No forwarded events.\n\n"; - } - - code += "### Dispatched events\n\n"; - - if (dispatched_events.size > 0) { - dispatched_events.forEach((event, name) => { - code += `- \`on:${name}\`\n`; - }); - } else { - code += "No dispatched events.\n\n"; - } - - code += "---\n"; - }); - - return { code }; -} diff --git a/scripts/rollup/generate-public-api.js b/scripts/rollup/generate-public-api.js deleted file mode 100644 index 9a7155d4..00000000 --- a/scripts/rollup/generate-public-api.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Use library component metadata to generate component documentation in JSON format. - * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components - * @param {Map} groups - * @param {{name: string; version: string; homepage: string;}} pkg - */ -export function generatePublicAPI(components, groups, pkg) { - const code = { - version: pkg.version, - components: {}, - }; - - components.forEach((component, moduleName) => { - const props = Array.from(component.component.exported_props); - const slots = Array.from(component.component.slots); - const forwarded_events = Array.from(component.component.forwarded_events); - const dispatched_events = Array.from(component.component.dispatched_events); - - code.components[moduleName] = { - moduleName, - props, - slots, - forwarded_events, - dispatched_events, - }; - }); - - return { code }; -} diff --git a/scripts/rollup/generate-types.js b/scripts/rollup/generate-types.js deleted file mode 100644 index 9c0c796d..00000000 --- a/scripts/rollup/generate-types.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * Use library component metadata to generate TypeScript definitions. - * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components - * @param {{name: string; version: string; homepage: string;}} pkg - */ -export function generateTypes(components, pkg) { - let code = ` - // Type definitions for ${pkg.name} ${pkg.version} - // Project: ${pkg.homepage} - - export class CarbonSvelteComponent { - $$prop_def: {}; - - $$slot_def: {}; - - // stub all \`on:{eventname}\` directives - $on(eventname: string, handler: (e: Event) => any): () => void; - }\n\n`; - - components.forEach((component, moduleName) => { - let $$prop_def = ""; - let $$slot_def = ""; - - component.typedefs.forEach(({ name, type }) => { - const typedef = type.startsWith("{") - ? `interface ${name} ${type}` - : `type ${name} = ${type};`; - code += typedef + "\n\n"; - }); - - component.component.exported_props.forEach((prop, name) => { - $$prop_def += "/**\n"; - - prop.description.split("\n").forEach((line) => { - $$prop_def += "* " + line + "\n"; - }); - - if (prop.kind === "const") { - $$prop_def += "* @constant\n"; - } - - if (prop.value !== undefined) { - $$prop_def += "* @default " + prop.value + "\n"; - } - - $$prop_def += "*/\n"; - - let value = "undefined"; - - if (prop.type) { - value = prop.type; - } - - $$prop_def += name + "?: " + value + ";" + "\n\n"; - }); - - component.component.slots.forEach((slot, slot_name) => { - let value = ""; - - slot.attributes.forEach((attribute) => { - if (attribute.name !== "name") { - value += attribute.name + ": any;"; - } - }); - - if (slot.default) { - $$slot_def += "default: {" + value + "};" + "\n"; - } else { - $$slot_def += JSON.stringify(slot_name) + ": {" + value + "};" + "\n"; - } - }); - - code += ` - export class ${moduleName} extends CarbonSvelteComponent { - ${!!$$prop_def ? "$$prop_def: {" + $$prop_def + "}\n" : ""} - - ${!!$$slot_def ? "$$slot_def: {" + $$slot_def + "}\n" : ""} - }\n\n`; - }); - - return { code }; -} diff --git a/scripts/rollup/parse-component.js b/scripts/rollup/parse-component.js deleted file mode 100644 index 837c9c71..00000000 --- a/scripts/rollup/parse-component.js +++ /dev/null @@ -1,137 +0,0 @@ -import { parse, walk } from "svelte/compiler"; -import commentParser from "comment-parser"; - -/** - * Parse Svelte component for metadata using the Svelte compiler - * @param {string} source - raw Svelte component code - * @param {{ component: string; onTypeDef: (tag: { type: "typedef"; tag: string; name: string; }) => void;}} hooks - */ -export function parseComponent(source, hooks) { - const exported_props = new Map(); - const slots = new Map(); - const forwarded_events = new Map(); - const dispatched_events = new Map(); - - let hasDispatchedEvents = false; - let dispatcher_name = null; - let callee = []; - - walk(parse(source), { - enter(node, parent, prop) { - switch (node.type) { - case "CallExpression": - if (hasDispatchedEvents) { - if (node.callee.name === "createEventDispatcher") { - dispatcher_name = parent.id.name; - } - } - break; - case "Identifier": - if (node.name === "createEventDispatcher") { - hasDispatchedEvents = true; - } - - if (prop === "callee") { - callee.push({ name: node.name, parent }); - } - break; - case "ExportNamedDeclaration": - const { id, init } = node.declaration.declarations[0]; - - let value = undefined; - let type = undefined; - let kind = node.declaration.kind; - let description = null; - - if (init != null) { - if ( - init.type === "ObjectExpression" || - init.type === "ArrayExpression" - ) { - value = source.slice(init.start, init.end).replace(/\n/g, " "); - type = value; - } else { - value = init.raw; - } - } - - const general_comments = commentParser(source); - - general_comments.forEach((comment) => { - comment.tags.forEach((tag) => { - if (tag.tag === "typedef") hooks.onTypeDef(tag); - }); - }); - - if (node.leadingComments) { - const comment = commentParser( - "/*" + node.leadingComments[0].value + "*/" - ); - - description = comment[0].description; - - type = comment[0].tags[comment[0].tags.length - 1].type; - } else { - throw Error( - `[${hooks.component}] property \`${id.name}\` should be annotated.` - ); - } - - exported_props.set(id.name, { kind, value, type, description }); - break; - case "Slot": - let slot_name = null; - - const slot_attributes = []; - - node.attributes.forEach((attribute) => { - if (attribute.name === "name") { - slot_name = attribute.value[0].raw; - } else { - slot_attributes.push(attribute); - } - }); - - let default_value = ""; - - node.children.forEach((child) => { - default_value += `${source.slice(child.start, child.end)}\n`; - }); - - slots.set(slot_name == null ? "default" : slot_name, { - attributes: node.attributes, - children: node.children, - default: slot_name == null, - default_value, - }); - break; - case "EventHandler": - if (node.expression == null) { - forwarded_events.set(node.name, node); - } - break; - } - }, - }); - - if (hasDispatchedEvents) { - callee.forEach((node) => { - if (node.name === dispatcher_name) { - const [name, detail] = node.parent.arguments; - - if (name.value !== undefined) { - dispatched_events.set(name.value, { - detail: detail ? source.slice(detail.start, detail.end) : undefined, - }); - } - } - }); - } - - return { - exported_props, - slots, - forwarded_events, - dispatched_events, - }; -} diff --git a/scripts/rollup/plugin-generate-docs.js b/scripts/rollup/plugin-generate-docs.js deleted file mode 100644 index be019c8a..00000000 --- a/scripts/rollup/plugin-generate-docs.js +++ /dev/null @@ -1,84 +0,0 @@ -import fs from "fs"; -import path from "path"; -import { promisify } from "util"; -import pkg from "../../package.json"; -import { format } from "prettier"; -import { parseComponent } from "./parse-component"; -import { generateTypes } from "./generate-types"; -import { generateIndex } from "./generate-index"; -import { generatePublicAPI } from "./generate-public-api"; - -const writeFile = promisify(fs.writeFile); - -/** - * Rollup plugin to generate library TypeScript definitions and documentation. - */ -function pluginGenerateDocs() { - const groups = new Map(); - const components = new Map(); - - return { - name: "generate-docs", - async generateBundle(options, bundle) { - for (const filename in bundle) { - const chunkOrAsset = bundle[filename]; - - if (chunkOrAsset.type !== "asset" && chunkOrAsset.isEntry) { - chunkOrAsset.exports.forEach((exportee) => { - components.set(exportee, {}); - }); - - const shared_types = new Set(); - - Object.keys(chunkOrAsset.modules) - .sort() - .forEach(async (filename) => { - const { dir, ext, name } = path.parse(filename); - const moduleName = name.replace(/\./g, ""); - - if (ext === ".svelte" && components.has(moduleName)) { - const group = dir.split("src/").pop().split("/")[0]; - - if (groups.has(group)) { - groups.set(group, [...groups.get(group), moduleName]); - } else { - groups.set(group, [moduleName]); - } - - const typedefs = []; - const source = fs.readFileSync(filename, "utf-8"); - const component = parseComponent(source, { - component: moduleName, - onTypeDef: (tag) => { - if (shared_types.has(tag.name)) return; - shared_types.add(tag.name); - typedefs.push(tag); - }, - }); - - components.set(moduleName, { typedefs, component }); - } - }); - } - } - }, - async writeBundle() { - const { code: types } = generateTypes(components, pkg); - await writeFile(pkg.types, format(types, { parser: "typescript" })); - - const { code: index } = generateIndex(components, groups, pkg); - await writeFile( - "./COMPONENT_INDEX.md", - format(index, { parser: "markdown" }) - ); - - const { code: json } = generatePublicAPI(components, groups, pkg); - await writeFile( - "./docs/src/PUBLIC_API.json", - JSON.stringify(json, null, 2) - ); - }, - }; -} - -export default pluginGenerateDocs; diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte index 6f48fd15..c18b6840 100644 --- a/src/Accordion/AccordionItem.svelte +++ b/src/Accordion/AccordionItem.svelte @@ -39,7 +39,7 @@ class:bx--accordion__item--active="{open}" class:bx--accordion__item--disabled="{disabled}" {...$$restProps} - class="bx--accordion__item--${animation} {$$restProps.class}" + class="bx--accordion__item--{animation} {$$restProps.class}" on:animationend on:animationend="{() => { animation = undefined; diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 9ce6c692..e5074788 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -1,4 +1,8 @@ +

+ View component + + source code + + +

+

Props

{#if component.props.length > 0} @@ -69,16 +86,18 @@ - {#each component.props as prop} + {#each component.props.sort((a, b) => { + if (a.reactive > b.reactive) return -1; + }) as prop (prop.name)} - + - {#each prop[1].type.split(' | ') as type, i (type)} + {#each prop.type.split(' | ') as type, i (type)}
{#if type.startsWith('typeof')} {/each} + + {#if prop.reactive} +
+ Reactive +
+ {/if} + {prop.value} - {prop[1].value} - - - {#each prop[1].description.split('\n') as line} -
{line}.
- {/each} + {#if prop.description} + {#each prop.description.split('\n') as line} +
{line}.
+ {/each} + {:else} +
No description available.
+ {/if} {/each} @@ -126,8 +155,8 @@

Slots

{#if component.slots.length > 0} - {#each component.slots as slot} - {slot[0]} + {#each component.slots as slot (slot.name)} + {slot.default ? 'default' : slot.name} {/each} {:else} @@ -135,10 +164,10 @@ {/if}

Forwarded events

-{#if component.forwarded_events.length > 0} +{#if forwarded_events.length > 0} - {#each component.forwarded_events as event} - on:{event[0]} + {#each forwarded_events as event (event.name)} + on:{event.name} {/each} {:else} @@ -147,12 +176,27 @@

Dispatched events

-{#if component.dispatched_events.length > 0} +{#if dispatched_events.length > 0} - {#each component.dispatched_events as event} - on:{event[0]} + {#each dispatched_events as event (event.name)} + on:{event.name} {/each} {:else}

No dispatched events.

{/if} + +

$$restProps

+ +
+ {#if component.rest_props} + {component.moduleName} + spreads + $$restProps + to the + {#if component.rest_props.type === 'Element'} + {component.rest_props.name} + element. + {:else}{component.rest_props.name} component.{/if} + {:else}This component does not spread restProps{/if} +
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index 9d323448..2a7f36c9 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -12,18 +12,13 @@ Tabs, Tab, TabContent, - StructuredList, - StructuredListHead, - StructuredListRow, - StructuredListCell, - StructuredListBody, } from "carbon-components-svelte"; import Code16 from "carbon-icons-svelte/lib/Code16"; import { page, metatags } from "@sveltech/routify"; import { onMount } from "svelte"; import { theme } from "../store"; import ComponentApi from "../components/ComponentApi.svelte"; - import API from "../PUBLIC_API.json"; + import COMPONENT_API from "../COMPONENT_API.json"; export let component = $page.title; export let components = [component]; @@ -33,8 +28,10 @@ metatags.title = $page.title; - $: api = components.map((_) => API.components[_]).filter(Boolean); - $: multiple = api.length > 1; + $: api_components = components.map((i) => + COMPONENT_API.components.find((_) => _.moduleName === i) + ); + $: multiple = api_components.length > 1; onMount(() => { const currentTheme = window.location.search.split("?theme=")[1]; @@ -173,15 +170,10 @@

Component API

- Component API documentation is - - auto-generated + Component documentation is + + auto-generated by sveld. - from a build script.

@@ -190,11 +182,11 @@ {#if multiple} - {#each api as component, i (component.moduleName)} + {#each api_components as component (component.moduleName)} {/each}
- {#each api as component, i (component.moduleName)} + {#each api_components as component (component.moduleName)} @@ -202,7 +194,7 @@
{:else} - + {/if} diff --git a/docs/src/layouts/Recipe.svelte b/docs/src/layouts/Recipe.svelte index 70f239e2..5b0ac79a 100644 --- a/docs/src/layouts/Recipe.svelte +++ b/docs/src/layouts/Recipe.svelte @@ -6,7 +6,6 @@ Content, Select, SelectItem, - InlineNotification, } from "carbon-components-svelte"; import { page, metatags } from "@sveltech/routify"; import { onMount } from "svelte"; diff --git a/docs/svelte.config.js b/docs/svelte.config.js index b42d446e..5be26a46 100644 --- a/docs/svelte.config.js +++ b/docs/svelte.config.js @@ -242,6 +242,9 @@ module.exports = {
  • Dispatched events
    • +
  • + $$restProps +
    • diff --git a/package.json b/package.json index fb961ed2..9fee1b2e 100644 --- a/package.json +++ b/package.json @@ -35,12 +35,12 @@ "postcss": "^7.0.32", "prettier": "^2.1.2", "prettier-plugin-svelte": "^1.4.1", - "rollup": "^2.32.1", - "rollup-plugin-svelte": "^6.1.0", + "rollup": "^2.33.3", + "rollup-plugin-svelte": "^6.1.1", "rollup-plugin-terser": "^7.0.2", - "sveld": "^0.1.0-rc.0", - "svelte": "^3.29.4", - "svelte-check": "^1.1.6", + "sveld": "^0.1.0-rc.5", + "svelte": "^3.29.7", + "svelte-check": "^1.1.14", "svelte-loader": "^2.13.6", "typescript": "^4.0.5" }, diff --git a/rollup.config.js b/rollup.config.js index 7481381c..2423662c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -35,6 +35,9 @@ export default ["es", "umd"].map((format) => { }, }, json: true, + jsonOptions: { + outFile: "docs/src/COMPONENT_API.json", + }, }), ], }; diff --git a/yarn.lock b/yarn.lock index a0a4bbab..9a0a3e37 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2287,10 +2287,10 @@ rimraf@2: dependencies: glob "^7.1.3" -rollup-plugin-svelte@^6.1.0: - version "6.1.0" - resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.0.tgz#bba94a37796fac1f73528161e84cc4976df431e1" - integrity sha512-TX1nIZSD6ePiSdYIEfpkvR7lLnP1nsSycCVz+vXbm5d5kIe5WMldo6fwcL/T8KPjc42XDgLaRcS74BorpQvpiA== +rollup-plugin-svelte@^6.1.1: + version "6.1.1" + resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz#66362cf0500fb7a848283ebcf19d289a60ef0871" + integrity sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow== dependencies: require-relative "^0.8.7" rollup-pluginutils "^2.8.2" @@ -2313,10 +2313,10 @@ rollup-pluginutils@^2.8.2: dependencies: estree-walker "^0.6.1" -rollup@^2.32.1: - version "2.32.1" - resolved "https://registry.npmjs.org/rollup/-/rollup-2.32.1.tgz#625a92c54f5b4d28ada12d618641491d4dbb548c" - integrity sha512-Op2vWTpvK7t6/Qnm1TTh7VjEZZkN8RWgf0DHbkKzQBwNf748YhXbozHVefqpPp/Fuyk/PQPAnYsBxAEtlMvpUw== +rollup@^2.33.2, rollup@^2.33.3: + version "2.33.3" + resolved "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz#ae72ce31f992b09a580072951bfea76e9df17342" + integrity sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w== optionalDependencies: fsevents "~2.1.2" @@ -2728,19 +2728,23 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -sveld@^0.1.0-rc.0: - version "0.1.0-rc.0" - resolved "https://registry.npmjs.org/sveld/-/sveld-0.1.0-rc.0.tgz#3296df459116984f299bdd50bc8745e3cd48e66a" - integrity sha512-z4SkRD8cVCOlsdd7UTMDRuG2TNDRHSGN201Fok/aTPoT0PjuXI4lcUJqGbJdxX4KBebenj8ph7y/UV8G0FqA0A== +sveld@^0.1.0-rc.5: + version "0.1.0-rc.5" + resolved "https://registry.npmjs.org/sveld/-/sveld-0.1.0-rc.5.tgz#32d35b3d2b9f2aaed28202da0e5f5adf69b6f181" + integrity sha512-TJY0mYN8vUPiPL8GGNn//IS6WicUF+MEbKCNzM6oXojIp6RSyBnJyJQsjIGFmfs6x5GIac+Sz8CjIFgQ40BfJQ== dependencies: + "@rollup/plugin-node-resolve" "^10.0.0" comment-parser "^0.7.6" fs-extra "^9.0.1" prettier "^2.1.2" + rollup "^2.33.2" + rollup-plugin-svelte "^6.1.1" + svelte "^3.29.7" -svelte-check@^1.1.6: - version "1.1.6" - resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.6.tgz#705fea71a757511f47894cdfa1ffab6e5c5cab4d" - integrity sha512-9CTehTTy02B4b7hsSp/F0JO8LrI3hNAgXfBtQ2JkxbDSLqlMPM5d2wcMrSzws9QQg6clRfBnn44wx3h/XYWWmg== +svelte-check@^1.1.14: + version "1.1.14" + resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.14.tgz#e6d94607b8d2e2e8738fbef39fe2f540f09a12b7" + integrity sha512-Vx/Nfesn29sRTsc7DJ9bAoTWT+gA+6ZWSiC+G+FMjWac2NP0CpNXdD0tjVvlztZY7HZNxya6D/QyNtCGFC9K6Q== dependencies: chalk "^4.0.0" chokidar "^3.4.1" @@ -2774,10 +2778,10 @@ svelte-preprocess@^4.0.0: detect-indent "^6.0.0" strip-indent "^3.0.0" -svelte@^3.29.4: - version "3.29.4" - resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.4.tgz#d0f80cb58109ef52963855c23496f7153bb2eb7e" - integrity sha512-oW0fGHlyFFMvzRtIvOs84b0fOc0gmZNQcL5Is3hxuTpvaYX3pfd8oHy4KnOvbq4Ca6SG6AHdRMk7OhApTo0NqA== +svelte@^3.29.7: + version "3.29.7" + resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.7.tgz#e254eb2d0d609ce0fd60f052d444ac4a66d90f7d" + integrity sha512-rx0g311kBODvEWUU01DFBUl3MJuJven04bvTVFUG/w0On/wuj0PajQY/QlXcJndFxG+W1s8iXKaB418tdHWc3A== tar@^2.0.0: version "2.2.2" From 998757691bbd0050725e32bb8591ccb17aee2e05 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 19 Nov 2020 06:21:24 -0800 Subject: [PATCH 06/11] chore: regenerate component docs [ci skip] --- COMPONENT_INDEX.md | 19 ++++++++++--------- docs/src/COMPONENT_API.json | 10 ++++++++++ docs/src/components/ComponentApi.svelte | 10 ++++++---- docs/svelte.config.js | 2 +- types/UIShell/GlobalHeader/Header.d.ts | 6 ++++++ 5 files changed, 33 insertions(+), 14 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 4ddf4455..b62685a7 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1347,15 +1347,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | let | No | string | -- | 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>) | +| 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 | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 693a8d3a..ee7e1382 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -9507,6 +9507,16 @@ "constant": false, "reactive": false }, + { + "name": "persistentHamburgerMenu", + "kind": "let", + "description": "Set to `true` to persist the hamburger menu", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "ref", "kind": "let", diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index 335177bd..ca3f22b5 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -63,9 +63,9 @@

    - View component - - source code + Component source code: + + {component.filePath}

    @@ -138,7 +138,9 @@ {#if prop.description} {#each prop.description.split('\n') as line} -
    {@html line.replace(/`(.*?)`/g, '$1')}.
    +
    + {@html line.replace(/`(.*?)`/g, '$1')}. +
    {/each} {:else}
    No description available.
    diff --git a/docs/svelte.config.js b/docs/svelte.config.js index 5be26a46..c1ae0be0 100644 --- a/docs/svelte.config.js +++ b/docs/svelte.config.js @@ -243,7 +243,7 @@ module.exports = { Dispatched events
  • - $$restProps + restProps
    • diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts index 21d64958..5e21d045 100644 --- a/types/UIShell/GlobalHeader/Header.d.ts +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -35,6 +35,12 @@ export interface HeaderProps extends svelte.JSX.HTMLAttributes Date: Thu, 19 Nov 2020 09:09:57 -0800 Subject: [PATCH 07/11] fix(types): remove "undefined" dispatched events --- .travis.yml | 4 +++- COMPONENT_INDEX.md | 21 ++++++++------------ docs/src/COMPONENT_API.json | 13 +++++------- tests/carbon-components-svelte-tests.svelte | 2 +- types/DatePicker/DatePicker.d.ts | 1 - types/Tile/SelectableTile.d.ts | 1 - types/Tooltip/Tooltip.d.ts | 1 - types/UIShell/GlobalHeader/HeaderAction.d.ts | 1 - 8 files changed, 17 insertions(+), 27 deletions(-) diff --git a/.travis.yml b/.travis.yml index 21f72b4a..0f44cad7 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,6 @@ language: node_js node_js: 12 cache: yarn -script: yarn prepack +script: + - yarn check-types + - yarn prepack diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index b62685a7..d98975fe 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -870,7 +870,6 @@ None. | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | change | dispatched | -- | -| undefined | dispatched | -- | ## `DatePickerInput` @@ -1396,7 +1395,6 @@ None. | :--------- | :--------- | :----- | | click | forwarded | -- | | close | dispatched | -- | -| undefined | dispatched | -- | ## `HeaderActionLink` @@ -2861,14 +2859,13 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | -| undefined | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | ## `SideNav` @@ -4090,9 +4087,7 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| undefined | dispatched | -- | +None. ## `TooltipDefinition` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index ee7e1382..7bddd650 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3405,8 +3405,7 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "dispatched", "name": "change" }, - { "type": "dispatched" } + { "type": "dispatched", "name": "change" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -7631,7 +7630,7 @@ { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "TagSkeleton" } + "rest_props": { "type": "Element", "name": "div | span" } }, { "moduleName": "TextArea", @@ -8515,8 +8514,7 @@ { "type": "forwarded", "name": "mouseover", "element": "label" }, { "type": "forwarded", "name": "mouseenter", "element": "label" }, { "type": "forwarded", "name": "mouseleave", "element": "label" }, - { "type": "forwarded", "name": "keydown", "element": "label" }, - { "type": "dispatched" } + { "type": "forwarded", "name": "keydown", "element": "label" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "label" } @@ -9302,7 +9300,7 @@ "slot_props": "{}" } ], - "events": [{ "type": "dispatched" }], + "events": [], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, @@ -9596,8 +9594,7 @@ ], "events": [ { "type": "forwarded", "name": "click", "element": "button" }, - { "type": "dispatched", "name": "close" }, - { "type": "dispatched" } + { "type": "dispatched", "name": "close" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "button" } diff --git a/tests/carbon-components-svelte-tests.svelte b/tests/carbon-components-svelte-tests.svelte index 38f82cf6..02adb871 100644 --- a/tests/carbon-components-svelte-tests.svelte +++ b/tests/carbon-components-svelte-tests.svelte @@ -3,7 +3,7 @@ import { Tag } from "../types"; // example of a direct import - import TagSkeleton from "../types/Tag/Tag.Skeleton"; + import TagSkeleton from "../types/Tag/TagSkeleton"; diff --git a/types/DatePicker/DatePicker.d.ts b/types/DatePicker/DatePicker.d.ts index 7e950345..53cb7312 100644 --- a/types/DatePicker/DatePicker.d.ts +++ b/types/DatePicker/DatePicker.d.ts @@ -72,6 +72,5 @@ export default class DatePicker { $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/Tile/SelectableTile.d.ts b/types/Tile/SelectableTile.d.ts index 7d6b9f1a..5ba51e8a 100644 --- a/types/Tile/SelectableTile.d.ts +++ b/types/Tile/SelectableTile.d.ts @@ -67,6 +67,5 @@ export default class SelectableTile { $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; - $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.d.ts index eb9cdf21..aebc8a3b 100644 --- a/types/Tooltip/Tooltip.d.ts +++ b/types/Tooltip/Tooltip.d.ts @@ -88,6 +88,5 @@ export default class Tooltip { triggerText: {}; }; - $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts index 7075079c..cdf1bad3 100644 --- a/types/UIShell/GlobalHeader/HeaderAction.d.ts +++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts @@ -34,6 +34,5 @@ export default class HeaderAction { $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; - $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } From 26ce330e1d3aa24d2e1eba1b862caabe76e5522a Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 19 Nov 2020 09:10:30 -0800 Subject: [PATCH 08/11] fix(tag): define JSDoc restProps type --- package.json | 2 +- src/Tag/Tag.svelte | 24 ++++++++---------------- types/Tag/Tag.d.ts | 4 +++- yarn.lock | 8 ++++---- 4 files changed, 16 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 9fee1b2e..0f890788 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "rollup": "^2.33.3", "rollup-plugin-svelte": "^6.1.1", "rollup-plugin-terser": "^7.0.2", - "sveld": "^0.1.0-rc.5", + "sveld": "^0.1.0", "svelte": "^3.29.7", "svelte-check": "^1.1.14", "svelte-loader": "^2.13.6", diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte index be0dded8..f80abfc7 100644 --- a/src/Tag/Tag.svelte +++ b/src/Tag/Tag.svelte @@ -1,32 +1,24 @@ + + + + + + + + + + diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts index 9f3534c7..f158e636 100644 --- a/types/Button/Button.d.ts +++ b/types/Button/Button.d.ts @@ -22,7 +22,7 @@ export interface ButtonProps { /** * Specify the icon from `carbon-icons-svelte` to render */ - icon?: import("carbon-icons-svelte").CarbonIcon; + icon?: typeof import("carbon-icons-svelte").CarbonIcon; /** * Specify the ARIA label for the button icon diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts index d180bfe1..6e428588 100644 --- a/types/Icon/Icon.d.ts +++ b/types/Icon/Icon.d.ts @@ -5,7 +5,7 @@ export interface IconProps { * Specify the icon from `carbon-icons-svelte` to render * Icon size must be 16px (e.g. `Add16`, `Task16`) */ - render?: import("carbon-icons-svelte").CarbonIcon; + render?: typeof import("carbon-icons-svelte").CarbonIcon; /** * Set to `true` to display the skeleton state diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts index a3b7c44d..5bf25670 100644 --- a/types/Notification/NotificationButton.d.ts +++ b/types/Notification/NotificationButton.d.ts @@ -10,7 +10,7 @@ export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes Date: Thu, 19 Nov 2020 13:06:05 -0800 Subject: [PATCH 10/11] chore(deps): upgrade carbon-icons-svelte to 10.21 --- package.json | 4 ++-- yarn.lock | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 0f890788..b1491cbc 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "prepack": "run-p build:*" }, "dependencies": { - "carbon-icons-svelte": "^10.17.0", + "carbon-icons-svelte": "^10.21.0", "flatpickr": "4.6.3" }, "devDependencies": { @@ -38,7 +38,7 @@ "rollup": "^2.33.3", "rollup-plugin-svelte": "^6.1.1", "rollup-plugin-terser": "^7.0.2", - "sveld": "^0.1.0", + "sveld": "^0.2.1", "svelte": "^3.29.7", "svelte-check": "^1.1.14", "svelte-loader": "^2.13.6", diff --git a/yarn.lock b/yarn.lock index 4d876c80..daaa802f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -425,10 +425,10 @@ caniuse-lite@^1.0.30001109: lodash.debounce "^4.0.8" warning "^3.0.0" -carbon-icons-svelte@^10.17.0: - version "10.17.0" - resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.17.0.tgz#f7559f58be9c789097ea4035e52dbc4c12691d45" - integrity sha512-as1RN87YLvF7iepGAGWQOk2oleyb4w17BoHSYyQgE3MceOla04YdSWASK5c22XZZnmMJbbrT17Z34Cl70niz0Q== +carbon-icons-svelte@^10.21.0: + version "10.21.0" + resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4" + integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ== caseless@~0.12.0: version "0.12.0" @@ -2313,7 +2313,7 @@ rollup-pluginutils@^2.8.2: dependencies: estree-walker "^0.6.1" -rollup@^2.33.2, rollup@^2.33.3: +rollup@^2.33.3: version "2.33.3" resolved "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz#ae72ce31f992b09a580072951bfea76e9df17342" integrity sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w== @@ -2728,16 +2728,16 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -sveld@^0.1.0: - version "0.1.0" - resolved "https://registry.npmjs.org/sveld/-/sveld-0.1.0.tgz#8cf208f21ba4f6af24462fcb48f279778bac7a67" - integrity sha512-JGUVJ6/GTmOeAnh3F+A+l0utszL8qDKQJ7wsTMupqA+vzqF4y+Bq8Khlt3MVBdgYmEClXIlzSLiMQ8g232h6Wg== +sveld@^0.2.1: + version "0.2.1" + resolved "https://registry.npmjs.org/sveld/-/sveld-0.2.1.tgz#3294ba51d18905e260546d6ca088ceda015dcbb2" + integrity sha512-NEEXxKaOWt0JBXrxnpG/TNVzCUadW65YEyD3l/49IV9xo7/5Jkrm7At8wGPNFSYGlC6564tmP8NBhFQH/0mzBg== dependencies: "@rollup/plugin-node-resolve" "^10.0.0" comment-parser "^0.7.6" fs-extra "^9.0.1" prettier "^2.1.2" - rollup "^2.33.2" + rollup "^2.33.3" rollup-plugin-svelte "^6.1.1" svelte "^3.29.7" From eed617433b1890217fff081c4e8e050291ad82e5 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 19 Nov 2020 14:16:01 -0800 Subject: [PATCH 11/11] test: add TS types --- COMPONENT_INDEX.md | 176 +++++++------- docs/src/COMPONENT_API.json | 137 +++++++---- docs/src/pages/components/SelectableTile.svx | 4 +- src/Accordion/Accordion.svelte | 2 + src/Breadcrumb/Breadcrumb.svelte | 2 + src/Button/Button.svelte | 4 +- src/ComposedModal/ComposedModal.svelte | 9 +- src/CopyButton/CopyButton.svelte | 2 + src/DataTable/DataTable.svelte | 38 +-- src/DataTable/ToolbarMenu.svelte | 2 + src/DataTable/ToolbarMenuItem.svelte | 2 + src/DataTable/ToolbarSearch.svelte | 5 +- src/DatePicker/DatePicker.svelte | 5 +- src/Grid/Column.svelte | 2 + src/Grid/Grid.svelte | 3 +- src/Grid/Row.svelte | 3 +- src/Icon/Icon.svelte | 6 +- src/MultiSelect/MultiSelect.svelte | 2 +- src/NumberInput/NumberInput.svelte | 5 +- src/Select/Select.svelte | 5 +- src/TextInput/PasswordInput.svelte | 10 +- src/TextInput/TextInput.svelte | 5 +- src/TimePicker/TimePickerSelect.svelte | 5 +- tests/Accordion.test.svelte | 219 ++++++++++++++++++ tests/AspectRatio.test.svelte | 35 +++ tests/AspectRatioColumns.test.svelte | 20 ++ tests/Breadcrumb.test.svelte | 16 ++ tests/Breadcrumbs.test.svelte | 26 +++ tests/Button.test.svelte | 62 +++++ tests/Checkbox.test.svelte | 15 ++ tests/ClickableTile.test.svelte | 11 + tests/CodeSnippet.test.svelte | 50 ++++ tests/ComboBox.test.svelte | 44 ++++ tests/ComposedModal.test.svelte | 19 ++ tests/CondensedGrid.test.svelte | 12 + tests/ContentSwitcher.test.svelte | 55 +++++ tests/CopyButton.test.svelte | 16 ++ tests/CopyableCodeSnippet.test.svelte | 8 + tests/DangerModal.test.svelte | 21 ++ tests/DataTable.test.svelte | 192 +++++++++++++++ tests/DataTableAppendColumns.test.svelte | 34 +++ tests/DataTableBatchSelection.test.svelte | 29 +++ ...DataTableBatchSelectionToolbar.test.svelte | 51 ++++ tests/DatePicker.test.svelte | 58 +++++ tests/Dropdown.test.svelte | 55 +++++ tests/DynamicCodeSnippet.test.svelte | 15 ++ tests/ExpandableTile.test.svelte | 18 ++ tests/FileUploader.test.svelte | 33 +++ tests/FilterableComboBox.test.svelte | 15 ++ tests/FluidForm.test.svelte | 13 ++ tests/Form.test.svelte | 54 +++++ tests/FullWidthGrid.test.svelte | 12 + tests/Grid.test.svelte | 12 + tests/HeaderNav.test.svelte | 60 +++++ tests/HeaderSwitcher.test.svelte | 66 ++++++ tests/HeaderUtilities.test.svelte | 71 ++++++ tests/HiddenCodeSnippet.test.svelte | 34 +++ tests/Icon.test.svelte | 23 ++ tests/InlineLoading.test.svelte | 15 ++ tests/InlineLoadingUx.test.svelte | 52 +++++ tests/InlineNotification.test.svelte | 43 ++++ tests/Link.test.svelte | 29 +++ tests/Loading.test.svelte | 7 + tests/Modal.test.svelte | 20 ++ tests/ModalExtraSmall.test.svelte | 17 ++ tests/ModalLarge.test.svelte | 17 ++ tests/ModalPreventOutsideClick.test.svelte | 17 ++ tests/ModalSmall.test.svelte | 17 ++ tests/MultiSelect.test.svelte | 68 ++++++ tests/NarrowGrid.test.svelte | 12 + tests/NumberInput.test.svelte | 37 +++ tests/OffsetColumns.test.svelte | 32 +++ tests/OrderedList.test.svelte | 57 +++++ tests/OverflowMenu.test.svelte | 77 ++++++ tests/Pagination.test.svelte | 15 ++ tests/PaginationNav.test.svelte | 7 + tests/PassiveModal.test.svelte | 14 ++ tests/PasswordInput.test.svelte | 29 +++ tests/PersistedHamburgerMenu.test.svelte | 65 ++++++ tests/ProgressIndicator.test.svelte | 83 +++++++ tests/RadioButton.test.svelte | 48 ++++ tests/RadioSelectableDataTable.test.svelte | 24 ++ tests/RadioTile.test.svelte | 15 ++ tests/ResponsiveGrid.test.svelte | 40 ++++ tests/Search.test.svelte | 21 ++ tests/Select.test.svelte | 64 +++++ tests/SelectableDataTable.test.svelte | 24 ++ tests/SelectableTile.test.svelte | 15 ++ tests/SkeletonPlaceholder.test.svelte | 7 + tests/SkeletonText.test.svelte | 15 ++ tests/Slider.test.svelte | 36 +++ tests/StructuredList.test.svelte | 94 ++++++++ tests/Tabs.test.svelte | 39 ++++ tests/Tag.test.svelte | 31 +++ tests/TextArea.test.svelte | 46 ++++ tests/TextInput.test.svelte | 34 +++ tests/Tile.test.svelte | 7 + tests/TimePicker.test.svelte | 58 +++++ tests/ToastNotification.test.svelte | 35 +++ tests/Toggle.test.svelte | 13 ++ tests/ToggleSmall.test.svelte | 13 ++ tests/Tooltip.test.svelte | 52 +++++ tests/TooltipDefinition.test.svelte | 24 ++ tests/TooltipIcon.test.svelte | 25 ++ tests/UnorderedList.test.svelte | 39 ++++ tests/carbon-components-svelte-tests.svelte | 21 -- types/Accordion/Accordion.d.ts | 3 +- types/Breadcrumb/Breadcrumb.d.ts | 3 +- types/Button/Button.d.ts | 11 +- types/ComposedModal/ComposedModal.d.ts | 2 +- types/CopyButton/CopyButton.d.ts | 3 +- types/DataTable/DataTable.d.ts | 62 +++-- types/DataTable/ToolbarMenu.d.ts | 3 +- types/DataTable/ToolbarMenuItem.d.ts | 3 +- types/DataTable/ToolbarSearch.d.ts | 2 +- types/DatePicker/DatePicker.d.ts | 2 +- types/Grid/Column.d.ts | 4 +- types/Grid/Grid.d.ts | 4 +- types/Grid/Row.d.ts | 4 +- types/Icon/Icon.d.ts | 4 +- types/MultiSelect/MultiSelect.d.ts | 2 +- types/NumberInput/NumberInput.d.ts | 2 +- types/Select/Select.d.ts | 2 +- types/TextInput/PasswordInput.d.ts | 6 +- types/TextInput/TextInput.d.ts | 2 +- types/TimePicker/TimePickerSelect.d.ts | 2 +- 126 files changed, 3378 insertions(+), 226 deletions(-) create mode 100644 tests/Accordion.test.svelte create mode 100644 tests/AspectRatio.test.svelte create mode 100644 tests/AspectRatioColumns.test.svelte create mode 100644 tests/Breadcrumb.test.svelte create mode 100644 tests/Breadcrumbs.test.svelte create mode 100644 tests/Button.test.svelte create mode 100644 tests/Checkbox.test.svelte create mode 100644 tests/ClickableTile.test.svelte create mode 100644 tests/CodeSnippet.test.svelte create mode 100644 tests/ComboBox.test.svelte create mode 100644 tests/ComposedModal.test.svelte create mode 100644 tests/CondensedGrid.test.svelte create mode 100644 tests/ContentSwitcher.test.svelte create mode 100644 tests/CopyButton.test.svelte create mode 100644 tests/CopyableCodeSnippet.test.svelte create mode 100644 tests/DangerModal.test.svelte create mode 100644 tests/DataTable.test.svelte create mode 100644 tests/DataTableAppendColumns.test.svelte create mode 100644 tests/DataTableBatchSelection.test.svelte create mode 100644 tests/DataTableBatchSelectionToolbar.test.svelte create mode 100644 tests/DatePicker.test.svelte create mode 100644 tests/Dropdown.test.svelte create mode 100644 tests/DynamicCodeSnippet.test.svelte create mode 100644 tests/ExpandableTile.test.svelte create mode 100644 tests/FileUploader.test.svelte create mode 100644 tests/FilterableComboBox.test.svelte create mode 100644 tests/FluidForm.test.svelte create mode 100644 tests/Form.test.svelte create mode 100644 tests/FullWidthGrid.test.svelte create mode 100644 tests/Grid.test.svelte create mode 100644 tests/HeaderNav.test.svelte create mode 100644 tests/HeaderSwitcher.test.svelte create mode 100644 tests/HeaderUtilities.test.svelte create mode 100644 tests/HiddenCodeSnippet.test.svelte create mode 100644 tests/Icon.test.svelte create mode 100644 tests/InlineLoading.test.svelte create mode 100644 tests/InlineLoadingUx.test.svelte create mode 100644 tests/InlineNotification.test.svelte create mode 100644 tests/Link.test.svelte create mode 100644 tests/Loading.test.svelte create mode 100644 tests/Modal.test.svelte create mode 100644 tests/ModalExtraSmall.test.svelte create mode 100644 tests/ModalLarge.test.svelte create mode 100644 tests/ModalPreventOutsideClick.test.svelte create mode 100644 tests/ModalSmall.test.svelte create mode 100644 tests/MultiSelect.test.svelte create mode 100644 tests/NarrowGrid.test.svelte create mode 100644 tests/NumberInput.test.svelte create mode 100644 tests/OffsetColumns.test.svelte create mode 100644 tests/OrderedList.test.svelte create mode 100644 tests/OverflowMenu.test.svelte create mode 100644 tests/Pagination.test.svelte create mode 100644 tests/PaginationNav.test.svelte create mode 100644 tests/PassiveModal.test.svelte create mode 100644 tests/PasswordInput.test.svelte create mode 100644 tests/PersistedHamburgerMenu.test.svelte create mode 100644 tests/ProgressIndicator.test.svelte create mode 100644 tests/RadioButton.test.svelte create mode 100644 tests/RadioSelectableDataTable.test.svelte create mode 100644 tests/RadioTile.test.svelte create mode 100644 tests/ResponsiveGrid.test.svelte create mode 100644 tests/Search.test.svelte create mode 100644 tests/Select.test.svelte create mode 100644 tests/SelectableDataTable.test.svelte create mode 100644 tests/SelectableTile.test.svelte create mode 100644 tests/SkeletonPlaceholder.test.svelte create mode 100644 tests/SkeletonText.test.svelte create mode 100644 tests/Slider.test.svelte create mode 100644 tests/StructuredList.test.svelte create mode 100644 tests/Tabs.test.svelte create mode 100644 tests/Tag.test.svelte create mode 100644 tests/TextArea.test.svelte create mode 100644 tests/TextInput.test.svelte create mode 100644 tests/Tile.test.svelte create mode 100644 tests/TimePicker.test.svelte create mode 100644 tests/ToastNotification.test.svelte create mode 100644 tests/Toggle.test.svelte create mode 100644 tests/ToggleSmall.test.svelte create mode 100644 tests/Tooltip.test.svelte create mode 100644 tests/TooltipDefinition.test.svelte create mode 100644 tests/TooltipIcon.test.svelte create mode 100644 tests/UnorderedList.test.svelte delete mode 100644 tests/carbon-components-svelte-tests.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 360ac891..d4f75909 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -351,9 +351,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | -| -- | Yes | { props?: { role: "button"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | +| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | ### Events @@ -575,9 +575,9 @@ type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------- | :------- | -| -- | Yes | { props?: { class: string; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------------------------ | :------- | +| -- | Yes | {props: { class: string; [key: string]: any; }} | -- | ### Events @@ -645,7 +645,7 @@ None. | 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 | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| selectorPrimaryFocus | let | No | null | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | ### Slots @@ -757,28 +757,48 @@ None. ### Types ```ts -interface Header { - key: string; - value: string; - display?: (item) => string; - sort?: (a, b) => number; - empty?: boolean; +type Key = string; + +type Value = any; + +interface EmptyHeader { + key: Key; + empty: boolean; + display?: (item: Value) => Value; + sort?: (a: Value, b: Value) => 0 | -1 | 1; columnMenu?: boolean; } -type Headers = Header[]; +interface NonEmptyHeader { + key: Key; + value: Value; + display?: (item: Value) => Value; + sort?: (a: Value, b: Value) => 0 | -1 | 1; + columnMenu?: boolean; +} + +type DataTableHeader = NonEmptyHeader | EmptyHeader; + +type Row = Record; + +type RowId = string; + +interface Cell { + key: Key; + value: Value; +} ``` ### Props | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | let | Yes | string[] | [] | Specify the row ids to be selected | +| selectedRowIds | let | Yes | RowId[] | [] | 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 | string[] | [] | Specify the row ids to be expanded | +| expandedRowIds | let | Yes | RowId[] | [] | 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 | Object[] | [] | Specify the rows the data table should render
    keys defined in `headers` are used for the row ids | -| headers | let | No | Headers | [] | Specify the data table headers | +| rows | let | Yes | Row[] | [] | 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" | "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 | @@ -791,25 +811,25 @@ type Headers = Header[]; ### Slots -| Slot name | Default | Props | Fallback | -| :----------- | :------ | :------------------------------------------- | :------------------------------------------------------------------------------ | -| -- | Yes | -- | -- | -| cell | No | { row: Object; cell: Object; } | {headers[j].display ? headers[j].display(cell.value) : cell.value} | -| cell-header | No | { header: Header} | {header.value} | -| expanded-row | No | { row: Object; } | -- | +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :---------------------------------------- | :------------------------------------------------------------------------------ | +| -- | Yes | -- | -- | +| cell | No | { row: Row; cell: Cell; } | {headers[j].display ? headers[j].display(cell.value) : cell.value} | +| cell-header | No | { header: NonEmptyHeader; } | {header.value} | +| expanded-row | No | { row: Row; } | -- | ### Events -| Event name | Type | Detail | -| :------------------- | :--------- | :-------------------------------------------------------------------------------------------- | -| click | dispatched | { header?: Header; row?: Object; cell?: Object; } | -| click:header--expand | dispatched | { expanded: boolean; } | -| click:header | dispatched | { header: Header; sortDirection: "ascending" | "descending" | "none" } | -| click:row | dispatched | Object | -| mouseenter:row | dispatched | Object | -| mouseleave:row | dispatched | Object | -| click:row--expand | dispatched | { expanded: boolean; row: Object; } | -| click:cell | dispatched | Object | +| Event name | Type | Detail | +| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- | +| click | dispatched | { header?: DataTableHeader; row?: Row; cell?: Cell; } | +| click:header--expand | dispatched | { expanded: boolean; } | +| click:header | dispatched | { header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" } | +| click:row | dispatched | Row | +| mouseenter:row | dispatched | Row | +| mouseleave:row | dispatched | Row | +| click:row--expand | dispatched | { expanded: boolean; row: Row; } | +| click:cell | dispatched | Cell | ## `DataTableSkeleton` @@ -844,7 +864,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| value | let | Yes | string | "" | Specify the date picker input value | +| value | let | Yes | number | string | "" | Specify the date picker input value | | datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | | appendTo | let | No | HTMLElement | -- | Specify the element to append the calendar to | | dateFormat | let | No | string | "m/d/Y" | Specify the date format | @@ -1334,9 +1354,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------- | :------- | -| -- | Yes | { props?: { class: string; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------------------- | :------- | +| -- | Yes | { props: { class: string; [key: string]: any; } } | -- | ### Events @@ -1606,10 +1626,10 @@ None. ### 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
    Icon size must be 16px (e.g. `Add16`, `Task16`) | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| 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 @@ -2067,32 +2087,32 @@ interface MultiSelectItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| 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 | -| 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 | (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 | -| 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 | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | +| 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 | +| 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 | +| 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 @@ -2205,7 +2225,7 @@ type NumberInputTranslationId = "increment" | "decrement"; | 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 | +| 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 | @@ -2438,8 +2458,8 @@ None. | 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 | string | "password" | Specify the input type | -| value | let | Yes | string | "" | Specify the input value | +| 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 | @@ -2673,9 +2693,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :--------------------------------------------------------------- | :------- | -| -- | Yes | { props?: { class: string; [key: string]: any; } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------------------- | :------- | +| -- | Yes | { props: { class: string; [key: string]: any; } } | -- | ### Events @@ -2749,7 +2769,7 @@ None. | 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 | -- | -- | Specify the selected item value | +| 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 | @@ -3633,7 +3653,7 @@ None. | 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 | +| 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 | @@ -3783,7 +3803,7 @@ None. | 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 | string | "" | Specify the select value | +| 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 | @@ -4040,7 +4060,7 @@ None. | :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- | | 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 | string | "" | Specify the value of the search input | +| 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 | | tabindex | let | No | string | "0" | Specify the tabindex | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 49954efd..416f6d11 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -178,7 +178,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" } + "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" }, + "extends": { + "interface": "AccordionSkeletonProps", + "import": "\"./AccordionSkeleton\"" + } }, { "moduleName": "AccordionItem", @@ -349,7 +353,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" } + "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" }, + "extends": { + "interface": "BreadcrumbSkeletonProps", + "import": "\"./BreadcrumbSkeleton\"" + } }, { "moduleName": "Link", @@ -646,7 +654,7 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { role: \"button\"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } }" + "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }" } ], "events": [ @@ -668,7 +676,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "ButtonSkeleton" } + "rest_props": { "type": "Element", "name": "button | a | div" }, + "extends": { + "interface": "ButtonSkeletonProps", + "import": "\"./ButtonSkeleton\"" + } }, { "moduleName": "ButtonSet", @@ -1031,7 +1043,8 @@ { "type": "forwarded", "name": "animationend", "element": "Copy" } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "Copy" } + "rest_props": { "type": "InlineComponent", "name": "Copy" }, + "extends": { "interface": "CopyProps", "import": "\"../Copy/Copy\"" } }, { "moduleName": "ListBox", @@ -1654,7 +1667,7 @@ "name": "selectorPrimaryFocus", "kind": "let", "description": "Specify a selector to be focused when opening the modal", - "type": "string", + "type": "null | string", "value": "\"[data-modal-primary-focus]\"", "isFunction": false, "constant": false, @@ -2411,7 +2424,7 @@ "name": "headers", "kind": "let", "description": "Specify the data table headers", - "type": "Headers", + "type": "DataTableHeader[]", "value": "[]", "isFunction": false, "constant": false, @@ -2421,7 +2434,7 @@ "name": "rows", "kind": "let", "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids", - "type": "Object[]", + "type": "Row[]", "value": "[]", "isFunction": false, "constant": false, @@ -2500,7 +2513,7 @@ "name": "expandedRowIds", "kind": "let", "description": "Specify the row ids to be expanded", - "type": "string[]", + "type": "RowId[]", "value": "[]", "isFunction": false, "constant": false, @@ -2540,7 +2553,7 @@ "name": "selectedRowIds", "kind": "let", "description": "Specify the row ids to be selected", - "type": "string[]", + "type": "RowId[]", "value": "[]", "isFunction": false, "constant": false, @@ -2563,25 +2576,25 @@ "name": "cell", "default": false, "fallback": "{headers[j].display ? headers[j].display(cell.value) : cell.value}", - "slot_props": "{ row: Object; cell: Object; }" + "slot_props": "{ row: Row; cell: Cell; }" }, { "name": "cell-header", "default": false, "fallback": "{header.value}", - "slot_props": "{ header: Header}" + "slot_props": "{ header: NonEmptyHeader; }" }, { "name": "expanded-row", "default": false, - "slot_props": "{ row: Object; }" + "slot_props": "{ row: Row; }" } ], "events": [ { "type": "dispatched", "name": "click", - "detail": "{ header?: Header; row?: Object; cell?: Object; }" + "detail": "{ header?: DataTableHeader; row?: Row; cell?: Cell; }" }, { "type": "dispatched", @@ -2591,28 +2604,46 @@ { "type": "dispatched", "name": "click:header", - "detail": "{ header: Header; sortDirection: \"ascending\" | \"descending\" | \"none\" }" + "detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }" }, - { "type": "dispatched", "name": "click:row", "detail": "Object" }, - { "type": "dispatched", "name": "mouseenter:row", "detail": "Object" }, - { "type": "dispatched", "name": "mouseleave:row", "detail": "Object" }, + { "type": "dispatched", "name": "click:row", "detail": "Row" }, + { "type": "dispatched", "name": "mouseenter:row", "detail": "Row" }, + { "type": "dispatched", "name": "mouseleave:row", "detail": "Row" }, { "type": "dispatched", "name": "click:row--expand", - "detail": "{ expanded: boolean; row: Object; }" + "detail": "{ expanded: boolean; row: Row; }" }, - { "type": "dispatched", "name": "click:cell", "detail": "Object" } + { "type": "dispatched", "name": "click:cell", "detail": "Cell" } ], "typedefs": [ + { "type": "string", "name": "Key", "ts": "type Key = string" }, + { "type": "any", "name": "Value", "ts": "type Value = any" }, { - "type": "{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }", - "name": "Header", - "ts": "interface Header { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }" + "type": "{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }", + "name": "EmptyHeader", + "ts": "interface EmptyHeader { key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }" }, { - "type": "Header[]", - "name": "Headers", - "ts": "type Headers = Header[]" + "type": "{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }", + "name": "NonEmptyHeader", + "ts": "interface NonEmptyHeader { key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }" + }, + { + "type": "NonEmptyHeader | EmptyHeader", + "name": "DataTableHeader", + "ts": "type DataTableHeader = NonEmptyHeader | EmptyHeader" + }, + { + "type": "Record", + "name": "Row", + "ts": "type Row = Record" + }, + { "type": "string", "name": "RowId", "ts": "type RowId = string" }, + { + "type": "{ key: Key; value: Value; }", + "name": "Cell", + "ts": "interface Cell { key: Key; value: Value; }" } ], "rest_props": { "type": "InlineComponent", "name": "TableContainer" } @@ -2858,7 +2889,7 @@ "name": "value", "kind": "let", "description": "Specify the value of the search input", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -3193,7 +3224,11 @@ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" } + "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" }, + "extends": { + "interface": "OverflowMenuProps", + "import": "\"../OverflowMenu/OverflowMenu\"" + } }, { "moduleName": "ToolbarMenuItem", @@ -3209,7 +3244,11 @@ } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" } + "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" }, + "extends": { + "interface": "OverflowMenuItemProps", + "import": "\"../OverflowMenu/OverflowMenuItem\"" + } }, { "moduleName": "DataTableSkeleton", @@ -3313,7 +3352,7 @@ "name": "value", "kind": "let", "description": "Specify the date picker input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -4600,11 +4639,12 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { class: string; } }" + "slot_props": "{ props: { class: string; [key: string]: any; } }" } ], "events": [], - "typedefs": [] + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "Row", @@ -4675,11 +4715,12 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { class: string; [key: string]: any; } }" + "slot_props": "{ props: { class: string; [key: string]: any; } }" } ], "events": [], - "typedefs": [] + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "Column", @@ -4784,7 +4825,7 @@ { "name": "__default__", "default": true, - "slot_props": "{ props?: { class: string; } }" + "slot_props": "{props: { class: string; [key: string]: any; }}" } ], "events": [], @@ -4804,7 +4845,8 @@ "name": "ColumnBreakpoint", "ts": "type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor" } - ] + ], + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "IconSkeleton", @@ -4838,7 +4880,7 @@ { "name": "render", "kind": "let", - "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon size must be 16px (e.g. `Add16`, `Task16`)", + "description": "Specify the icon from `carbon-icons-svelte` to render", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, @@ -4867,7 +4909,11 @@ { "type": "forwarded", "name": "mouseleave", "element": "IconSkeleton" } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "IconSkeleton" } + "rest_props": { "type": "Element", "name": "svg" }, + "extends": { + "interface": "IconSkeletonProps", + "import": "\"./IconSkeleton\"" + } }, { "moduleName": "InlineLoading", @@ -5084,7 +5130,7 @@ "name": "sortItem", "kind": "let", "description": "Override the sorting logic\nThe default sorting compare the item text value", - "type": "(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem", + "type": "((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)", "value": "(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })", "isFunction": true, "constant": false, @@ -5823,7 +5869,7 @@ "name": "value", "kind": "let", "description": "Specify the input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -6110,6 +6156,7 @@ "name": "selected", "kind": "let", "description": "Specify the selected item value", + "type": "string", "isFunction": false, "constant": false, "reactive": true @@ -7832,7 +7879,7 @@ "name": "value", "kind": "let", "description": "Specify the input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -8055,7 +8102,7 @@ "name": "value", "kind": "let", "description": "Specify the input value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, @@ -8064,8 +8111,8 @@ { "name": "type", "kind": "let", - "description": "Specify the input type", - "type": "string", + "description": "Set to `\"text\"` to toggle the password visibility", + "type": "\"text\" | \"password\"", "value": "\"password\"", "isFunction": false, "constant": false, @@ -8820,7 +8867,7 @@ "name": "value", "kind": "let", "description": "Specify the select value", - "type": "string", + "type": "number | string", "value": "\"\"", "isFunction": false, "constant": false, diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx index e5d0df31..01b41d16 100644 --- a/docs/src/pages/components/SelectableTile.svx +++ b/docs/src/pages/components/SelectableTile.svx @@ -1,9 +1,9 @@ --- -components: ["TileGroup", "SelectableTile"] +components: ["SelectableTile"] --- diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte index 572e5733..ac6059a2 100644 --- a/src/Accordion/Accordion.svelte +++ b/src/Accordion/Accordion.svelte @@ -1,4 +1,6 @@ diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte index 52f62256..a34b89b0 100644 --- a/src/DataTable/ToolbarSearch.svelte +++ b/src/DataTable/ToolbarSearch.svelte @@ -1,5 +1,8 @@ + + + +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + +
    +
    Natural Language Classifier
    +
    AI / Machine Learning
    +
    +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +
    +
    Natural Language Understanding
    +
    AI / Machine Learning
    +
    +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +
    +
    Language Translator
    +
    AI / Machine Learning
    +
    +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + +

    + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +

    +     + +

    + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +

    +     + +

    + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +

    +     +     + + + + + + + + + + + + diff --git a/tests/AspectRatio.test.svelte b/tests/AspectRatio.test.svelte new file mode 100644 index 00000000..16a8e0d5 --- /dev/null +++ b/tests/AspectRatio.test.svelte @@ -0,0 +1,35 @@ + + + + 2x1 + + + + 16x9 + + + + 4x3 + + + + 1x1 + + + + 3x4 + + + + 9x16 + + + + 1x2 + + + + Content + diff --git a/tests/AspectRatioColumns.test.svelte b/tests/AspectRatioColumns.test.svelte new file mode 100644 index 00000000..b96aa28f --- /dev/null +++ b/tests/AspectRatioColumns.test.svelte @@ -0,0 +1,20 @@ + + + + + + 2x1 + + + 2x1 + + + diff --git a/tests/Breadcrumb.test.svelte b/tests/Breadcrumb.test.svelte new file mode 100644 index 00000000..3baab96e --- /dev/null +++ b/tests/Breadcrumb.test.svelte @@ -0,0 +1,16 @@ + + + + Dashboard + Annual reports + 2019 + + + + Home + Profile + + + diff --git a/tests/Breadcrumbs.test.svelte b/tests/Breadcrumbs.test.svelte new file mode 100644 index 00000000..dd996343 --- /dev/null +++ b/tests/Breadcrumbs.test.svelte @@ -0,0 +1,26 @@ + + + + + + {#each items as item, i} + + {item.text} + + {/each} + + + diff --git a/tests/Button.test.svelte b/tests/Button.test.svelte new file mode 100644 index 00000000..5778fcb2 --- /dev/null +++ b/tests/Button.test.svelte @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    This is a permanent action and cannot be undone.

    +     diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte new file mode 100644 index 00000000..d0733fe3 --- /dev/null +++ b/tests/DataTable.test.svelte @@ -0,0 +1,192 @@ + + + + + + + {#if header.key === 'port'} + {header.value} + (network) + {:else}{header.value}{/if} + + + {#if cell.key === 'rule' && cell.value === 'Round robin'} + + {cell.value} + + + {:else}{cell.value}{/if} + + + + + + + + + + + Restart all + + API documentation + + Stop all + + + + + + + + + + + + Restart all + + API documentation + + Stop all + + + + + + + + + + + + + + + + + + + +
    + 
    +      {JSON.stringify(row, null, 2)}
+
    +
    +     + + +
    + 
    +      {JSON.stringify(row, null, 2)}
+
    +
    +     + + + + + + + + + + + + diff --git a/tests/DataTableAppendColumns.test.svelte b/tests/DataTableAppendColumns.test.svelte new file mode 100644 index 00000000..0197ad78 --- /dev/null +++ b/tests/DataTableAppendColumns.test.svelte @@ -0,0 +1,34 @@ + + + + + {#if cell.key === 'overflow'} + + + + + + {:else}{cell.value}{/if} + + diff --git a/tests/DataTableBatchSelection.test.svelte b/tests/DataTableBatchSelection.test.svelte new file mode 100644 index 00000000..f10f8a6b --- /dev/null +++ b/tests/DataTableBatchSelection.test.svelte @@ -0,0 +1,29 @@ + + + diff --git a/tests/DataTableBatchSelectionToolbar.test.svelte b/tests/DataTableBatchSelectionToolbar.test.svelte new file mode 100644 index 00000000..197b372f --- /dev/null +++ b/tests/DataTableBatchSelectionToolbar.test.svelte @@ -0,0 +1,51 @@ + + + + + + + + + + + Restart all + + API documentation + + Stop all + + + + + diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte new file mode 100644 index 00000000..bb6aebe5 --- /dev/null +++ b/tests/DatePicker.test.svelte @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte new file mode 100644 index 00000000..609be35d --- /dev/null +++ b/tests/Dropdown.test.svelte @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/DynamicCodeSnippet.test.svelte b/tests/DynamicCodeSnippet.test.svelte new file mode 100644 index 00000000..2860df97 --- /dev/null +++ b/tests/DynamicCodeSnippet.test.svelte @@ -0,0 +1,15 @@ + + + + diff --git a/tests/ExpandableTile.test.svelte b/tests/ExpandableTile.test.svelte new file mode 100644 index 00000000..a0353959 --- /dev/null +++ b/tests/ExpandableTile.test.svelte @@ -0,0 +1,18 @@ + + + +
    Above the fold content here
    +
    Below the fold content here
    +     + + +
    Above the fold content here
    +
    Below the fold content here
    +     + + +
    Above the fold content here
    +
    Below the fold content here
    +     diff --git a/tests/FileUploader.test.svelte b/tests/FileUploader.test.svelte new file mode 100644 index 00000000..65ef2649 --- /dev/null +++ b/tests/FileUploader.test.svelte @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + diff --git a/tests/FilterableComboBox.test.svelte b/tests/FilterableComboBox.test.svelte new file mode 100644 index 00000000..3fde3de7 --- /dev/null +++ b/tests/FilterableComboBox.test.svelte @@ -0,0 +1,15 @@ + + + diff --git a/tests/FluidForm.test.svelte b/tests/FluidForm.test.svelte new file mode 100644 index 00000000..f1c17dce --- /dev/null +++ b/tests/FluidForm.test.svelte @@ -0,0 +1,13 @@ + + + + + + diff --git a/tests/Form.test.svelte b/tests/Form.test.svelte new file mode 100644 index 00000000..ca988339 --- /dev/null +++ b/tests/Form.test.svelte @@ -0,0 +1,54 @@ + + +
    + + + + + + + + + + + + + + + + +
    diff --git a/tests/FullWidthGrid.test.svelte b/tests/FullWidthGrid.test.svelte new file mode 100644 index 00000000..cfa70ce2 --- /dev/null +++ b/tests/FullWidthGrid.test.svelte @@ -0,0 +1,12 @@ + + + + + Column + Column + Column + Column + + diff --git a/tests/Grid.test.svelte b/tests/Grid.test.svelte new file mode 100644 index 00000000..7ffec15f --- /dev/null +++ b/tests/Grid.test.svelte @@ -0,0 +1,12 @@ + + + + + Column + Column + Column + Column + + diff --git a/tests/HeaderNav.test.svelte b/tests/HeaderNav.test.svelte new file mode 100644 index 00000000..c59d122e --- /dev/null +++ b/tests/HeaderNav.test.svelte @@ -0,0 +1,60 @@ + + +
    +
    + +
    + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + +

    Welcome

    +     +     +     +     diff --git a/tests/HeaderSwitcher.test.svelte b/tests/HeaderSwitcher.test.svelte new file mode 100644 index 00000000..e996cfbf --- /dev/null +++ b/tests/HeaderSwitcher.test.svelte @@ -0,0 +1,66 @@ + + +
    +
    + +
    + + + + Switcher subject 1 + Switcher item 1 + Switcher subject 2 + Switcher item 1 + Switcher item 2 + Switcher item 3 + Switcher item 4 + Switcher item 5 + + + +
    + + + + + + + + + + + + + + + + + + +

    Welcome

    +     +     +     +     diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte new file mode 100644 index 00000000..ed2eeef3 --- /dev/null +++ b/tests/HeaderUtilities.test.svelte @@ -0,0 +1,71 @@ + + +
    +
    + +
    + + + + + + Switcher subject 1 + Switcher item 1 + Switcher subject 2 + Switcher item 1 + Switcher item 2 + Switcher item 3 + Switcher item 4 + Switcher item 5 + + + +
    + + + + + + + + + + + + + + + + + + +

    Welcome

    +     +     +     +     diff --git a/tests/HiddenCodeSnippet.test.svelte b/tests/HiddenCodeSnippet.test.svelte new file mode 100644 index 00000000..3298f472 --- /dev/null +++ b/tests/HiddenCodeSnippet.test.svelte @@ -0,0 +1,34 @@ + + + + + + +{#if toggled} +
    "Show more" will not render

    +{/if} +
    + +
    + +{#if toggled} +

    +
    "Show more" will render

    +
    + +
    +{/if} diff --git a/tests/Icon.test.svelte b/tests/Icon.test.svelte new file mode 100644 index 00000000..a666056e --- /dev/null +++ b/tests/Icon.test.svelte @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/InlineLoading.test.svelte b/tests/InlineLoading.test.svelte new file mode 100644 index 00000000..134fb679 --- /dev/null +++ b/tests/InlineLoading.test.svelte @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/tests/InlineLoadingUx.test.svelte b/tests/InlineLoadingUx.test.svelte new file mode 100644 index 00000000..c8443eed --- /dev/null +++ b/tests/InlineLoadingUx.test.svelte @@ -0,0 +1,52 @@ + + + + + {#if state !== 'dormant'} + + {:else} + + {/if} + diff --git a/tests/InlineNotification.test.svelte b/tests/InlineNotification.test.svelte new file mode 100644 index 00000000..74d884a1 --- /dev/null +++ b/tests/InlineNotification.test.svelte @@ -0,0 +1,43 @@ + + + + + + + +
    + Learn more +
    +     + +Learn more + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/Link.test.svelte b/tests/Link.test.svelte new file mode 100644 index 00000000..1ebfe6d7 --- /dev/null +++ b/tests/Link.test.svelte @@ -0,0 +1,29 @@ + + +Carbon Design System + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + + + + Carbon Design System + diff --git a/tests/Loading.test.svelte b/tests/Loading.test.svelte new file mode 100644 index 00000000..6889445e --- /dev/null +++ b/tests/Loading.test.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/tests/Modal.test.svelte b/tests/Modal.test.svelte new file mode 100644 index 00000000..bb5b5d80 --- /dev/null +++ b/tests/Modal.test.svelte @@ -0,0 +1,20 @@ + + + + + +

    Create a new Cloudant database in the US South region.

    +     diff --git a/tests/ModalExtraSmall.test.svelte b/tests/ModalExtraSmall.test.svelte new file mode 100644 index 00000000..761c4dbf --- /dev/null +++ b/tests/ModalExtraSmall.test.svelte @@ -0,0 +1,17 @@ + + + +

    Create a new Cloudant database in the US South region.

    +     diff --git a/tests/ModalLarge.test.svelte b/tests/ModalLarge.test.svelte new file mode 100644 index 00000000..1b9474d9 --- /dev/null +++ b/tests/ModalLarge.test.svelte @@ -0,0 +1,17 @@ + + + +

    Create a new Cloudant database in the US South region.

    +     diff --git a/tests/ModalPreventOutsideClick.test.svelte b/tests/ModalPreventOutsideClick.test.svelte new file mode 100644 index 00000000..6bb89681 --- /dev/null +++ b/tests/ModalPreventOutsideClick.test.svelte @@ -0,0 +1,17 @@ + + + +

    Create a new Cloudant database in the US South region.

    +     diff --git a/tests/ModalSmall.test.svelte b/tests/ModalSmall.test.svelte new file mode 100644 index 00000000..7d4c935f --- /dev/null +++ b/tests/ModalSmall.test.svelte @@ -0,0 +1,17 @@ + + + +

    Create a new Cloudant database in the US South region.

    +     diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte new file mode 100644 index 00000000..1e67f675 --- /dev/null +++ b/tests/MultiSelect.test.svelte @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + diff --git a/tests/NarrowGrid.test.svelte b/tests/NarrowGrid.test.svelte new file mode 100644 index 00000000..a39cd612 --- /dev/null +++ b/tests/NarrowGrid.test.svelte @@ -0,0 +1,12 @@ + + + + + Column + Column + Column + Column + + diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte new file mode 100644 index 00000000..8d91a7af --- /dev/null +++ b/tests/NumberInput.test.svelte @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/OffsetColumns.test.svelte b/tests/OffsetColumns.test.svelte new file mode 100644 index 00000000..085ec706 --- /dev/null +++ b/tests/OffsetColumns.test.svelte @@ -0,0 +1,32 @@ + + + + + + Offset 3 + + + Offset 2 + + + Offset 1 + + + Offset 0 + + + diff --git a/tests/OrderedList.test.svelte b/tests/OrderedList.test.svelte new file mode 100644 index 00000000..46856519 --- /dev/null +++ b/tests/OrderedList.test.svelte @@ -0,0 +1,57 @@ + + + + Ordered list item + Ordered list item + Ordered list item + + + + + Ordered list item + + + Ordered list item + + + Ordered list item + + + + + + Ordered list level 1 + + Ordered list level 2 + + Ordered list level 3 + + Ordered list level 3 + Ordered list level 3 + + + + + Ordered list level 1 + Ordered list level 1 + + + + + Ordered list level 1 + + Ordered list level 2 + + Ordered list level 3 + + Ordered list level 3 + Ordered list level 3 + + + + + Ordered list level 1 + Ordered list level 1 + diff --git a/tests/OverflowMenu.test.svelte b/tests/OverflowMenu.test.svelte new file mode 100644 index 00000000..b728fb23 --- /dev/null +++ b/tests/OverflowMenu.test.svelte @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Custom trigger
    + + + +     diff --git a/tests/Pagination.test.svelte b/tests/Pagination.test.svelte new file mode 100644 index 00000000..e56f2de9 --- /dev/null +++ b/tests/Pagination.test.svelte @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/tests/PaginationNav.test.svelte b/tests/PaginationNav.test.svelte new file mode 100644 index 00000000..a67c8552 --- /dev/null +++ b/tests/PaginationNav.test.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/tests/PassiveModal.test.svelte b/tests/PassiveModal.test.svelte new file mode 100644 index 00000000..2b122c29 --- /dev/null +++ b/tests/PassiveModal.test.svelte @@ -0,0 +1,14 @@ + + + + + +

    + IBM Cloudant is a distributed, secure database with global availability and + zero vendor lock-in used to build web and mobile apps at scale. +

    +     diff --git a/tests/PasswordInput.test.svelte b/tests/PasswordInput.test.svelte new file mode 100644 index 00000000..6d9f5ce9 --- /dev/null +++ b/tests/PasswordInput.test.svelte @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/PersistedHamburgerMenu.test.svelte b/tests/PersistedHamburgerMenu.test.svelte new file mode 100644 index 00000000..986f4b1d --- /dev/null +++ b/tests/PersistedHamburgerMenu.test.svelte @@ -0,0 +1,65 @@ + + +
    +
    + +
    + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + +

    Welcome

    +     +     +     +     diff --git a/tests/ProgressIndicator.test.svelte b/tests/ProgressIndicator.test.svelte new file mode 100644 index 00000000..ccda25af --- /dev/null +++ b/tests/ProgressIndicator.test.svelte @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/RadioButton.test.svelte b/tests/RadioButton.test.svelte new file mode 100644 index 00000000..6f5e0fb0 --- /dev/null +++ b/tests/RadioButton.test.svelte @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/RadioSelectableDataTable.test.svelte b/tests/RadioSelectableDataTable.test.svelte new file mode 100644 index 00000000..07f60d72 --- /dev/null +++ b/tests/RadioSelectableDataTable.test.svelte @@ -0,0 +1,24 @@ + + + diff --git a/tests/RadioTile.test.svelte b/tests/RadioTile.test.svelte new file mode 100644 index 00000000..b04f3682 --- /dev/null +++ b/tests/RadioTile.test.svelte @@ -0,0 +1,15 @@ + + + + Lite plan + Standard plan + Plus plan + + + + Lite plan + Standard plan + Plus plan + diff --git a/tests/ResponsiveGrid.test.svelte b/tests/ResponsiveGrid.test.svelte new file mode 100644 index 00000000..b0b3c5b9 --- /dev/null +++ b/tests/ResponsiveGrid.test.svelte @@ -0,0 +1,40 @@ + + + + + + sm: 1, md: 4, lg: 8 + + + sm: 1, md: 2, lg: 2 + + + sm: 1, md: 1, lg: 1 + + + sm: 1, md: 1, lg: 1 + + + diff --git a/tests/Search.test.svelte b/tests/Search.test.svelte new file mode 100644 index 00000000..ac067dbb --- /dev/null +++ b/tests/Search.test.svelte @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte new file mode 100644 index 00000000..1874d478 --- /dev/null +++ b/tests/Select.test.svelte @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + diff --git a/tests/SelectableDataTable.test.svelte b/tests/SelectableDataTable.test.svelte new file mode 100644 index 00000000..953d133e --- /dev/null +++ b/tests/SelectableDataTable.test.svelte @@ -0,0 +1,24 @@ + + + diff --git a/tests/SelectableTile.test.svelte b/tests/SelectableTile.test.svelte new file mode 100644 index 00000000..a4aed03c --- /dev/null +++ b/tests/SelectableTile.test.svelte @@ -0,0 +1,15 @@ + + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile + +Multi-select Tile diff --git a/tests/SkeletonPlaceholder.test.svelte b/tests/SkeletonPlaceholder.test.svelte new file mode 100644 index 00000000..aabd46a8 --- /dev/null +++ b/tests/SkeletonPlaceholder.test.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/tests/SkeletonText.test.svelte b/tests/SkeletonText.test.svelte new file mode 100644 index 00000000..90bb0252 --- /dev/null +++ b/tests/SkeletonText.test.svelte @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/tests/Slider.test.svelte b/tests/Slider.test.svelte new file mode 100644 index 00000000..c5f5b000 --- /dev/null +++ b/tests/Slider.test.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + + + + diff --git a/tests/StructuredList.test.svelte b/tests/StructuredList.test.svelte new file mode 100644 index 00000000..73759606 --- /dev/null +++ b/tests/StructuredList.test.svelte @@ -0,0 +1,94 @@ + + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, + finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel + euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a + porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, + finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel + euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a + porttitor interdum. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, + finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel + euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a + porttitor interdum. + + + + + + + + + ColumnA + ColumnB + ColumnC + {''} + + + + {#each [1, 2, 3] as item} + + Row {item} + Row {item} + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + + + + {/each} + + + + diff --git a/tests/Tabs.test.svelte b/tests/Tabs.test.svelte new file mode 100644 index 00000000..8f1f1b88 --- /dev/null +++ b/tests/Tabs.test.svelte @@ -0,0 +1,39 @@ + + + + + + +
    + Content 1 + Content 2 + Content 3 +
    +     + +Content 1 + +Content 2 + +Content 3 + + + + + +
    + Content 1 + Content 2 + Content 3 +
    +     + +Content 1 + +Content 2 + +Content 3 + + diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte new file mode 100644 index 00000000..db53c202 --- /dev/null +++ b/tests/Tag.test.svelte @@ -0,0 +1,31 @@ + + +IBM Cloud + +red + +magenta + +purple + +blue + +cyan + +teal + +green + +gray + +cool-gray + +warm-gray + +high-contrast + +Filterable + + diff --git a/tests/TextArea.test.svelte b/tests/TextArea.test.svelte new file mode 100644 index 00000000..d40dd0b6 --- /dev/null +++ b/tests/TextArea.test.svelte @@ -0,0 +1,46 @@ + + +