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/Checkbox/Checkbox.svelte

@@ -1,48 +1,49 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let indeterminate = false;
+  export let readonly = false;
   export let checked = false;
   export let disabled = false;
+  export let labelText = "";
   export let hideLabel = false;
-  export let id = Math.random();
-  export let indeterminate = false;
-  export let labelText = '';
-  export let name = '';
-  export let readonly = false;
-  export let style = undefined;
-  export let title = '';
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let title = undefined;
+  export let ref = null;
 
-  import { createEventDispatcher } from 'svelte';
-  import { cx } from '../../lib';
+  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
-  $: {
-    dispatch('check', checked);
-  }
+  $: dispatch("check", checked);
 </script>
 
 <div
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--form-item', '--checkbox-wrapper', className)}
-  {style}>
+  on:mouseleave>
   <input
+    bind:this={ref}
     type="checkbox"
-    class={cx('--checkbox')}
+    {checked}
+    {disabled}
+    {id}
+    {indeterminate}
+    {name}
+    {readonly}
+    class:bx--checkbox={true}
     on:change
     on:change={() => {
       checked = !checked;
-    }}
-    {indeterminate}
-    {disabled}
-    {checked}
-    {name}
-    {id}
-    {readonly} />
-  <label class={cx('--checkbox-label')} for={id} title={title || undefined}>
-    <span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
+    }} />
+  <label class:bx--checkbox-label={true} for={id} {title}>
+    <span
+      class:bx--checkbox-label-text={true}
+      class:bx--visually-hidden={hideLabel}>
+      {labelText}
+    </span>
   </label>
 </div>