chore: complete first pass of apply jsdoc annotations to component props

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

src/FileUploader/FileUploaderButton.svelte

@@ -1,11 +1,50 @@
 <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";
 
   /**
@@ -13,7 +52,17 @@
    * @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>
 

src/FileUploader/FileUploaderDropContainer.svelte

@@ -1,10 +1,49 @@
 <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";
 
   /**
@@ -12,7 +51,17 @@
    * @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";

src/FileUploader/FileUploaderItem.svelte

@@ -1,16 +1,45 @@
 <script>
-  export let errorBody = "";
-  export let errorSubject = "";
+  /**
+   * 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);
-  export let invalid = false;
+
+  /**
+   * Specify the file uploader name
+   * @type {string} [name=""]
+   */
   export let name = "";
-  export let status = "uploading";
 
   import { createEventDispatcher } from "svelte";
   import Filename from "./Filename.svelte";

src/FileUploader/Filename.svelte

@@ -1,12 +1,12 @@
 <script>
   /**
-   * Specify the filename status
+   * Specify the file name status
    * @type {"uploading" | "edit" | "complete"} [status="uploading"]
    */
   export let status = "uploading";
 
   /**
-   * Define the ARIA label used for the status icons
+   * Specify the ARIA label used for the status icons
    * @type {string} [iconDescription=""]
    */
   export let iconDescription = "";