feat(component): add Notification

Closes #20

src/components/Notification/ToastNotification.svelte

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