chore: add more type docs

src/Checkbox/Checkbox.svelte

@@ -30,7 +30,7 @@
   export let disabled = false;
 
   /**
-   * Define the label text
+   * Specify the label text
    * @type {string} [labelText=""]
    */
   export let labelText = "";

src/ComboBox/ComboBox.svelte

@@ -7,8 +7,19 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
   export let invalidText = "";
+
   export let items = [];
   export let itemToString = (item) => item.text || item.id;
   export let light = false;

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -1,8 +1,33 @@
 <script>
+  /**
+   * Specify the number of columns
+   * @type {number} [columns=5]
+   */
   export let columns = 5;
+
+  /**
+   * Specify the number of rows
+   * @type {number} [rows=5]
+   */
   export let rows = 5;
+
+  /**
+   * Set to `true` to use the compact variant
+   * @type {boolean} [compact=false]
+   */
   export let compact = false;
+
+  /**
+   * Set to `true` to apply zebra styles to the datatable rows
+   * @type {boolean} [zebra=false]
+   */
   export let zebra = false;
+
+  /**
+   * Set the column headers
+   * If `headers` has one more items, `count` is ignored
+   * @type {string[]} [headers=[]]
+   */
   export let headers = [];
 
   $: cols = Array.from(

src/DatePicker/DatePicker.Skeleton.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to use the range variant
+   * @type {boolean} [range=false]
+   */
   export let range = false;
 
   /**

src/DatePicker/DatePicker.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Specify the element to append the calendar to
+   * @type {HTMLElement} [appendTo=document.body]
+   */
   export let appendTo = document.body;
   export let dateFormat = "m/d/Y";
   export let datePickerType = "simple";
@@ -159,8 +163,8 @@
     class:bx--date-picker={true}
     class:bx--date-picker--short={short}
     class:bx--date-picker--light={light}
-    class="{datePickerType && `--date-picker--${datePickerType}`}
-    {datePickerType === 'range' && $labelTextEmpty && '--date-picker--nolabel'}">
+    class="{datePickerType && `bx--date-picker--${datePickerType}`}
+    {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
     <slot />
   </div>
 </div>

src/DatePicker/DatePickerInput.svelte

@@ -1,9 +1,23 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
   export let type = "text";
+
+  /**
+   * Specify the input placeholder text
+   * @type {string} [placeholder=""]
+   */
   export let placeholder = "";
   export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
   export let disabled = false;
+
+  /**
+   * Define the ARIA label for the calendar icon
+   * @type {string} [iconDescription=""]
+   */
   export let iconDescription = "";
 
   /**
@@ -13,8 +27,19 @@
   export let id = "ccs-" + Math.random().toString(36);
   export let labelText = "";
   export let hideLabel = false;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
   export let invalidText = "";
+
   export let name = undefined;
 
   /**

src/Dropdown/Dropdown.svelte

@@ -14,7 +14,19 @@
    */
   export let light = false;
   export let disabled = false;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
+  export let invalidText = "";
+
   export let items = [];
   export let itemToString = (item) => item.text || item.id;
   export let type = "default"; // "default" | "inline"
@@ -26,7 +38,7 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
-  export let invalidText = "";
+
   export let helperText = "";
   export let label = undefined;
   export let titleText = "";

src/FileUploader/Filename.svelte

@@ -1,7 +1,21 @@
 <script>
+  /**
+   * Specify the filename status
+   * @type {"uploading" | "edit" | "complete"} [status="uploading"]
+   */
+  export let status = "uploading";
+
+  /**
+   * Define the ARIA label used for the status icons
+   * @type {string} [iconDescription=""]
+   */
   export let iconDescription = "";
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
-  export let status = "uploading"; // "uploading" | "edit" | "complete"
 
   import Close16 from "carbon-icons-svelte/lib/Close16";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";

src/FormGroup/FormGroup.svelte

@@ -1,5 +1,10 @@
 <script>
-  export let invalid = false;
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
+   export let invalid = false;
+
   export let message = false;
   export let messageText = "";
   export let legendText = "";

src/Icon/Icon.svelte

@@ -1,4 +1,9 @@
 <script>
+  /**
+   * 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")} [render]
+   */
   export let render = undefined;
 
   /**

src/InlineLoading/InlineLoading.svelte

@@ -4,8 +4,23 @@
    * @type {"active" | "inactive" | "finished" | "error"} [status="active"]
    */
   export let status = "active";
+
+  /**
+   * Set the loading description
+   * @type {string} [description]
+   */
   export let description = undefined;
+
+  /**
+   * Define the ARIA label for the loading icon
+   * @type {string} [iconDescription="Expand/Collapse"]
+   */
   export let iconDescription = undefined;
+
+  /**
+   * Specify the timeout delay (ms) after `status` is set to "success"
+   * @type {number} [successDelay=1500]
+   */
   export let successDelay = 1500;
 
   import { createEventDispatcher, afterUpdate, onMount } from "svelte";

src/ListBox/ListBox.svelte

@@ -11,6 +11,10 @@
    */
   export let type = "default";
 
+  /**
+   * Set to `true` to open the list box
+   * @type {boolean} [open=false]
+   */
   export let open = false;
 
   /**
@@ -18,8 +22,23 @@
    * @type {boolean} [light=false]
    */
   export let light = false;
+
+  /**
+   * Set to `true` to disable the list box
+   * @type {boolean} [disable=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
   export let invalidText = "";
 </script>
 

src/ListBox/ListBoxField.svelte

@@ -10,6 +10,11 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext } from "svelte";

src/ListBox/ListBoxMenu.svelte

@@ -4,13 +4,11 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
-
-  $: menuId = `menu-${id}`;
 </script>
 
 <div
   role="listbox"
-  id={menuId}
+  id="menu-{id}"
   class:bx--list-box__menu={true}
   {...$$restProps}>
   <slot />

src/MultiSelect/MultiSelect.svelte

@@ -13,13 +13,30 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
   export let invalidText = "";
+
   export let helperText = "";
   export let items = [];
   export let itemToString = (item) => item.text || item.id;
   export let label = "";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
   export let locale = "en";
   export let open = false;
   export let placeholder = "";

src/Notification/InlineNotification.svelte

@@ -2,7 +2,7 @@
   export let notificationType = "inline";
 
   /**
-   * Set the kind of notification
+   * Specify the kind of notification
    * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
    */
   export let kind = "error";

src/NumberInput/NumberInput.Skeleton.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
 </script>
 

src/NumberInput/NumberInput.svelte

@@ -4,7 +4,13 @@
   export let step = 1;
   export let max = undefined;
   export let min = undefined;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
   export let readonly = false;
   export let mobile = false;
   export let allowEmpty = false;
@@ -17,8 +23,19 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
-  export let invalidText = "Provide invalidText";
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText="Provide invalidText"]
+   */
+  export let invalidText = "";
+
   export let helperText = "";
   export let label = "";
   export let hideLabel = false;

src/OverflowMenu/OverflowMenu.svelte

@@ -1,8 +1,19 @@
 <script>
+  /**
+   * Specify the direction of the overflow menu relative to the button
+   * @type {"top" | "bottom"} [direction="bottom"]
+   */
+  export let direction = "bottom";
+
   export let open = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let flipped = false;
-  export let direction = "bottom"; // "top" | "bottom"
+
   export let tabindex = "0";
   export let icon = OverflowMenuVertical16;
   export let iconClass = undefined;

src/ProgressIndicator/ProgressStep.svelte

@@ -2,7 +2,12 @@
   export let complete = false;
   export let current = false;
   export let disabled = false;
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
   export let description = "";
   export let label = "";
   export let secondaryLabel = "";

src/RadioButton/RadioButton.svelte

@@ -9,7 +9,16 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
   export let labelPosition = "right"; // "left" | "right"
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
   export let name = "";
 

src/Search/Search.svelte

@@ -10,6 +10,11 @@
   export let id = "ccs-" + Math.random().toString(36);
   export let type = "text";
   export let value = "";
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
   export let placeholder = "Search...";
   export let skeleton = false;
@@ -26,6 +31,11 @@
    */
   export let small = false;
   export let size = small ? "sm" : "xl";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import Close16 from "carbon-icons-svelte/lib/Close16";
@@ -49,7 +59,7 @@
     class:bx--search--light={light}
     {...$$restProps}>
     <Search16 class="bx--search-magnifier" />
-    <label class:bx--label={true} for={id}>{labelText}</label>
+    <label for={id} class:bx--label={true}>{labelText}</label>
     <!-- svelte-ignore a11y-autofocus -->
     <input
       bind:this={ref}

src/Select/Select.svelte

@@ -21,11 +21,31 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
   export let invalidText = "";
+
   export let helperText = "";
   export let noLabel = false;
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
   export let ref = null;
 

src/SkeletonText/SkeletonText.svelte

@@ -1,7 +1,26 @@
 <script>
+  /**
+   * Specify the number of lines to render
+   * @type {number} [lines=3]
+   */
   export let lines = 3;
+
+  /**
+   * Set to `true` to use the heading size variant
+   * @type {boolean} [heading=false]
+   */
   export let heading = false;
+
+  /**
+   * Set to `true` to use the paragraph size variant
+   * @type {boolean} [paragraph=false]
+   */
   export let paragraph = false;
+
+  /**
+   * Specify the width of the text (% or px)
+   * @type {string} [width="100%"]
+   */
   export let width = "100%";
 
   const randoms = [0.973, 0.153, 0.567];

src/Slider/Slider.Skeleton.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
 </script>
 

src/Slider/Slider.svelte

@@ -8,7 +8,17 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
   export let inputType = "number";
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
 
   /**

src/TextArea/TextArea.Skeleton.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
 </script>
 

src/TextArea/TextArea.svelte

@@ -12,16 +12,42 @@
   export let disabled = false;
   export let helperText = "";
 
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
+  export let labelText = "";
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
+  export let hideLabel = false;
+
+  export let name = undefined;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
+  export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
+  export let invalidText = "";
+
   /**
    * Set an id for the textarea element
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
-  export let name = undefined;
-  export let invalid = false;
-  export let invalidText = "";
-  export let labelText = "";
-  export let hideLabel = false;
+
+  /**
+   * Obtain a reference to the textarea HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";

src/TextInput/PasswordInput.svelte

@@ -23,7 +23,17 @@
   export let name = undefined;
   export let invalid = false;
   export let invalidText = "";
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
   export let tooltipAlignment = "center";
   export let tooltipPosition = "bottom";

src/TextInput/TextInput.Skeleton.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
 </script>
 

src/TextInput/TextInput.svelte

@@ -19,10 +19,30 @@
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let helperText = "";
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
   export let invalidText = "";
+
   export let ref = null;
 
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";

src/Tile/ClickableTile.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to click the tile
+   * @type {boolean} [clicked=false]
+   */
   export let clicked = false;
 
   /**

src/Tile/ExpandableTile.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to expand the tile
+   * @type {boolean} [expanded=false]
+   */
   export let expanded = false;
 
   /**

src/Tile/RadioTile.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to check the tile
+   * @type {boolean} [checked=false]
+   */
   export let checked = false;
 
   /**

src/Tile/SelectableTile.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to select the tile
+   * @type {boolean} [selected=false]
+   */
   export let selected = false;
 
   /**

src/TimePicker/TimePicker.svelte

@@ -12,25 +12,36 @@
   export let light = false;
   export let disabled = false;
 
+  export let labelText = "";
+  export let hideLabel = false;
+
   /**
    * Set an id for the input element
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
-  export let invalidText = "Invalid time format.";
-  export let labelText = "";
-  export let hideLabel = false;
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText="Invalid time format."]
+   */
+  export let invalidText = "";
 </script>
 
 <div
   class:bx--form-item={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  {...$$restProps}>
+  on:mouseleave>
   <div
     class:bx--time-picker={true}
     class:bx--time-picker--light={light}
@@ -47,6 +58,14 @@
       {/if}
       <input
         data-invalid={invalid || undefined}
+        {pattern}
+        {placeholder}
+        {maxlength}
+        {id}
+        {name}
+        {type}
+        {value}
+        {disabled}
         class:bx--time-picker__input-field={true}
         class:bx--text-input={true}
         class:bx--text-input--light={light}
@@ -57,15 +76,7 @@
           value = target.value;
         }}
         on:focus
