refactor(types): shorten ref, id JSDocs, use CarbonIcon type, export component props

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 */
-   * Obtain a reference to the HTML element
-   * @type {null | HTMLAnchorElement | HTMLButtonElement}
-   */
   export let ref = null;
 
   import { getContext } from "svelte";

src/Checkbox/Checkbox.svelte

@@ -33,16 +33,10 @@
    */
   export let title = undefined;
 
-  /**
+  /** Set an id for the input label */
-   * Set an id for the input label
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/Checkbox/InlineCheckbox.svelte

@@ -11,16 +11,10 @@
    */
   export let title = undefined;
 
-  /**
+  /** Set an id for the input label */
-   * Set an id for the input label
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 </script>
 

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 */
-   * Set an id for the code element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the pre HTML element */
-   * Obtain a reference to the pre HTML element
-   * @type {null | HTMLPreElement}
-   */
   export let ref = null;
 
   import { tick } from "svelte";

src/ComboBox/ComboBox.svelte

@@ -16,10 +16,7 @@
    */
   export let itemToString = (item) => item.text || item.id;
 
-  /**
+  /** Set the selected item by value index */
-   * Set the selected item by value index
-   * @type {number}
-   */
   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 */
-   * Set an id for the list box component
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -79,10 +73,7 @@
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   /**

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 */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLDivElement}
-   */
   export let ref = null;
 
   import {

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 */
-   * Set an id for the button element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the button HTML element */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 
   import { afterUpdate, getContext, onDestroy } from "svelte";

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 */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 
   import { onMount } from "svelte";

src/DataTable/TableHeader.svelte

@@ -8,10 +8,7 @@
    */
   export let translateWithId = () => "";
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";

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 */
-   * Set an id for the date picker element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import {

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 */
-   * Set an id for the input element
-   * @type {string}
-   */
   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 */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { getContext, onMount } from "svelte";

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 */
-   * Set an id to be used by the label element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 

src/Dropdown/Dropdown.svelte

@@ -18,10 +18,7 @@
    */
   export let itemToString = (item) => item.text || item.id;
 
-  /**
+  /** Specify the selected item index */
-   * Specify the selected item index
-   * @type {number}
-   */
   export let selectedIndex = -1;
 
   /**
@@ -72,10 +69,7 @@
    */
   export let translateWithId = undefined;
 
-  /**
+  /** Set an id for the list box component */
-   * Set an id for the list box component
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -84,10 +78,7 @@
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the button HTML element */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/FileUploader/FileUploaderButton.svelte

@@ -33,19 +33,13 @@
   /** Specify `tabindex` attribute */
   export let tabindex = "0";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   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 */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 </script>
 

src/FileUploader/FileUploaderDropContainer.svelte

@@ -32,19 +32,13 @@
   /** Specify `tabindex` attribute */
   export let tabindex = "0";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   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 */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/FileUploader/FileUploaderItem.svelte

@@ -21,10 +21,7 @@
   /** Specify the error body text */
   export let errorBody = "";
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Specify the file uploader name */

src/FormLabel/FormLabel.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
+  /** Set an id to be used by the label element */
-   * Set an id to be used by the label element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 

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;
 

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 */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLAnchorElement | HTMLParagraphElement}
-   */
   export let ref = null;
 </script>
 

src/ListBox/ListBoxField.svelte

@@ -21,16 +21,10 @@
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLDivElement}
-   */
   export let ref = null;
 
   import { getContext } from "svelte";

src/ListBox/ListBoxMenu.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the HTML element */
-   * Obtain a reference to the HTML element
-   * @type {null | HTMLDivElement}
-   */
   export let ref = null;
 </script>
 

src/ListBox/ListBoxSelection.svelte

@@ -24,10 +24,7 @@
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher, getContext } from "svelte";

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 */
-   * Set an id for the label element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   $: spinnerRadius = small ? "26.8125" : "37.5";

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 */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLDivElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher, onMount, afterUpdate } from "svelte";

