From c3f924c25a273b7499dc38f6e2062d2e0939f102 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 25 Jul 2020 11:30:45 -0700
Subject: [PATCH] chore: add more type docs

---
 src/Checkbox/Checkbox.svelte                  |  2 +-
 src/ComboBox/ComboBox.svelte                  | 11 ++++
 .../DataTableSkeleton.svelte                  | 25 ++++++++
 src/DatePicker/DatePicker.Skeleton.svelte     |  4 ++
 src/DatePicker/DatePicker.svelte              |  8 ++-
 src/DatePicker/DatePickerInput.svelte         | 27 ++++++++-
 src/Dropdown/Dropdown.svelte                  | 14 ++++-
 src/FileUploader/Filename.svelte              | 16 ++++-
 src/FormGroup/FormGroup.svelte                |  7 ++-
 src/Icon/Icon.svelte                          |  5 ++
 src/InlineLoading/InlineLoading.svelte        | 15 +++++
 src/ListBox/ListBox.svelte                    | 19 ++++++
 src/ListBox/ListBoxField.svelte               |  5 ++
 src/ListBox/ListBoxMenu.svelte                |  4 +-
 src/MultiSelect/MultiSelect.svelte            | 17 ++++++
 src/Notification/InlineNotification.svelte    |  2 +-
 src/NumberInput/NumberInput.Skeleton.svelte   |  4 ++
 src/NumberInput/NumberInput.svelte            | 19 +++++-
 src/OverflowMenu/OverflowMenu.svelte          | 13 ++++-
 src/ProgressIndicator/ProgressStep.svelte     |  5 ++
 src/RadioButton/RadioButton.svelte            |  9 +++
 src/Search/Search.svelte                      | 12 +++-
 src/Select/Select.svelte                      | 20 +++++++
 src/SkeletonText/SkeletonText.svelte          | 19 ++++++
 src/Slider/Slider.Skeleton.svelte             |  4 ++
 src/Slider/Slider.svelte                      | 10 ++++
 src/TextArea/TextArea.Skeleton.svelte         |  4 ++
 src/TextArea/TextArea.svelte                  | 36 ++++++++++--
 src/TextInput/PasswordInput.svelte            | 10 ++++
 src/TextInput/TextInput.Skeleton.svelte       |  4 ++
 src/TextInput/TextInput.svelte                | 20 +++++++
 src/Tile/ClickableTile.svelte                 |  4 ++
 src/Tile/ExpandableTile.svelte                |  4 ++
 src/Tile/RadioTile.svelte                     |  4 ++
 src/Tile/SelectableTile.svelte                |  4 ++
 src/TimePicker/TimePicker.svelte              | 39 ++++++++-----
 src/TimePicker/TimePickerSelect.svelte        | 15 ++---
 src/Toggle/Toggle.Skeleton.svelte             |  2 +-
 src/Toggle/Toggle.svelte                      | 29 ++++++++++
 src/ToggleSmall/ToggleSmall.Skeleton.svelte   |  2 +-
 src/ToggleSmall/ToggleSmall.svelte            | 31 +++++++++-
 src/Tooltip/Tooltip.svelte                    | 58 +++++++++++++++++--
 .../TooltipDefinition.svelte                  |  2 +-
 src/TooltipIcon/TooltipIcon.Story.svelte      |  1 -
 src/TooltipIcon/TooltipIcon.svelte            |  2 +-
 45 files changed, 517 insertions(+), 50 deletions(-)

diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index 1ba3f507..b96bd497 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/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 = "";
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index a0960454..d6747abd 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/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;
diff --git a/src/DataTableSkeleton/DataTableSkeleton.svelte b/src/DataTableSkeleton/DataTableSkeleton.svelte
index 3ffe2cec..ec463ff0 100644
--- a/src/DataTableSkeleton/DataTableSkeleton.svelte
+++ b/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(
diff --git a/src/DatePicker/DatePicker.Skeleton.svelte b/src/DatePicker/DatePicker.Skeleton.svelte
index 096acb94..b360b12c 100644
--- a/src/DatePicker/DatePicker.Skeleton.svelte
+++ b/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;
 
   /**
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index d2d9dac7..538d4401 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/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>
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index d63b64f0..8c2d75bf 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/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;
 
   /**
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index a7b29a65..e59a9a93 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/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 = "";
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index f75674fc..3736a721 100644
--- a/src/FileUploader/Filename.svelte
+++ b/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";
diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte
index 852fee46..2d89e4dc 100644
--- a/src/FormGroup/FormGroup.svelte
+++ b/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 = "";
diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte
index af119c96..ca3ff129 100644
--- a/src/Icon/Icon.svelte
+++ b/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;
 
   /**
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index 651674bf..e7afb796 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/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";
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index 105e568a..a90b32a9 100644
--- a/src/ListBox/ListBox.svelte
+++ b/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>
 
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index 069d27b1..a7887fb5 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/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";
diff --git a/src/ListBox/ListBoxMenu.svelte b/src/ListBox/ListBoxMenu.svelte
index 9cf640ff..8c0e01fd 100644
--- a/src/ListBox/ListBoxMenu.svelte
+++ b/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 />
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index d67065ea..fe3966dc 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/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 = "";
diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte
index 90177e28..b267c336 100644
--- a/src/Notification/InlineNotification.svelte
+++ b/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";
diff --git a/src/NumberInput/NumberInput.Skeleton.svelte b/src/NumberInput/NumberInput.Skeleton.svelte
index e7d45b27..240291e0 100644
--- a/src/NumberInput/NumberInput.Skeleton.svelte
+++ b/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>
 
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index fa7a76a9..0332d6b0 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/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;
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index c9bd9487..079dd0ac 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/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;
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index fbfd6250..038568f0 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/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 = "";
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index 52566cfd..313c4918 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/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 = "";
 
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index aec72300..8757f192 100644
--- a/src/Search/Search.svelte
+++ b/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}
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index 8925ca09..254a4510 100644
--- a/src/Select/Select.svelte
+++ b/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;
 
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 07c260bc..1b9030fb 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/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];
diff --git a/src/Slider/Slider.Skeleton.svelte b/src/Slider/Slider.Skeleton.svelte
index 788b11ac..110e6978 100644
--- a/src/Slider/Slider.Skeleton.svelte
+++ b/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>
 
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 6ef55354..3fb96aa7 100644
--- a/src/Slider/Slider.svelte
+++ b/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 = "";
 
   /**
diff --git a/src/TextArea/TextArea.Skeleton.svelte b/src/TextArea/TextArea.Skeleton.svelte
index 9f4e44d3..7594ce9c 100644
--- a/src/TextArea/TextArea.Skeleton.svelte
+++ b/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>
 
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index db2fbc62..b0bf34ce 100644
--- a/src/TextArea/TextArea.svelte
+++ b/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";
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 8a2649e8..ef71f04d 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/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";
diff --git a/src/TextInput/TextInput.Skeleton.svelte b/src/TextInput/TextInput.Skeleton.svelte
index 9f4e44d3..8e3be9f4 100644
--- a/src/TextInput/TextInput.Skeleton.svelte
+++ b/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>
 
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 26af2e97..b60e2262 100644
--- a/src/TextInput/TextInput.svelte
+++ b/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";
diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte
index 9f69adb6..87d08327 100644
--- a/src/Tile/ClickableTile.svelte
+++ b/src/Tile/ClickableTile.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to click the tile
+   * @type {boolean} [clicked=false]
+   */
   export let clicked = false;
 
   /**
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index b709719f..31ebebc4 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to expand the tile
+   * @type {boolean} [expanded=false]
+   */
   export let expanded = false;
 
   /**
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 7b290408..93bb65d6 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to check the tile
+   * @type {boolean} [checked=false]
+   */
   export let checked = false;
 
   /**
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index 5ba8e780..17f9db54 100644
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to select the tile
+   * @type {boolean} [selected=false]
+   */
   export let selected = false;
 
   /**
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index a864b9ef..abb02323 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/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>
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 159e5796..34720670 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/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
diff --git a/src/Toggle/Toggle.Skeleton.svelte b/src/Toggle/Toggle.Skeleton.svelte
index 536e1ae9..7a9537b2 100644
--- a/src/Toggle/Toggle.Skeleton.svelte
+++ b/src/Toggle/Toggle.Skeleton.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * Define the label text
+   * Specify the label text
    * @type {string} [labelText=""]
    */
   export let labelText = "";
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index fff21e22..4fbb4655 100644
--- a/src/Toggle/Toggle.svelte
+++ b/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>
 
diff --git a/src/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/ToggleSmall/ToggleSmall.Skeleton.svelte
index b395dede..fe66cc53 100644
--- a/src/ToggleSmall/ToggleSmall.Skeleton.svelte
+++ b/src/ToggleSmall/ToggleSmall.Skeleton.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * Define the label text
+   * Specify the label text
    * @type {string} [labelText=""]
    */
   export let labelText = "";
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte
index 0c4624ed..1a3de00a 100644
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ b/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;
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 09a6bc93..670e262a 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/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 = "";
 
   /**
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
index 6236589d..964e8f47 100644
--- a/src/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/TooltipDefinition/TooltipDefinition.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * Define the tooltip text
-   * @types {string} [tooltipText=""]
+   * @type {string} [tooltipText=""]
    */
   export let tooltipText = "";
 
diff --git a/src/TooltipIcon/TooltipIcon.Story.svelte b/src/TooltipIcon/TooltipIcon.Story.svelte
index ba669f34..189a777d 100644
--- a/src/TooltipIcon/TooltipIcon.Story.svelte
+++ b/src/TooltipIcon/TooltipIcon.Story.svelte
@@ -1,6 +1,5 @@
 <script>
   import Filter16 from "carbon-icons-svelte/lib/Filter16";
-
   import TooltipIcon from "./TooltipIcon.svelte";
 </script>
 
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index d773c23e..d570bd4d 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * Define the tooltip text
-   * @types {string} [tooltipText=""]
+   * @type {string} [tooltipText=""]
    */
   export let tooltipText = "";