-        on:blur
-        {pattern}
-        {placeholder}
-        {maxlength}
-        {id}
-        {name}
-        {type}
-        {value}
-        {disabled} />
+        on:blur />
     </div>
     <slot />
   </div>

src/TimePicker/TimePickerSelect.svelte

@@ -4,13 +4,14 @@
   export let disabled = false;
   export let iconDescription = "Open list of options";
 
+  export let labelText = "";
+  export let hideLabel = true;
+
   /**
    * Set an id for the select element
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
-  export let labelText = "";
-  export let hideLabel = true;
 
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -42,14 +43,14 @@
   {/if}
   <!-- svelte-ignore a11y-no-onchange -->
   <select
-    class:bx--select-input={true}
-    on:change={({ target }) => {
-      selectedValue.set(target.value);
-    }}
     {id}
     {name}
     {disabled}
-    {value}>
+    {value}
+    class:bx--select-input={true}
+    on:change={({ target }) => {
+      selectedValue.set(target.value);
+    }}>
     <slot />
   </select>
   <ChevronDownGlyph

src/Toggle/Toggle.Skeleton.svelte

@@ -1,6 +1,6 @@
 <script>
   /**
-   * Define the label text
+   * Specify the label text
    * @type {string} [labelText=""]
    */
   export let labelText = "";