src/MultiSelect/MultiSelect.svelte

@@ -96,10 +96,7 @@
   /** Specify the list box label */
   export let label = "";
 
-  /**
+  /** Set an id for the list box component */
-   * Set an id for the list box component
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**

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;
 

src/NumberInput/NumberInput.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   */
+
   /**
    * Set the size of the input
    * @type {"sm" | "xl"}
@@ -71,10 +75,7 @@
     decrement: "decrement",
   };
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -83,16 +84,9 @@
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 
-  /**
-   * @typedef {"increment" | "decrement"} NumberInputTranslationId
-   */
-
   import { createEventDispatcher, afterUpdate } from "svelte";
   import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
   import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";

src/OverflowMenu/OverflowMenu.svelte

@@ -28,7 +28,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 = OverflowMenuVertical16;
 
@@ -41,22 +41,13 @@
   /** Specify the ARIA label for the icon */
   export let iconDescription = "Open and close list of options";
 
-  /**
+  /** Set an id for the button element */
-   * Set an id for the button element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the trigger button element */
-   * Obtain a reference to the trigger button element
-   * @type {null | HTMLButtonElement}
-   */
   export let buttonRef = null;
 
-  /**
+  /** Obtain a reference to the overflow menu element */
-   * Obtain a reference to the overflow menu element
-   * @type {null | HTMLUListElement}
-   */
   export let menuRef = null;
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";

src/OverflowMenu/OverflowMenuItem.svelte

@@ -23,16 +23,10 @@
   /** Set to `false` to omit the button `title` attribute */
   export let requireTitle = true;
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the HTML element */
-   * Obtain a reference to the HTML element
-   * @type {null | HTMLAnchorElement | HTMLButtonElement}
-   */
   export let ref = null;
 
   import { getContext, afterUpdate } from "svelte";

src/Pagination/Pagination.svelte

@@ -61,10 +61,7 @@
   export let pageRangeText = (current, total) =>
     `of ${total} page${total === 1 ? "" : "s"}`;
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { createEventDispatcher } from "svelte";

src/ProgressIndicator/ProgressStep.svelte

@@ -20,10 +20,7 @@
   /** Specify the step secondary label */
   export let secondaryLabel = "";
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";

src/RadioButton/RadioButton.svelte

@@ -20,19 +20,13 @@
   /** Set to `true` to visually hide the label text */
   export let hideLabel = false;
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Specify a name attribute for the checkbox input */
   export let name = "";
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { getContext } from "svelte";

src/Search/Search.svelte

@@ -63,16 +63,10 @@
   /** Specify the label text */
   export let labelText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/Select/Select.svelte

@@ -17,10 +17,7 @@
   /** Set to `true` to disable the select element */
   export let disabled = false;
 
-  /**
+  /** Set an id for the select element */
-   * Set an id for the select element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -47,10 +44,7 @@
   /** Set to `true` to visually hide the label text */
   export let hideLabel = false;
 
