fix(select): subscribe to store

src/components/Select/Select.Story.svelte

@@ -6,14 +6,17 @@
   import SelectItem from './SelectItem.svelte';
   import SelectSkeleton from './Select.Skeleton.svelte';
   import SelectItemGroup from './SelectItemGroup.svelte';
+
+  let selected = 'placeholder-item';
 </script>
 
 <Layout>
   <div>
+    {selected}
     {#if story === 'skeleton'}
       <SelectSkeleton {...$$props} />
     {:else}
-      <Select {...$$props.select} id="select-1" defaultValue="placeholder-item">
+      <Select {...$$props.select} id="select-1" bind:selected>
         <SelectItem value="placeholder-item" text="Choose an option" disabled hidden />
         <SelectItemGroup {...$$props.group} label="Category 1">
           <SelectItem value="option-1" text="Option 1" />

src/components/Select/Select.svelte

@@ -1,17 +1,17 @@
 <script>
   let className = undefined;
   export { className as class };
+  export let disabled = false;
+  export let helperText = '';
+  export let hideLabel = false;
   export let id = Math.random();
   export let inline = false;
-  export let labelText = '';
-  export let disabled = false;
-  export let defaultValue = undefined;
-  export let hideLabel = false;
   export let invalid = false;
   export let invalidText = '';
-  export let helperText = '';
+  export let labelText = '';
   export let light = false;
   export let noLabel = false;
+  export let selected = undefined;
   export let style = undefined;
 
   import { createEventDispatcher, setContext } from 'svelte';
@@ -22,16 +22,15 @@
 
   const dispatch = createEventDispatcher();
 
-  let selected = writable(defaultValue);
+  let selectedValue = writable(selected);
 
-  setContext('Select', { selected });
+  setContext('Select', { selectedValue });
 
   $: errorId = `error-${id}`;
+  $: selected = $selectedValue;
   $: {
-    selected.set(defaultValue);
+    dispatch('change', $selectedValue);
-    dispatch('change', $selected);
   }
-  $: defaultValue = $selected;
 </script>
 
 <div class={cx('--form-item')} {style}>
@@ -58,7 +57,7 @@
             disabled={disabled || undefined}
             aria-invalid={invalid || undefined}
             on:change={({ target }) => {
-              selected.set(target.value);
+              selectedValue.set(target.value);
             }}
             {id}>
             <slot />
@@ -87,7 +86,7 @@
           aria-invalid={invalid || undefined}
           on:change
           on:change={({ target }) => {
-            selected.set(target.value);
+            selectedValue.set(target.value);
           }}
           {id}>
           <slot />

src/components/Select/SelectItem.svelte

@@ -1,24 +1,28 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let value = '';
-  export let text = '';
   export let disabled = false;
   export let hidden = false;
   export let style = undefined;
+  export let text = '';
+  export let value = '';
 
   import { getContext } from 'svelte';
   import { cx } from '../../lib';
 
   const ctx = getContext('Select') || getContext('TimePickerSelect');
+
+  let selected = false;
+
+  const unsubscribe = ctx.selectedValue.subscribe(currentValue => {
+    if (currentValue === value) {
+      selected = true;
+    }
+  });
+
+  unsubscribe();
 </script>
 
-<option
+<option class={cx('--select-option', className)} {value} {disabled} {hidden} {style} {selected}>
-  selected={ctx.$selected === value}
-  class={cx('--select-option', className)}
-  {value}
-  {disabled}
-  {hidden}
-  {style}>
   {text}
 </option>