src/Toggle/Toggle.svelte

@@ -1,8 +1,32 @@
 <script>
+  /**
+   * Set to `true` to toggle the checkbox input
+   * @type {boolean} [toggled=false]
+   */
   export let toggled = false;
+
+  /**
+   * Set to `true` to disable checkbox input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the label for the untoggled state
+   * @type {string} [labelA="Off"]
+   */
   export let labelA = "Off";
+
+  /**
+   * Specify the label for the toggled state
+   * @type {string} [labelB="On"]
+   */
   export let labelB = "On";
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
 
   /**
@@ -10,6 +34,11 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the checkbox input
+   * @type {string} [name]
+   */
   export let name = undefined;
 </script>
 

src/ToggleSmall/ToggleSmall.Skeleton.svelte

@@ -1,6 +1,6 @@
 <script>
   /**
-   * Define the label text
+   * Specify the label text
    * @type {string} [labelText=""]
    */
   export let labelText = "";

src/ToggleSmall/ToggleSmall.svelte

@@ -1,8 +1,32 @@
 <script>
+  /**
+   * Set to `true` to toggle the checkbox input
+   * @type {boolean} [toggled=false]
+   */
   export let toggled = false;
+
+  /**
+   * Set to `true` to disable checkbox input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the label for the untoggled state
+   * @type {string} [labelA="Off"]
+   */
   export let labelA = "Off";
