chore: add more prop annotations

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";

src/Accordion/Accordion.svelte

@@ -6,7 +6,7 @@
   export let align = "end";
 
   /**
-   * Set to `true` to display skeleton state
+   * Set to `true` to display the skeleton state
    * @type {boolean} [skeleton=false]
    */
   export let skeleton = false;

src/Accordion/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
-   * Specify title of accordion item heading
+   * Specify the title of the accordion item heading
-   * Alternatively use the named slot "title"
+   * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
    * @type {string} [title="title"]
    */
   export let title = "title";
@@ -13,7 +13,7 @@
   export let open = false;
 
   /**
-   * Define the ARIA label for accordion item chevron icon
+   * Define the ARIA label for the accordion item chevron icon
    * @type {string} [iconDescription="Expand/Collapse"]
    */
   export let iconDescription = "Expand/Collapse";

src/Breadcrumb/BreadcrumbItem.svelte

@@ -1,6 +1,6 @@
 <script>
   /**
-   * Use anchor link
+   * Set the `href` to use an anchor link
    * @type {string} [href]
    */
   export let href = undefined;

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>
 

src/Button/Button.svelte

@@ -2,6 +2,11 @@
   export let as = undefined;
   export let skeleton = false;
   export let disabled = false;
+
+  /**
+   * Set the `href` to use an anchor link
+   * @type {string} [href]
+   */
   export let href = undefined;
   export let icon = undefined;
   export let iconDescription = undefined;

src/Checkbox/Checkbox.svelte

@@ -1,14 +1,68 @@
 <script>
-  export let skeleton = false;
+  /**
-  export let indeterminate = false;
+   * Specify whether the checkbox is checked
-  export let readonly = false;
+   * @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;
+
+  /**
+   * Define 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 | HTMLElement} [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}>

src/CodeSnippet/CodeSnippet.svelte

@@ -1,8 +1,33 @@
 <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;
   export let copyButtonDescription = undefined;
   export let copyLabel = undefined;
@@ -11,7 +36,17 @@
   export let showLessText = "Show less";
   export let showMoreText = "Show more";
   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 | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import { afterUpdate } from "svelte";
@@ -48,7 +83,7 @@
       {expanded && 'bx--snippet--expand'}
       {light && 'bx--snippet--light'}"
       {...$$restProps}
-      on:clicks
+      on:click
       on:mouseover
       on:mouseenter
       on:mouseleave>

src/ComboBox/ComboBox.svelte

@@ -1,11 +1,16 @@
 <script>
   export let disabled = false;
   export let helperText = "";
+
+  /**
+   * Set an id for the list box component
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let invalid = false;
   export let invalidText = "";
   export let items = [];
-  export let itemToString = item => item.text || item.id;
+  export let itemToString = (item) => item.text || item.id;
   export let light = false;
   export let open = false;
   export let placeholder = "";
@@ -26,7 +31,7 @@
     ListBoxMenu,
     ListBoxMenuIcon,
     ListBoxMenuItem,
-    ListBoxSelection
+    ListBoxSelection,
   } from "../ListBox";
 
   let selectedId = undefined;
@@ -48,7 +53,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 +66,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;

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"
+
+  /**
+   * Define a class for the inner modal
+   * @type {string} [containerClass=""]
+   */
   export let containerClass = "";
+
+  /**
+   * Define 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) {

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";

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(() => {

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 | HTMLElement} [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;
   });
 

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 | HTMLElement} [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);

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";

src/DataTable/DataTable.svelte

@@ -1,5 +1,10 @@
 <script>
-  export let size = undefined; // "compact" | "short" | "tall"
+  /**
+   * Set the size of the data table
+   * @type {"compact" | "short" | "tall"} [size]
+   */
+  export let size = undefined;
+
   export let title = "";
   export let description = "";
   export let zebra = false;
@@ -21,7 +26,7 @@
   const sortDirectionMap = {
     none: "ascending",
     ascending: "descending",
-    descending: "none"
+    descending: "none",
   };
   const dispatch = createEventDispatcher();
   const tableSortable = writable(sortable);
