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,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class Accordion {
+export interface AccordionProps {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
   /**
    * Specify alignment of accordion item chevron icon
    * @default "end"
@@ -24,8 +23,10 @@ export default class Accordion {
    * @default false
    */
   skeleton?: boolean;
-  };
+}
 
+export default class Accordion {
+  $$prop_def: AccordionProps;
   $$slot_def: {
     default: {};
   };

types/Accordion/AccordionItem.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class AccordionItem {
+export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
-  $$prop_def: 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>)
@@ -26,8 +25,10 @@ export default class AccordionItem {
    * @default "Expand/Collapse"
    */
   iconDescription?: string;
-  };
+}
 
+export default class AccordionItem {
+  $$prop_def: AccordionItemProps;
   $$slot_def: {
     default: {};
     title: {};

types/Accordion/AccordionSkeleton.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class AccordionSkeleton {
+export interface AccordionSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
   /**
    * Specify the number of accordion items to render
    * @default 4
@@ -24,8 +23,10 @@ export default class AccordionSkeleton {
    * @default true
    */
   open?: boolean;
-  };
+}
 
+export default class AccordionSkeleton {
+  $$prop_def: AccordionSkeletonProps;
   $$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
    * @default "2x1"
    */
   ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
-  };
+}
 
+export default class AspectRatio {
+  $$prop_def: AspectRatioProps;
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class Breadcrumb {
+export interface BreadcrumbProps {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> & {
   /**
    * Set to `true` to hide the breadcrumb trailing slash
    * @default false
@@ -13,8 +12,10 @@ export default class Breadcrumb {
    * @default false
    */
   skeleton?: boolean;
-  };
+}
 
+export default class Breadcrumb {
+  $$prop_def: BreadcrumbProps;
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class BreadcrumbItem {
+export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
   /**
    * Set the `href` to use an anchor link
    */
@@ -12,8 +11,10 @@ export default class BreadcrumbItem {
    * @default false
    */
   isCurrentPage?: boolean;
-  };
+}
 
+export default class BreadcrumbItem {
+  $$prop_def: BreadcrumbItemProps;
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/BreadcrumbSkeleton.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class BreadcrumbSkeleton {
+export interface BreadcrumbSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Set to `true` to hide the breadcrumb trailing slash
    * @default false
@@ -13,8 +12,10 @@ export default class BreadcrumbSkeleton {
    * @default 3
    */
   count?: number;
-  };
+}
 
+export default class BreadcrumbSkeleton {
+  $$prop_def: BreadcrumbSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Button/Button.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class Button {
+export interface ButtonProps {
-  $$prop_def: {
   /**
    * Specify the kind of button
    * @default "primary"
@@ -23,7 +22,7 @@ export default class Button {
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-    icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
+  icon?: import("carbon-icons-svelte").CarbonIcon;
 
   /**
    * Specify the ARIA label for the button icon
@@ -82,8 +81,10 @@ export default class Button {
    * @default null
    */
   ref?: null | HTMLAnchorElement | HTMLButtonElement;
-  };
+}
 
+export default class Button {
+  $$prop_def: ButtonProps;
   $$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
    * @default false
    */
   stacked?: boolean;
-  };
+}
 
+export default class ButtonSet {
+  $$prop_def: ButtonSetProps;
   $$slot_def: {
     default: {};
   };

types/Button/ButtonSkeleton.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class ButtonSkeleton {
+export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Set the `href` to use an anchor link
    */
@@ -18,8 +17,10 @@ export default class ButtonSkeleton {
    * @default false
    */
   small?: boolean;
-  };
+}
 
+export default class ButtonSkeleton {
+  $$prop_def: ButtonSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Checkbox/Checkbox.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class Checkbox {
+export interface CheckboxProps {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Specify whether the checkbox is checked
    * @default false
@@ -57,6 +56,7 @@ export default class Checkbox {
 
   /**
    * Set an id for the input label
+   * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
 
@@ -65,8 +65,10 @@ export default class Checkbox {
    * @default null
    */
   ref?: null | HTMLInputElement;
-  };
+}
 
+export default class Checkbox {
+  $$prop_def: CheckboxProps;
   $$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,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class CodeSnippet {
+export interface CodeSnippetProps {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Set the type of code snippet
    * @default "single"
@@ -89,6 +88,7 @@ export default class CodeSnippet {
 
   /**
    * Set an id for the code element
+   * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
 
@@ -97,8 +97,10 @@ export default class CodeSnippet {
    * @default null
    */
   ref?: null | HTMLPreElement;
-  };
+}
 
+export default class CodeSnippet {
+  $$prop_def: CodeSnippetProps;
   $$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
    * @default "single"
    */
   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,8 +5,7 @@ interface ComboBoxItem {
   text: string;
 }
 
-export default class ComboBox {
+export interface ComboBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Set the combobox items
    * @default []
@@ -21,6 +20,7 @@ export default class ComboBox {
 
   /**
    * Set the selected item by value index
+   * @default -1
    */
   selectedIndex?: number;
 
@@ -96,6 +96,7 @@ export default class ComboBox {
 
   /**
    * Set an id for the list box component
+   * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
 
@@ -115,8 +116,10 @@ export default class ComboBox {
    * @default null
    */
   listRef?: null | HTMLDivElement;
-  };
+}
 
+export default class ComboBox {
+  $$prop_def: ComboBoxProps;
   $$slot_def: {};
 
   $on(

types/ComposedModal/ComposedModal.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class ComposedModal {
+export interface ComposedModalProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Set the size of the composed modal
    */
@@ -42,8 +41,10 @@ export default class ComposedModal {
    * @default null
    */
   ref?: null | HTMLDivElement;
-  };
+}
 
+export default class ComposedModal {
+  $$prop_def: ComposedModalProps;
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalBody.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class ModalBody {
+export interface ModalBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Set to `true` if the modal contains form elements
    * @default false
@@ -13,8 +12,10 @@ export default class ModalBody {
    * @default false
    */
   hasScrollingContent?: boolean;
-  };
+}
 
+export default class ModalBody {
+  $$prop_def: ModalBodyProps;
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalFooter.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class ModalFooter {
+export interface ModalFooterProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Specify the primary button text
    * @default ""
@@ -35,8 +34,10 @@ export default class ModalFooter {
    * @default false
    */
   danger?: boolean;
-  };
+}
 
+export default class ModalFooter {
+  $$prop_def: ModalFooterProps;
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalHeader.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class ModalHeader {
+export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Specify the modal title
    * @default ""
@@ -43,8 +42,10 @@ export default class ModalHeader {
    * @default "Close"
    */
   iconDescription?: string;
-  };
+}
 
+export default class ModalHeader {
+  $$prop_def: ModalHeaderProps;
   $$slot_def: {
     default: {};
   };

types/ContentSwitcher/ContentSwitcher.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class ContentSwitcher {
+export interface ContentSwitcherProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Set the selected index of the switch item
    * @default 0
@@ -18,8 +17,10 @@ export default class ContentSwitcher {
    * Specify the size of the content switcher
    */
   size?: "sm" | "xl";
-  };
+}
 
+export default class ContentSwitcher {
+  $$prop_def: ContentSwitcherProps;
   $$slot_def: {
     default: {};
   };

types/ContentSwitcher/Switch.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class Switch {
+export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
   /**
    * Specify the switch text
    * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
@@ -23,6 +22,7 @@ export default class Switch {
 
   /**
    * Set an id for the button element
+   * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
 
@@ -31,8 +31,10 @@ export default class Switch {
    * @default null
    */
   ref?: null | HTMLButtonElement;
-  };
+}
 
+export default class Switch {
+  $$prop_def: SwitchProps;
   $$slot_def: {
     default: {};
   };

types/Copy/Copy.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class Copy {
+export interface CopyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
   /**
    * Set the feedback text shown after clicking the button
    * @default "Copied!"
@@ -19,8 +18,10 @@ export default class Copy {
    * @default null
    */
   ref?: null | HTMLButtonElement;
-  };
+}
 
+export default class Copy {
+  $$prop_def: CopyProps;
   $$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
    * @default "Copy to clipboard"
    */
   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,8 +11,7 @@ interface Header {
 
 type Headers = Header[];
 
-export default class DataTable {
+export interface DataTableProps {
-  $$prop_def: {
   /**
    * Specify the data table headers
    * @default []
@@ -104,13 +103,15 @@ export default class DataTable {
    * @default false
    */
   stickyHeader?: boolean;
-  };
+}
 
+export default class DataTable {
+  $$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(

types/DataTable/Table.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class Table {
+export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> & {
   /**
    * Set the size of the table
    */
@@ -36,8 +35,10 @@ export default class Table {
    * @default false
    */
   stickyHeader?: boolean;
-  };
+}
 
+export default class Table {
+  $$prop_def: TableProps;
   $$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,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class TableContainer {
+export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
   /**
    * Specify the title of the data table
    * @default ""
@@ -19,8 +18,10 @@ export default class TableContainer {
    * @default false
    */
   stickyHeader?: boolean;
-  };
+}
 
+export default class TableContainer {
+  $$prop_def: TableContainerProps;
   $$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,7 +1,6 @@
 /// <reference types="svelte" />
 
-export default class TableHeader {
+export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> & {
   /**
    * Specify the `scope` attribute
    * @default "col"
@@ -16,10 +15,13 @@ export default class TableHeader {
 
   /**
    * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
-  };
+}
 
+export default class TableHeader {
+  $$prop_def: TableHeaderProps;
   $$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
    * @default "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
    * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
    */
   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: {};
   };