+
+  /**
+   * Specify the label for the toggled state
+   * @type {string} [labelB="On"]
+   */
   export let labelB = "On";
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
 
   /**
@@ -10,6 +34,11 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the checkbox input
+   * @type {string} [name]
+   */
   export let name = undefined;
 </script>
 
@@ -33,7 +62,7 @@
       toggled = !toggled;
     }}
     on:keyup
-    on:keyup={e => {
+    on:keyup={(e) => {
       if (e.key === ' ' || e.key === 'Enter') {
         e.preventDefault();
         toggled = !toggled;

src/Tooltip/Tooltip.svelte

@@ -1,13 +1,63 @@
 <script>
+  /**
+   * Set the direction of the tooltip relative to the button
+   * @type {"top" | "right" | "bottom" | "left"} [direction="bottom"]
+   */
   export let direction = "bottom";
-  export let hideIcon = false;
-  export let icon = Information16;
-  export let iconDescription = "";
-  export let iconName = "";
+
+  /**
+   * Set to `true` to open the tooltip
+   * @type {boolean} [open=false]
+   */
   export let open = false;
+
+  /**
+   * Set to `true` to hide the tooltip icon
+   * @type {boolean} [hideIcon=false]
+   */
+  export let hideIcon = false;
+
+  /**
+   * 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/Information16")} [icon=Information16]
+   */
+  export let icon = Information16;
+
+  /**
+   * Define the ARIA label for the tooltip button
+   * @type {string} [iconDescription=""]
+   */
+  export let iconDescription = "";
+
+  /**
+   * Define the icon name attribute
+   * @type {string} [iconName=""]
+   */
+  export let iconName = "";
+
+  /**
+   * Set the button tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
+
+  /**
+   * Set an id for the tooltip
+   * @type {string} [tooltipId]
+   */
   export let tooltipId = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Set an id for the tooltip button
+   * @type {string} [triggerId]
+   */
   export let triggerId = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Set the tooltip button text
+   * @type {string} [triggerText=""]
+   */
   export let triggerText = "";
 
   /**

src/TooltipDefinition/TooltipDefinition.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Define the tooltip text
-   * @types {string} [tooltipText=""]
+   * @type {string} [tooltipText=""]
    */
   export let tooltipText = "";
 

src/TooltipIcon/TooltipIcon.Story.svelte

@@ -1,6 +1,5 @@
 <script>
   import Filter16 from "carbon-icons-svelte/lib/Filter16";
-
   import TooltipIcon from "./TooltipIcon.svelte";
 </script>
 

src/TooltipIcon/TooltipIcon.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Define the tooltip text
-   * @types {string} [tooltipText=""]
+   * @type {string} [tooltipText=""]
    */
   export let tooltipText = "";