refactor(timepicker): forward events, remove dispatch

src/components/TimePicker/TimePicker.Story.svelte

@@ -1,12 +1,16 @@
 <script>
   import Layout from '../../internal/ui/Layout.svelte';
+  import { SelectItem } from '../Select';
   import TimePicker from './TimePicker.svelte';
   import TimePickerSelect from './TimePickerSelect.svelte';
-  import { SelectItem } from '../Select';
 
   let value = '';
   let select1 = 'PM';
   let select2 = 'Time zone 1';
+
+  $: {
+    console.log(value, select1, select2);
+  }
 </script>
 
 <Layout>

src/components/TimePicker/TimePicker.svelte

@@ -23,18 +23,21 @@
     <div class={cx('--time-picker__input')}>
       {#if labelText}
         <label
-          for={id}
-          class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+          class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
+          for={id}>
           {labelText}
         </label>
       {/if}
       <input
         data-invalid={invalid || undefined}
         class={cx('--time-picker__input-field', '--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+        on:change
         on:input
         on:input={({ target }) => {
           value = target.value;
         }}
+        on:focus
+        on:blur
         {pattern}
         {placeholder}
         {maxlength}
@@ -42,7 +45,6 @@
         {type}
         {value}
         {disabled} />
-
     </div>
     <slot />
   </div>

src/components/TimePicker/TimePickerSelect.svelte

@@ -9,21 +9,16 @@
   export let disabled = false;
   export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
+  import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
-
   let selected = writable(value);
 
   setContext('TimePickerSelect', { selected });
 
-  $: {
-    selected.set(value);
-    dispatch('change', $selected);
-  }
+  $: selected.set(value);
   $: value = $selected;
 </script>
 
@@ -39,12 +34,12 @@
   {/if}
   <select
     class={cx('--select-input')}
-    {id}
-    {disabled}
-    {value}
     on:change={({ target }) => {
       selected.set(target.value);
-    }}>
+    }}
+    {id}
+    {disabled}
+    {value}>
     <slot />
   </select>
   <ChevronDownGlyph