chore: add more prop annotations

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 hasCalendar = derived(mode, _ => _ === "single" || _ === "range");
+  const range = derived(mode, (_) => _ === "range");
+  const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range");
 
   let calendar = undefined;
   let datePickerRef = undefined;
@@ -40,8 +50,8 @@
     range,
     inputValue,
     hasCalendar,
-    add: data => {
-      inputs.update(_ => [..._, data]);
+    add: (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 });