-  /**
+  /** Obtain a reference to the select HTML element */
-   * Obtain a reference to the select HTML element
-   * @type {null | HTMLSelectElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";

src/Slider/Slider.svelte

@@ -35,10 +35,7 @@
   /** Set to `true` to hide the text input */
   export let hideTextInput = false;
 
-  /**
+  /** Set an id for the slider div element */
-   * Set an id for the slider div element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Set to `true` to indicate an invalid state */
@@ -50,10 +47,7 @@
   /** Set a name for the slider element */
   export let name = "";
 
-  /**
+  /** Obtain a reference to the HTML element */
-   * Obtain a reference to the HTML element
-   * @type {null | HTMLElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/StructuredList/StructuredListInput.svelte

@@ -8,19 +8,13 @@
   /** Specify the value of the input */
   export let value = "value";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   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 */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { getContext } from "svelte";

src/Tabs/Tab.svelte

@@ -14,16 +14,10 @@
   /** Specify the tabindex */
   export let tabindex = "0";
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the anchor HTML element */
-   * Obtain a reference to the anchor HTML element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 
   import { getContext } from "svelte";

src/Tabs/TabContent.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";

src/Tag/Tag.svelte

@@ -29,10 +29,7 @@
    */
   export let title = "Clear filter";
 
-  /**
+  /** Set an id for the filterable tag */
-   * Set an id for the filterable tag
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import Close16 from "carbon-icons-svelte/lib/Close16";

src/TextArea/TextArea.svelte

@@ -32,10 +32,7 @@
   /** Specify the text for the invalid state */
   export let invalidText = "";
 
-  /**
+  /** Set an id for the textarea element */
-   * Set an id for the textarea element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -44,10 +41,7 @@
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the textarea HTML element */
-   * Obtain a reference to the textarea HTML element
-   * @type {null | HTMLTextAreaElement}
-   */
   export let ref = null;
 
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";

src/TextInput/PasswordInput.svelte

@@ -53,10 +53,7 @@
   /** Specify the text for the invalid state */
   export let invalidText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -65,10 +62,7 @@
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { getContext } from "svelte";

src/TextInput/TextInput.svelte

@@ -23,10 +23,7 @@
   /** Specify the helper text */
   export let helperText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -53,10 +50,7 @@
   /** Specify the warning state text */
   export let warnText = "";
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   /** Set to `true` to mark the field as required */

src/Tile/ExpandableTile.svelte

@@ -20,16 +20,10 @@
   /** Specify the tabindex */
   export let tabindex = "0";
 
-  /**
+  /** Set an id for the top-level div element */
-   * Set an id for the top-level div element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the top-level element */
-   * Obtain a reference to the top-level element
-   * @type {null | HTMLDivElement}
-   */
   export let ref = null;
 
   import { afterUpdate } from "svelte";

src/Tile/RadioTile.svelte

@@ -14,10 +14,7 @@
   /** Specify the ARIA label for the radio tile checkmark icon */
   export let iconDescription = "Tile checkmark";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Specify a name attribute for the input */

src/Tile/SelectableTile.svelte

@@ -17,10 +17,7 @@
   /** Specify the ARIA label for the selectable tile checkmark icon */
   export let iconDescription = "Tile checkmark";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -29,10 +26,7 @@
    */
   export let name = "";
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/TimePicker/TimePicker.svelte

@@ -44,10 +44,7 @@
   /** Specify the invalid state text */
   export let invalidText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -56,10 +53,7 @@
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
   export let ref = null;
 </script>
 

src/TimePicker/TimePickerSelect.svelte

@@ -17,10 +17,7 @@
    */
   export let hideLabel = true;
 
-  /**
+  /** Set an id for the select element */
-   * Set an id for the select element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -29,10 +26,7 @@
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the select HTML element */
-   * Obtain a reference to the select HTML element
-   * @type {null | HTMLSelectElement}
-   */
   export let ref = null;
 
   import { setContext } from "svelte";

src/Toggle/Toggle.svelte

@@ -14,10 +14,7 @@
   /** Specify the label text */
   export let labelText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**

src/Toggle/ToggleSkeleton.svelte

@@ -2,10 +2,7 @@
   /** Specify the label text */
   export let labelText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 

src/ToggleSmall/ToggleSmall.svelte

@@ -14,10 +14,7 @@
   /** Specify the label text */
   export let labelText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**

src/ToggleSmall/ToggleSmallSkeleton.svelte

@@ -2,10 +2,7 @@
   /** Specify the label text */
   export let labelText = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 

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 */
-   * Obtain a reference to the trigger text HTML element
-   * @type {null | HTMLElement}
-   */
   export let ref = null;
 
-  /**
+  /** Obtain a reference to the tooltip HTML element */
-   * Obtain a reference to the tooltip HTML element
-   * @type {null | HTMLElement}
-   */
   export let refTooltip = null;
 
-  /**
+  /** Obtain a reference to the icon HTML element */
-   * Obtain a reference to the icon HTML element
-   * @type {null | HTMLElement}
-   */
   export let refIcon = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";

src/TooltipDefinition/TooltipDefinition.svelte

@@ -14,16 +14,10 @@
    */
   export let direction = "bottom";
 
-  /**
+  /** Set an id for the tooltip div element */
-   * Set an id for the tooltip div element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the button HTML element */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 
   let visible = false;

src/TooltipIcon/TooltipIcon.svelte

@@ -14,16 +14,10 @@
    */
   export let direction = "bottom";
 
-  /**
+  /** Set an id for the span element */
-   * Set an id for the span element
-   * @type {string}
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the button HTML element */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement} [ref=null]
-   */
   export let ref = null;
 
   let hidden = false;

src/UIShell/GlobalHeader/Header.svelte

@@ -29,10 +29,7 @@
    */
   export let platformName = "";
 
-  /**
+  /** Obtain a reference to the HTML anchor element */
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 
   import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";

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 */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

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 */
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 
   import { Icon } from "../../Icon";

src/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -11,10 +11,7 @@
    */
   export let text = undefined;
 
-  /**
+  /** Obtain a reference to the HTML anchor element */
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 </script>
 

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -11,10 +11,7 @@
    */
   export let text = undefined;
 
-  /**
+  /** Obtain a reference to the HTML anchor element */
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 
   /** Specify the ARIA label for the chevron icon */

src/UIShell/GlobalHeader/HeaderPanelLink.svelte

@@ -5,10 +5,7 @@
    */
   export let href = undefined;
 
-  /**
+  /** Obtain a reference to the HTML anchor element */
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 </script>
 

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 */
-   * Obtain a reference to the HTML button element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 </script>
 

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 */
-   * Obtain a reference to the HTML button element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 
   import { fly } from "svelte/transition";

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 */
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 
   import { Icon } from "../../Icon";

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 */
-   * Obtain a reference to the HTML button element
-   * @type {null | HTMLButtonElement}
-   */
   export let ref = null;
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -17,10 +17,7 @@
    */
   export let text = undefined;
 
-  /**
+  /** Obtain a reference to the HTML anchor element */
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
   export let ref = null;
 </script>
 

types/Accordion/Accordion.d.ts

@@ -1,31 +1,32 @@
 /// <reference types="svelte" />
 
+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<HTMLElementTagNameMap["ul"]> & {
+  $$prop_def: 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;
-  };
-
   $$slot_def: {
     default: {};
   };

types/Accordion/AccordionItem.d.ts

@@ -1,33 +1,34 @@
 /// <reference types="svelte" />
 
+export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Specify the title of the accordion item heading
+   * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
+   * @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<HTMLElementTagNameMap["li"]> & {
+  $$prop_def: AccordionItemProps;
-    /**
-     * Specify the title of the accordion item heading
-     * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
-     * @default "title"
-     */
-    title?: string;
-
-    /**
-     * Set to `true` to open the first accordion item
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to disable the accordion item
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the ARIA label for the accordion item chevron icon
-     * @default "Expand/Collapse"
-     */
-    iconDescription?: string;
-  };
-
   $$slot_def: {
     default: {};
     title: {};

types/Accordion/AccordionSkeleton.d.ts

@@ -1,31 +1,32 @@
 /// <reference types="svelte" />
 
+export interface AccordionSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+  /**
+   * 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<HTMLElementTagNameMap["ul"]> & {
+  $$prop_def: AccordionSkeletonProps;
-    /**
-     * Specify the number of accordion items to render
-     * @default 4
-     */
-    count?: number;
-
-    /**
-     * Specify alignment of accordion item chevron icon
-     * @default "end"
-     */
-    align?: "start" | "end";
-
-    /**
-     * Specify the size of the accordion
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Set to `false` to close the first accordion item
-     * @default true
-     */
-    open?: boolean;
-  };
-
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/AspectRatio/AspectRatio.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class AspectRatio {
+export interface AspectRatioProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+  /**
-    /**
+   * Specify the aspect ratio
-     * Specify the aspect ratio
+   * @default "2x1"
-     * @default "2x1"
+   */
-     */
+  ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
-    ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
+}
-  };
 
