chore: add more prop annotations

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