fix(time-picker-select): change select to selectValue

src/components/Search/Search.svelte

@@ -1,21 +1,21 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let value = '';
   export let autofocus = false;
-  export let type = 'text';
-  export let small = false;
-  export let placeholder = '';
-  export let labelText = '';
   export let closeButtonLabelText = 'Clear search input';
-  export let size = small ? 'sm' : 'xl';
-  export let light = false;
   export let id = Math.random();
+  export let labelText = '';
+  export let light = false;
+  export let placeholder = '';
+  export let size = small ? 'sm' : 'xl';
+  export let small = false;
   export let style = undefined;
+  export let type = 'text';
+  export let value = '';
 
-  import Search16 from 'carbon-icons-svelte/lib/Search16';
   import Close16 from 'carbon-icons-svelte/lib/Close16';
   import Close20 from 'carbon-icons-svelte/lib/Close20';
+  import Search16 from 'carbon-icons-svelte/lib/Search16';
   import { cx } from '../../lib';
 
   let inputRef = undefined;
@@ -25,7 +25,7 @@
   class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
   {style}>
   <Search16 class={cx('--search-magnifier')} />
-  <label for={id} class={cx('--label')}>{labelText}</label>
+  <label class={cx('--label')} for={id}>{labelText}</label>
   <!-- svelte-ignore a11y-autofocus -->
   <input
     bind:this={inputRef}
@@ -43,13 +43,13 @@
     {placeholder} />
   <button
     type="button"
+    aria-label={closeButtonLabelText}
     class={cx('--search-close', value === '' && '--search-close--hidden')}
     on:click
     on:click={() => {
       value = '';
       inputRef.focus();
-    }}
+    }}>
-    aria-label={closeButtonLabelText}>
     <svelte:component this={size === 'xl' ? Close20 : Close16} />
   </button>
 </div>

src/components/TimePicker/TimePicker.svelte

@@ -1,19 +1,19 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
+  export let disabled = false;
-  export let value = '';
-  export let labelText = '';
   export let hideLabel = false;
-  export let type = 'text';
+  export let id = Math.random();
+  export let invalid = false;
+  export let invalidText = 'Invalid time format.';
+  export let labelText = '';
+  export let light = false;
+  export let maxlength = 5;
   export let pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?';
   export let placeholder = 'hh=mm';
-  export let maxlength = 5;
-  export let invalidText = 'Invalid time format.';
-  export let invalid = false;
-  export let disabled = false;
-  export let light = false;
   export let style = undefined;
+  export let type = 'text';
+  export let value = '';
 
   import { cx } from '../../lib';
 </script>

src/components/TimePicker/TimePickerSelect.svelte

@@ -1,25 +1,25 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
+  export let disabled = false;
-  export let value = '';
-  export let labelText = '';
   export let hideLabel = true;
   export let iconDescription = 'Open list of options';
-  export let disabled = false;
+  export let id = Math.random();
+  export let labelText = '';
   export let style = undefined;
+  export let value = '';
 
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
   import { cx } from '../../lib';
 
-  let selected = writable(value);
+  let selectedValue = writable(value);
 
-  setContext('TimePickerSelect', { selected });
+  setContext('TimePickerSelect', { selectedValue });
 
-  $: selected.set(value);
+  $: selectedValue.set(value);
-  $: value = $selected;
+  $: value = $selectedValue;
 </script>
 
 <div
@@ -35,7 +35,7 @@
   <select
     class={cx('--select-input')}
     on:change={({ target }) => {
-      selected.set(target.value);
+      selectedValue.set(target.value);
     }}
     {id}
     {disabled}