+export default class AspectRatio {
+  $$prop_def: AspectRatioProps;
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/Breadcrumb.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+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<HTMLElementTagNameMap["nav"]> & {
+  $$prop_def: 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;
-  };
-
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,19 +1,20 @@
 /// <reference types="svelte" />
 
+export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * 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<HTMLElementTagNameMap["li"]> & {
+  $$prop_def: BreadcrumbItemProps;
-    /**
-     * Set the `href` to use an anchor link
-     */
-    href?: string;
-
-    /**
-     * Set to `true` if the breadcrumb item represents the current page
-     * @default false
-     */
-    isCurrentPage?: boolean;
-  };
-
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/BreadcrumbSkeleton.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface BreadcrumbSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: BreadcrumbSkeletonProps;
-    /**
-     * Set to `true` to hide the breadcrumb trailing slash
-     * @default false
-     */
-    noTrailingSlash?: boolean;
-
-    /**
-     * Specify the number of breadcrumb items to render
-     * @default 3
-     */
-    count?: number;
-  };
-
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Button/Button.d.ts

@@ -1,89 +1,90 @@
 /// <reference types="svelte" />
 
+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. <Button let:props><div {...props}>...</div></Button>)
+   * @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: {
+  $$prop_def: 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?: 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. <Button let:props><div {...props}>...</div></Button>)
-     * @default false
-     */
-    as?: boolean;
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-
-    /**
-     * Set to `true` to disable the button
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set the `href` to use an anchor link
-     */
-    href?: string;
-
-    /**
-     * Specify the tabindex
-     * @default "0"
-     */
-    tabindex?: string;
-
-    /**
-     * Specify the `type` attribute for the button element
-     * @default "button"
-     */
-    type?: string;
-
-    /**
-     * Obtain a reference to the HTML element
-     * @default null
-     */
-    ref?: null | HTMLAnchorElement | HTMLButtonElement;
-  };
-
   $$slot_def: {
     default: { props: undefined };
   };

