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/Notification/ToastNotification.svelte

@@ -1,28 +1,24 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let caption = 'provide a caption';
+  export let iconDescription = "closes notification";
+  export let notificationType = "toast"; // "toast" | "inline"
+  export let kind = "error";
   export let hideCloseButton = false;
-  export let iconDescription = 'closes notification';
-  export let kind = 'error';
   export let lowContrast = false;
-  export let notificationType = 'toast';
-  export let role = 'alert';
-  export let style = undefined;
-  export let subtitle = ''; // TODO: support subtitle slot?
   export let timeout = 0;
-  export let title = 'provide a title';
+  export let role = "alert";
+  export let title = "provide a title";
+  export let subtitle = "";
+  export let caption = "provide a caption";
 
-  import { createEventDispatcher, onMount } from 'svelte';
-  import NotificationButton from './NotificationButton.svelte';
-  import NotificationIcon from './NotificationIcon.svelte';
-  import NotificationTextDetails from './NotificationTextDetails.svelte';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, onMount } from "svelte";
+  import NotificationButton from "./NotificationButton.svelte";
+  import NotificationIcon from "./NotificationIcon.svelte";
+  import NotificationTextDetails from "./NotificationTextDetails.svelte";
 
   const dispatch = createEventDispatcher();
 
-  let timeoutId = undefined;
-  let open = true;
+  $: open = true;
+  $: timeoutId = undefined;
 
   onMount(() => {
     if (timeout) {
@@ -36,33 +32,32 @@
       timeoutId = undefined;
     };
   });
-
-  $: if (!open) {
-    dispatch('close');
-  }
 </script>
 
 {#if open}
   <div
+    {role}
+    {kind}
+    class:bx--toast-notification={true}
+    class:bx--toast-notification--low-contrast={lowContrast}
+    class={kind && `bx--toast-notification--${kind}`}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--toast-notification', lowContrast && '--toast-notification--low-contrast', kind && `--toast-notification--${kind}`, className)}
-    {style}
-    {role}
-    {kind}>
+    on:mouseleave>
     <NotificationIcon {notificationType} {kind} {iconDescription} />
     <NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
       <slot />
     </NotificationTextDetails>
     {#if !hideCloseButton}
       <NotificationButton
+        {iconDescription}
+        {notificationType}
         on:click={() => {
           open = false;
-        }}
-        {iconDescription}
-        {notificationType} />
+          dispatch('close');
+        }} />
     {/if}
   </div>
 {/if}