feat(components): add ComboBox

Closes #12

src/components/ListBox/ListBox.svelte

@@ -17,6 +17,7 @@
   role="listbox"
   tabindex="-1"
   data-invalid={invalid || undefined}
+  aria-label={$$props['aria-label']}
   class={cx('--list-box', size && `--list-box--${size}`, type === 'inline' && '--list-box--inline', disabled && '--list-box--disabled', open && '--list-box--expanded', light && '--list-box--light', className)}
   on:keydown
   on:keydown={event => {

src/components/ListBox/ListBoxField.svelte

@@ -22,11 +22,16 @@
 
 <div
   role={ariaExpanded ? 'combobox' : role}
+  aria-expanded={ariaExpanded}
   aria-owns={(ariaExpanded && menuId) || undefined}
   aria-controls={(ariaExpanded && menuId) || undefined}
   aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
   tabindex={disabled ? '-1' : tabindex}
   class={cx('--list-box__field', className)}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
   {style}>
   <slot />
 </div>

src/components/ListBox/ListBoxMenuIcon.svelte

@@ -17,6 +17,9 @@
   $: description = open ? translateWithId('close') : translateWithId('open');
 </script>
 
-<div class={cx('--list-box__menu-icon', open && '--list-box__menu-icon--open', className)} {style}>
-  <ChevronDown16 name="chevron--down" aria-label={description} title={description} />
+<div
+  on:click|preventDefault|stopPropagation
+  class={cx('--list-box__menu-icon', open && '--list-box__menu-icon--open', className)}
+  {style}>
+  <ChevronDown16 name="chevron--down" tabindex="-1" aria-label={description} title={description} />
 </div>

src/components/ListBox/ListBoxMenuItem.svelte

@@ -1,16 +1,15 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let active = false;
   export let highlighted = false;
-  export let style = undefined;
 
   import { cx } from '../../lib';
 </script>
 
 <div
-  class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted', className)}
-  {style}>
+  on:click
+  on:mouseenter
+  on:mouseleave
+  class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted')}>
   <div class={cx('--list-box__menu-item__option')}>
     <slot />
   </div>

src/components/ListBox/ListBoxSelection.svelte

@@ -27,19 +27,17 @@
   tabindex={disabled ? '-1' : '0'}
   title={description}
   class={cx('--list-box__selection', selectionCount && '--tag--filter', selectionCount && '--list-box__selection--multi', className)}
-  on:click
-  on:click|stopPropagation={event => {
+  on:click|preventDefault|stopPropagation={event => {
     if (!disabled) {
       dispatch('clear', event);
     }
   }}
-  on:keydown
   on:keydown|stopPropagation={event => {
     if (!disabled && event.key === 'Enter') {
       dispatch('clear', event);
     }
   }}
   {style}>
-  {selectionCount}
-  <Close16 />
+  {#if selectionCount}{selectionCount}{/if}
+  <Close16 focusable="false" tabindex="-1" />
 </div>