types/Button/ButtonSet.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class ButtonSet {
+export interface ButtonSetProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+  /**
-    /**
+   * Set to `true` to stack the buttons vertically
-     * Set to `true` to stack the buttons vertically
+   * @default false
-     * @default false
+   */
-     */
+  stacked?: boolean;
-    stacked?: boolean;
+}
-  };
 
+export default class ButtonSet {
+  $$prop_def: ButtonSetProps;
   $$slot_def: {
     default: {};
   };

types/Button/ButtonSkeleton.d.ts

@@ -1,25 +1,26 @@
 /// <reference types="svelte" />
 
+export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: ButtonSkeletonProps;
-    /**
-     * Set the `href` to use an anchor link
-     */
-    href?: string;
-
-    /**
-     * Specify the size of button skeleton
-     * @default "default"
-     */
-    size?: "default" | "field" | "small";
-
-    /**
-     * Set to `true` to use the small variant
-     * @default false
-     */
-    small?: boolean;
-  };
-
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Checkbox/Checkbox.d.ts

@@ -1,72 +1,74 @@
 /// <reference types="svelte" />
 
+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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: 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
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
   $$slot_def: {};
 
   $on(eventname: "check", cb: (event: CustomEvent<boolean>) => void): () => void;

types/Checkbox/CheckboxSkeleton.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class CheckboxSkeleton {
+export interface CheckboxSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
 
+export default class CheckboxSkeleton {
+  $$prop_def: CheckboxSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/CodeSnippet/CodeSnippet.d.ts

@@ -1,104 +1,106 @@
 /// <reference types="svelte" />
 
+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. <CodeSnippet>{`code`}</CodeSnippet>)
+   */
+  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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: 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. <CodeSnippet>{`code`}</CodeSnippet>)
-     */
-    code?: string;
-
-    /**
-     * Set to `true` to expand a multi-line code snippet (type="multi")
-     * @default false
-     */
-    expanded?: boolean;
-
-    /**
-     * Set to `true` to hide the copy button
-     * @default false
-     */
-    hideCopyButton?: boolean;
-
-    /**
-     * Set to `true` to wrap the text
-     * Note that `type` must be "multi"
-     * @default false
-     */
-    wrapText?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-
-    /**
-     * Specify the ARIA label for the copy button icon
-     */
-    copyButtonDescription?: string;
-
-    /**
-     * Specify the ARIA label of the copy button
-     */
-    copyLabel?: string;
-
-    /**
-     * Specify the feedback text displayed when clicking the snippet
-     * @default "Copied!"
-     */
-    feedback?: string;
-
-    /**
-     * Set the timeout duration (ms) to display feedback text
-     * @default 2000
-     */
-    feedbackTimeout?: number;
-
-    /**
-     * Specify the show less text
-     * `type` must be "multi"
-     * @default "Show less"
-     */
-    showLessText?: string;
-
-    /**
-     * Specify the show more text
-     * `type` must be "multi"
-     * @default "Show more"
-     */
-    showMoreText?: string;
-
-    /**
-     * Set to `true` to enable the show more/less button
-     * @default false
-     */
-    showMoreLess?: boolean;
-
-    /**
-     * Set an id for the code element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the pre HTML element
-     * @default null
-     */
-    ref?: null | HTMLPreElement;
-  };
-
   $$slot_def: {
     default: {};
   };

