refactor(selectable-tile): dispatch select, unselect events

Remove on:change event forwarding

src/components/Tile/SelectableTile.svelte

@@ -1,15 +1,15 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let selected = false;
-  export let id = Math.random();
-  export let value = 'value';
-  export let title = 'title';
-  export let name = '';
   export let iconDescription = 'Tile checkmark';
-  export let tabindex = '0';
+  export let id = Math.random();
   export let light = false;
+  export let name = '';
+  export let selected = false;
   export let style = undefined;
+  export let tabindex = '0';
+  export let title = 'title';
+  export let value = 'value';
 
   import { createEventDispatcher } from 'svelte';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
@@ -17,16 +17,13 @@
 
   const dispatch = createEventDispatcher();
 
-  $: if (selected) {
+  $: dispatch(selected ? 'select' : 'deselect', id);
-    dispatch('select', id);
-  }
 </script>
 
 <input
   type="checkbox"
   tabindex="-1"
   class={cx('--tile-input')}
-  on:change
   checked={selected}
   {id}
   {value}

src/components/Tile/Tile.Story.svelte

@@ -18,6 +18,8 @@
   ];
 
   let selected = radioTiles[1].value;
+
+  let selectedTile1 = false;
 </script>
 
 <Layout>
@@ -28,7 +30,19 @@
       <ClickableTile {...$$props}>Clickable Tile</ClickableTile>
     {:else if story === 'multi-select'}
       <div role="group" aria-label="selectable tiles">
-        <SelectableTile {...$$props} id="tile-1" name="tiles">Multi-select Tile</SelectableTile>
+        <SelectableTile
+          {...$$props}
+          id="tile-1"
+          name="tiles"
+          bind:selected={selectedTile1}
+          on:select={({ detail }) => {
+            console.log('on:select', detail);
+          }}
+          on:deselect={({ detail }) => {
+            console.log('on:deselect', detail);
+          }}>
+          Multi-select Tile
+        </SelectableTile>
         <SelectableTile {...$$props} id="tile-2" name="tiles">Multi-select Tile</SelectableTile>
         <SelectableTile {...$$props} id="tile-3" name="tiles">Multi-select Tile</SelectableTile>
       </div>