refactor(toggle): remove dispatch, inputRef, afterUpdate

src/components/Toggle/Toggle.Skeleton.svelte

@@ -11,7 +11,7 @@
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
   <label
-    aria-label={labelText ? null : $$props['aria-label'] || 'Toggle is loading'}
+    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
     class={cx('--toggle__label', '--skeleton')}
     for={id}>
     {#if labelText}

src/components/Toggle/Toggle.Story.svelte

@@ -4,11 +4,17 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import Toggle from './Toggle.svelte';
   import ToggleSkeleton from './Toggle.Skeleton.svelte';
+
+  let toggled = true;
+
+  $: {
+    console.log('toggled', toggled);
+  }
 </script>
 
 <Layout>
   {#if story === 'toggled'}
-    <Toggle {...$$props} id="toggle-1" toggled />
+    <Toggle {...$$props} id="toggle-1" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSkeleton />
   {:else}

src/components/Toggle/Toggle.svelte

@@ -9,22 +9,11 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
-
-  const dispatch = createEventDispatcher();
-
-  let inputRef = undefined;
-
-  afterUpdate(() => {
-    inputRef.checked = toggled;
-    dispatch('toggle', { id, toggled });
-  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input
-    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input')}
     checked={toggled}
@@ -39,6 +28,8 @@
         toggled = !toggled;
       }
     }}
+    on:focus
+    on:blur
     {disabled}
     {id} />
   <label

src/components/ToggleSmall/ToggleSmall.Story.svelte

@@ -4,11 +4,17 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import ToggleSmall from './ToggleSmall.svelte';
   import ToggleSmallSkeleton from './ToggleSmall.Skeleton.svelte';
+
+  let toggled = true;
+
+  $: {
+    console.log('toggled', toggled);
+  }
 </script>
 
 <Layout>
   {#if story === 'toggled'}
-    <ToggleSmall {...$$props} id="toggle-1" toggled />
+    <ToggleSmall {...$$props} id="toggle-1" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSmallSkeleton />
   {:else}

src/components/ToggleSmall/ToggleSmall.svelte

@@ -9,22 +9,11 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
-
-  const dispatch = createEventDispatcher();
-
-  let inputRef = undefined;
-
-  afterUpdate(() => {
-    inputRef.checked = toggled;
-    dispatch('toggle', { id, toggled });
-  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input
-    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input', '--toggle-input--small')}
     checked={toggled}
@@ -39,9 +28,10 @@
         toggled = !toggled;
       }
     }}
+    on:focus
+    on:blur
     {disabled}
     {id} />
-
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
     class={cx('--toggle-input__label')}