types/CodeSnippet/CodeSnippetSkeleton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class CodeSnippetSkeleton {
+export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+  /**
-    /**
+   * Set the type of code snippet
-     * Set the type of code snippet
+   * @default "single"
-     * @default "single"
+   */
-     */
+  type?: "single" | "inline" | "multi";
-    type?: "single" | "inline" | "multi";
+}
-  };
 
+export default class CodeSnippetSkeleton {
+  $$prop_def: CodeSnippetSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/ComboBox/ComboBox.d.ts

@@ -5,118 +5,121 @@ interface ComboBoxItem {
   text: string;
 }
 
+export interface ComboBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: ComboBoxProps;
-    /**
-     * Set the combobox items
-     * @default []
-     */
-    items?: ComboBoxItem[];
-
-    /**
-     * Override the display of a combobox item
-     * @default (item) => item.text || item.id
-     */
-    itemToString?: (item: ComboBoxItem) => string;
-
-    /**
-     * Set the selected item by value index
-     */
-    selectedIndex?: number;
-
-    /**
-     * Specify the selected combobox value
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Set the size of the combobox
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Set to `true` to disable the combobox
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the title text of the combobox
-     * @default ""
-     */
-    titleText?: string;
-
-    /**
-     * Specify the placeholder text
-     * @default ""
-     */
-    placeholder?: string;
-
-    /**
-     * Specify the helper text
-     * @default ""
-     */
-    helperText?: string;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to open the combobox menu dropdown
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Determine if an item should be filtered given the current combobox value
-     * @default () => true
-     */
-    shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
-
-    /**
-     * Override the default translation ids
-     */
-    translateWithId?: (id: any) => string;
-
-    /**
-     * Set an id for the list box component
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the input
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-
-    /**
-     * Obtain a reference to the list HTML element
-     * @default null
-     */
-    listRef?: null | HTMLDivElement;
-  };
-
   $$slot_def: {};
 
   $on(

types/ComposedModal/ComposedModal.d.ts

@@ -1,49 +1,50 @@
 /// <reference types="svelte" />
 
+export interface ComposedModalProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: ComposedModalProps;
-    /**
-     * 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;
-  };
-
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalBody.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface ModalBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: ModalBodyProps;
-    /**
-     * Set to `true` if the modal contains form elements
-     * @default false
-     */
-    hasForm?: boolean;
-
-    /**
-     * Set to `true` if the modal contains scrolling content
-     * @default false
-     */
-    hasScrollingContent?: boolean;
-  };
-
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalFooter.d.ts

