refactor(tile): forward events, inline functions

Supports #7, #34

- Forward events, style prop
- Remove unneeded dispatched events
- Remove exported props

src/components/Tile/SelectableTile.svelte

@@ -8,40 +8,13 @@
   export let title = 'title';
   export let name = '';
   export let iconDescription = 'Tile checkmark';
-  export let tabIndex = 0;
+  export let tabindex = '0';
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
-  import { createEventDispatcher, tick } from 'svelte';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
   import { cx } from '../../lib';
 
-  let input = undefined;
-  const dispatch = createEventDispatcher();
-
-  function handleChange(event) {
-    dispatch('change', event);
-  }
-
-  async function handleClick(event) {
-    if (event.target !== input) {
-      selected = !selected;
-      await tick();
-    }
-
-    dispatch('click', event);
-  }
-
-  async function handleKeyDown(event) {
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
-      selected = !selected;
-      await tick();
-    }
-
-    dispatch('keydown', event);
-  }
-
   $: _class = cx(
     '--tile',
     '--tile--selectable',
@@ -52,23 +25,34 @@
 </script>
 
 <input
-  bind:this={input}
   type="checkbox"
-  tabindex={-1}
+  tabindex="-1"
   class={cx('--tile-input')}
-  on:change={handleChange}
+  on:change
   checked={selected}
   {id}
   {value}
   {name}
   {title} />
 <label
-  {...props}
   for={id}
   class={_class}
-  tabindex={tabIndex}
-  on:click|preventDefault={handleClick}
-  on:keydown={handleKeyDown}>
+  on:click
+  on:click|preventDefault={() => {
+    selected = !selected;
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown
+  on:keydown={event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      selected = !selected;
+    }
+  }}
+  {tabindex}
+  {style}>
   <span class={cx('--tile__checkmark')}>
     <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
   </span>