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

@@ -1,31 +1,32 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let id = Math.random();
-  export let name = undefined;
-  export let labelA = 'Off';
-  export let labelB = 'On';
-  export let labelText = '';
-  export let style = undefined;
   export let toggled = false;
-
-  import { cx } from '../../lib';
+  export let disabled = false;
+  export let labelA = "Off";
+  export let labelB = "On";
+  export let labelText = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <input
     type="checkbox"
-    class={cx('--toggle-input')}
+    class:bx--toggle-input={true}
     checked={toggled}
     on:change
     on:change={() => {
       toggled = !toggled;
     }}
     on:keyup
-    on:keyup={event => {
-      if (event.key === ' ' || event.key === 'Enter') {
-        event.preventDefault();
+    on:keyup={e => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
         toggled = !toggled;
       }
     }}
@@ -33,16 +34,17 @@
     on:blur
     {disabled}
     {id}
-    {name}
-  />
+    {name} />
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
-    class={cx('--toggle-input__label')}
-    for={id}>
+    for={id}
+    class:bx--toggle-input__label={true}>
     {labelText}
-    <span class={cx('--toggle__switch')}>
-      <span aria-hidden="true" class={cx('--toggle__text--off')}>{labelA}</span>
-      <span aria-hidden="true" class={cx('--toggle__text--on')}>{labelB}</span>
+    <span class:bx--toggle__switch={true}>
+      <span aria-hidden="true" class:bx--toggle__text--off={true}>
+        {labelA}
+      </span>
+      <span aria-hidden="true" class:bx--toggle__text--on={true}>{labelB}</span>
     </span>
   </label>
 </div>