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/Select/Select.svelte

@@ -1,109 +1,123 @@
 <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 name = undefined;
-  export let inline = false;
-  export let invalid = false;
-  export let invalidText = '';
-  export let labelText = '';
-  export let light = false;
-  export let noLabel = false;
   export let selected = undefined;
-  export let style = undefined;
+  export let inline = false;
+  export let light = false;
+  export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let invalid = false;
+  export let invalidText = "";
+  export let helperText = "";
+  export let noLabel = false;
+  export let labelText = "";
+  export let hideLabel = false;
+  export let ref = null;
 
-  import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
-  import { writable } from 'svelte/store';
-  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, setContext, afterUpdate } from "svelte";
+  import { writable } from "svelte/store";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
 
   const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
 
-  let selectedValue = writable(selected);
-
-  setContext('Select', { selectedValue });
+  setContext("Select", { selectedValue });
 
   afterUpdate(() => {
     selected = $selectedValue;
-    dispatch('change', $selectedValue);
+    dispatch("change", $selectedValue);
   });
 
   $: errorId = `error-${id}`;
   $: selectedValue.set(selected);
 </script>
 
-<div class={cx('--form-item')} {style}>
+<div class:bx--form-item={true} {...$$restProps}>
   <div
-    class={cx('--select', inline && '--select--inline', light && '--select--light', invalid && '--select--invalid', disabled && '--select--disabled', className)}>
+    class:bx--select={true}
+    class:bx--select--inline={inline}
+    class:bx--select--light={light}
+    class:bx--select--invalid={invalid}
+    class:bx--select--disabled={disabled}>
     {#if !noLabel}
       <label
         for={id}
-        class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+        class:bx--label={true}
+        class:bx--visually-hidden={hideLabel}
+        class:bx--label--disabled={disabled}>
         {labelText}
       </label>
     {/if}
     {#if !inline && 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}
     {#if inline}
-      <div class={cx('--select-input--inline__wrapper')}>
-        <div class={cx('--select-input__wrapper')} data-invalid={invalid || undefined}>
+      <div class:bx--select-input--inline__wrapper={true}>
+        <div
+          class:bx--select-input__wrapper={true}
+          data-invalid={invalid || undefined}>
           <select
-            class={cx('--select-input')}
+            bind:this={ref}
             aria-describedby={invalid ? errorId : undefined}
-            disabled={disabled || undefined}
             aria-invalid={invalid || undefined}
+            disabled={disabled || undefined}
+            {id}
+            {name}
+            class:bx--select-input={true}
             on:change={({ target }) => {
               selectedValue.set(target.value);
             }}
-            on:blur
-            {id}
-            {name}
-          >
+            on:blur>
             <slot />
           </select>
-          <ChevronDown16 class={cx('--select__arrow')} />
+          <ChevronDown16 class="bx--select__arrow" />
           {#if invalid}
-            <WarningFilled16 class={cx('--select__invalid-icon')} />
+            <WarningFilled16 class="bx--select__invalid-icon" />
           {/if}
         </div>
         {#if invalid}
-          <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+          <div class:bx--form-requirement={true} id={errorId}>
+            {invalidText}
+          </div>
         {/if}
       </div>
       {#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}
     {/if}
     {#if !inline}
-      <div class={cx('--select-input__wrapper')} data-invalid={invalid || undefined}>
+      <div
+        class:bx--select-input__wrapper={true}
+        data-invalid={invalid || undefined}>
         <select
-          class={cx('--select-input')}
+          bind:this={ref}
+          {id}
+          {name}
           aria-describedby={invalid ? errorId : undefined}
           disabled={disabled || undefined}
           aria-invalid={invalid || undefined}
+          class:bx--select-input={true}
           on:change={({ target }) => {
             selectedValue.set(target.value);
           }}
-          on:blur
-          {id}>
+          on:blur>
           <slot />
         </select>
-        <ChevronDown16 class={cx('--select__arrow')} />
+        <ChevronDown16 class="bx--select__arrow" />
         {#if invalid}
-          <WarningFilled16 class={cx('--select__invalid-icon')} />
+          <WarningFilled16 class="bx--select__invalid-icon" />
         {/if}
       </div>
       {#if invalid}
-        <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+        <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
       {/if}
     {/if}
   </div>