From 75d4b4cf036dd117542f3339b7fc035065eaf01f Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 6 Nov 2020 11:30:46 -0800 Subject: [PATCH] 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: {}; };