diff --git a/src/Accordion/Accordion.Skeleton.svelte b/src/Accordion/Accordion.Skeleton.svelte
index 436d57ea..e9d94803 100644
--- a/src/Accordion/Accordion.Skeleton.svelte
+++ b/src/Accordion/Accordion.Skeleton.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the number of accordion items to render
+   * @type {number} [count=4]
+   */
   export let count = 4;
+
+  /**
+   * Set to `false` to close the first accordion item
+   * @type {boolean} [open=true]
+   */
   export let open = true;
 
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 57bf1171..b64fce52 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -1,5 +1,14 @@
 <script>
-  export let align = "end"; // "start" | "end"
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @type {"start" | "end"} [align="end"]
+   */
+  export let align = "end";
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @type {boolean} [skeleton=false]
+   */
   export let skeleton = false;
 
   import AccordionSkeleton from "./Accordion.Skeleton.svelte";
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index 3d34937b..14577f8e 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -1,6 +1,21 @@
 <script>
+  /**
+   * Specify the title of the accordion item heading
+   * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
+   * @type {string} [title="title"]
+   */
   export let title = "title";
+
+  /**
+   * Set to `true` to open the first accordion item
+   * @type {boolean} [open=false]
+   */
   export let open = false;
+
+  /**
+   * Specify the ARIA label for the accordion item chevron icon
+   * @type {string} [iconDescription="Expand/Collapse"]
+   */
   export let iconDescription = "Expand/Collapse";
 
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
diff --git a/src/Breadcrumb/Breadcrumb.Skeleton.svelte b/src/Breadcrumb/Breadcrumb.Skeleton.svelte
index c40197b1..a4ec13d7 100644
--- a/src/Breadcrumb/Breadcrumb.Skeleton.svelte
+++ b/src/Breadcrumb/Breadcrumb.Skeleton.svelte
@@ -1,12 +1,27 @@
+<script>
+  /**
+   * Set to `true` to hide the breadcrumb trailing slash
+   * @type {boolean} [noTrailingSlash=false]
+   */
+  export let noTrailingSlash = false;
+
+  /**
+   * Specify the number of breadcrumb items to render
+   * @type {number} [count=3]
+   */
+  export let count = 3;
+</script>
+
 <div
   class:bx--breadcrumb={true}
