refactor(toggle): forward events, inline functions

Supports #7

- Forward events
- Add style prop
- Remove exported props
- Inline change, keyup functions
- Dispatch only 'toggle' event

src/components/Toggle/Toggle.Skeleton.svelte

@@ -3,7 +3,7 @@
   export { className as class };
   export let id = undefined;
   export let labelText = undefined;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -11,7 +11,7 @@
   const ariaLabel = labelText ? null : $$props['aria-label'] || 'Toggle is loading';
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
   <label class={cx('--toggle__label', '--skeleton')} aria-label={ariaLabel} for={id}>
     {#if labelText}

src/components/Toggle/Toggle.svelte

@@ -7,7 +7,7 @@
   export let labelText = undefined;
   export let labelA = 'Off';
   export let labelB = 'On';
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import { cx } from '../../lib';
@@ -15,37 +15,37 @@
   const dispatch = createEventDispatcher();
   const _class = cx('--form-item', className);
   const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
+
   let inputRef = undefined;
 
-  function handleChange(event) {
+  $: {
-    dispatch('change', event);
+    dispatch('toggle', { id, toggled });
-    dispatch('toggle', { checked: inputRef.checked, id, event });
-  }
 
-  function handleKeyUp(event) {
+    if (inputRef) {
-    if (event.key === 'Enter') {
+      inputRef.checked = toggled;
-      if (inputRef) {
-        inputRef.checked = !inputRef.checked;
-      }
-
-      handleChange(event);
     }
   }
 </script>
 
-<div class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input
-    {...props}
+    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input')}
-    bind:this={inputRef}
     checked={toggled}
-    {disabled}
-    {id}
     on:change
-    on:change={handleChange}
+    on:change={() => {
+      toggled = !toggled;
+    }}
     on:keyup
-    on:keyup={handleKeyUp} />
+    on:keyup={event => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        toggled = !toggled;
+      }
+    }}
+    {disabled}
+    {id} />
   <label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}>
     {labelText}
     <span class={cx('--toggle__switch')}>

src/components/ToggleSmall/ToggleSmall.Skeleton.svelte

@@ -3,7 +3,7 @@
   export { className as class };
   export let id = undefined;
   export let labelText = undefined;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -11,7 +11,7 @@
   const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle is loading';
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input type="checkbox" class={cx('--toggle', '--toggle--small', '--skeleton')} {id} />
   <label class={cx('--toggle__label --skeleton')} for={id}>
     {#if labelText}

src/components/ToggleSmall/ToggleSmall.svelte

@@ -7,7 +7,7 @@
   export let labelText = undefined;
   export let labelA = 'Off';
   export let labelB = 'On';
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import { cx } from '../../lib';
@@ -15,37 +15,37 @@
   const dispatch = createEventDispatcher();
   const _class = cx('--form-item', className);
   const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
+
   let inputRef = undefined;
 
-  function handleChange(event) {
+  $: {
-    dispatch('change', event);
+    dispatch('toggle', { id, toggled });
-    dispatch('toggle', { checked: inputRef.checked, id, event });
-  }
 
-  function handleKeyUp(event) {
+    if (inputRef) {
-    if (event.key === 'Enter') {
+      inputRef.checked = toggled;
-      if (inputRef) {
-        inputRef.checked = !inputRef.checked;
-      }
-
-      handleChange(event);
     }
   }
 </script>
 
-<div class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input
-    {...props}
+    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input', '--toggle-input--small')}
-    bind:this={inputRef}
     checked={toggled}
-    {disabled}
-    {id}
     on:change
-    on:change={handleChange}
+    on:change={() => {
+      toggled = !toggled;
+    }}
     on:keyup
-    on:keyup={handleKeyUp} />
+    on:keyup={event => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        toggled = !toggled;
+      }
+    }}
+    {disabled}
+    {id} />
 
   <label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}>
     {labelText}