refactor: use $$restProps API

- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities

src/components/ComboBox/ComboBox.svelte

@@ -1,39 +1,36 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let disabled = false;
-  export let helperText = '';
-  export let id = Math.random();
+  export let helperText = "";
+  export let id = "ccs-" + Math.random().toString(36);
   export let invalid = false;
-  export let invalidText = '';
+  export let invalidText = "";
   export let items = [];
   export let itemToString = item => item.text || item.id;
   export let light = false;
   export let open = false;
-  export let placeholder = '';
+  export let placeholder = "";
   export let selectedIndex = -1;
   export let shouldFilterItem = () => true;
   export let size = undefined;
-  export let style = undefined;
-  export let titleText = '';
+  export let titleText = "";
   export let translateWithId = undefined;
-  export let value = '';
+  export let value = "";
   export let name = undefined;
+  export let ref = null;
 
-  import { afterUpdate } from 'svelte';
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
-  import ListBox, {
+  import { afterUpdate } from "svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import {
+    ListBox,
     ListBoxField,
     ListBoxMenu,
     ListBoxMenuIcon,
     ListBoxMenuItem,
     ListBoxSelection
-  } from '../ListBox';
+  } from "../ListBox";
 
   let selectedId = undefined;
-  let inputRef = undefined;
-  let inputValue = '';
+  let inputValue = "";
   let highlightedIndex = -1;
 
   function change(direction) {
@@ -50,18 +47,20 @@
 
   afterUpdate(() => {
     if (open) {
-      inputRef.focus();
+      ref.focus();
       filteredItems = items.filter(item => shouldFilterItem(item, value));
     } else {
       highlightedIndex = -1;
-      inputValue = selectedItem ? selectedItem.text : '';
+      inputValue = selectedItem ? selectedItem.text : "";
     }
   });
 
-  $: ariaLabel = $$props['aria-label'] || 'Choose an item';
+  $: ariaLabel = $$props["aria-label"] || "Choose an item";
   $: menuId = `menu-${id}`;
   $: comboId = `combo-${id}`;
-  $: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : undefined;
+  $: highlightedId = items[highlightedIndex]
+    ? items[highlightedIndex].id
+    : undefined;
   $: filteredItems = items.filter(item => shouldFilterItem(item, value));
   $: selectedItem = items[selectedIndex];
   $: inputValue = selectedItem ? selectedItem.text : undefined;
@@ -70,22 +69,26 @@
 
 <svelte:body
   on:click={({ target }) => {
-    if (open && inputRef && !inputRef.contains(target)) {
+    if (open && ref && !ref.contains(target)) {
       open = false;
     }
   }} />
 
-<div class={cx('--list-box__wrapper', className)} {style}>
+<div class:bx--list-box__wrapper={true} {...$$restProps}>
   {#if titleText}
-    <label class={cx('--label', disabled && '--label--disabled')} for={id}>{titleText}</label>
+    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+      {titleText}
+    </label>
   {/if}
   {#if helperText}
-    <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}>
       {helperText}
     </div>
   {/if}
   <ListBox
-    class={cx('--combo-box')}
+    class="bx--combo-box"
     id={comboId}
     aria-label={ariaLabel}
     {disabled}
@@ -105,7 +108,7 @@
       {disabled}
       {translateWithId}>
       <input
-        bind:this={inputRef}
+        bind:this={ref}
         tabindex="0"
         autocomplete="off"
         aria-autocomplete="list"
@@ -115,7 +118,8 @@
         aria-disabled={disabled}
         aria-controls={open ? menuId : undefined}
         aria-owns={open ? menuId : undefined}
-        class={cx('--text-input', inputValue === '' && '--text-input--empty')}
+        class:bx--text-input={true}
+        class:bx--text-input--empty={inputValue === ''}
         on:input={({ target }) => {
           inputValue = target.value;
         }}
@@ -139,7 +143,7 @@
         on:blur
         on:blur={({ relatedTarget }) => {
           if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
-            inputRef.focus();
+            ref.focus();
           }
         }}
         {disabled}
@@ -147,7 +151,7 @@
         {id}
         value={inputValue} />
       {#if invalid}
-        <WarningFilled16 class={cx('--list-box__invalid-icon')} />
+        <WarningFilled16 class="bx--list-box__invalid-icon" />
       {/if}
       {#if inputValue}
         <ListBoxSelection
@@ -175,7 +179,9 @@
             highlighted={highlightedIndex === i || selectedIndex === i}
             on:click={() => {
               selectedId = item.id;
-              selectedIndex = items.map(({ id }) => id).indexOf(filteredItems[i].id);
+              selectedIndex = items
+                .map(({ id }) => id)
+                .indexOf(filteredItems[i].id);
               open = false;
             }}
             on:mouseenter={() => {