chore: add more prop annotations

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 => {
-      headerItems.update(_ => [..._, id]);
-    }
+    add: (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