+  class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
   class:bx--skeleton={true}
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#each [0, 1, 2] as item, i (item)}
+  {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
     <div class:bx--breadcrumb-item={true}>
       <span class:bx--link={true}>&nbsp;</span>
     </div>
diff --git a/src/Breadcrumb/Breadcrumb.Story.svelte b/src/Breadcrumb/Breadcrumb.Story.svelte
index c42ecf85..ae7ca3f2 100644
--- a/src/Breadcrumb/Breadcrumb.Story.svelte
+++ b/src/Breadcrumb/Breadcrumb.Story.svelte
@@ -24,7 +24,7 @@
     <BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
   </Breadcrumb>
 {:else if story === 'skeleton'}
-  <BreadcrumbSkeleton />
+  <BreadcrumbSkeleton {noTrailingSlash} {...$$restProps} />
 {:else}
   <Breadcrumb {noTrailingSlash}>
     <BreadcrumbItem let:props>
diff --git a/src/Breadcrumb/Breadcrumb.stories.js b/src/Breadcrumb/Breadcrumb.stories.js
index 44e80de0..6baf69e3 100644
--- a/src/Breadcrumb/Breadcrumb.stories.js
+++ b/src/Breadcrumb/Breadcrumb.stories.js
@@ -1,4 +1,4 @@
-import { withKnobs, boolean } from "@storybook/addon-knobs";
+import { withKnobs, boolean, number } from "@storybook/addon-knobs";
 import Component from "./Breadcrumb.Story.svelte";
 
 export default { title: "Breadcrumb", decorators: [withKnobs] };
@@ -12,7 +12,11 @@ export const Default = () => ({
 
 export const Skeleton = () => ({
   Component,
-  props: { story: "skeleton" },
+  props: {
+    story: "skeleton",
+    noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false),
+    count: number("Number of breadcrumb items (count)", 3),
+  },
 });
 
 export const CurrentPage = () => ({
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index b49c9e28..0b052488 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` to hide the breadcrumb trailing slash
+   * @type {boolean} [noTrailingSlash=false]
+   */
   export let noTrailingSlash = false;
+
+  /**
+   * Set to `true` to display skeleton state
+   * @type {boolean} [skeleton=false]
+   */
   export let skeleton = false;
 
   import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index 80dbb9e6..ef97a78f 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set the `href` to use an anchor link
+   * @type {string} [href]
+   */
   export let href = undefined;
+
+  /**
+   * Set to `true` if the breadcrumb item represents the current page
+   * @type {boolean} [isCurrentPage=false]
+   */
   export let isCurrentPage = false;
 
   import { Link } from "../Link";
diff --git a/src/Button/Button.Skeleton.svelte b/src/Button/Button.Skeleton.svelte
index 5ad89eb3..1192adcc 100644
--- a/src/Button/Button.Skeleton.svelte
+++ b/src/Button/Button.Skeleton.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set the `href` to use an anchor link
+   * @type {string} [href]
+   */
   export let href = undefined;
+
+  /**
+   * Set to `true` to use the small variant
+   * @type {boolean} [small=false]
+   */
   export let small = false;
 </script>
 
diff --git a/src/Button/Button.stories.js b/src/Button/Button.stories.js
index e5527bdf..a868f1c5 100644
--- a/src/Button/Button.stories.js
+++ b/src/Button/Button.stories.js
@@ -6,6 +6,7 @@ export default { title: "Button", decorators: [withKnobs] };
 const kinds = {
   "Primary button (primary)": "primary",
   "Secondary button (secondary)": "secondary",
+  "Tertiary button (tertiary)": "tertiary",
   "Danger button (danger)": "danger",
   "Ghost button (ghost)": "ghost",
 };
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 01330a2e..1f014da5 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -1,17 +1,88 @@
 <script>
-  export let as = undefined;
-  export let skeleton = false;
-  export let disabled = false;
-  export let href = undefined;
-  export let icon = undefined;
-  export let iconDescription = undefined;
-  export let hasIconOnly = false;
+  /**
+   * Specify the kind of button
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
+   */
   export let kind = "primary";
+
+  /**
+   * Specify the size of button
+   * @type {"default" | "field" | "small"} [size="default"]
+   */
   export let size = "default";
-  export let tabindex = "0";
+
+  /**
+   * Set to `true` for the icon-only variant
+   * @type {boolean} [hasIconOnly=false]
+   */
+  export let hasIconOnly = false;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
+   */
+  export let icon = undefined;
+
+  /**
+   * Specify the ARIA label for the button icon
+   * @type {string} [iconDescription]
+   */
+  export let iconDescription = undefined;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * `hasIconOnly` must be set to `true`
+   * @type {"start" | "center" | "end"} [tooltipAlignment]
+   */
   export let tooltipAlignment = undefined;
+
+  /**
+   * Set the position of the tooltip relative to the icon
+   * @type {"top" | "right" | "bottom" | "left"} [tooltipPosition]
+   */
   export let tooltipPosition = undefined;
+
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
+   * @type {boolean} [as=false]
+   */
+  export let as = false;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @type {boolean} [skeleton=false]
+   */
+  export let skeleton = false;
+
+  /**
+   * Set to `true` to disable the button
+   * @type [boolean] [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Set the `href` to use an anchor link
+   * @type {string} [href]
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
+  export let tabindex = "0";
+
+  /**
+   * Specify the `type` attribute for the button element
+   * @type {string} [type="button"]
+   */
   export let type = "button";
+
+  /**
+   * Obtain a reference to the HTML element
+   * @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext } from "svelte";
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index 27346df6..af1bb324 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -1,14 +1,68 @@
 <script>
-  export let skeleton = false;
-  export let indeterminate = false;
-  export let readonly = false;
+  /**
+   * Specify whether the checkbox is checked
+   * @type {boolean} [checked=false]
+   */
   export let checked = false;
+
+  /**
+   * Specify whether the checkbox is indeterminate
+   * @type {boolean} [indeterminate=false]
+   */
+  export let indeterminate = false;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @type {boolean} [skeleton=false]
+   */
+  export let skeleton = false;
+
+  /**
+   * Set to `true` for the checkbox to be read-only
+   * @type {boolean} [readonly=false]
+   */
+  export let readonly = false;
+
+  /**
+   * Set to `true` to disable the checkbox
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = 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 id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Set a name for the input element
+   * @type {string} [name=""]
+   */
   export let name = "";
+
+  /**
+   * Specify the title attribute for the label element
+   * @type {string} [title]
+   */
   export let title = undefined;
+
+  /**
+   * Set an id for the input label
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
@@ -49,7 +103,7 @@
       on:change={() => {
         checked = !checked;
       }} />
-    <label class:bx--checkbox-label={true} for={id} {title}>
+    <label for={id} {title} class:bx--checkbox-label={true}>
       <span
         class:bx--checkbox-label-text={true}
         class:bx--visually-hidden={hideLabel}>
diff --git a/src/CodeSnippet/CodeSnippet.Skeleton.svelte b/src/CodeSnippet/CodeSnippet.Skeleton.svelte
index 994614ff..e99c7780 100644
--- a/src/CodeSnippet/CodeSnippet.Skeleton.svelte
+++ b/src/CodeSnippet/CodeSnippet.Skeleton.svelte
@@ -1,5 +1,9 @@
 <script>
-  export let type = "single"; // "single" | "multi"
+  /**
+   * Set the type of code snippet
+   * @type {"single" | "inline" | "multi"} [type="single"]
+   */
+  export let type = "single";
 </script>
 
 <div
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 49246e9a..53cf3bcf 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -1,17 +1,89 @@
 <script>
-  export let type = "single"; // "single" | "inline" | "multi"
+  /**
+   * Set the type of code snippet
+   * @type {"single" | "inline" | "multi"} [type="single"]
+   */
+  export let type = "single";
+
+  /**
+   * Set the code snippet text
+   * Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
+   * @type {string} [code]
+   */
   export let code = undefined;
+
+  /**
+   * Set to `true` to expand a multi-line code snippet (type="multi")
+   * @type {boolean} [expanded=false]
+   */
   export let expanded = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @type {boolean} [skeleton=false]
+   */
   export let skeleton = false;
+
+  /**
+   * Specify the ARIA label for the copy button icon
+   * @type {string} [copyButtonDescription]
+   */
   export let copyButtonDescription = undefined;
+
+  /**
+   * Specify the ARIA label of the copy button
+   * @type {string} [copyLabel]
+   */
   export let copyLabel = undefined;
+
+  /**
+   * Specify the feedback text displayed when clicking the snippet
+   * @type {string} [feedback="Copied!"]
+   */
   export let feedback = "Copied!";
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @type {number} [feedbackTimeout=2000]
+   */
   export let feedbackTimeout = 2000;
+
+  /**
+   * Specify the show less text
+   * `type` must be "multi"
+   * @type {string} [showLessText="Show less"]
+   */
   export let showLessText = "Show less";
+
+  /**
+   * Specify the show more text
+   * `type` must be "multi"
+   * @type {string} [showLessText="Show more"]
+   */
   export let showMoreText = "Show more";
+
+  /**
+   * Set to `true` to enable the show more/less button
+   * @type {boolean} [showMoreLess=false]
+   */
   export let showMoreLess = false;
+
+  /**
+   * Set an id for the code element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the pre HTML element
+   * @type {null | HTMLPreElement} [ref=null]
+   */
   export let ref = null;
 
   import { afterUpdate } from "svelte";
@@ -48,7 +120,7 @@
       {expanded && 'bx--snippet--expand'}
       {light && 'bx--snippet--light'}"
       {...$$restProps}
-      on:clicks
+      on:click
       on:mouseover
       on:mouseenter
       on:mouseleave>
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 18364891..3ebc33fc 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -1,21 +1,114 @@
 <script>
-  export let disabled = false;
-  export let helperText = "";
-  export let id = "ccs-" + Math.random().toString(36);
-  export let invalid = false;
-  export let invalidText = "";
+  /**
+   * @typedef {{ id: string; text: string; }} ComboBoxItem
+   */
+
+  /**
+   * Set the combobox items
+   * @type {ComboBoxItem[]} [items=[]]
+   */
   export let items = [];
-  export let itemToString = item => item.text || item.id;
-  export let light = false;
-  export let open = false;
-  export let placeholder = "";
+
+  /**
+   * Override the display of a combobox item
+   * @type {(item: ComboBoxItem) => string;} [itemToString = (item: ComboBoxItem) => string;]
+   */
+  export let itemToString = (item) => item.text || item.id;
+
+  /**
+   * Set the selected item by value index
+   * @type {number} [selectedIndex=-1]
+   */
   export let selectedIndex = -1;
-  export let shouldFilterItem = () => true;
-  export let size = undefined;
-  export let titleText = "";
-  export let translateWithId = undefined;
+
+  /**
+   * Specify the selected combobox value
+   * @type {string} [value=""]
+   */
   export let value = "";
+
+  /**
+   * Set the size of the combobox
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set to `true` to disable the combobox
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Specify the title text of the combobox
+   * @type {string} [titleText=""]
+   */
+  export let titleText = "";
+
+  /**
+   * Specify the placeholder text
+   * @type {string} [placeholder=""]
+   */
+  export let placeholder = "";
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
+  export let helperText = "";
+
+  /**
+   * Specify the invalid state text
+   * @type {string} [invalidText=""]
+   */
+  export let invalidText = "";
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
+  export let invalid = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
+  /**
+   * Set to `true` to open the combobox menu dropdown
+   * @type {boolean} [open=false]
+   */
+  export let open = false;
+
+  /**
+   * Determine if an item should be filtered given the current combobox value
+   * @type {(item: ComboBoxItem, value: string) => boolean} [shouldFilterItem=() => true]
+   */
+  export let shouldFilterItem = () => true;
+
+  /**
+   * Override the default translation ids
+   * @type {(id: any) => string;} [translateWithId]
+   */
+  export let translateWithId = undefined;
+
+  /**
+   * Set an id for the list box component
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name]
+   */
   export let name = undefined;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import { afterUpdate } from "svelte";
@@ -26,7 +119,7 @@
     ListBoxMenu,
     ListBoxMenuIcon,
     ListBoxMenuItem,
-    ListBoxSelection
+    ListBoxSelection,
   } from "../ListBox";
 
   let selectedId = undefined;
@@ -48,7 +141,7 @@
   afterUpdate(() => {
     if (open) {
       ref.focus();
-      filteredItems = items.filter(item => shouldFilterItem(item, value));
+      filteredItems = items.filter((item) => shouldFilterItem(item, value));
     } else {
       highlightedIndex = -1;
       inputValue = selectedItem ? selectedItem.text : "";
@@ -61,7 +154,7 @@
   $: highlightedId = items[highlightedIndex]
     ? items[highlightedIndex].id
     : undefined;
-  $: filteredItems = items.filter(item => shouldFilterItem(item, value));
+  $: filteredItems = items.filter((item) => shouldFilterItem(item, value));
   $: selectedItem = items[selectedIndex];
   $: inputValue = selectedItem ? selectedItem.text : undefined;
   $: value = inputValue;
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index 7842851a..cb168262 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -1,9 +1,38 @@
 <script>
+  /**
+   * Set the size of the composed modal
+   * @type {"xs" | "sm" | "lg"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set to `true` to open the modal
+   * @type {boolean} [open=false]
+   */
   export let open = false;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @type {boolean} [danger=false]
+   */
   export let danger = false;
-  export let size = undefined; // "xs" | "sm" | "lg"
+
+  /**
+   * Specify a class for the inner modal
+   * @type {string} [containerClass=""]
+   */
   export let containerClass = "";
+
+  /**
+   * Specify a selector to be focused when opening the modal
+   * @type {string} [selectorPrimaryFocus="[data-modal-primary-focus]"]
+   */
   export let selectorPrimaryFocus = "[data-modal-primary-focus]";
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import {
@@ -11,7 +40,7 @@
     tick,
     setContext,
     onMount,
-    afterUpdate
+    afterUpdate,
   } from "svelte";
 
   const dispatch = createEventDispatcher();
@@ -26,9 +55,9 @@
     submit: () => {
       dispatch("submit");
     },
-    declareRef: ref => {
+    declareRef: (ref) => {
       buttonRef = ref;
-    }
+    },
   });
 
   function focus(element) {
diff --git a/src/ComposedModal/ModalBody.svelte b/src/ComposedModal/ModalBody.svelte
index d47c3eb9..76af8328 100644
--- a/src/ComposedModal/ModalBody.svelte
+++ b/src/ComposedModal/ModalBody.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` if the modal contains form elements
+   * @type {boolean} [hasForm=false]
+   */
   export let hasForm = false;
+
+  /**
+   * Set to `true` if the modal contains scrolling content
+   * @type {boolean} [hasScrollingContent=false]
+   */
   export let hasScrollingContent = false;
 </script>
 
diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
index f4a4ea95..d59b74ac 100644
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@@ -1,9 +1,38 @@
 <script>
-  export let primaryClass = undefined;
+  /**
+   * Specify the primary button text
+   * @type {string} [primaryButtonText=""]
+   */
   export let primaryButtonText = "";
+
+  /**
+   * Set to `true` to disable the primary button
+   * @type {boolean} [primaryButtonDisabled=false]
+   */
   export let primaryButtonDisabled = false;
-  export let secondaryClass = undefined;
+
+  /**
+   * Specify a class for the primary button
+   * @type {string} [primaryClass]
+   */
+  export let primaryClass = undefined;
+
+  /**
+   * Specify the secondary button text
+   * @type {string} [secondaryButtonText=""]
+   */
   export let secondaryButtonText = "";
+
+  /**
+   * Specify a class for the secondary button
+   * @type {string} [secondaryClass]
+   */
+  export let secondaryClass = undefined;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @type {boolean} [danger=false]
+   */
   export let danger = false;
 
   import { getContext } from "svelte";
diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index ef4fed22..7cef779e 100644
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@@ -1,10 +1,44 @@
 <script>
+  /**
+   * Specify the modal title
+   * @type {string} [title=""]
+   */
   export let title = "";
+
+  /**
+   * Specify the modal label
+   * @type {string} [label=""]
+   */
   export let label = "";
+
+  /**
+   * Specify the label class
+   * @type {string} [labelClass=""]
+   */
   export let labelClass = "";
+
+  /**
+   * Specify the title class
+   * @type {string} [titleClass=""]
+   */
   export let titleClass = "";
+
+  /**
+   * Specify the close class
+   * @type {string} [closeClass=""]
+   */
   export let closeClass = "";
+
+  /**
+   * Specify the close icon class
+   * @type {string} [closeIconClass=""]
+   */
   export let closeIconClass = "";
+
+  /**
+   * Specify the ARIA label for the close icon
+   * @type {string} [iconDescription="Close"]
+   */
   export let iconDescription = "Close";
 
   import { getContext } from "svelte";
diff --git a/src/ContentSwitcher/ContentSwitcher.Story.svelte b/src/ContentSwitcher/ContentSwitcher.Story.svelte
index 81875b9f..59451021 100644
--- a/src/ContentSwitcher/ContentSwitcher.Story.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.Story.svelte
@@ -1,5 +1,9 @@
 <script>
   export let story = undefined;
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
 
   import ContentSwitcher from "./ContentSwitcher.svelte";
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index a3c5502f..2059f92b 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set the selected index of the switch item
+   * @type {number} [selectedIndex=0]
+   */
   export let selectedIndex = 0;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
 
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
@@ -24,10 +33,10 @@
 
       switches = [...switches, { id, text, selected }];
     },
-    update: id => {
+    update: (id) => {
       selectedIndex = switches.map(({ id }) => id).indexOf(id);
     },
-    change: direction => {
+    change: (direction) => {
       let index = currentIndex + direction;
 
       if (index < 0) {
@@ -37,7 +46,7 @@
       }
 
       selectedIndex = index;
-    }
+    },
   });
 
   afterUpdate(() => {
diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte
index 32b894dd..3919fa2b 100644
--- a/src/ContentSwitcher/Switch.svelte
+++ b/src/ContentSwitcher/Switch.svelte
@@ -1,8 +1,33 @@
 <script>
+  /**
+   * Specify the switch text
+   * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
+   * @type {string} [text="Provide text"]
+   */
   export let text = "Provide text";
+
+  /**
+   * Set to `true` for the switch to be selected
+   * @type {boolean} [selected=false]
+   */
   export let selected = false;
+
+  /**
+   * Set to `true` to disable the switch
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set an id for the button element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
   export let ref = null;
 
   import { afterUpdate, getContext, onDestroy } from "svelte";
@@ -11,7 +36,7 @@
 
   ctx.add({ id, text, selected });
 
-  const unsubscribe = ctx.currentId.subscribe($ => {
+  const unsubscribe = ctx.currentId.subscribe(($) => {
     selected = $ === id;
   });
 
diff --git a/src/Copy/Copy.svelte b/src/Copy/Copy.svelte
index 57420652..06fd9afd 100644
--- a/src/Copy/Copy.svelte
+++ b/src/Copy/Copy.svelte
@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Set the feedback text shown after clicking the button
+   * @type {string} [feedback="Copied!"]
+   */
   export let feedback = "Copied!";
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @type {number} [feedbackTimeout=2000]
+   */
   export let feedbackTimeout = 2000;
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
   export let ref = null;
 
   import { onMount } from "svelte";
@@ -8,8 +22,6 @@
   let animation = undefined;
   let timeout = undefined;
 
-  $: showFeedback = timeout !== undefined;
-
   onMount(() => {
     return () => {
       clearTimeout(timeout);
diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte
index c9953e1c..7b830787 100644
--- a/src/CopyButton/CopyButton.svelte
+++ b/src/CopyButton/CopyButton.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set the title and ARIA label for the copy button
+   * @type {string} [iconDescription="Copy to clipboard"]
+   */
   export let iconDescription = "Copy to clipboard";
 
   import { Copy } from "../Copy";
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index fe783cd8..31147902 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -1,13 +1,53 @@
 <script>
-  export let size = undefined; // "compact" | "short" | "tall"
-  export let title = "";
-  export let description = "";
-  export let zebra = false;
-  export let sortable = false;
-  export let stickyHeader = false;
-  export let rows = [];
+  /**
+   * Specify the data table headers
+   * @type {{key: string; value: string;}} [headers=[]]
+   */
   export let headers = [];
 
+  /**
+   * Specify the rows the data table should render
+   * keys defined in `headers` are used for the row ids
+   * @type {Object[]} [rows=[]]
+   */
+  export let rows = [];
+
+  /**
+   * Set the size of the data table
+   * @type {"compact" | "short" | "tall"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the title of the data table
+   * @type {string} [title=""]
+   */
+  export let title = "";
+
+  /**
+   * Specify the description of the data table
+   * @type {string} [description=""]
+   */
+  export let description = "";
+
+  /**
+   * Set to `true` to use zebra styles
+   * @type {boolean} [zebra=false]
+   */
+  export let zebra = false;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @type {boolean} [sortable=false]
+   */
+  export let sortable = false;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @type {boolean} [stickyHeader=false]
+   */
+  export let stickyHeader = false;
+
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
   import Table from "./Table.svelte";
@@ -21,7 +61,7 @@
   const sortDirectionMap = {
     none: "ascending",
     ascending: "descending",
-    descending: "none"
+    descending: "none",
   };
   const dispatch = createEventDispatcher();
   const tableSortable = writable(sortable);
@@ -36,16 +76,16 @@
   setContext("DataTable", {
     sortHeader,
     tableSortable,
-    add: id => {
-      headerItems.update(_ => [..._, id]);
-    }
+    add: (id) => {
+      headerItems.update((_) => [..._, id]);
+    },
   });
 
   $: tableSortable.set(sortable);
   $: headerKeys = headers.map(({ key }) => key);
-  $: rows = rows.map(row => ({
+  $: rows = rows.map((row) => ({
     ...row,
-    cells: headerKeys.map(key => ({ key, value: row[key] }))
+    cells: headerKeys.map((key) => ({ key, value: row[key] })),
   }));
   $: sortedRows = rows;
   $: ascending = $sortHeader.sortDirection === "ascending";
@@ -71,7 +111,7 @@
   }
   $: props = {
     headers,
-    rows
+    rows,
   };
 </script>
 
@@ -91,7 +131,7 @@
                 sortHeader.set({
                   id: sortDirection === 'none' ? null : $thKeys[header.key],
                   key: header.key,
-                  sortDirection
+                  sortDirection,
                 });
               }}>
               {header.value}
diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte
index b57aa169..37bd41cb 100644
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@@ -1,9 +1,38 @@
 <script>
-  export let size = undefined; // "compact" | "short" | "tall"
+  /**
+   * Set the size of the table
+   * @type {"compact" | "short" | "tall"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set to `true` to use zebra styles
+   * @type {boolean} [zebra=false]
+   */
   export let zebra = false;
+
+  /**
+   * Set to `true` to use static width
+   * @type {boolean} [useStaticWidth=false]
+   */
   export let useStaticWidth = false;
+
+  /**
+   * Set to `true` for the bordered variant
+   * @type {boolean} [shouldShowBorder=false]
+   */
   export let shouldShowBorder = false;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @type {boolean} [sortable=false]
+   */
   export let sortable = false;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @type {boolean} [stickyHeader=false]
+   */
   export let stickyHeader = false;
 </script>
 
diff --git a/src/DataTable/TableContainer.svelte b/src/DataTable/TableContainer.svelte
index 60b6d6af..0eb474ec 100644
--- a/src/DataTable/TableContainer.svelte
+++ b/src/DataTable/TableContainer.svelte
@@ -1,7 +1,21 @@
 <script>
-  export let stickyHeader = false;
+  /**
+   * Specify the title of the data table
+   * @type {string} [title=""]
+   */
   export let title = "";
+
+  /**
+   * Specify the description of the data table
+   * @type {string} [description=""]
+   */
   export let description = "";
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @type {boolean} [stickyHeader=false]
+   */
+  export let stickyHeader = false;
 </script>
 
 <div
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index aa829319..dc5d216c 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Specify the `scope` attribute
+   * @type {string} [scope="col"]
+   */
   export let scope = "col";
+
+  /**
+   * Override the default id translations
+   * @type {() => string;} [translateWithId = () => "";]
+   */
   export let translateWithId = () => "";
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";
@@ -20,6 +34,7 @@
   <th
     aria-sort={active ? $sortHeader.sortDirection : 'none'}
     {scope}
+    {id}
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -41,6 +56,7 @@
 {:else}
   <th
     {scope}
+    {id}
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/DataTable/TableRow.svelte b/src/DataTable/TableRow.svelte
index 7a43dd1a..bad9aebd 100644
--- a/src/DataTable/TableRow.svelte
+++ b/src/DataTable/TableRow.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to select the row
+   * @type {boolean} [isSelected=false]
+   */
   export let isSelected = false;
 
   // TODO: include ariaLabel, onExpand, isExpanded, isSelected
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 6d4d2613..b360b12c 100644
--- a/src/DatePicker/DatePicker.Skeleton.svelte
+++ b/src/DatePicker/DatePicker.Skeleton.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` to use the range variant
+   * @type {boolean} [range=false]
+   */
   export let range = false;
+
+  /**
+   * Set an id to be used by the label element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index 3af2ccb2..835d7f42 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -1,35 +1,84 @@
 <script>
-  export let appendTo = document.body;
-  export let dateFormat = "m/d/Y";
+  /**
+   * Specify the date picker type
+   * @type {"simple" | "single" | "range"} [datePickerType="simple"]
+   */
   export let datePickerType = "simple";
-  export let id = "ccs-" + Math.random().toString(36);
-  export let light = false;
-  export let locale = "en";
-  export let maxDate = null;
-  export let minDate = null;
-  export let short = false;
+
+  /**
+   * Specify the date picker input value
+   * @type {string} [value=""]
+   */
   export let value = "";
 
+  /**
+   * Specify the element to append the calendar to
+   * @type {HTMLElement} [appendTo=document.body]
+   */
+  export let appendTo = document.body;
+
+  /**
+   * Specify the date format
+   * @type {string} [dateFormat="m/d/Y"]
+   */
+  export let dateFormat = "m/d/Y";
+
+  /**
+   * Specify the maximum date
+   * @type {null | string | Date} [maxDate=null]
+   */
+  export let maxDate = null;
+
+  /**
+   * Specify the minimum date
+   * @type {null | string | Date} [minDate=null]
+   */
+  export let minDate = null;
+
+  /**
+   * Specify the locale
+   * @type {string} [locale="en"]
+   */
+  export let locale = "en";
+
+  /**
+   * Set to `true` to use the short variant
+   * @type {boolean} [short=false]
+   */
+  export let short = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
+  /**
+   * Set an id for the date picker element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
   import {
     createEventDispatcher,
     setContext,
     afterUpdate,
-    onDestroy
+    onDestroy,
   } from "svelte";
   import { writable, derived } from "svelte/store";
   import { createCalendar } from "./createCalendar";
 
   const dispatch = createEventDispatcher();
   const inputs = writable([]);
-  const inputIds = derived(inputs, _ => _.map(({ id }) => id));
+  const inputIds = derived(inputs, (_) => _.map(({ id }) => id));
   const labelTextEmpty = derived(
     inputs,
-    _ => _.filter(({ labelText }) => !!labelText).length === 0
+    (_) => _.filter(({ labelText }) => !!labelText).length === 0
   );
   const inputValue = writable(value);
   const mode = writable(datePickerType);
-  const range = derived(mode, _ => _ === "range");
-  const hasCalendar = derived(mode, _ => _ === "single" || _ === "range");
+  const range = derived(mode, (_) => _ === "range");
+  const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range");
 
   let calendar = undefined;
   let datePickerRef = undefined;
@@ -40,8 +89,8 @@
     range,
     inputValue,
     hasCalendar,
-    add: data => {
-      inputs.update(_ => [..._, data]);
+    add: (data) => {
+      inputs.update((_) => [..._, data]);
     },
     declareRef: ({ id, ref }) => {
       if ($inputIds.indexOf(id) === 0) {
@@ -59,7 +108,7 @@
         dispatch("change", value);
       }
     },
-    blurInput: relatedTarget => {
+    blurInput: (relatedTarget) => {
       if (calendar && !calendar.calendarContainer.contains(relatedTarget)) {
         calendar.close();
       }
@@ -74,7 +123,7 @@
         calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") ||
         calendar.calendarContainer
       ).focus();
-    }
+    },
   });
 
   afterUpdate(() => {
@@ -87,24 +136,24 @@
           locale,
           maxDate,
           minDate,
-          mode: $mode
+          mode: $mode,
         },
         base: inputRef,
         input: inputRefTo,
-        dispatch: event => {
+        dispatch: (event) => {
           const detail = { selectedDates: calendar.selectedDates };
 
           if ($range) {
             detail.dateStr = {
               from: inputRef.value,
-              to: inputRefTo.value
+              to: inputRefTo.value,
             };
           } else {
             detail.dateStr = inputRef.value;
           }
 
           return dispatch(event, detail);
-        }
+        },
       });
     }
 
@@ -149,8 +198,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 a2b8b6b0..c3fb01d2 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -1,16 +1,56 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input type
+   * @type {string} [type="text"]
+   */
   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;
+
+  /**
+   * Specify the ARIA label for the calendar icon
+   * @type {string} [iconDescription=""]
+   */
   export let iconDescription = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   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;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext, onMount } from "svelte";
@@ -25,7 +65,7 @@
     blurInput,
     openCalendar,
     focusCalendar,
-    inputValue
+    inputValue,
   } = getContext("DatePicker");
 
   add({ id, labelText });
diff --git a/src/Dropdown/Dropdown.Skeleton.svelte b/src/Dropdown/Dropdown.Skeleton.svelte
index a7202976..b7bd439a 100644
--- a/src/Dropdown/Dropdown.Skeleton.svelte
+++ b/src/Dropdown/Dropdown.Skeleton.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to use the inline variant
+   * @type {boolean} [inline=false]
+   */
   export let inline = false;
 </script>
 
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 399e66a6..4082a39f 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -1,21 +1,116 @@
 <script>
-  export let selectedIndex = -1;
-  export let open = false;
-  export let inline = false;
-  export let light = false;
-  export let disabled = false;
-  export let invalid = false;
+  /**
+   * @typedef {string} DropdownItemId
+   * @typedef {string} DropdownItemText
+   * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
+   */
+
+  /**
+   * Set the dropdown items
+   * @type {DropdownItem[]} [items=[]]
+   */
   export let items = [];
-  export let itemToString = item => item.text || item.id;
-  export let type = "default"; // "default" | "inline"
-  export let size = undefined; // "sm" | "lg" | "xl"
-  export let id = "ccs-" + Math.random().toString(36);
-  export let name = undefined;
-  export let invalidText = "";
-  export let helperText = "";
-  export let label = undefined;
+
+  /**
+   * Override the display of a dropdown item
+   * @type {(item: DropdownItem) => string;} [itemToString = (item: DropdownItem) => DropdownItemText | DropdownItemId;]
+   */
+  export let itemToString = (item) => item.text || item.id;
+
+  /**
+   * Specify the selected item index
+   * @type {number} [selectedIndex=-1]
+   */
+  export let selectedIndex = -1;
+
+  /**
+   * Specify the type of dropdown
+   * @type {"default" | "inline"} [type="default"]
+   */
+  export let type = "default";
+
+  /**
+   * Specify the size of the dropdown field
+   * @type {"sm" | "lg" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set to `true` to open the dropdown
+   * @type {boolean} [open=false]
+   */
+  export let open = false;
+
+  /**
+   * Set to `true` to use the inline variant
+   * @type {boolean} [inline=false]
+   */
+  export let inline = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
+  /**
+   * Set to `true` to disable the dropdown
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Specify the title text
+   * @type {string} [titleText=""]
+   */
   export let titleText = "";
+
+  /**
+   * 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 = "";
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
+  export let helperText = "";
+
+  /**
+   * Specify the list box label
+   * @type {string} [label]
+   */
+  export let label = undefined;
+
+  /**
+   * Override the default translation ids
+   * @type {(id: any) => string;} [translateWithId]
+   */
   export let translateWithId = undefined;
+
+  /**
+   * Set an id for the list box component
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the list box
+   * @type {string} [name]
+   */
+  export let name = undefined;
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
   export let ref = null;
 
   import { setContext } from "svelte";
@@ -24,7 +119,7 @@
     ListBox,
     ListBoxMenu,
     ListBoxMenuIcon,
-    ListBoxMenuItem
+    ListBoxMenuItem,
   } from "../ListBox";
 
   let selectedId = undefined;
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 56bd042d..c1223a34 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -1,14 +1,70 @@
 <script>
-  export let status = "uploading"; // "uploading" | "edit" | "complete"
+  /**
+   * Specify the file uploader status
+   * @type {"uploading" | "edit" | "complete"} [status="uploading"]
+   */
+  export let status = "uploading";
+
+  /**
+   * Specify the accepted file types
+   * @type {string[]} [accept=[]]
+   */
   export let accept = [];
+
+  /**
+   * Obtain the uploaded file names
+   * @type {string[]} [files=[]]
+   */
   export let files = [];
-  export const clearFiles = () => (files = []);
-  export let buttonLabel = "";
-  export let iconDescription = "Provide icon description";
-  export let kind = "primary";
-  export let labelDescription = "";
-  export let labelTitle = "";
+
+  /**
+   * Set to `true` to allow multiple files
+   * @type {boolean} [multiple=false]
+   */
   export let multiple = false;
+
+  /**
+   * Override the default behavior of clearing the array of uploaded files
+   * @type {() => any;} [clearFiles = () => void;]
+   */
+  export const clearFiles = () => {
+    files = [];
+  };
+
+  /**
+   * Specify the label description
+   * @type {string} [labelDescription=""]
+   */
+  export let labelDescription = "";
+
+  /**
+   * Specify the label title
+   * @type {string} [labelTitle=""]
+   */
+  export let labelTitle = "";
+
+  /**
+   * Specify the kind of file uploader button
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
+   */
+  export let kind = "primary";
+
+  /**
+   * Specify the button label
+   * @type {string} [buttonLabel=""]
+   */
+  export let buttonLabel = "";
+
+  /**
+   * Specify the ARIA label used for the status icons
+   * @type {string} [iconDescription=""]
+   */
+  export let iconDescription = "Provide icon description";
+
+  /**
+   * Specify a name attribute for the file button uploader input
+   * @type {string} [name]
+   */
   export let name = "";
 
   import { createEventDispatcher, afterUpdate } from "svelte";
@@ -23,7 +79,10 @@
     if (files.length > prevFiles.length) {
       dispatch("add", files);
     } else {
-      dispatch("remove", prevFiles.filter(_ => !files.includes(_)));
+      dispatch(
+        "remove",
+        prevFiles.filter((_) => !files.includes(_))
+      );
     }
 
     prevFiles = [...files];
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index bd4befee..da0db62f 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -1,14 +1,68 @@
 <script>
+  /**
+   * Specify the accepted file types
+   * @type {string[]} [accept=[]]
+   */
   export let accept = [];
+
+  /**
+   * Set to `true` to allow multiple files
+   * @type {boolean} [multiple=false]
+   */
   export let multiple = false;
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set to `true` to disable label changes
+   * @type {boolean} [disableLabelChanges=false]
+   */
   export let disableLabelChanges = false;
-  export let kind = "primary"; // Button.kind
+
+  /**
+   * Specify the kind of file uploader button
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
+   */
+  export let kind = "primary";
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText="Add file"]
+   */
   export let labelText = "Add file";
+
+  /**
+   * Specify the label role
+   * @type {string} [role="button"]
+   */
   export let role = "button";
+
+  /**
+   * Specify `tabindex` attribute
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name]
+   */
   export let name = "";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 </script>
 
diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte
index 9b61416d..9a21738b 100644
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@@ -1,13 +1,67 @@
 <script>
+  /**
+   * @typedef {string[]} Files
+   */
+
+  /**
+   * Specify the accepted file types
+   * @type {string[]} [accept=[]]
+   */
   export let accept = [];
-  export let disabled = false;
+
+  /**
+   * Set to `true` to allow multiple files
+   * @type {boolean} [multiple=false]
+   */
   export let multiple = false;
-  export let validateFiles = files => files;
+
+  /**
+   * Override the default behavior of validating uploaded files
+   * The default behavior does not validate files
+   * @type {(files: Files) => Files} [validateFiles = (files: Files) => Files;]
+   */
+  export let validateFiles = (files) => files;
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText="Add file"]
+   */
   export let labelText = "Add file";
+
+  /**
+   * Specify the `role` attribute of the drop container
+   * @type {string} [role="button"]
+   */
   export let role = "button";
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Specify `tabindex` attribute
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name=""]
+   */
   export let name = "";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
diff --git a/src/FileUploader/FileUploaderItem.svelte b/src/FileUploader/FileUploaderItem.svelte
index 958a25ce..fbb9294e 100644
--- a/src/FileUploader/FileUploaderItem.svelte
+++ b/src/FileUploader/FileUploaderItem.svelte
@@ -1,12 +1,46 @@
 <script>
-  export let errorBody = "";
-  export let errorSubject = "";
-  export let iconDescription = "";
-  export let id = "ccs-" + Math.random().toString(36);
-  export let invalid = false;
-  export let name = "";
+  /**
+   * Specify the file uploader status
+   * @type {"uploading" | "edit" | "complete"} [status="uploading"]
+   */
   export let status = "uploading";
 
+  /**
+   * Specify 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;
+
+  /**
+   * Specify the error subject text
+   * @type {string} [errorSubject=""]
+   */
+  export let errorSubject = "";
+
+  /**
+   * Specify the error body text
+   * @type {string} [errorBody=""]
+   */
+  export let errorBody = "";
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify the file uploader name
+   * @type {string} [name=""]
+   */
+  export let name = "";
+
   import { createEventDispatcher } from "svelte";
   import Filename from "./Filename.svelte";
 
@@ -14,6 +48,7 @@
 </script>
 
 <span
+  {id}
   class:bx--file__selected-file={true}
   class:bx--file__selected-file--invalid={invalid}
   {...$$restProps}
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index f75674fc..c1f8f41a 100644
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@@ -1,7 +1,21 @@
 <script>
+  /**
+   * Specify the file name status
+   * @type {"uploading" | "edit" | "complete"} [status="uploading"]
+   */
+  export let status = "uploading";
+
+  /**
+   * Specify 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 f4ee9b1a..2d89e4dc 100644
--- a/src/FormGroup/FormGroup.svelte
+++ b/src/FormGroup/FormGroup.svelte
@@ -1,8 +1,13 @@
 <script>
-  export let legendText = "";
-  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 = "";
 </script>
 
 <fieldset
diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte
index c2341a5f..81ce3e08 100644
--- a/src/FormLabel/FormLabel.svelte
+++ b/src/FormLabel/FormLabel.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set an id to be used by the label element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index f98225a7..1c476c16 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -1,37 +1,61 @@
 <script>
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
+   * @type {boolean} [as=false]
+   */
   export let as = false;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @type {boolean} [noGutter=false]
+   */
   export let noGutter = false;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @type {boolean} [noGutterLeft=false]
+   */
   export let noGutterLeft = false;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @type {boolean} [noGutterRight=false]
+   */
   export let noGutterRight = false;
 
   /**
-   * Aspect ratio of the column
-   * @type {("2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1")} [aspectRatio]
+   * Specify the aspect ratio of the column
+   * @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"} [aspectRatio]
    */
   export let aspectRatio = undefined;
 
   /**
-   * @typedef {(boolean | number)} ColumnSize
-   * @typedef {Object} ColumnSizeDescriptor
-   * @property {ColumnSize} [ColumnSizeDescriptor.span] Column size
-   * @property {number} [ColumnSizeDescriptor.offset] Column offset
+   * @typedef {boolean | number} ColumnSize
+   * @typedef {{span?: ColumnSize: offset: number;}} ColumnSizeDescriptor
+   * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
    */
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [sm] */
+  /** @type {ColumnBreakpoint} [sm] */
   export let sm = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [md] */
+  /** @type {ColumnBreakpoint} [md] */
   export let md = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [lg] */
+  /** @type {ColumnBreakpoint} [lg] */
   export let lg = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [xlg] */
+  /** @type {ColumnBreakpoint} [xlg] */
   export let xlg = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [max] */
+  /** @type {ColumnBreakpoint} [max] */
   export let max = undefined;
 
+  /**
+   * Column breakpoints
+   * @constant
+   * @type {string[]}
+   */
   const breakpoints = ["sm", "md", "lg", "xlg", "max"];
 
   $: columnClass = [sm, md, lg, xlg, max]
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index dc702154..fbc33d20 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -1,10 +1,45 @@
 <script>
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
+   * @type {boolean} [as=false]
+   */
   export let as = false;
+
+  /**
+   * Set to `true` to use the condensed variant
+   * @type {boolean} [condensed=false]
+   */
   export let condensed = false;
+
+  /**
+   * Set to `true` to use the narrow variant
+   * @type {boolean} [narrow=false]
+   */
   export let narrow = false;
+
+  /**
+   * Set to `true` to use the fullWidth variant
+   * @type {boolean} [fullWidth=false]
+   */
   export let fullWidth = false;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @type {boolean} [noGutter=false]
+   */
   export let noGutter = false;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @type {boolean} [noGutterLeft=false]
+   */
   export let noGutterLeft = false;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @type {boolean} [noGutterRight=false]
+   */
   export let noGutterRight = false;
 
   $: props = {
diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte
index 18074cff..d38cce38 100644
--- a/src/Grid/Row.svelte
+++ b/src/Grid/Row.svelte
@@ -1,9 +1,39 @@
 <script>
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
+   * @type {boolean} [as=false]
+   */
   export let as = false;
+
+  /**
+   * Set to `true` to use the condensed variant
+   * @type {boolean} [condensed=false]
+   */
   export let condensed = false;
+
+  /**
+   * Set to `true` to use the narrow variant
+   * @type {boolean} [narrow=false]
+   */
   export let narrow = false;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @type {boolean} [noGutter=false]
+   */
   export let noGutter = false;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @type {boolean} [noGutterLeft=false]
+   */
   export let noGutterLeft = false;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @type {boolean} [noGutterRight=false]
+   */
   export let noGutterRight = false;
 
   $: props = {
diff --git a/src/Icon/Icon.Skeleton.svelte b/src/Icon/Icon.Skeleton.svelte
index 8c221a93..00ba20c8 100644
--- a/src/Icon/Icon.Skeleton.svelte
+++ b/src/Icon/Icon.Skeleton.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set the size of the icon
+   * @type {number} [size=16]
+   */
   export let size = 16;
 </script>
 
diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte
index fc724742..23058e6c 100644
--- a/src/Icon/Icon.svelte
+++ b/src/Icon/Icon.svelte
@@ -1,5 +1,15 @@
 <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").default} [render]
+   */
   export let render = undefined;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @type {boolean} [skeleton=false]
+   */
   export let skeleton = false;
 
   import IconSkeleton from "./Icon.Skeleton.svelte";
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index 2853e872..4a390439 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -1,7 +1,26 @@
 <script>
-  export let status = "active"; // "active" | "inactive" | "finished" | "error"
+  /**
+   * Set the loading status
+   * @type {"active" | "inactive" | "finished" | "error"} [status="active"]
+   */
+  export let status = "active";
+
+  /**
+   * Set the loading description
+   * @type {string} [description]
+   */
   export let description = undefined;
+
+  /**
+   * Specify 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/Link/Link.svelte b/src/Link/Link.svelte
index 3f2b398b..ea75822e 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Set to `true` to use the inline variant
+   * @type {boolean} [inline=false]
+   */
   export let inline = false;
+
+  /**
+   * Set to `true` to disable the checkbox
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @type {null | HTMLAnchorElement | HTMLParagraphElement} [ref=null]
+   */
   export let ref = null;
 </script>
 
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index 0a8b55b4..abeef665 100644
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@@ -1,10 +1,44 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
-  export let type = "default"; // "default" | "inline"
+  /**
+   * Set the size of the list box
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set the type of the list box
+   * @type {"default" | "inline"} [type="default"]
+   */
+  export let type = "default";
+
+  /**
+   * Set to `true` to open the list box
+   * @type {boolean} [open=false]
+   */
   export let open = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @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>
 
@@ -21,7 +55,7 @@
   class="{size && `bx--list-box--${size}`}
   {$$restProps.class}"
   on:keydown
-  on:keydown={e => {
+  on:keydown={(e) => {
     if (e.key === 'Escape') {
       e.stopPropagation();
     }
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index 60a94ce2..81d71033 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -1,17 +1,56 @@
 <script>
+  /**
+   * Set to `true` to disable the list box field
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the role attribute
+   * @type {string} [role="combobox"]
+   */
   export let role = "combobox";
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="-1"]
+   */
   export let tabindex = "-1";
+
+  /**
+   * @typedef {"close" | "open"} ListBoxFieldTranslationId
+   */
+
+  /**
+   * Default translation ids
+   * @constant
+   * @type {{ close: "close"; open: "open"; }}
+   */
   export const translationIds = { close: "close", open: "open" };
-  export let translateWithId = id => defaultTranslations[id];
+
+  /**
+   * Override the default translation ids
+   * @type {(id: ListBoxFieldTranslationId) => string;} [translateWithId = (id) => string;]
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
+
+  /**
+   * Set an id for the top-level element
+   * @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";
 
   const defaultTranslations = {
     [translationIds.close]: "Close menu",
-    [translationIds.open]: "Open menu"
+    [translationIds.open]: "Open menu",
   };
   const ctx = getContext("MultiSelect");
 
diff --git a/src/ListBox/ListBoxMenu.svelte b/src/ListBox/ListBoxMenu.svelte
index 4fcda930..8c0e01fd 100644
--- a/src/ListBox/ListBoxMenu.svelte
+++ b/src/ListBox/ListBoxMenu.svelte
@@ -1,12 +1,14 @@
 <script>
+  /**
+   * Set an id for the top-level element
+   * @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/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index bdff9302..5ccd3fc4 100644
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@@ -1,13 +1,32 @@
 <script>
-  export const translationIds = { close: "close", open: "open" };
+  /**
+   * Set to `true` to open the list box menu icon
+   * @type {boolean} [open=false]
+   */
   export let open = false;
-  export let translateWithId = id => defaultTranslations[id];
+
+  /**
+   * Default translation ids
+   * @constant
+   * @type {{ close: "close"; open: "open" }}
+   */
+  export const translationIds = { close: "close", open: "open" };
+
+  /**
+   * @typedef {"close" | "open"} ListBoxMenuIconTranslationId
+   */
+
+  /**
+   * Override the default translation ids
+   * @type {(id: ListBoxMenuIconTranslationId) => string;} [translateWithId = (id) => string;]
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
 
   const defaultTranslations = {
     [translationIds.close]: "Close menu",
-    [translationIds.open]: "Open menu"
+    [translationIds.open]: "Open menu",
   };
 
   $: description = open ? translateWithId("close") : translateWithId("open");
diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index 3829f3c1..da734016 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` to enable the active state
+   * @type {boolean} [active=false]
+   */
   export let active = false;
+
+  /**
+   * Set to `true` to enable the highlighted state
+   * @type {boolean} [highlighted=false]
+   */
   export let highlighted = false;
 </script>
 
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index 0acbd4a2..05961442 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -1,11 +1,40 @@
 <script>
+  /**
+   * Specify the number of selected items
+   * @type {*} [selectionCount]
+   */
+  export let selectionCount = undefined;
+
+  /**
+   * Set to `true` to disable the list box selection
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
+   */
+
+  /**
+   * Default translation ids
+   * @constant
+   * @type {{ clearAll: "clearAll"; clearSelection: "clearSelection" }}
+   */
   export const translationIds = {
     clearAll: "clearAll",
-    clearSelection: "clearSelection"
+    clearSelection: "clearSelection",
   };
-  export let disabled = false;
-  export let selectionCount = undefined;
-  export let translateWithId = id => defaultTranslations[id];
+
+  /**
+   * Override the default translation ids
+   * @type {(id: ListBoxSelectionTranslationId) => string;} [translateWithId = (id) => string;]
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import { createEventDispatcher, getContext } from "svelte";
@@ -13,7 +42,7 @@
 
   const defaultTranslations = {
     [translationIds.clearAll]: "Clear all selected items",
-    [translationIds.clearSelection]: "Clear selected item"
+    [translationIds.clearSelection]: "Clear selected item",
   };
   const dispatch = createEventDispatcher();
   const ctx = getContext("MultiSelect");
@@ -37,12 +66,12 @@
   class:bx--tag--filter={selectionCount}
   class:bx--list-box__selection--multi={selectionCount}
   {...$$restProps}
-  on:click|preventDefault|stopPropagation={e => {
+  on:click|preventDefault|stopPropagation={(e) => {
     if (!disabled) {
       dispatch('clear', e);
     }
   }}
-  on:keydown|stopPropagation={e => {
+  on:keydown|stopPropagation={(e) => {
     if (!disabled && e.key === 'Enter') {
       dispatch('clear', e);
     }
diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte
index 49890d8c..ebaec926 100644
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@@ -1,8 +1,32 @@
 <script>
+  /**
+   * Set to `true` to use the small variant
+   * @type {boolean} [small=false]
+   */
   export let small = false;
+
+  /**
+   * Set to `false` to disable the active state
+   * @type {boolean} [active=true]
+   */
   export let active = true;
+
+  /**
+   * Set to `false` to disable the overlay
+   * @type {boolean} [withOverlay=false]
+   */
   export let withOverlay = true;
+
+  /**
+   * Specify the label description
+   * @type {string} [description="Active loading indicator"]
+   */
   export let description = "Active loading indicator";
+
+  /**
+   * Set an id for the label element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 
   $: spinnerRadius = small ? "26.8125" : "37.5";
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 5f385879..7afc6c68 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -1,20 +1,104 @@
 <script>
-  export let size = undefined; // "xs" | "sm" | "lg"
+  /**
+   * Set the size of the modal
+   * @type {"xs" | "sm" | "lg"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set to `true` to open the modal
+   * @type {boolean} [open=false]
+   */
   export let open = false;
-  export let passiveModal = false;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @type {boolean} [danger=false]
+   */
   export let danger = false;
-  export let hasForm = false;
-  export let hasScrollingContent = false;
-  export let primaryButtonDisabled = false;
-  export let shouldSubmitOnEnter = true;
-  export let modalAriaLabel = undefined;
+
+  /**
+   * Set to `true` to use the passive variant
+   * @type {boolean} [passiveModal=false]
+   */
+  export let passiveModal = false;
+
+  /**
+   * Specify the modal heading
+   * @type {string} [modalHeading]
+   */
   export let modalHeading = undefined;
+
+  /**
+   * Specify the modal label
+   * @type {string} [modalLabel]
+   */
   export let modalLabel = undefined;
+
+  /**
+   * Specify the ARIA label for the modal
+   * @type {string} [modalAriaLabel]
+   */
+  export let modalAriaLabel = undefined;
+
+  /**
+   * Specify the ARIA label for the close icon
+   * @type {string} [iconDescription="Close the modal"]
+   */
   export let iconDescription = "Close the modal";
+
+  /**
+   * Set to `true` if the modal contains form elements
+   * @type {boolean} [hasForm=false]
+   */
+  export let hasForm = false;
+
+  /**
+   * Set to `true` if the modal contains scrolling content
+   * @type {boolean} [hasScrollingContent=false]
+   */
+  export let hasScrollingContent = false;
+
+  /**
+   * Specify the primary button text
+   * @type {string} [primaryButtonText=""]
+   */
   export let primaryButtonText = "";
+
+  /**
+   * Set to `true` to disable the primary button
+   * @type {boolean} [primaryButtonDisabled=false]
+   */
+  export let primaryButtonDisabled = false;
+
+  /**
+   * Set to `true` for the primary button to be triggered when pressing "Enter"
+   * @type {boolean} [shouldSubmitOnEnter=true]
+   */
+  export let shouldSubmitOnEnter = true;
+
+  /**
+   * Specify the secondary button text
+   * @type {string} [secondaryButtonText=""]
+   */
   export let secondaryButtonText = "";
+
+  /**
+   * Specify a selector to be focused when opening the modal
+   * @type {string} [selectorPrimaryFocus="[data-modal-primary-focus]"]
+   */
   export let selectorPrimaryFocus = "[data-modal-primary-focus]";
+
+  /**
+   * Set an id for the top-level element
+   * @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 { createEventDispatcher, onMount, afterUpdate } from "svelte";
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 27e4cbfd..1e3a0993 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -1,31 +1,157 @@
 <script>
-  export let size = undefined; // "sm" | "lg" | "xl"
-  export let type = "default"; // "default" | "inline"
-  export let selectionFeedback = "top-after-reopen"; // "top" | "fixed" | "top-after-reopen"
+  /**
+   * @typedef {string} MultiSelectItemId
+   * @typedef {string} MultiSelectItemText
+   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
+   */
+
+  /**
+   * Set the multiselect items
+   * @type {MultiSelectItem[]} [items=[]]
+   */
+  export let items = [];
+
+  /**
+   * Override the display of a multiselect item
+   * @type {(item: MultiSelectItem) => string;} [itemToString = (item: MultiSelectItem) =>  MultiSelectItemText | MultiSelectItemId;]
+   */
+  export let itemToString = (item) => item.text || item.id;
+
+  /**
+   * Set the selected ids
+   * @type {MultiSelectItemId[]} [selectedIds=[]]
+   */
+  export let selectedIds = [];
+
+  /**
+   * Specify the multiselect value
+   * @type {string} [value=""]
+   */
+  export let value = "";
+
+  /**
+   * Set the size of the combobox
+   * @type {"sm" | "lg" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the type of multiselect
+   * @type {"default" | "inline"} [type="default"]
+   */
+  export let type = "default";
+
+  /**
+   * Specify the selection feedback after selecting items
+   * @type {"top" | "fixed" | "top-after-reopen"} [selectionFeedback="top-after-reopen"]
+   */
+  export let selectionFeedback = "top-after-reopen";
+
+  /**
+   * Set to `true` to disable the dropdown
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set to `true` to filter items
+   * @type {boolean} [filterable=false]
+   */
   export let filterable = false;
+
+  /**
+   * Override the filtering logic
+   * The default filtering is an exact string comparison
+   * @type {(item: MultiSelectItem, value: string) => string;} [filterItem = ((item: MultiSelectItem, value: string) => string;)]
+   */
   export let filterItem = (item, value) =>
     item.text.toLowerCase().includes(value.toLowerCase());
-  export let id = "ccs-" + Math.random().toString(36);
-  export let name = undefined;
-  export let invalid = false;
-  export let invalidText = "";
-  export let helperText = "";
-  export let items = [];
-  export let itemToString = item => item.text || item.id;
-  export let label = "";
-  export let light = false;
-  export let locale = "en";
+
+  /**
+   * Set to `true` to open the dropdown
+   * @type {boolean} [open=false]
+   */
   export let open = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
+  /**
+   * Specify the locale
+   * @type {string} [locale="en"]
+   */
+  export let locale = "en";
+
+  /**
+   * Specify the placeholder text
+   * @type {string} [placeholder=""]
+   */
   export let placeholder = "";
-  export let selectedIds = [];
+
+  /**
+   * Override the sorting logic
+   * The default sorting compare the item text value
+   * @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
+   */
   export let sortItem = (a, b) =>
     a.text.localeCompare(b.text, locale, { numeric: true });
-  export let titleText = "";
+
+  /**
+   * Override the default translation ids
+   * @type {(id: any) => string;} [translateWithId]
+   */
   export let translateWithId = undefined;
 
+  /**
+   * Specify the title text
+   * @type {string} [titleText=""]
+   */
+  export let titleText = "";
+
+  /**
+   * Set to `true` to pass the item to `itemToString` in the checkbox
+   * @type {boolean} [useTitleInItem=false]
+   */
   export let useTitleInItem = false;
-  export let value = "";
+
+  /**
+   * 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 = "";
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
+  export let helperText = "";
+
+  /**
+   * Specify the list box label
+   * @type {string} [label]
+   */
+  export let label = "";
+
+  /**
+   * Set an id for the list box component
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the select
+   * @type {string} [name]
+   */
+  export let name = undefined;
 
   import { afterUpdate, setContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
@@ -36,7 +162,7 @@
     ListBoxMenu,
     ListBoxMenuIcon,
     ListBoxMenuItem,
-    ListBoxSelection
+    ListBoxSelection,
   } from "../ListBox";
 
   let multiSelectRef = null;
@@ -59,7 +185,7 @@
           selectionRef = ref;
           break;
       }
-    }
+    },
   });
 
   function change(direction) {
@@ -77,7 +203,7 @@
   function sort() {
     return [
       ...(checked.length > 1 ? checked.sort(sortItem) : checked),
-      ...unchecked.sort(sortItem)
+      ...unchecked.sort(sortItem),
     ];
   }
 
@@ -106,13 +232,13 @@
   $: menuId = `menu-${id}`;
   $: inline = type === "inline";
   $: ariaLabel = $$props["aria-label"] || "Choose an item";
-  $: sortedItems = items.map(item => ({
+  $: sortedItems = items.map((item) => ({
     ...item,
-    checked: selectedIds.includes(item.id)
+    checked: selectedIds.includes(item.id),
   }));
   $: checked = sortedItems.filter(({ checked }) => checked);
   $: unchecked = sortedItems.filter(({ checked }) => !checked);
-  $: filteredItems = sortedItems.filter(item => filterItem(item, value));
+  $: filteredItems = sortedItems.filter((item) => filterItem(item, value));
   $: highlightedId = sortedItems[highlightedIndex]
     ? sortedItems[highlightedIndex].id
     : undefined;
@@ -210,9 +336,9 @@
         <ListBoxSelection
           selectionCount={checked.length}
           on:clear={() => {
-            sortedItems = sortedItems.map(item => ({
+            sortedItems = sortedItems.map((item) => ({
               ...item,
-              checked: false
+              checked: false,
             }));
             fieldRef.blur();
           }}
@@ -294,7 +420,7 @@
             active={item.checked}
             highlighted={highlightedIndex === i}
             on:click={() => {
-              sortedItems = sortedItems.map(_ =>
+              sortedItems = sortedItems.map((_) =>
                 _.id === item.id ? { ..._, checked: !_.checked } : _
               );
               fieldRef.focus();
diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte
index 5ce91602..59e375a5 100644
--- a/src/Notification/InlineNotification.svelte
+++ b/src/Notification/InlineNotification.svelte
@@ -1,13 +1,52 @@
 <script>
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"} [notificationType="toast"]
+   */
   export let notificationType = "inline";
-  export let kind = "error"; // "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"
-  export let role = "alert";
-  export let title = "provide a title";
-  export let subtitle = "";
-  export let iconDescription = "closes notification";
+
+  /**
+   * Specify the kind of notification
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
+   */
+  export let kind = "error";
+
+  /**
+   * Set to `true` to use the low contrast variant
+   * @type {boolean} [lowContrast=false]
+   */
   export let lowContrast = false;
+
+  /**
+   * Set the `role` attribute
+   * @type {string} [role="alert"]
+   */
+  export let role = "alert";
+
+  /**
+   * Specify the title text
+   * @type {string} [title="Title"]
+   */
+  export let title = "Title";
+
+  /**
+   * Specify the subtitle text
+   * @type {string} [subtitle=""]
+   */
+  export let subtitle = "";
+
+  /**
+   * Set to `true` to hide the close button
+   * @type {boolean} [hideCloseButton=false]
+   */
   export let hideCloseButton = false;
 
+  /**
+   * Specify the ARIA label for the icon
+   * @type {string} [iconDescription="Closes notification"]
+   */
+  export let iconDescription = "Closes notification";
+
   import { createEventDispatcher } from "svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
   import NotificationTextDetails from "./NotificationTextDetails.svelte";
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index c9ec5ffb..205cda63 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -1,17 +1,34 @@
 <script>
-  export let notificationType = "toast"; // "toast" | "inline"
-  export let iconDescription = "close icon";
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"} [notificationType="toast"]
+   */
+  export let notificationType = "toast";
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [renderIcon]
+   */
   export let renderIcon = Close20;
+
+  /**
+   * Specify the title of the icon
+   */
   export let title = undefined;
-  export let type = "button";
+
+  /**
+   * Specify the ARIA label for the icon
+   * @type {string} [iconDescription="Close icon"]
+   */
+  export let iconDescription = "Close icon";
 
   import Close20 from "carbon-icons-svelte/lib/Close20";
 </script>
 
 <button
+  type="button"
   aria-label={iconDescription}
   title={iconDescription}
-  {type}
   class:bx--toast-notification__close-button={notificationType === 'toast'}
   class:bx--inline-notification__close-button={notificationType === 'inline'}
   {...$$restProps}
diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte
index 220efc47..0fe208c2 100644
--- a/src/Notification/NotificationIcon.svelte
+++ b/src/Notification/NotificationIcon.svelte
@@ -1,7 +1,21 @@
 <script>
+  /**
+   * Specify the kind of notification icon
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
+   */
   export let kind = "error";
+
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"} [notificationType="toast"]
+   */
   export let notificationType = "toast";
-  export let iconDescription = "closes notification";
+
+  /**
+   * Specify the ARIA label for the icon
+   * @type {string} [iconDescription="Closes notification"]
+   */
+  export let iconDescription = "Closes notification";
 
   import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
   import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20";
@@ -16,7 +30,7 @@
     info: InformationFilled20,
     success: CheckmarkFilled20,
     warning: WarningFilled20,
-    "warning-alt": WarningAltFilled20
+    "warning-alt": WarningAltFilled20,
   };
 </script>
 
diff --git a/src/Notification/NotificationTextDetails.svelte b/src/Notification/NotificationTextDetails.svelte
index 31162d05..afd4ff00 100644
--- a/src/Notification/NotificationTextDetails.svelte
+++ b/src/Notification/NotificationTextDetails.svelte
@@ -1,8 +1,27 @@
 <script>
-  export let notificationType = "toast"; // "toast" | "inline"
-  export let title = "title";
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"} [notificationType="toast"]
+   */
+  export let notificationType = "toast";
+
+  /**
+   * Specify the title text
+   * @type {string} [title="Title"]
+   */
+  export let title = "Title";
+
+  /**
+   * Specify the subtitle text
+   * @type {string} [subtitle=""]
+   */
   export let subtitle = "";
-  export let caption = "caption";
+
+  /**
+   * Specify the caption text
+   * @type {string} [caption="Caption"]
+   */
+  export let caption = "Caption";
 </script>
 
 {#if notificationType === 'toast'}
diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index 127216fb..7bd38016 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -1,14 +1,63 @@
 <script>
-  export let iconDescription = "closes notification";
-  export let notificationType = "toast"; // "toast" | "inline"
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"} [notificationType="toast"]
+   */
+  export let notificationType = "toast";
+
+  /**
+   * Specify the kind of notification
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
+   */
   export let kind = "error";
-  export let hideCloseButton = false;
+
+  /**
+   * Set to `true` to use the low contrast variant
+   * @type {boolean} [lowContrast=false]
+   */
   export let lowContrast = false;
+
+  /**
+   * Set the timeout duration (ms) to hide the notification after closing it
+   * @type {number} [timeout=0]
+   */
   export let timeout = 0;
+
+  /**
+   * Set the `role` attribute
+   * @type {string} [role="alert"]
+   */
   export let role = "alert";
-  export let title = "provide a title";
+
+  /**
+   * Specify the title text
+   * @type {string} [title="Title"]
+   */
+  export let title = "Title";
+
+  /**
+   * Specify the subtitle text
+   * @type {string} [subtitle=""]
+   */
   export let subtitle = "";
-  export let caption = "provide a caption";
+
+  /**
+   * Specify the caption text
+   * @type {string} [caption="Caption"]
+   */
+  export let caption = "Caption";
+
+  /**
+   * Specify the ARIA label for the icon
+   * @type {string} [iconDescription="Closes notification"]
+   */
+  export let iconDescription = "Closes notification";
+
+  /**
+   * Set to `true` to hide the close button
+   * @type {boolean} [hideCloseButton=false]
+   */
+  export let hideCloseButton = false;
 
   import { createEventDispatcher, onMount } from "svelte";
   import NotificationButton from "./NotificationButton.svelte";
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 2d512837..7fb7cb42 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -1,29 +1,140 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
+  
+
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input value
+   * @type {string} [value=""]
+   */
   export let value = "";
+
+  /**
+   * Specify the step increment
+   * @type {number} [step=1]
+   */
   export let step = 1;
+
+  /**
+   * Specify the maximum value
+   * @type {number} [max]
+   */
   export let max = undefined;
+
+  /**
+   * Specify the minimum value
+   * @type {number} [min]
+   */
   export let min = undefined;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` for the input to be read-only
+   * @type {boolean} [readonly=false]
+   */
   export let readonly = false;
+
+  /**
+   * Set to `true` to enable the mobile variant
+   * @type {boolean} [mobile=false]
+   */
   export let mobile = false;
+
+  /**
+   * Set to `true` to allow for an empty value
+   * @type {boolean} [allowEmpty=false]
+   */
   export let allowEmpty = false;
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the ARIA label for the increment icons
+   * @type {string} [iconDescription=""]
+   */
   export let iconDescription = "";
-  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 = "";
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
   export let helperText = "";
+
+  /**
+   * Specify the label text
+   * @type {string} [label=""]
+   */
   export let label = "";
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
-  export let ref = null;
-  export let translateWithId = id => defaultTranslations[id];
+
+  /**
+   * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   */
+  
+  /**
+   * Override the default translation ids
+   * @type {(id: NumberInputTranslationId) => string;} [translateWithId = (id: NumberInputTranslationId) => string;]
+   */
+  export let translateWithId = (id) => defaultTranslations[id];
+
+  /**
+   * Default translation ids
+   * @constant
+   * @type {{ increment: "increment"; decrement: "decrement" }}
+   */
   export const translationIds = {
     increment: "increment",
-    decrement: "decrement"
+    decrement: "decrement",
   };
 
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name]
+   */
+  export let name = undefined;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
+  export let ref = null;
+
   import { createEventDispatcher, afterUpdate } from "svelte";
   import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
   import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
@@ -31,7 +142,7 @@
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
-    [translationIds.decrement]: "Decrement number"
+    [translationIds.decrement]: "Decrement number",
   };
 
   const dispatch = createEventDispatcher();
diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte
index 023ef81a..f4472260 100644
--- a/src/OrderedList/OrderedList.svelte
+++ b/src/OrderedList/OrderedList.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to use the nested variant
+   * @type {boolean} [nested=false]
+   */
   export let nested = false;
 </script>
 
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 2072ca06..f1631530 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -1,15 +1,58 @@
 <script>
+  /**
+   * Specify the direction of the overflow menu relative to the button
+   * @type {"top" | "bottom"} [direction="bottom"]
+   */
+  export let direction = "bottom";
+
+  /**
+   * Set to `true` to open the menu
+   * @type {boolean} [open=false]
+   */
   export let open = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` to flip the menu relative to the button
+   * @type {boolean} [flipped=false]
+   */
   export let flipped = false;
-  export let direction = "bottom"; // "top" | "bottom"
-  export let tabindex = "0";
-  export let icon = OverflowMenuVertical16;
-  export let iconClass = undefined;
-  export let iconDescription = "Open and close list of options";
-  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify the menu options class
+   * @type {string} [menuOptionsClass]
+   */
   export let menuOptionsClass = undefined;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
+   */
+  export let icon = OverflowMenuVertical16;
+
+  /**
+   * Specify the icon class
+   * @type {string} [iconClass]
+   */
+  export let iconClass = undefined;
+
+  /**
+   * Specify the ARIA label for the icon
+   * @type {string} [iconDescription="Open and close list of options"]
+   */
+  export let iconDescription = "Open and close list of options";
+
+  /**
+   * Set an id for the button element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
   import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
@@ -29,7 +72,7 @@
   setContext("OverflowMenu", {
     focusedId,
     add: ({ id, text, primaryFocus }) => {
-      items.update(_ => {
+      items.update((_) => {
         if (primaryFocus) {
           currentIndex.set(_.length);
         }
@@ -37,10 +80,10 @@
         return [..._, { id, text, primaryFocus, index: _.length }];
       });
     },
-    update: id => {
+    update: (id) => {
       currentId.set(id);
     },
-    change: direction => {
+    change: (direction) => {
       // TODO: skip disabled
       let index = $currentIndex + direction;
 
@@ -51,12 +94,12 @@
       }
 
       currentIndex.set(index);
-    }
+    },
   });
 
   afterUpdate(() => {
     if ($currentId) {
-      const { index, text } = $items.filter(_ => _.id === $currentId)[0];
+      const { index, text } = $items.filter((_) => _.id === $currentId)[0];
       dispatch("close", { index, text });
       open = false;
     }
@@ -117,11 +160,11 @@
 
 <button
   bind:this={buttonRef}
+  tabindex="0"
   aria-haspopup
   aria-expanded={open}
   aria-label={ariaLabel}
   {id}
-  {tabindex}
   class:bx--overflow-menu={true}
   class:bx--overflow-menu--open={open}
   class:bx--overflow-menu--light={light}
@@ -136,7 +179,7 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={e => {
+  on:keydown={(e) => {
     if (open) {
       if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) {
         e.preventDefault();
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 56f478df..84eb6d85 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -1,12 +1,57 @@
 <script>
-  export let danger = false;
-  export let disabled = false;
-  export let hasDivider = false;
-  export let href = "";
-  export let primaryFocus = false;
-  export let requireTitle = true;
+  /**
+   * Specify the item text
+   * Alternatively, use the default slot for a custom element
+   * @type {string} [text="Provide text"]
+   */
   export let text = "Provide text";
+
+  /**
+   * Specify the `href` attribute if the item is a link
+   * @type {string} [href=""]
+   */
+  export let href = "";
+
+  /**
+   * Set to `true` if the item should be focused when opening the menu
+   * @type {boolean} [primaryFocus=false]
+   */
+  export let primaryFocus = false;
+
+  /**
+   * Set to `true` to disable the item
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Set to `true` to include a divider
+   * @type {boolean} [hasDivider=false]
+   */
+  export let hasDivider = false;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @type {boolean} [danger=false]
+   */
+  export let danger = false;
+
+  /**
+   * Set to `false` to omit the button `title` attribute
+   * @type {boolean} [requireTitle=false]
+   */
+  export let requireTitle = true;
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the HTML element
+   * @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext, afterUpdate } from "svelte";
@@ -27,12 +72,13 @@
     title: requireTitle ? text : undefined,
     class: "bx--overflow-menu-options__btn",
     disabled: href ? undefined : disabled,
-    href: href ? href : undefined
+    href: href ? href : undefined,
   };
 </script>
 
 <li
   role="menuitem"
+  {id}
   class:bx--overflow-menu-options__option={true}
   class:bx--overflow-menu--divider={hasDivider}
   class:bx--overflow-menu-options__option--danger={danger}
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index 4047887d..7de4cca2 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -1,19 +1,93 @@
 <script>
+  /**
+   * Specify the current page index
+   * @type {number} [page=1]
+   */
+  export let page = 1;
+
+  /**
+   * Specify the total number of items
+   * @type {number} [total=0]
+   */
   export let totalItems = 0;
+
+  /**
+   * Set to `true` to disable the pagination
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the forward button text
+   * @type {string} [forwardText="Next page"]
+   */
   export let forwardText = "Next page";
+
+  /**
+   * Specify the backward button text
+   * @type {string} [backwardText="Previous page"]
+   */
   export let backwardText = "Previous page";
+
+  /**
+   * Specify the items per page text
+   * @type {string} [itemsPerPageText="Items per page:"]
+   */
+  export let itemsPerPageText = "Items per page:";
+
+  /**
+   * Override the item text
+   * @type {(min: number, max: number) => string;} [itemText = (min: number, max: number) => string;]
+   */
+  export let itemText = (min, max) => `${min}–${max} items`;
+
+  /**
+   * Override the item range text
+   * @type {(min: number, max: number, total: number) => string;} [itemRangeText = (min: number, max: number, total: number) => string;]
+   */
   export let itemRangeText = (min, max, total) =>
     `${min}–${max} of ${total} items`;
-  export let itemsPerPageText = "Items per page:";
-  export let itemText = (min, max) => `${min}–${max} items`;
-  export let page = 1;
+
+  /**
+   * Set to `true` to disable the page input
+   * @type {boolean} [pageInputDisabled=false]
+   */
   export let pageInputDisabled = false;
-  export let pageRangeText = (current, total) => `of ${total} pages`;
+
+  /**
+   * Specify the number of items to display in a page
+   * @type {number} [pageSize=10]
+   */
   export let pageSize = 10;
+
+  /**
+   * Specify the available page sizes
+   * @type {number[]} [pageSizes=[10]]
+   */
   export let pageSizes = [10];
+
+  /**
+   * Set to `true` if the number of pages is unknown
+   * @type {boolean} [pagesUnknown=false]
+   */
   export let pagesUnknown = false;
-  export let pageText = page => `page ${page}`;
+
+  /**
+   * Override the page text
+   * @type {(page: number) => string;} [pageText = (current: number) => string;]
+   */
+  export let pageText = (page) => `page ${page}`;
+
+  /**
+   * Override the page range text
+   * @type {(current: number, total: number) => string;} [pageRangeText = (current: number, total: number) => string;]
+   */
+  export let pageRangeText = (current, total) => `of ${total} pages`;
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24";
@@ -33,7 +107,7 @@
   $: forwardButtonDisabled = disabled || page === totalPages;
 </script>
 
-<div class:bx--pagination={true} {...$$restProps}>
+<div {id} class:bx--pagination={true} {...$$restProps}>
   <div class:bx--pagination__left={true}>
     <label
       id="bx--pagination-select-{id}-count-label"
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index 9463440d..1d05f36f 100644
--- a/src/PaginationNav/PaginationItem.svelte
+++ b/src/PaginationNav/PaginationItem.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the current page index
+   * @type {number} [page=0]
+   */
   export let page = 0;
+
+  /**
+   * Set to `true` to use the active state
+   * @type {boolean} [active=false]
+   */
   export let active = false;
 </script>
 
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index 9c0e8eb0..b9f99b8c 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -1,9 +1,38 @@
 <script>
+  /**
+   * Specify the current page index
+   * @type {number} [page=0]
+   */
   export let page = 0;
+
+  /**
+   * Specify the total number of pages
+   * @type {number} [total=10]
+   */
   export let total = 10;
+
+  /**
+   * Specify the total number of pages to show
+   * @type {number} [shown=10]
+   */
   export let shown = 10;
+
+  /**
+   * Set to `true` to loop the navigation
+   * @type {boolean} [loop=false]
+   */
   export let loop = false;
+
+  /**
+   * Specify the forward button text
+   * @type {string} [forwardText="Next page"]
+   */
   export let forwardText = "Next page";
+
+  /**
+   * Specify the backward button text
+   * @type {string} [backwardText="Next page"]
+   */
   export let backwardText = "Previous page";
 
   import { afterUpdate, createEventDispatcher } from "svelte";
@@ -14,7 +43,13 @@
   import { Button } from "../Button";
 
   const dispatch = createEventDispatcher();
-  const MIN = 4; // minimum items shown
+
+  /**
+   * Minimum number of items to be shown
+   * @constant
+   * @type {4}
+   */
+  const MIN = 4;
 
   afterUpdate(() => {
     dispatch("change", { page });
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index 97f59323..18d1b893 100644
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the pivot start index
+   * @type {number} [fromIndex=0]
+   */
   export let fromIndex = 0;
+
+  /**
+   * Specify the pivot end index
+   * @type {number} [count=0]
+   */
   export let count = 0;
 
   import { createEventDispatcher } from "svelte";
diff --git a/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte b/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
index e05ff064..58519351 100644
--- a/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
@@ -1,4 +1,7 @@
 <script>
+  /**
+   * Set to `true` to use the vertical variant
+   */
   export let vertical = false;
 </script>
 
diff --git a/src/ProgressIndicator/ProgressIndicator.svelte b/src/ProgressIndicator/ProgressIndicator.svelte
index df28350c..5c5a19ad 100644
--- a/src/ProgressIndicator/ProgressIndicator.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.svelte
@@ -1,5 +1,13 @@
 <script>
+  /**
+   * Specify the current step index
+   * @type {number} [currentIndex=0]
+   */
   export let currentIndex = 0;
+
+  /**
+   * Set to `true` to use the vertical variant
+   */
   export let vertical = false;
 
   import { createEventDispatcher, setContext } from "svelte";
@@ -7,27 +15,27 @@
 
   const dispatch = createEventDispatcher();
   const steps = writable([]);
-  const stepsById = derived(steps, $ =>
+  const stepsById = derived(steps, ($) =>
     $.reduce((a, c) => ({ ...a, [c.id]: c }), {})
   );
 
   setContext("ProgressIndicator", {
     steps,
     stepsById,
-    add: step => {
-      steps.update(_ => [
+    add: (step) => {
+      steps.update((_) => [
         ..._,
         {
           ...step,
           index: _.length,
           current: _.length === currentIndex,
-          complete: _.length <= currentIndex
-        }
+          complete: _.length <= currentIndex,
+        },
       ]);
     },
-    change: index => {
+    change: (index) => {
       dispatch("change", index);
-    }
+    },
   });
 </script>
 
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 31de5b24..bf2fec01 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -1,11 +1,50 @@
 <script>
+  /**
+   * Set to `true` for the complete variant
+   * @type {boolean} [complete=false]
+   */
   export let complete = false;
+
+  /**
+   * Set to `true` to use the current variant
+   * @type {boolean} [current=false]
+   */
   export let current = false;
+
+  /**
+   * Set to `true` to disable the progress step
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
   export let invalid = false;
+
+  /**
+   * Specify the step description
+   * @type {string} [descripton=""]
+   */
   export let description = "";
+
+  /**
+   * Specify the step label
+   * @type {string} [label=""]
+   */
   export let label = "";
+
+  /**
+   * Specify the step secondary label
+   * @type {string} [secondaryLabel=""]
+   */
   export let secondaryLabel = "";
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";
@@ -25,6 +64,7 @@
 
 <li
   aria-disabled={disabled}
+  {id}
   class:bx--progress-step={true}
   class:bx--progress-step--current={current}
   class:bx--progress-step--complete={complete}
@@ -43,7 +83,7 @@
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown={e => {
+    on:keydown={(e) => {
       if (e.key === ' ' || e.key === 'Enter') {
         change(step.index);
       }
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index 4040f3da..bffcdaca 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -1,13 +1,58 @@
 <script>
+  /**
+   * Specify the value of the radio button
+   * @type {string} [value=""]
+   */
   export let value = "";
+
+  /**
+   * Set to `true` to check the radio button
+   * @type {boolean} [checked=false]
+   */
   export let checked = false;
+
+  /**
+   * Set to `true` to disable the radio button
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
-  export let id = "ccs-" + Math.random().toString(36);
-  export let labelPosition = "right"; // "left" | "right"
+
+  /**
+   * Specify the label position
+   * @type {"right" | "left"} [labelPosition="right"]
+   */
+  export let labelPosition = "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;
+
+  /**
+   * Set an id for the input element
+   * @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 = "";
 
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
+  export let ref = null;
+
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
 
@@ -28,6 +73,7 @@
   class:bx--radio-button-wrapper--label-left={labelPosition === 'left'}
   {...$$restProps}>
   <input
+    bind:this={ref}
     type="radio"
     {id}
     {name}
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index a95c26d1..655ee164 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -1,8 +1,27 @@
 <script>
+  /**
+   * Set the selected radio button value
+   * @type {string} [selected]
+   */
   export let selected = undefined;
+
+  /**
+   * Set to `true` to disable the radio buttons
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
-  export let labelPosition = "right"; // "right" | "left"
-  export let orientation = "horizontal"; // "horizontal" | "vertical"
+
+  /**
+   * Specify the label position
+   * @type {"right" | "left"} [labelPosition="right"]
+   */
+  export let labelPosition = "right";
+
+  /**
+   * Specify the orientation of the radio buttons
+   * @type {"horizontal" | "vertical"} [orientation="horizontal"]
+   */
+  export let orientation = "horizontal";
 
   import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -17,9 +36,9 @@
         selectedValue.set(value);
       }
     },
-    update: value => {
+    update: (value) => {
       selectedValue.set(value);
-    }
+    },
   });
 
   $: selected = $selectedValue;
diff --git a/src/Search/Search.Skeleton.svelte b/src/Search/Search.Skeleton.svelte
index 3d2bf120..06cdd6fb 100644
--- a/src/Search/Search.Skeleton.svelte
+++ b/src/Search/Search.Skeleton.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to use the small variant
+   * @type {boolean} [small=false]
+   */
   export let small = false;
 </script>
 
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 5810791c..66fa772f 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -1,16 +1,80 @@
 <script>
-  export let autocomplete = "off";
-  export let autofocus = false;
-  export let closeButtonLabelText = "Clear search input";
-  export let id = "ccs-" + Math.random().toString(36);
-  export let type = "text";
-  export let value = "";
-  export let labelText = "";
-  export let placeholder = "Search...";
-  export let skeleton = false;
-  export let light = false;
+  /**
+   * Set to `true` to use the small variant
+   * @type {boolean} [small=false]
+   */
   export let small = false;
+
+  /**
+   * Specify the size of the search input
+   * @type {"sm" | "lg"} [size]
+   */
   export let size = small ? "sm" : "xl";
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @type {boolean} [skeleton=false]
+   */
+  export let skeleton = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
+  /**
+   * Specify the value of the search input
+   * @type {string} [value="text"]
+   */
+  export let value = "";
+
+  /**
+   * Specify the `type` attribute of the search input
+   * @type {string} [type="text"]
+   */
+  export let type = "text";
+
+  /**
+   * Specify the `placeholder` attribute of the search input
+   * @type {string} [placeholder="Search..."]
+   */
+  export let placeholder = "Search...";
+
+  /**
+   * Specify the `autocomplete` attribute
+   * @type {"on" | "off"} [autocomplete="off"]
+   */
+  export let autocomplete = "off";
+
+  /**
+   * Set to `true` to auto focus the search element
+   * @type {boolean} [autofocus=false]
+   */
+  export let autofocus = false;
+
+  /**
+   * Specify the close button label text
+   * @type {string} [closeButtonLabelText="Clear search input"]
+   */
+  export let closeButtonLabelText = "Clear search input";
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
+  export let labelText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import Close16 from "carbon-icons-svelte/lib/Close16";
@@ -30,11 +94,12 @@
 {:else}
   <div
     class:bx--search={true}
-    class="bx--search--{size}"
     class:bx--search--light={light}
-    {...$$restProps}>
+    {...$$restProps}
+    class="bx--search--{size}
+    {$$restProps.class}">
     <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.Skeleton.svelte b/src/Select/Select.Skeleton.svelte
index 895ccbc3..63ea46b5 100644
--- a/src/Select/Select.Skeleton.svelte
+++ b/src/Select/Select.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/Select/Select.svelte b/src/Select/Select.svelte
index 3fae6a05..52d6f4f1 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -1,17 +1,86 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
+  /**
+   * Specify the selected item value
+   * @type {string} [selected]
+   */
   export let selected = undefined;
+
+  /**
+   * Set the size of the select input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set to `true` to use the inline variant
+   * @type {boolean} [inline=false]
+   */
   export let inline = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` to disable the select element
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set an id for the select element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the select element
+   * @type {string} [name]
+   */
   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 = "";
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
   export let helperText = "";
+
+  /**
+   * Set to `true` to not render a label
+   * @type {boolean} [noLabel=false]
+   */
   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;
+
+  /**
+   * Obtain a reference to the select HTML element
+   * @type {null | HTMLSelectElement} [ref=null]
+   */
   export let ref = null;
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte
index 6acfed9f..cb57eca4 100644
--- a/src/Select/SelectItem.svelte
+++ b/src/Select/SelectItem.svelte
@@ -10,7 +10,7 @@
 
   let selected = false;
 
-  const unsubscribe = ctx.selectedValue.subscribe($ => {
+  const unsubscribe = ctx.selectedValue.subscribe(($) => {
     selected = $ === value;
   });
 
diff --git a/src/Select/SelectItemGroup.svelte b/src/Select/SelectItemGroup.svelte
index e125402e..debe8803 100644
--- a/src/Select/SelectItemGroup.svelte
+++ b/src/Select/SelectItemGroup.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` to disable the optgroup element
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the label attribute of the optgroup element
+   * @type {string} [label="Provide label"]
+   */
   export let label = "Provide label";
 </script>
 
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 07c260bc..aff5fbf5 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -1,10 +1,34 @@
 <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];
+  /**
+   * Array of random numbers
+   * @constant
+   * @type {number[]}
+   */
+  const RANDOM = [0.973, 0.153, 0.567];
 
   $: rows = [];
   $: widthNum = parseInt(width, 10);
@@ -13,7 +37,7 @@
     for (let i = 0; i < lines; i++) {
       const min = widthPx ? widthNum - 75 : 0;
       const max = widthPx ? widthNum : 75;
-      const rand = Math.floor(randoms[i % 3] * (max - min + 1)) + min + "px";
+      const rand = Math.floor(RANDOM[i % 3] * (max - min + 1)) + min + "px";
       rows = [...rows, { width: widthPx ? rand : `calc(${width} - ${rand})` }];
     }
   }
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 2def372a..566a428b 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -1,20 +1,51 @@
 <script>
   export let disabled = false;
   export let hideTextInput = false;
+
+  /**
+   * Set an id for the slider div element
+   * @type {string} [id]
+   */
   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 = "";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
   export let max = 100;
   export let maxLabel = "";
   export let min = 0;
   export let minLabel = "";
+
+  /**
+   * Set a name for the slider element
+   * @type {string} [name=""]
+   */
   export let name = "";
   export let required = false;
   export let step = 1;
   export let stepMultiplier = 4;
   export let value = "";
+
+  /**
+   * Obtain a reference to the HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
diff --git a/src/StructuredList/StructuredList.Skeleton.svelte b/src/StructuredList/StructuredList.Skeleton.svelte
index 05e50df6..cf020fb3 100644
--- a/src/StructuredList/StructuredList.Skeleton.svelte
+++ b/src/StructuredList/StructuredList.Skeleton.svelte
@@ -1,6 +1,15 @@
 <script>
-  export let border = false;
+  /**
+   * Specify the number of rows
+   * @type {number} [rows=5]
+   */
   export let rows = 5;
+
+  /**
+   * Set to `true` to use the bordered variant
+   * @type {boolean} [border=false]
+   */
+  export let border = false;
 </script>
 
 <section
diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
index 8652d0d6..f579446b 100644
--- a/src/StructuredList/StructuredList.svelte
+++ b/src/StructuredList/StructuredList.svelte
@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Specify the selected structured list row value
+   * @type {string} [selected]
+   */
   export let selected = undefined;
+
+  /**
+   * Set to `true` to use the bordered variant
+   * @type {boolean} [border=false]
+   */
   export let border = false;
+
+  /**
+   * Set to `true` to use the selection variant
+   * @type {boolean} [selection=false]
+   */
   export let selection = false;
 
   import { createEventDispatcher, setContext } from "svelte";
diff --git a/src/StructuredList/StructuredListCell.svelte b/src/StructuredList/StructuredListCell.svelte
index b9547616..d9a2a6c0 100644
--- a/src/StructuredList/StructuredListCell.svelte
+++ b/src/StructuredList/StructuredListCell.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` to use as a header
+   * @type {boolean} [head=false]
+   */
   export let head = false;
+
+  /**
+   * Set to `true` to prevent wrapping
+   * @type {boolean} [noWrap=false]
+   */
   export let noWrap = false;
 </script>
 
diff --git a/src/StructuredList/StructuredListInput.svelte b/src/StructuredList/StructuredListInput.svelte
index dc9b2912..49b70a34 100644
--- a/src/StructuredList/StructuredListInput.svelte
+++ b/src/StructuredList/StructuredListInput.svelte
@@ -1,9 +1,38 @@
 <script>
+  /**
+   * Set to `true` to check the input
+   * @type {boolean} [checked=false]
+   */
   export let checked = false;
+
+  /**
+   * Specify the title of the input
+   * @type {string} [title="title"]
+   */
   export let title = "title";
+
+  /**
+   * Specify the value of the input
+   * @type {string} [value="value"]
+   */
   export let value = "value";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name=""]
+   */
   export let name = "";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext } from "svelte";
diff --git a/src/StructuredList/StructuredListRow.svelte b/src/StructuredList/StructuredListRow.svelte
index 0c70ccd4..79f0cf68 100644
--- a/src/StructuredList/StructuredListRow.svelte
+++ b/src/StructuredList/StructuredListRow.svelte
@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Set to `true` to use as a header
+   * @type {boolean} [head=false]
+   */
   export let head = false;
+
+  /**
+   * Set to `true` to render a label slot
+   * @type {boolean} [label=false]
+   */
   export let label = false;
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
 </script>
 
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 39d71b43..89b1e879 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -4,6 +4,11 @@
   export let label = "";
   export let role = "presentation";
   export let tabindex = "0";
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let ref = null;
 
@@ -22,6 +27,7 @@
 <li
   tabindex="-1"
   {role}
+  {id}
   class:bx--tabs__nav-item={true}
   class:bx--tabs__nav-item--disabled={disabled}
   class:bx--tabs__nav-item--selected={selected}
diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte
index c46e0b6d..6801011c 100644
--- a/src/Tabs/TabContent.svelte
+++ b/src/Tabs/TabContent.svelte
@@ -1,5 +1,10 @@
 <script>
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
   import { getContext } from "svelte";
 
   const { selectedContent, addContent } = getContext("Tabs");
@@ -12,6 +17,8 @@
 <div
   aria-hidden={!selected}
   hidden={!selected}
+  {id}
+  {...$$restProps}
   class:bx--tab-content={true}
   class={$$restProps.class}
   style={$$restProps.style}>
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index 0991c8dd..20d76dee 100644
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@@ -13,7 +13,7 @@
 
   let dropdownHidden = true;
   let tabs = writable([]);
-  let tabsById = derived(tabs, _ =>
+  let tabsById = derived(tabs, (_) =>
     _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
   );
   let currentIndex = selected;
@@ -24,16 +24,16 @@
   setContext("Tabs", {
     selectedTab,
     selectedContent,
-    add: data => {
-      tabs.update(_ => [..._, { ...data, index: _.length }]);
+    add: (data) => {
+      tabs.update((_) => [..._, { ...data, index: _.length }]);
     },
-    addContent: data => {
-      content.update(_ => [..._, { ...data, index: _.length }]);
+    addContent: (data) => {
+      content.update((_) => [..._, { ...data, index: _.length }]);
     },
-    update: id => {
+    update: (id) => {
       currentIndex = $tabsById[id].index;
     },
-    change: direction => {
+    change: (direction) => {
       let index = currentIndex + direction;
 
       if (index < 0) {
@@ -57,7 +57,7 @@
       }
 
       currentIndex = index;
-    }
+    },
   });
 
   afterUpdate(() => {
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index ef5611ad..a444fca3 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -1,49 +1,89 @@
 <script>
-  export let type = undefined; // "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"
+  /**
+   * Specify the type of tag
+   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"} [type]
+   */
+  export let type = undefined;
+
+  /**
+   * Set to `true` to use filterable variant
+   * @type {boolean} [filter=false]
+   */
   export let filter = false;
+
+  /**
+   * Set to `true` to disable a filterable tag
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @type {boolean} [skeleton=false]
+   */
+  export let skeleton = false;
+
+  /**
+   * Set the title for the close button in a filterable tag
+   * @type {string} [title="Clear filter"]
+   */
   export let title = "Clear filter";
+
+  /**
+   * Set an id for the filterable tag
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import Close16 from "carbon-icons-svelte/lib/Close16";
+  import TagSkeleton from "./Tag.Skeleton.svelte";
 </script>
 
-{#if filter}
-  <div
-    aria-label={title}
-    {id}
-    class:bx--tag={true}
-    class:bx--tag--disabled={disabled}
-    class:bx--tag--filter={filter}
+{#if skeleton}
+  <TagSkeleton
     {...$$restProps}
-    class="{type && `bx--tag--${type}`}
-    {$$restProps.class}">
-    <slot props={{ class: 'bx--tag__label' }}>
-      <span class:bx--tag__label={true}>{type}</span>
-    </slot>
-    <button
-      aria-labelledby={id}
-      class:bx--tag__close-icon={true}
-      {disabled}
-      {title}
-      on:click|stopPropagation
-      on:mouseover
-      on:mouseenter
-      on:mouseleave>
-      <Close16 />
-    </button>
-  </div>
-{:else}
-  <span
-    class:bx--tag={true}
-    class:bx--tag--disabled={disabled}
-    {...$$restProps}
-    class="{type && `bx--tag--${type}`}
-    {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave>
-    <slot />
-  </span>
+    on:mouseleave />
+{:else}
+  {#if filter}
+    <div
+      aria-label={title}
+      {id}
+      class:bx--tag={true}
+      class:bx--tag--disabled={disabled}
+      class:bx--tag--filter={filter}
+      {...$$restProps}
+      class="{type && `bx--tag--${type}`}
+      {$$restProps.class}">
+      <slot props={{ class: 'bx--tag__label' }}>
+        <span class:bx--tag__label={true}>{type}</span>
+      </slot>
+      <button
+        aria-labelledby={id}
+        class:bx--tag__close-icon={true}
+        {disabled}
+        {title}
+        on:click|stopPropagation
+        on:mouseover
+        on:mouseenter
+        on:mouseleave>
+        <Close16 />
+      </button>
+    </div>
+  {:else}
+    <span
+      class:bx--tag={true}
+      class:bx--tag--disabled={disabled}
+      {...$$restProps}
+      class="{type && `bx--tag--${type}`}
+      {$$restProps.class}"
+      on:click
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
+      <slot />
+    </span>
+  {/if}
 {/if}
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 7c83d0ec..b2364799 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -1,17 +1,86 @@
 <script>
+  /**
+   * Specify the textarea value
+   * @type {string} [value=""]
+   */
   export let value = "";
+
+  /**
+   * Specify the placeholder text
+   * @type {string} [placeholder=""]
+   */
   export let placeholder = "";
+
+  /**
+   * Specify the number of cols
+   * @type {number} [cols=50]
+   */
   export let cols = 50;
+
+  /**
+   * Specify the number of rows
+   * @type {number} [rows=4]
+   */
   export let rows = 4;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
   export let helperText = "";
-  export let id = "ccs-" + Math.random().toString(36);
-  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;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
+  export let invalid = false;
+
+  /**
+   * Specify the text for the invalid state
+   * @type {string} [invalidText=""]
+   */
+  export let invalidText = "";
+
+  /**
+   * Set an id for the textarea element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name]
+   */
+  export let name = undefined;
+
+  /**
+   * Obtain a reference to the textarea HTML element
+   * @type {null | HTMLTextAreaElement} [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 b7a4f87a..47106674 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -1,21 +1,110 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
-  export let type = "password";
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input value
+   * @type {string} [value=""]
+   */
   export let value = "";
-  export let hidePasswordLabel = "Hide password";
-  export let showPasswordLabel = "Show password";
-  export let light = false;
-  export let disabled = false;
+
+  /**
+   * Specify the input type
+   * @type {string} [type="password"]
+   */
+  export let type = "password";
+
+  /**
+   * Specify the placeholder text
+   * @type {string} [placeholder=""]
+   */
   export let placeholder = "";
+
+  /**
+   * Specify the hide password label text
+   * @type {string} [hidePasswordLabel="Hide password"]
+   */
+  export let hidePasswordLabel = "Hide password";
+
+  /**
+   * Specify the show password label text
+   * @type {string} [showPasswordLabel="Show password"]
+   */
+  export let showPasswordLabel = "Show password";
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * @type {"start" | "center" | "end"} [tooltipAlignment="center"]
+   */
+  export let tooltipAlignment = undefined;
+
+  /**
+   * Set the position of the tooltip relative to the icon
+   * @type {"top" | "right" | "bottom" | "left"} [tooltipPosition="bottom"]
+   */
+  export let tooltipPosition = undefined;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
   export let helperText = "";
-  export let id = "ccs-" + Math.random().toString(36);
-  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";
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @type {boolean} [invalid=false]
+   */
+  export let invalid = false;
+
+  /**
+   * Specify the text for the invalid state
+   * @type {string} [invalidText=""]
+   */
+  export let invalidText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name]
+   */
+  export let name = undefined;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
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 e24e8179..47f196ef 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -1,17 +1,86 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
-  export let type = "";
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input value
+   * @type {string} [value=""]
+   */
   export let value = "";
+
+  /**
+   * Specify the input type
+   * @type {string} [type=""]
+   */
+  export let type = "";
+
+  /**
+   * Specify the placeholder text
+   * @type {string} [placeholder=""]
+   */
   export let placeholder = "";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
-  export let id = "ccs-" + Math.random().toString(36);
-  export let name = undefined;
+
+  /**
+   * Specify the helper text
+   * @type {string} [helperText=""]
+   */
   export let helperText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name]
+   */
+  export let name = undefined;
+
+  /**
+   * 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 = "";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   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 16e7c944..87d08327 100644
--- a/src/Tile/ClickableTile.svelte
+++ b/src/Tile/ClickableTile.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` to click the tile
+   * @type {boolean} [clicked=false]
+   */
   export let clicked = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
 </script>
 
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index 4a2fe454..e708683a 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -1,12 +1,56 @@
 <script>
+  /**
+   * Set to `true` to expand the tile
+   * @type {boolean} [expanded=false]
+   */
   export let expanded = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Specify the max height of the tile  (number of pixels)
+   * @type {number} [tileMaxHeight=0]
+   */
   export let tileMaxHeight = 0;
+
+  /**
+   * Specify the padding of the tile (number of pixels)
+   * @type {number} [tilePadding=0]
+   */
   export let tilePadding = 0;
+
+  /**
+   * Specify the icon text of the collapsed tile
+   * @type {string} [tileCollapsedIconText="Interact to expand Tile"]
+   */
   export let tileCollapsedIconText = "Interact to expand Tile";
+
+  /**
+   * Specify the icon text of the expanded tile
+   * @type {string} [tileExpandedIconText="Interact to collapse Tile"]
+   */
   export let tileExpandedIconText = "Interact to collapse Tile";
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
+
+  /**
+   * Set an id for the top-level div element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import { afterUpdate } from "svelte";
@@ -43,7 +87,7 @@
     expanded = !expanded;
   }}
   on:keypress
-  on:keypress={e => {
+  on:keypress={(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       expanded = !expanded;
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 21374ec2..42f03cd5 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -1,10 +1,44 @@
 <script>
+  /**
+   * Set to `true` to check the tile
+   * @type {boolean} [checked=false]
+   */
   export let checked = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Specify the value of the radio input
+   * @type {string} [value=""]
+   */
   export let value = "";
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
+
+  /**
+   * Specify the ARIA label for the radio tile checkmark icon
+   * @type {string} [iconDescription="Tile checkmark"]
+   */
   export let iconDescription = "Tile checkmark";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name=""]
+   */
   export let name = "";
 
   import { getContext } from "svelte";
@@ -41,7 +75,7 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={e => {
+  on:keydown={(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       update(value);
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index 5f72c9d7..13483a77 100644
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@@ -1,12 +1,56 @@
 <script>
+  /**
+   * Set to `true` to select the tile
+   * @type {boolean} [selected=false]
+   */
   export let selected = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Specify the title of the selectable tile
+   * @type {string} [title="title"]
+   */
   export let title = "title";
+
+  /**
+   * Specify the value of the selectable tile
+   * @type {string} [value="value"]
+   */
   export let value = "value";
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
+
+  /**
+   * Specify the ARIA label for the selectable tile checkmark icon
+   * @type {string} [iconDescription="Tile checkmark"]
+   */
   export let iconDescription = "Tile checkmark";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name=""]
+   */
   export let name = "";
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
@@ -43,7 +87,7 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={e => {
+  on:keydown={(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       selected = !selected;
diff --git a/src/Tile/Tile.svelte b/src/Tile/Tile.svelte
index aaa6a91f..5135447f 100644
--- a/src/Tile/Tile.svelte
+++ b/src/Tile/Tile.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
 </script>
 
diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index 1c06e3a2..023c5633 100644
--- a/src/Tile/TileGroup.svelte
+++ b/src/Tile/TileGroup.svelte
@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Specify the selected tile value
+   * @type {string} [selected]
+   */
   export let selected = undefined;
+
+  /**
+   * Set to `true` to disable the tile group
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the legend text
+   * @type {string} [legend]
+   */
   export let legend = "";
 
   import { createEventDispatcher, setContext } from "svelte";
@@ -16,9 +30,9 @@
         selectedValue.set(value);
       }
     },
-    update: value => {
+    update: (value) => {
       selectedValue.set(value);
-    }
+    },
   });
 
   $: selected = $selectedValue;
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index e9d2eca8..c2f6c35f 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/src/TimePicker/TimePicker.svelte
@@ -1,26 +1,96 @@
 <script>
+  /**
+   * Specify the input value
+   * @type {string} [value=""]
+   */
   export let value = "";
+
+  /**
+   * Specify the input type
+   * @type {string} [type="text"]
+   */
   export let type = "text";
+
+  /**
+   * Specify the input placeholder text
+   * @type {string} [placeholder="hh=mm"]
+   */
   export let placeholder = "hh=mm";
+
+  /**
+   * Specify the `pattern` attribute for the input element
+   * @type {string} [pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?"]
+   */
   export let pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?";
+
+  /**
+   * Specify the `maxlength` input attribute
+   * @type {number} [maxLength=5]
+   */
   export let maxlength = 5;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
-  export let id = "ccs-" + Math.random().toString(36);
-  export let name = undefined;
-  export let invalid = false;
-  export let invalidText = "Invalid time format.";
+
+  /**
+   * 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="Invalid time format."]
+   */
+  export let invalidText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string} [name]
+   */
+  export let name = undefined;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLInputElement} [ref=null]
+   */
+  export let ref = null;
 </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}
@@ -36,7 +106,16 @@
         </label>
       {/if}
       <input
+        bind:this={ref}
         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}
@@ -47,15 +126,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 1f96c18a..525b7591 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@@ -1,11 +1,51 @@
 <script>
+  /**
+   * Specify the select value
+   * @type {string} [value=""]
+   */
   export let value = "";
-  export let name = undefined;
+
+  /**
+   * Set to `true` to disable the select
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Specify the ARIA label for the chevron icon
+   * @type {string} [iconDescription="Expand/Collapse"]
+   */
   export let iconDescription = "Open list of options";
-  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
-  export let hideLabel = true;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
+  export let hideLabel = false;
+
+  /**
+   * Set an id for the select element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the select element
+   * @type {string} [name]
+   */
+  export let name = undefined;
+
+  /**
+   * Obtain a reference to the select HTML element
+   * @type {null | HTMLSelectElement} [ref=null]
+   */
+  export let ref = null;
 
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -37,14 +77,15 @@
   {/if}
   <!-- svelte-ignore a11y-no-onchange -->
   <select
-    class:bx--select-input={true}
-    on:change={({ target }) => {
-      selectedValue.set(target.value);
-    }}
+    bind:this={ref}
     {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 cf90045d..7a9537b2 100644
--- a/src/Toggle/Toggle.Skeleton.svelte
+++ b/src/Toggle/Toggle.Skeleton.svelte
@@ -1,6 +1,15 @@
 <script>
-  export let id = "ccs-" + Math.random().toString(36);
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
+  export let id = "ccs-" + Math.random().toString(36);
 </script>
 
 <div
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 88303ed0..4fbb4655 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -1,10 +1,44 @@
 <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 = "";
+
+  /**
+   * Set an id for the input element
+   * @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>
 
@@ -24,7 +58,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/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/ToggleSmall/ToggleSmall.Skeleton.svelte
index 3c18f40d..fe66cc53 100644
--- a/src/ToggleSmall/ToggleSmall.Skeleton.svelte
+++ b/src/ToggleSmall/ToggleSmall.Skeleton.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte
index 96c29aff..1a3de00a 100644
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ b/src/ToggleSmall/ToggleSmall.svelte
@@ -1,10 +1,44 @@
 <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 = "";
+
+  /**
+   * Set an id for the input element
+   * @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>
 
@@ -28,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 8a210613..86261e99 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -1,16 +1,81 @@
 <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/Add16").default} [icon=Information16]
+   */
+  export let icon = Information16;
+
+  /**
+   * Specify the ARIA label for the tooltip button
+   * @type {string} [iconDescription=""]
+   */
+  export let iconDescription = "";
+
+  /**
+   * Specify 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 = "";
+
+  /**
+   * Obtain a reference to the trigger text HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
+
+  /**
+   * Obtain a reference to the tooltip HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let refTooltip = null;
+
+  /**
+   * Obtain a reference to the icon HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let refIcon = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
@@ -112,7 +177,7 @@
     "aria-labelledby": triggerText ? triggerId : undefined,
     "aria-label": triggerText ? iconDescription : undefined,
     tabindex,
-    style: hideIcon ? $$restProps.style : undefined
+    style: hideIcon ? $$restProps.style : undefined,
   };
 </script>
 
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
index 799d8d9c..be2c855e 100644
--- a/src/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/TooltipDefinition/TooltipDefinition.svelte
@@ -1,8 +1,32 @@
 <script>
+  /**
+   * Specify the tooltip text
+   * @type {string} [tooltipText=""]
+   */
   export let tooltipText = "";
-  export let align = "center"; // "start" | "center" | "end"
-  export let direction = "bottom"; // "top" | "bottom"
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * @type {"start" | "center" | "end"} [align="center"]
+   */
+  export let align = "center";
+
+  /**
+   * Set the direction of the tooltip relative to the icon
+   * @type {"top" | "bottom"} [direction="bottom"]
+   */
+  export let direction = "bottom";
+
+  /**
+   * Set an id for the tooltip div element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
   export let ref = null;
 
   $: hidden = false;
@@ -10,8 +34,8 @@
 </script>
 
 <svelte:body
-  on:keydown={e => {
-    if (e.key === 'Escape') {
+  on:keydown={({ key }) => {
+    if (key === 'Escape') {
       hidden = true;
     }
   }} />
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 0ec451bd..d1a4ea2f 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -1,8 +1,32 @@
 <script>
+  /**
+   * Specify the tooltip text
+   * @type {string} [tooltipText=""]
+   */
   export let tooltipText = "";
-  export let align = "center"; // "start" | "center" | "end"
-  export let direction = "bottom"; // "top" | "right" | "bottom" | "left"
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * @type {"start" | "center" | "end"} [align="center"]
+   */
+  export let align = "center";
+
+  /**
+   * Set the direction of the tooltip relative to the icon
+   * @type {"top" | "right" | "bottom" | "left"} [direction="bottom"]
+   */
+  export let direction = "bottom";
+
+  /**
+   * Set an id for the span element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
   export let ref = null;
 
   $: hidden = false;
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index ef98f184..d21cb300 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Specify the id for the main element
+   * @type {string} [id="main-content"]
+   */
   export let id = "main-content";
 </script>
 
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index 06ac6789..1638ff98 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -1,9 +1,33 @@
 <script>
+  /**
+   * Set to `true` to open the side nav
+   * @type {boolean} [isSideNavOpen=false]
+   */
+  export let isSideNavOpen = false;
+
+  /**
+   * Specify the ARIA label for the header
+   * @type {string} [uiShellAriaLabel]
+   */
   export let uiShellAriaLabel = undefined;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href]
+   */
   export let href = undefined;
+
+  /**
+   * Specify the company name
+   * @type {string} [company]
+   */
   export let company = undefined;
+
+  /**
+   * Specify the platform name
+   * @type {string} [platformName]
+   */
   export let platformName = undefined;
-  export let isSideNavOpen = undefined;
 
   import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
 
diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index 9e6a6753..6d6f5d1e 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -1,7 +1,21 @@
 <script>
-  export let type = undefined;
+  /**
+   * Set to `true` to open the panel
+   * @type {boolean} [isOpen=false]
+   */
+  export let isOpen = false;
+
+  /**
+   * Specify the icon props
+   * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} [icon]
+   */
   export let icon = undefined;
-  export let isOpen = undefined;
+
+  /**
+   * Specify the text
+   * Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>)
+   * @type {string} [text]
+   */
   export let text = undefined;
 
   import { Icon } from "../../Icon";
@@ -38,7 +52,6 @@
 <div>
   <button
     type="button"
-    aria-label={type}
     class:bx--header__action={true}
     class:bx--header__action--active={isOpen}
     class:action-text={text}
diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
index b03c4f3e..29813315 100644
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -1,8 +1,21 @@
 <script>
+  /**
+   * Set to `true` to use the active state
+   * @type {boolean} [linkIsActive=false]
+   */
+  export let linkIsActive = false;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href]
+   */
   export let href = undefined;
-  export let type = undefined;
+
+  /**
+   * Specify the icon props
+   * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} [icon]
+   */
   export let icon = undefined;
-  export let linkIsActive = undefined;
 
   import { Icon } from "../../Icon";
 </script>
@@ -18,10 +31,10 @@
 </style>
 
 <a
-  aria-label={type}
   class:bx--header__action={true}
   class:bx--header__action--active={linkIsActive}
   class:action-link={true}
+  {...$$restProps}
   {href}>
   <Icon {...icon} />
 </a>
diff --git a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
index a478817c..fc743a95 100644
--- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
@@ -1,5 +1,9 @@
 <script>
-  export let searchIsActive = undefined;
+  /**
+   * Set to `true` to focus the search
+   * @type {boolean} [searchIsActive=false]
+   */
+  export let searchIsActive = false;
 
   import { createEventDispatcher } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20";
@@ -18,7 +22,7 @@
   function dispatchInputs(event) {
     const params = {
       action: "search",
-      textInput: event.target.value
+      textInput: event.target.value,
     };
     dispatch("inputSearch", params);
   }
diff --git a/src/UIShell/GlobalHeader/HeaderNav.svelte b/src/UIShell/GlobalHeader/HeaderNav.svelte
index 8da6ba37..09a1fe3f 100644
--- a/src/UIShell/GlobalHeader/HeaderNav.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNav.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Specify the ARIA label for the nav
+   * @type {string} [ariaLabel]
+   */
   export let ariaLabel = undefined;
 </script>
 
diff --git a/src/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
index bcc31448..a2cf6f9f 100644
--- a/src/UIShell/GlobalHeader/HeaderNavItem.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href]
+   */
   export let href = undefined;
+
+  /**
+   * Specify the text
+   * @type {string} [text]
+   */
   export let text = undefined;
 </script>
 
diff --git a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
index 52f51617..c1dea89f 100644
--- a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
@@ -1,7 +1,26 @@
 <script>
+  /**
+   * Set to `true` to toggle the expanded state
+   * @type {boolean} [expanded=false]
+   */
   export let expanded = false;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href="/"]
+   */
   export let href = "/";
+
+  /**
+   * Specify the text
+   * @type {string} [text]
+   */
   export let text = undefined;
+
+  /**
+   * Specify the ARIA label for the chevron icon
+   * @type {string} [iconDescription="Expand/Collapse"]
+   */
   export let iconDescription = "Expand/Collapse";
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
diff --git a/src/UIShell/GlobalHeader/HeaderPanelLink.svelte b/src/UIShell/GlobalHeader/HeaderPanelLink.svelte
index 428116a8..1c85d50d 100644
--- a/src/UIShell/GlobalHeader/HeaderPanelLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderPanelLink.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href]
+   */
   export let href = undefined;
 </script>
 
diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte
index 04ebd768..53dcb38b 100644
--- a/src/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/UIShell/SideNav/HamburgerMenu.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the ARIA label for the button
+   * @type {string} [ariaLabel]
+   */
   export let ariaLabel = undefined;
+
+  /**
+   * Set to `true` to toggle the open state
+   * @type {boolean} [isOpen=false]
+   */
   export let isOpen = false;
 
   import { fly } from "svelte/transition";
diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte
index e664d00e..41699d0d 100644
--- a/src/UIShell/SideNav/SideNav.svelte
+++ b/src/UIShell/SideNav/SideNav.svelte
@@ -1,6 +1,15 @@
 <script>
+  /**
+   * Specify the ARIA label for the nav
+   * @type {string} [ariaLabel]
+   */
   export let ariaLabel = undefined;
-  export let isOpen = undefined;
+
+  /**
+   * Set to `true` to toggle the expanded state
+   * @type {boolean} [isOpen=false]
+   */
+  export let isOpen = false;
 </script>
 
 <nav
diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte
index 9825ca10..f655a211 100644
--- a/src/UIShell/SideNav/SideNavLink.svelte
+++ b/src/UIShell/SideNav/SideNavLink.svelte
@@ -1,7 +1,26 @@
 <script>
+  /**
+   * Set to `true` to select the current link
+   * @type {boolean} [isSelected=false]
+   */
   export let isSelected = false;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href]
+   */
   export let href = undefined;
+
+  /**
+   * Specify the text
+   * @type {string} [text]
+   */
   export let text = undefined;
+
+  /**
+   * Specify the icon props
+   * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} [icon]
+   */
   export let icon = undefined;
 
   import { Icon } from "../../Icon";
@@ -9,7 +28,7 @@
 
 <li class:bx--side-nav__item={true}>
   <a
-    aria-current={isSelected ? 'page' : ''}
+    aria-current={isSelected ? 'page' : undefined}
     {href}
     class:bx--side-nav__link={true}
     class:bx--side-nav__link--current={isSelected}
diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte
index 5b818344..ca58b09b 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/UIShell/SideNav/SideNavMenu.svelte
@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Set to `true` to toggle the expanded state
+   * @type {boolean} [expanded]
+   */
   export let expanded = false;
+
+  /**
+   * Specify the text
+   * @type {string} [text]
+   */
   export let text = undefined;
+
+  /**
+   * Specify the icon props
+   * @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }} [icon]
+   */
   export let icon = undefined;
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
diff --git a/src/UIShell/SideNav/SideNavMenuItem.svelte b/src/UIShell/SideNav/SideNavMenuItem.svelte
index ff8023e4..c6ceb538 100644
--- a/src/UIShell/SideNav/SideNavMenuItem.svelte
+++ b/src/UIShell/SideNav/SideNavMenuItem.svelte
@@ -7,7 +7,7 @@
 <li role="none" class:bx--side-nav__menu-item={true}>
   <a
     role="menuitem"
-    aria-current={isSelected ? 'page' : ''}
+    aria-current={isSelected ? 'page' : undefined}
     {href}
     class:bx--side-nav__link={true}
     {...$$restProps}
diff --git a/src/UIShell/SkipToContent.svelte b/src/UIShell/SkipToContent.svelte
index ecf7b45c..57c07c78 100644
--- a/src/UIShell/SkipToContent.svelte
+++ b/src/UIShell/SkipToContent.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href="#main-content"]
+   */
   export let href = "#main-content";
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
 </script>
 
diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte
index 2ada618c..bfa53657 100644
--- a/src/UnorderedList/UnorderedList.svelte
+++ b/src/UnorderedList/UnorderedList.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set to `true` to use the nested variant
+   * @type {boolean} [nested=false]
+   */
   export let nested = false;
 </script>