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

src/Tile/ExpandableTile.svelte

@@ -10,10 +10,35 @@
    * @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";
 
   /**
@@ -21,6 +46,11 @@
    * @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";

src/Tile/RadioTile.svelte

@@ -10,8 +10,23 @@
    * @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";
 
   /**
@@ -19,6 +34,11 @@
    * @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";

src/Tile/SelectableTile.svelte

@@ -10,9 +10,29 @@
    * @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";
 
   /**
@@ -20,7 +40,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/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;