@@ -36,16 +41,16 @@
   setContext("DataTable", {
     sortHeader,
     tableSortable,
-    add: id => {
+    add: (id) => {
-      headerItems.update(_ => [..._, 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 +76,7 @@
   }
   $: props = {
     headers,
-    rows
+    rows,
   };
 </script>
 
@@ -91,7 +96,7 @@
                 sortHeader.set({
                   id: sortDirection === 'none' ? null : $thKeys[header.key],
                   key: header.key,
-                  sortDirection
+                  sortDirection,
                 });
               }}>
               {header.value}

src/DataTable/TableHeader.svelte

@@ -1,6 +1,11 @@
 <script>
   export let scope = "col";
   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 +25,7 @@
   <th
     aria-sort={active ? $sortHeader.sortDirection : 'none'}
     {scope}
+    {id}
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -41,6 +47,7 @@
 {:else}
   <th
     {scope}
+    {id}
     {...$$restProps}
     on:click
     on:mouseover

src/DatePicker/DatePicker.Skeleton.svelte

@@ -1,5 +1,10 @@
 <script>
   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>
 

src/DatePicker/DatePicker.svelte

@@ -2,7 +2,17 @@
   export let appendTo = document.body;
   export let dateFormat = "m/d/Y";
   export let datePickerType = "simple";
+
+  /**
+   * Set an id for the date picker element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let locale = "en";
   export let maxDate = null;
@@ -14,22 +24,22 @@
     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 range = derived(mode, (_) => _ === "range");
-  const hasCalendar = derived(mode, _ => _ === "single" || _ === "range");
+  const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range");
 
   let calendar = undefined;
   let datePickerRef = undefined;
@@ -40,8 +50,8 @@
     range,
     inputValue,
     hasCalendar,
-    add: data => {
+    add: (data) => {
-      inputs.update(_ => [..._, data]);
+      inputs.update((_) => [..._, data]);
     },
     declareRef: ({ id, ref }) => {
       if ($inputIds.indexOf(id) === 0) {
@@ -59,7 +69,7 @@
         dispatch("change", value);
       }
     },
-    blurInput: relatedTarget => {
+    blurInput: (relatedTarget) => {
       if (calendar && !calendar.calendarContainer.contains(relatedTarget)) {
         calendar.close();
       }
@@ -74,7 +84,7 @@
         calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") ||
         calendar.calendarContainer
       ).focus();
-    }
+    },
   });
 
   afterUpdate(() => {
@@ -87,24 +97,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);
-        }
+        },
       });
     }
 

src/DatePicker/DatePickerInput.svelte

@@ -5,12 +5,22 @@
   export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
   export let disabled = false;
   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;
   export let invalid = false;
   export let invalidText = "";
   export let name = undefined;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext, onMount } from "svelte";
@@ -25,7 +35,7 @@
     blurInput,
     openCalendar,
     focusCalendar,
-    inputValue
+    inputValue,
   } = getContext("DatePicker");
 
   add({ id, labelText });

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>
 

src/Dropdown/Dropdown.svelte

@@ -1,14 +1,29 @@
 <script>
   export let selectedIndex = -1;
   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;
   export let disabled = false;
   export let invalid = false;
   export let items = [];
-  export let itemToString = item => item.text || item.id;
+  export let itemToString = (item) => item.text || item.id;
   export let type = "default"; // "default" | "inline"
   export let size = undefined; // "sm" | "lg" | "xl"
+
+  /**
+   * Set an id for the list box component
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalidText = "";
@@ -24,7 +39,7 @@
     ListBox,
     ListBoxMenu,
     ListBoxMenuIcon,
-    ListBoxMenuItem
+    ListBoxMenuItem,
   } from "../ListBox";
 
   let selectedId = undefined;

src/FileUploader/FileUploaderButton.svelte

@@ -7,6 +7,11 @@
   export let labelText = "Add file";
   export let role = "button";
   export let tabindex = "0";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = "";
   export let ref = null;

src/FileUploader/FileUploaderDropContainer.svelte

@@ -6,6 +6,11 @@
   export let labelText = "Add file";
   export let role = "button";
   export let tabindex = "0";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = "";
   export let ref = null;

src/FileUploader/FileUploaderItem.svelte

@@ -2,6 +2,11 @@
   export let errorBody = "";
   export let errorSubject = "";
   export let iconDescription = "";
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let invalid = false;
   export let name = "";
@@ -14,6 +19,7 @@
 </script>
 
 <span
+  {id}
   class:bx--file__selected-file={true}
   class:bx--file__selected-file--invalid={invalid}
   {...$$restProps}

src/FormGroup/FormGroup.svelte

@@ -1,8 +1,8 @@
 <script>
-  export let legendText = "";
   export let invalid = false;
   export let message = false;
   export let messageText = "";
+  export let legendText = "";
 </script>
 
 <fieldset

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>
 

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>
 

src/Icon/Icon.svelte

@@ -1,5 +1,10 @@
 <script>
   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";

src/InlineLoading/InlineLoading.svelte

@@ -1,5 +1,9 @@
 <script>
-  export let status = "active"; // "active" | "inactive" | "finished" | "error"
+  /**
+   * Set the loading status
+   * @type {"active" | "inactive" | "finished" | "error"} [status="active"]
+   */
+  export let status = "active";
   export let description = undefined;
   export let iconDescription = undefined;
   export let successDelay = 1500;

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 | HTMLElement} [ref=null]
+   */
   export let ref = null;
 </script>
 

src/ListBox/ListBox.svelte

@@ -1,7 +1,22 @@
 <script>
-  export let size = undefined; // "sm" | "xl"
+  /**
-  export let type = "default"; // "default" | "inline"
+   * Set the size of list box
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
+  /**
+   * Set the type of list box
+   * @type {"default" | "inline"} [type="default"]
+   */
+  export let type = "default";
+
   export let open = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let disabled = false;
   export let invalid = false;
@@ -21,7 +36,7 @@
   class="{size && `bx--list-box--${size}`}
   {$$restProps.class}"
   on:keydown
-  on:keydown={e => {
+  on:keydown={(e) => {
     if (e.key === 'Escape') {
       e.stopPropagation();
     }

src/ListBox/ListBoxField.svelte

@@ -3,7 +3,12 @@
   export let role = "combobox";
   export let tabindex = "-1";
   export const translationIds = { close: "close", open: "open" };
-  export let translateWithId = id => defaultTranslations[id];
+  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);
   export let ref = null;
 
@@ -11,7 +16,7 @@
 
   const defaultTranslations = {
     [translationIds.close]: "Close menu",
-    [translationIds.open]: "Open menu"
+    [translationIds.open]: "Open menu",
   };
   const ctx = getContext("MultiSelect");
 

src/ListBox/ListBoxMenu.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
 
   $: menuId = `menu-${id}`;

src/ListBox/ListBoxSelection.svelte

@@ -1,11 +1,16 @@
 <script>
   export const translationIds = {
     clearAll: "clearAll",
-    clearSelection: "clearSelection"
+    clearSelection: "clearSelection",
   };
   export let disabled = false;
   export let selectionCount = undefined;
-  export let translateWithId = id => defaultTranslations[id];
+  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 +18,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 +42,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);
     }

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";

src/Modal/Modal.svelte

@@ -1,8 +1,28 @@
 <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;
+
+  /**
+   * Set to `true` to use the passive variant
+   * @type {boolean} [passiveModal=false]
+   */
+  export let passiveModal = false;
+
   export let hasForm = false;
   export let hasScrollingContent = false;
   export let primaryButtonDisabled = false;
@@ -13,8 +33,23 @@
   export let iconDescription = "Close the modal";
   export let primaryButtonText = "";
   export let secondaryButtonText = "";
+
+  /**
+   * Define 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";

src/MultiSelect/MultiSelect.svelte

@@ -6,13 +6,18 @@
   export let filterable = false;
   export let filterItem = (item, value) =>
     item.text.toLowerCase().includes(value.toLowerCase());
+
+  /**
+   * Set an id for the list box component
+   * @type {string} [id]
+   */
   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 itemToString = (item) => item.text || item.id;
   export let label = "";
   export let light = false;
   export let locale = "en";
@@ -36,7 +41,7 @@
     ListBoxMenu,
     ListBoxMenuIcon,
     ListBoxMenuItem,
-    ListBoxSelection
+    ListBoxSelection,
   } from "../ListBox";
 
   let multiSelectRef = null;
@@ -59,7 +64,7 @@
           selectionRef = ref;
           break;
       }
-    }
+    },
   });
 
   function change(direction) {
@@ -77,7 +82,7 @@
   function sort() {
     return [
       ...(checked.length > 1 ? checked.sort(sortItem) : checked),
-      ...unchecked.sort(sortItem)
+      ...unchecked.sort(sortItem),
     ];
   }
 
@@ -106,13 +111,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 +215,9 @@
         <ListBoxSelection
           selectionCount={checked.length}
           on:clear={() => {
-            sortedItems = sortedItems.map(item => ({
+            sortedItems = sortedItems.map((item) => ({
               ...item,
-              checked: false
+              checked: false,
             }));
             fieldRef.blur();
           }}
@@ -294,7 +299,7 @@
             active={item.checked}
             highlighted={highlightedIndex === i}
             on:click={() => {
-              sortedItems = sortedItems.map(_ =>
+              sortedItems = sortedItems.map((_) =>
                 _.id === item.id ? { ..._, checked: !_.checked } : _
               );
               fieldRef.focus();

src/Notification/InlineNotification.svelte

@@ -1,6 +1,11 @@
 <script>
   export let notificationType = "inline";
-  export let kind = "error"; // "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"
+
+  /**
+   * Set the kind of notification
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
+   */
+  export let kind = "error";
   export let role = "alert";
   export let title = "provide a title";
   export let subtitle = "";

src/Notification/NotificationButton.svelte

@@ -1,5 +1,9 @@
 <script>
-  export let notificationType = "toast"; // "toast" | "inline"
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"} [notificationType="toast"]
+   */
+  export let notificationType = "toast";
   export let iconDescription = "close icon";
   export let renderIcon = Close20;
   export let title = undefined;

src/Notification/NotificationIcon.svelte

@@ -1,6 +1,12 @@
 <script>
   export let kind = "error";
+
+  /**
+   * Set the type of notification
+   * @type {"toast" | "inline"} [notificationType="toast"]
+   */
   export let notificationType = "toast";
+
   export let iconDescription = "closes notification";
 
   import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
@@ -16,7 +22,7 @@
     info: InformationFilled20,
     success: CheckmarkFilled20,
     warning: WarningFilled20,
-    "warning-alt": WarningAltFilled20
+    "warning-alt": WarningAltFilled20,
   };
 </script>
 

src/NumberInput/NumberInput.svelte

@@ -10,6 +10,11 @@
   export let allowEmpty = false;
   export let disabled = false;
   export let iconDescription = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;
@@ -17,11 +22,16 @@
   export let helperText = "";
   export let label = "";
   export let hideLabel = false;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @type {null | HTMLElement} [ref=null]
+   */
   export let ref = null;
-  export let translateWithId = id => defaultTranslations[id];
+  export let translateWithId = (id) => defaultTranslations[id];
   export const translationIds = {
     increment: "increment",
-    decrement: "decrement"
+    decrement: "decrement",
   };
 
   import { createEventDispatcher, afterUpdate } from "svelte";
@@ -31,7 +41,7 @@
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
-    [translationIds.decrement]: "Decrement number"
+    [translationIds.decrement]: "Decrement number",
   };
 
   const dispatch = createEventDispatcher();

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>
 

src/OverflowMenu/OverflowMenu.svelte

@@ -7,6 +7,11 @@
   export let icon = OverflowMenuVertical16;
   export let iconClass = undefined;
   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);
   export let menuOptionsClass = undefined;
 
@@ -29,7 +34,7 @@
   setContext("OverflowMenu", {
     focusedId,
     add: ({ id, text, primaryFocus }) => {
-      items.update(_ => {
+      items.update((_) => {
         if (primaryFocus) {
           currentIndex.set(_.length);
         }
@@ -37,10 +42,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 +56,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;
     }
@@ -136,7 +141,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();

src/OverflowMenu/OverflowMenuItem.svelte

@@ -6,6 +6,11 @@
   export let primaryFocus = false;
   export let requireTitle = true;
   export let text = "Provide text";
+
+  /**
+   * Set an id for the top-level element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let ref = null;
 
@@ -27,12 +32,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}

src/Pagination/Pagination.svelte

@@ -14,6 +14,11 @@
   export let pageSizes = [10];
   export let pagesUnknown = false;
   export let pageText = page => `page ${page}`;
+
+  /**
+   * 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 +38,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"

src/ProgressIndicator/ProgressStep.svelte

@@ -6,6 +6,11 @@
   export let description = "";
   export let label = "";
   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 +30,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 +49,7 @@
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown={e => {
+    on:keydown={(e) => {
       if (e.key === ' ' || e.key === 'Enter') {
         change(step.index);
       }

src/RadioButton/RadioButton.svelte

@@ -2,6 +2,11 @@
   export let value = "";
   export let checked = false;
   export let disabled = false;
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let labelPosition = "right"; // "left" | "right"
   export let labelText = "";

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>
 

src/Search/Search.svelte

@@ -2,13 +2,28 @@
   export let autocomplete = "off";
   export let autofocus = false;
   export let closeButtonLabelText = "Clear search input";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   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;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
+  /**
+   * Set to `true` to use the small variant
+   * @type {boolean} [small=false]
+   */
   export let small = false;
   export let size = small ? "sm" : "xl";
   export let ref = null;

src/Select/Select.svelte

@@ -1,9 +1,24 @@
 <script>
   export let size = undefined; // "sm" | "xl"
   export let selected = 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;
   export let disabled = false;
+
+  /**
+   * Set an id for the select element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;

src/Slider/Slider.svelte

@@ -1,11 +1,22 @@
 <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";
   export let invalid = false;
   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;

src/StructuredList/StructuredListInput.svelte

@@ -2,6 +2,11 @@
   export let checked = false;
   export let title = "title";
   export let value = "value";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = "";
   export let ref = null;

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}

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}>

src/Tag/Tag.svelte

@@ -1,14 +1,53 @@
 <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}
+{#if skeleton}
+  <TagSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
+  {#if filter}
     <div
       aria-label={title}
       {id}
@@ -33,7 +72,7 @@
         <Close16 />
       </button>
     </div>
-{:else}
+  {:else}
     <span
       class:bx--tag={true}
       class:bx--tag--disabled={disabled}
@@ -46,4 +85,5 @@
       on:mouseleave>
       <slot />
     </span>
+  {/if}
 {/if}

src/TextArea/TextArea.svelte

@@ -3,9 +3,19 @@
   export let placeholder = "";
   export let cols = 50;
   export let rows = 4;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let disabled = false;
   export let helperText = "";
+
+  /**
+   * Set an id for the textarea element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;

src/TextInput/PasswordInput.svelte

@@ -4,10 +4,21 @@
   export let value = "";
   export let hidePasswordLabel = "Hide password";
   export let showPasswordLabel = "Show password";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
   export let disabled = false;
   export let placeholder = "";
   export let helperText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;

src/TextInput/TextInput.svelte

@@ -3,8 +3,19 @@
   export let type = "";
   export let value = "";
   export let placeholder = "";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
+
   export let disabled = false;
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let helperText = "";

src/Tile/ClickableTile.svelte

@@ -1,5 +1,10 @@
 <script>
   export let clicked = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
 </script>
 

src/Tile/ExpandableTile.svelte

@@ -1,11 +1,21 @@
 <script>
   export let expanded = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let tileMaxHeight = 0;
   export let tilePadding = 0;
   export let tileCollapsedIconText = "Interact to expand Tile";
   export let tileExpandedIconText = "Interact to collapse Tile";
   export let tabindex = "0";
+
+  /**
+   * Set an id for the top-level div element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let ref = null;
 
@@ -43,7 +53,7 @@
     expanded = !expanded;
   }}
   on:keypress
-  on:keypress={e => {
+  on:keypress={(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       expanded = !expanded;

src/Tile/RadioTile.svelte

@@ -1,9 +1,19 @@
 <script>
   export let checked = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let value = "";
   export let tabindex = "0";
   export let iconDescription = "Tile checkmark";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = "";
 
@@ -41,7 +51,7 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={e => {
+  on:keydown={(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       update(value);

src/Tile/SelectableTile.svelte

@@ -1,10 +1,20 @@
 <script>
   export let selected = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let title = "title";
   export let value = "value";
   export let tabindex = "0";
   export let iconDescription = "Tile checkmark";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = "";
   export let ref = null;
@@ -43,7 +53,7 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={e => {
+  on:keydown={(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       selected = !selected;

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>
 

src/TimePicker/TimePicker.svelte

@@ -4,8 +4,18 @@
   export let placeholder = "hh=mm";
   export let pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?";
   export let maxlength = 5;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
   export let light = false;
   export let disabled = false;
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;

src/TimePicker/TimePickerSelect.svelte

@@ -3,6 +3,11 @@
   export let name = undefined;
   export let disabled = false;
   export let iconDescription = "Open list of options";
+
+  /**
+   * Set an id for the select element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let labelText = "";
   export let hideLabel = true;

src/Toggle/Toggle.Skeleton.svelte

@@ -1,6 +1,15 @@
 <script>
-  export let id = "ccs-" + Math.random().toString(36);
+  /**
+   * Define 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

src/Toggle/Toggle.svelte

@@ -4,6 +4,11 @@
   export let labelA = "Off";
   export let labelB = "On";
   export let labelText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
 </script>
@@ -24,7 +29,7 @@
       toggled = !toggled;
     }}
     on:keyup
-    on:keyup={e => {
+    on:keyup={(e) => {
       if (e.key === ' ' || e.key === 'Enter') {
         e.preventDefault();
         toggled = !toggled;

src/ToggleSmall/ToggleSmall.Skeleton.svelte

@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Define 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>
 

src/ToggleSmall/ToggleSmall.svelte

@@ -4,6 +4,11 @@
   export let labelA = "Off";
   export let labelB = "On";
   export let labelText = "";
+
+  /**
+   * Set an id for the input element
+   * @type {string} [id]
+   */
   export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
 </script>

src/Tooltip/Tooltip.svelte

@@ -9,8 +9,23 @@
   export let tooltipId = "ccs-" + Math.random().toString(36);
   export let triggerId = "ccs-" + Math.random().toString(36);
   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 +127,7 @@
     "aria-labelledby": triggerText ? triggerId : undefined,
     "aria-label": triggerText ? iconDescription : undefined,
     tabindex,
-    style: hideIcon ? $$restProps.style : undefined
+    style: hideIcon ? $$restProps.style : undefined,
   };
 </script>
 

src/TooltipDefinition/TooltipDefinition.svelte

@@ -1,8 +1,32 @@
 <script>
+  /**
+   * Define the tooltip text
+   * @types {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 | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   $: hidden = false;
@@ -10,8 +34,8 @@
 </script>
 
 <svelte:body
-  on:keydown={e => {
+  on:keydown={({ key }) => {
-    if (e.key === 'Escape') {
+    if (key === 'Escape') {
       hidden = true;
     }
   }} />

src/TooltipIcon/TooltipIcon.svelte

@@ -1,8 +1,32 @@
 <script>
+  /**
+   * Define the tooltip text
+   * @types {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 | HTMLElement} [ref=null]
+   */
   export let ref = null;
 
   $: hidden = false;

src/UIShell/Content.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * Set an id for the main element
+   * @type {string} [id]
+   */
   export let id = "main-content";
 </script>
 

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>