refactor: use $$restProps API

- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities

src/components/DataTableSkeleton/DataTableSkeleton.svelte

@@ -1,25 +1,26 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let columns = 5;
-  export let compact = false;
-  export let headers = [];
   export let rows = 5;
-  export let style = undefined;
+  export let compact = false;
   export let zebra = false;
+  export let headers = [];
 
-  import { cx, fillArray } from '../../lib';
-
-  $: cols = fillArray(headers.length > 0 ? headers.length : columns);
+  $: cols = Array.from(
+    { length: headers.length > 0 ? headers.length : columns },
+    (_, i) => i
+  );
 </script>
 
 <table
+  class:bx--skeleton={true}
+  class:bx--data-table={true}
+  class:bx--data-table--zebra={zebra}
+  class:bx--data-table--compact={compact}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--skeleton', '--data-table', zebra && '--data-table--zebra', compact && '--data-table--compact', className)}
-  {style}>
+  on:mouseleave>
   <thead>
     <tr>
       {#each cols as col, i (col)}
@@ -35,7 +36,7 @@
         </td>
       {/each}
     </tr>
-    {#each fillArray(rows - 1) as row, i (row)}
+    {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
       <tr>
         {#each cols as col, j (col)}
           <td />