refactor(components): convert const to reactive where appropriate

- Inline class assignments to avoid script-level clutter
- Ignore a11y-missing-attribute instead of redundant href

src/components/DataTableSkeleton/DataTableSkeleton.svelte

@@ -3,47 +3,41 @@
   export { className as class };
   export let zebra = false;
   export let compact = false;
-  export let rowCount = 5;
-  export let columnCount = 5;
   export let headers = [];
+  export let rows = 5;
+  export let columns = 5;
   export let style = undefined;
 
   import { cx, fillArray } from '../../lib';
 
-  const rows = fillArray(rowCount - 1);
-  const columns = fillArray(columnCount);
-  const _headers =
-    headers[0] === Object(headers[0]) && !Array.isArray(headers[0])
-      ? headers.map(({ header }) => header)
-      : headers;
-  const _class = cx(
-    '--skeleton',
-    '--data-table',
-    zebra && '--data-table--zebra',
-    compact && '--data-table--compact',
-    className
-  );
+  $: cols = fillArray(headers.length > 0 ? headers.length : columns);
 </script>
 
-<table on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<table
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--skeleton', '--data-table', zebra && '--data-table--zebra', compact && '--data-table--compact', className)}
+  {style}>
   <thead>
     <tr>
-      {#each columns as column, i (column)}
-        <th>{_headers[column]}</th>
+      {#each cols as col, i (col)}
+        <th>{headers[col] || ''}</th>
       {/each}
     </tr>
   </thead>
   <tbody>
     <tr>
-      {#each columns as column, i (column)}
+      {#each cols as col, i (col)}
         <td>
           <span />
         </td>
       {/each}
     </tr>
-    {#each rows as row, i (row)}
+    {#each fillArray(rows - 1) as row, i (row)}
       <tr>
-        {#each columns as column, j (column)}
+        {#each cols as col, j (col)}
           <td />
         {/each}
       </tr>