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

@@ -1,50 +1,49 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let as = undefined;
   export let disabled = false;
   export let href = undefined;
   export let icon = undefined;
   export let iconDescription = undefined;
   export let hasIconOnly = false;
-  export let kind = 'primary';
-  export let size = 'default';
-  export let style = undefined;
-  export let tabindex = '0';
+  export let kind = "primary";
+  export let size = "default";
+  export let tabindex = "0";
   export let tooltipAlignment = undefined;
   export let tooltipPosition = undefined;
-  export let type = 'button';
+  export let type = "button";
+  export let ref = null;
 
-  import { getContext } from 'svelte';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
 
-  const ctx = getContext('ComposedModal');
+  const ctx = getContext("ComposedModal");
 
-  let buttonRef = undefined;
-
-  $: if (ctx && buttonRef) {
-    ctx.declareRef(buttonRef);
+  $: if (ctx && ref) {
+    ctx.declareRef(ref);
   }
   $: buttonProps = {
-    role: 'button',
+    role: "button",
     type: href && !disabled ? undefined : type,
     tabindex,
     disabled,
     href,
-    style,
-    class: cx(
-      '--btn',
-      size === 'field' && '--btn--field',
-      size === 'small' && '--btn--sm',
-      kind && `--btn--${kind}`,
-      disabled && '--btn--disabled',
-      hasIconOnly && '--btn--icon-only',
-      hasIconOnly && '--tooltip__trigger',
-      hasIconOnly && '--tooltip--a11y',
-      hasIconOnly && tooltipPosition && `--tooltip--${tooltipPosition}`,
-      hasIconOnly && tooltipAlignment && `--tooltip--align-${tooltipAlignment}`,
-      className
-    )
+    style: $$restProps.style,
+    class: [
+      "bx--btn",
+      size === "field" && "bx--btn--field",
+      size === "small" && "bx--btn--sm",
+      kind && `bx--btn--${kind}`,
+      disabled && "bx--btn--disabled",
+      hasIconOnly && "bx--btn--icon-only",
+      hasIconOnly && "bx--tooltip__trigger",
+      hasIconOnly && "bx--tooltip--a11y",
+      hasIconOnly && tooltipPosition && `bx--tooltip--${tooltipPosition}`,
+      hasIconOnly &&
+        tooltipAlignment &&
+        `bx--tooltip--align-${tooltipAlignment}`,
+      $$restProps.class
+    ]
+      .filter(Boolean)
+      .join(" ")
   };
 </script>
 
@@ -52,30 +51,42 @@
   <slot props={buttonProps} />
 {:else if href && !disabled}
   <!-- svelte-ignore a11y-missing-attribute -->
-  <a {...buttonProps} on:click on:mouseover on:mouseenter on:mouseleave>
+  <a
+    bind:this={ref}
+    {...buttonProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
     {#if hasIconOnly}
-      <span class={cx('--assistive-text')}>{iconDescription}</span>
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
     {/if}
     <slot />
     {#if icon}
       <svelte:component
         this={icon}
         aria-hidden="true"
-        class={cx('--btn__icon')}
+        class="bx--btn__icon"
         aria-label={iconDescription} />
     {/if}
   </a>
 {:else}
-  <button {...buttonProps} bind:this={buttonRef} on:click on:mouseover on:mouseenter on:mouseleave>
+  <button
+    bind:this={ref}
+    {...buttonProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
     {#if hasIconOnly}
-      <span class={cx('--assistive-text')}>{iconDescription}</span>
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
     {/if}
     <slot />
     {#if icon}
       <svelte:component
         this={icon}
         aria-hidden="true"
-        class={cx('--btn__icon')}
+        class="bx--btn__icon"
         aria-label={iconDescription} />
     {/if}
   </button>