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 @@
///