@@ -1,42 +1,43 @@
 /// <reference types="svelte" />
 
+export interface ModalFooterProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: ModalFooterProps;
-    /**
-     * Specify the primary button text
-     * @default ""
-     */
-    primaryButtonText?: string;
-
-    /**
-     * Set to `true` to disable the primary button
-     * @default false
-     */
-    primaryButtonDisabled?: boolean;
-
-    /**
-     * Specify a class for the primary button
-     */
-    primaryClass?: string;
-
-    /**
-     * Specify the secondary button text
-     * @default ""
-     */
-    secondaryButtonText?: string;
-
-    /**
-     * Specify a class for the secondary button
-     */
-    secondaryClass?: string;
-
-    /**
-     * Set to `true` to use the danger variant
-     * @default false
-     */
-    danger?: boolean;
-  };
-
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalHeader.d.ts

@@ -1,50 +1,51 @@
 /// <reference types="svelte" />
 
+export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: ModalHeaderProps;
-    /**
-     * Specify the modal title
-     * @default ""
-     */
-    title?: string;
-
-    /**
-     * Specify the modal label
-     * @default ""
-     */
-    label?: string;
-
-    /**
-     * Specify the label class
-     * @default ""
-     */
-    labelClass?: string;
-
-    /**
-     * Specify the title class
-     * @default ""
-     */
-    titleClass?: string;
-
-    /**
-     * Specify the close class
-     * @default ""
-     */
-    closeClass?: string;
-
-    /**
-     * Specify the close icon class
-     * @default ""
-     */
-    closeIconClass?: string;
-
-    /**
-     * Specify the ARIA label for the close icon
-     * @default "Close"
-     */
-    iconDescription?: string;
-  };
-
   $$slot_def: {
     default: {};
   };

types/ContentSwitcher/ContentSwitcher.d.ts

@@ -1,25 +1,26 @@
 /// <reference types="svelte" />
 
+export interface ContentSwitcherProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: ContentSwitcherProps;
-    /**
-     * Set the selected index of the switch item
-     * @default 0
-     */
-    selectedIndex?: number;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Specify the size of the content switcher
-     */
-    size?: "sm" | "xl";
-  };
-
   $$slot_def: {
     default: {};
   };

types/ContentSwitcher/Switch.d.ts

@@ -1,38 +1,40 @@
 /// <reference types="svelte" />
 
+export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * Specify the switch text
+   * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
+   * @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<HTMLElementTagNameMap["button"]> & {
+  $$prop_def: SwitchProps;
-    /**
-     * Specify the switch text
-     * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
-     * @default "Provide text"
-     */
-    text?: string;
-
-    /**
-     * Set to `true` for the switch to be selected
-     * @default false
-     */
-    selected?: boolean;
-
-    /**
-     * Set to `true` to disable the switch
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set an id for the button element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the button HTML element
-     * @default null
-     */
-    ref?: null | HTMLButtonElement;
-  };
-
   $$slot_def: {
     default: {};
   };

types/Copy/Copy.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="svelte" />
 
+export interface CopyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * 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<HTMLElementTagNameMap["button"]> & {
+  $$prop_def: CopyProps;
-    /**
-     * Set the feedback text shown after clicking the button
-     * @default "Copied!"
-     */
-    feedback?: string;
-
-    /**
-     * Set the timeout duration (ms) to display feedback text
-     * @default 2000
-     */
-    feedbackTimeout?: number;
-
-    /**
-     * Obtain a reference to the button HTML element
-     * @default null
-     */
-    ref?: null | HTMLButtonElement;
-  };
-
   $$slot_def: {
     default: {};
   };

