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

@@ -1,68 +1,65 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let autocomplete = "off";
   export let autofocus = false;
-  export let closeButtonLabelText = 'Clear search input';
-  export let id = Math.random();
-  export let labelText = '';
-  export let light = false;
-  export let placeholder = 'Search...';
-  export let small = false;
-  export let size = small ? 'sm' : 'xl';
+  export let closeButtonLabelText = "Clear search input";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let type = "text";
+  export let value = "";
+  export let labelText = "";
+  export let placeholder = "Search...";
   export let skeleton = false;
-  export let style = undefined;
-  export let type = 'text';
-  export let value = '';
+  export let light = false;
+  export let small = false;
+  export let size = small ? "sm" : "xl";
+  export let ref = null;
 
-  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';
-  import SearchSkeleton from './Search.Skeleton.svelte';
-
-  let inputRef = undefined;
+  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 SearchSkeleton from "./Search.Skeleton.svelte";
 </script>
 
 {#if skeleton}
   <SearchSkeleton
+    {small}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={className}
-    {style}
-    {small} />
-{/if}
-
-{#if !skeleton}
+    on:mouseleave />
+{:else}
   <div
-    class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
-    {style}>
-    <Search16 class={cx('--search-magnifier')} />
-    <label class={cx('--label')} for={id}>{labelText}</label>
+    class:bx--search={true}
+    class="bx--search--{size}"
+    class:bx--search--light={light}
+    {...$$restProps}>
+    <Search16 class="bx--search-magnifier" />
+    <label class:bx--label={true} for={id}>{labelText}</label>
     <!-- svelte-ignore a11y-autofocus -->
     <input
-      bind:this={inputRef}
+      bind:this={ref}
       role="searchbox"
-      class={cx('--search-input')}
+      class:bx--search-input={true}
+      {autofocus}
+      {autocomplete}
+      {id}
+      {placeholder}
+      {type}
+      {value}
       on:change
       on:input
       on:input={({ target }) => {
         value = target.value;
-      }}
-      {autofocus}
-      {type}
-      {id}
-      {value}
-      {placeholder} />
+      }} />
     <button
       type="button"
       aria-label={closeButtonLabelText}
-      class={cx('--search-close', value === '' && '--search-close--hidden')}
+      class:bx--search-close={true}
+      class:bx--search-close--hidden={value === ''}
       on:click
       on:click={() => {
         value = '';
-        inputRef.focus();
+        ref.focus();
       }}>
       <svelte:component this={size === 'xl' ? Close20 : Close16} />
     </button>