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

src/Checkbox/InlineCheckbox.svelte

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

src/ComboBox/ComboBox.svelte

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

src/ComposedModal/ComposedModal.svelte

@@ -20,10 +20,7 @@
   /** Specify a selector to be focused when opening the modal */
   export let selectorPrimaryFocus = "[data-modal-primary-focus]";
 
-  /**
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLDivElement}
-   */
+  /** Obtain a reference to the top-level HTML element */
   export let ref = null;
 
   import {

src/ContentSwitcher/Switch.svelte

@@ -11,16 +11,10 @@
   /** Set to `true` to disable the switch */
   export let disabled = false;
 
-  /**
-   * Set an id for the button element
-   * @type {string}
-   */
+  /** Set an id for the button element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
+  /** Obtain a reference to the button HTML element */
   export let ref = null;
 
   import { afterUpdate, getContext, onDestroy } from "svelte";

src/Copy/Copy.svelte

@@ -5,10 +5,7 @@
   /** Set the timeout duration (ms) to display feedback text */
   export let feedbackTimeout = 2000;
 
-  /**
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
+  /** Obtain a reference to the button HTML element */
   export let ref = null;
 
   import { onMount } from "svelte";

src/DataTable/TableHeader.svelte

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

src/DatePicker/DatePicker.svelte

@@ -42,10 +42,7 @@
   /** Set to `true` to enable the light variant */
   export let light = false;
 
-  /**
-   * Set an id for the date picker element
-   * @type {string}
-   */
+  /** Set an id for the date picker element */
   export let id = "ccs-" + Math.random().toString(36);
 
   import {

src/DatePicker/DatePickerInput.svelte

@@ -20,10 +20,7 @@
   /** Specify the ARIA label for the calendar icon */
   export let iconDescription = "";
 
-  /**
-   * Set an id for the input element
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Specify the label text */
@@ -44,10 +41,7 @@
    */
   export let name = undefined;
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { getContext, onMount } from "svelte";

src/DatePicker/DatePickerSkeleton.svelte

@@ -2,10 +2,7 @@
   /** Set to `true` to use the range variant */
   export let range = false;
 
-  /**
-   * Set an id to be used by the label element
-   * @type {string}
-   */
+  /** Set an id to be used by the label element */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 

src/Dropdown/Dropdown.svelte

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

src/FileUploader/FileUploaderButton.svelte

@@ -33,19 +33,13 @@
   /** Specify `tabindex` attribute */
   export let tabindex = "0";
 
-  /**
-   * Set an id for the input element
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Specify a name attribute for the input */
   export let name = "";
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   export let ref = null;
 </script>
 

src/FileUploader/FileUploaderDropContainer.svelte

@@ -32,19 +32,13 @@
   /** Specify `tabindex` attribute */
   export let tabindex = "0";
 
-  /**
-   * Set an id for the input element
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Specify a name attribute for the input */
   export let name = "";
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/FileUploader/FileUploaderItem.svelte

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

src/FormLabel/FormLabel.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
-   * Set an id to be used by the label element
-   * @type {string}
-   */
+  /** Set an id to be used by the label element */
   export let id = "ccs-" + Math.random().toString(36);
 </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
-   * @type {null | HTMLAnchorElement | HTMLParagraphElement}
-   */
+  /** Obtain a reference to the top-level HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the top-level element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLDivElement}
-   */
+  /** Obtain a reference to the top-level HTML element */
   export let ref = null;
 
   import { getContext } from "svelte";

src/ListBox/ListBoxMenu.svelte

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

src/MultiSelect/MultiSelect.svelte

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

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
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -83,16 +84,9 @@
    */
   export let name = undefined;
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
+  /** Obtain a reference to the input HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the button element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
-   * Obtain a reference to the trigger button element
-   * @type {null | HTMLButtonElement}
-   */
+  /** Obtain a reference to the trigger button element */
   export let buttonRef = null;
 
-  /**
-   * Obtain a reference to the overflow menu element
-   * @type {null | HTMLUListElement}
-   */
+  /** Obtain a reference to the overflow menu element */
   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
-   * @type {string}
-   */
+  /** Set an id for the top-level element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
-   * Obtain a reference to the HTML element
-   * @type {null | HTMLAnchorElement | HTMLButtonElement}
-   */
+  /** Obtain a reference to the HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the top-level element */
   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
-   * @type {string}
-   */
+  /** Set an id for the top-level element */
   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
-   * @type {string}
-   */
+  /** Set an id for the input element */
   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
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

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
-   * @type {string}
-   */
+  /** Set an id for the select element */
   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
-   * @type {null | HTMLSelectElement}
-   */
+  /** Obtain a reference to the select HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the slider div element */
   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
-   * @type {null | HTMLElement}
-   */
+  /** Obtain a reference to the HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /** Specify a name attribute for the input */
   export let name = "";
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { 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
-   * @type {string}
-   */
+  /** Set an id for the top-level element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
-   * Obtain a reference to the anchor HTML element
-   * @type {null | HTMLAnchorElement}
-   */
+  /** Obtain a reference to the anchor HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the top-level element */
   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
-   * @type {string}
-   */
+  /** Set an id for the filterable tag */
   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
-   * @type {string}
-   */
+  /** Set an id for the textarea element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -44,10 +41,7 @@
    */
   export let name = undefined;
 
-  /**
-   * Obtain a reference to the textarea HTML element
-   * @type {null | HTMLTextAreaElement}
-   */
+  /** Obtain a reference to the textarea HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -65,10 +62,7 @@
    */
   export let name = undefined;
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { getContext } from "svelte";

src/TextInput/TextInput.svelte

@@ -23,10 +23,7 @@
   /** Specify the helper text */
   export let helperText = "";
 
-  /**
-   * Set an id for the input element
-   * @type {string}
-   */
+  /** Set an id for the input element */
   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
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   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
-   * @type {string}
-   */
+  /** Set an id for the top-level div element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
-   * Obtain a reference to the top-level element
-   * @type {null | HTMLDivElement}
-   */
+  /** Obtain a reference to the top-level element */
   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
-   * @type {string}
-   */
+  /** Set an id for the input element */
   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
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
@@ -29,10 +26,7 @@
    */
   export let name = "";
 
-  /**
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement}
-   */
+  /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/TimePicker/TimePicker.svelte

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

src/TimePicker/TimePickerSelect.svelte

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

src/Toggle/Toggle.svelte

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

src/Toggle/ToggleSkeleton.svelte

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

src/ToggleSmall/ToggleSmall.svelte

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

src/ToggleSmall/ToggleSmallSkeleton.svelte

@@ -2,10 +2,7 @@
   /** Specify the label text */
   export let labelText = "";
 
-  /**
-   * Set an id for the input element
-   * @type {string}
-   */
+  /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 </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
-   * @type {null | HTMLElement}
-   */
+  /** Obtain a reference to the trigger text HTML element */
   export let ref = null;
 
-  /**
-   * Obtain a reference to the tooltip HTML element
-   * @type {null | HTMLElement}
-   */
+  /** Obtain a reference to the tooltip HTML element */
   export let refTooltip = null;
 
-  /**
-   * Obtain a reference to the icon HTML element
-   * @type {null | HTMLElement}
-   */
+  /** Obtain a reference to the icon HTML element */
   export let refIcon = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";

src/TooltipDefinition/TooltipDefinition.svelte

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

src/TooltipIcon/TooltipIcon.svelte

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

src/UIShell/GlobalHeader/Header.svelte

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

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -4,7 +4,7 @@
 
   /**
    * Specify the icon props
-   * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
+   * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
    */
   export let icon = undefined;
 
@@ -15,10 +15,7 @@
    */
   export let text = undefined;
 
-  /**
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement}
-   */
+  /** Obtain a reference to the button HTML element */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";

src/UIShell/GlobalHeader/HeaderActionLink.svelte

@@ -10,14 +10,11 @@
 
   /**
    * Specify the icon props
-   * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
+   * @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
    */
   export let icon = undefined;
 
-  /**
-   * Obtain a reference to the HTML anchor element
-   * @type {null | HTMLAnchorElement}
-   */
+  /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
   import { Icon } from "../../Icon";

src/UIShell/GlobalHeader/HeaderNavItem.svelte

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

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

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

src/UIShell/GlobalHeader/HeaderPanelLink.svelte

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