types/CopyButton/CopyButton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class CopyButton {
+export interface CopyButtonProps {
-  $$prop_def: {
+  /**
-    /**
+   * Set the title and ARIA label for the copy button
-     * Set the title and ARIA label for the copy button
+   * @default "Copy to clipboard"
-     * @default "Copy to clipboard"
+   */
-     */
+  iconDescription?: string;
-    iconDescription?: string;
+}
-  };
 
+export default class CopyButton {
+  $$prop_def: CopyButtonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

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: {
+  $$prop_def: 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;
-  };
-
   $$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(

types/DataTable/Table.d.ts

@@ -1,43 +1,44 @@
 /// <reference types="svelte" />
 
+export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+  /**
+   * 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<HTMLElementTagNameMap["table"]> & {
+  $$prop_def: TableProps;
-    /**
-     * Set the size of the table
-     */
-    size?: "compact" | "short" | "tall";
-
-    /**
-     * Set to `true` to use zebra styles
-     * @default false
-     */
-    zebra?: boolean;
-
-    /**
-     * Set to `true` to use static width
-     * @default false
-     */
-    useStaticWidth?: boolean;
-
-    /**
-     * Set to `true` for the bordered variant
-     * @default false
-     */
-    shouldShowBorder?: boolean;
-
-    /**
-     * Set to `true` for the sortable variant
-     * @default false
-     */
-    sortable?: boolean;
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
   $$slot_def: {
     default: {};
   };

types/DataTable/TableBody.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableBody {
+export interface TableBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> & {};
 
+export default class TableBody {
+  $$prop_def: TableBodyProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableCell.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableCell {
+export interface TableCellProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> & {};
 
+export default class TableCell {
+  $$prop_def: TableCellProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableContainer.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="svelte" />
 
+export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * 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<HTMLElementTagNameMap["div"]> & {
+  $$prop_def: TableContainerProps;
-    /**
-     * Specify the title of the data table
-     * @default ""
-     */
-    title?: string;
-
-    /**
-     * Specify the description of the data table
-     * @default ""
-     */
-    description?: string;
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
   $$slot_def: {
     default: {};
   };

types/DataTable/TableHead.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableHead {
+export interface TableHeadProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> & {};
 
+export default class TableHead {
+  $$prop_def: TableHeadProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableHeader.d.ts

@@ -1,25 +1,27 @@
 /// <reference types="svelte" />
 
+export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
+  /**
+   * 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<HTMLElementTagNameMap["th"]> & {
+  $$prop_def: TableHeaderProps;
-    /**
-     * Specify the `scope` attribute
-     * @default "col"
-     */
-    scope?: string;
-
-    /**
-     * Override the default id translations
-     * @default () => ""
-     */
-    translateWithId?: () => string;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-  };
-
   $$slot_def: {
     default: {};
   };

types/DataTable/TableRow.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableRow {
+export interface TableRowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> & {};
 
+export default class TableRow {
+  $$prop_def: TableRowProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/Toolbar.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class Toolbar {
+export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> & {
+  /**
-    /**
+   * Specify the toolbar size
-     * Specify the toolbar size
+   * @default "default"
-     * @default "default"
+   */
-     */
+  size?: "sm" | "default";
-    size?: "sm" | "default";
+}
-  };
 
+export default class Toolbar {
+  $$prop_def: ToolbarProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarBatchActions.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class ToolbarBatchActions {
+export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+  /**
-    /**
+   * Override the total items selected text
-     * Override the total items selected text
+   * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
-     * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
+   */
-     */
+  formatTotalSelected?: (totalSelected: number) => string;
-    formatTotalSelected?: (totalSelected: number) => string;
+}
-  };
 
+export default class ToolbarBatchActions {
+  $$prop_def: ToolbarBatchActionsProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarContent.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarContent {
+export interface ToolbarContentProps {}
-  $$prop_def: {};
 
+export default class ToolbarContent {
+  $$prop_def: ToolbarContentProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarMenu.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarMenu {
+export interface ToolbarMenuProps {}
-  $$prop_def: {};
 
+export default class ToolbarMenu {
+  $$prop_def: ToolbarMenuProps;
   $$slot_def: {
     default: {};
   };