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

@@ -1,40 +1,35 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let size = undefined; // "xs" | "sm" | "lg"
+  export let open = false;
+  export let passiveModal = false;
   export let danger = false;
   export let hasForm = false;
   export let hasScrollingContent = false;
-  export let iconDescription = 'Close the modal';
-  export let id = Math.random();
+  export let primaryButtonDisabled = false;
+  export let shouldSubmitOnEnter = true;
   export let modalAriaLabel = undefined;
   export let modalHeading = undefined;
   export let modalLabel = undefined;
-  export let open = false;
-  export let passiveModal = false;
-  export let primaryButtonDisabled = false;
-  export let primaryButtonText = '';
-  export let secondaryButtonText = '';
-  export let selectorPrimaryFocus = '[data-modal-primary-focus]';
-  export let shouldSubmitOnEnter = true;
-  export let size = undefined;
-  export let style = undefined;
+  export let iconDescription = "Close the modal";
+  export let primaryButtonText = "";
+  export let secondaryButtonText = "";
+  export let selectorPrimaryFocus = "[data-modal-primary-focus]";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
-  import Close20 from 'carbon-icons-svelte/lib/Close20';
-  import { cx } from '../../lib';
-  import Button from '../Button';
+  import { createEventDispatcher, afterUpdate, onDestroy } from "svelte";
+  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import { Button } from "../Button";
 
   const dispatch = createEventDispatcher();
 
-  let buttonRef = undefined;
-  let outerModal = undefined;
-  let innerModal = undefined;
+  let buttonRef = null;
+  let innerModal = null;
+  let opened = false;
 
-  let opened = false
-
-  // TODO: reuse in ComposedModal
   function focus(element) {
-    const node = (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
+    const node =
+      (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
     node.focus();
   }
 
@@ -42,32 +37,37 @@
     if (opened) {
       if (!open) {
         opened = false;
-        dispatch('close');
-        document.body.classList.remove(cx('--body--with-modal-open'));
+        dispatch("close");
+        document.body.classList.remove("bx--body--with-modal-open");
       }
     } else if (open) {
       opened = true;
       focus();
-      dispatch('open');
-      document.body.classList.add(cx('--body--with-modal-open'));
+      dispatch("open");
+      document.body.classList.add("bx--body--with-modal-open");
     }
   });
 
   onDestroy(() => {
-    document.body.classList.remove(cx('--body--with-modal-open'));
+    document.body.classList.remove("bx--body--with-modal-open");
   });
 
-  $: modalInstanceId = `modal-${id}`;
-  $: modalLabelId = cx(`--modal-header__label--${modalInstanceId}`);
-  $: modalHeadingId = cx(`--modal-header__heading--${modalInstanceId}`);
-  $: ariaLabel = modalLabel || $$props['aria-label'] || modalAriaLabel || modalHeading;
+  $: modalLabelId = `bx--modal-header__label--modal-${id}`;
+  $: modalHeadingId = `bx--modal-header__heading--modal-${id}`;
+  $: ariaLabel =
+    modalLabel || $$props["aria-label"] || modalAriaLabel || modalHeading;
 </script>
 
 <div
-  bind:this={outerModal}
+  bind:this={ref}
   role="presentation"
   tabindex="-1"
-  class={cx('--modal', !passiveModal && '--modal-tall', open && 'is-visible', danger && '--modal--danger', className)}
+  {id}
+  class:bx--modal={true}
+  class:bx--modal-tall={!passiveModal}
+  class:is-visible={open}
+  class:bx--modal--danger={danger}
+  {...$$restProps}
   on:keydown
   on:keydown={({ key }) => {
     if (open) {
@@ -86,35 +86,34 @@
   }}
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  {id}
-  {style}>
+  on:mouseleave>
   <div
     bind:this={innerModal}
     role="dialog"
     aria-modal="true"
     aria-label={ariaLabel}
-    class={cx('--modal-container', size && `--modal-container--${size}`)}>
-    <div class={cx('--modal-header')}>
+    class:bx--modal-container={true}
+    class={size && `bx--modal-container--${size}`}>
+    <div class:bx--modal-header={true}>
       {#if passiveModal}
         <button
           bind:this={buttonRef}
           type="button"
           aria-label={iconDescription}
           title={iconDescription}
-          class={cx('--modal-close')}
+          class="bx--modal-close"
           on:click={() => {
             open = false;
           }}>
-          <Close20 aria-label={iconDescription} class={cx('--modal-close__icon')} />
+          <Close20 aria-label={iconDescription} class="bx--modal-close__icon" />
         </button>
       {/if}
       {#if modalLabel}
-        <h2 id={modalLabelId} class={cx('--modal-header__label')}>
+        <h2 id={modalLabelId} class:bx--modal-header__label={true}>
           <slot name="label">{modalLabel}</slot>
         </h2>
       {/if}
-      <h3 id={modalHeadingId} class={cx('--modal-header__heading')}>
+      <h3 id={modalHeadingId} class:bx--modal-header__heading={true}>
         <slot name="heading">{modalHeading}</slot>
       </h3>
       {#if !passiveModal}
@@ -123,16 +122,18 @@
           type="button"
           aria-label={iconDescription}
           title={iconDescription}
-          class={cx('--modal-close')}
+          class:bx--modal-close={true}
           on:click={() => {
             open = false;
           }}>
-          <Close20 aria-label={iconDescription} class={cx('--modal-close__icon')} />
+          <Close20 aria-label={iconDescription} class="bx--modal-close__icon" />
         </button>
       {/if}
     </div>
     <div
-      class={cx('--modal-content', hasForm && '--modal-content--with-form', hasScrollingContent && '--modal-scroll-content')}
+      class:bx--modal-content={true}
+      class:bx--modal-content--with-form={hasForm}
+      class:bx--modal-scroll-content={hasScrollingContent}
       tabindex={hasScrollingContent ? '0' : undefined}
       role={hasScrollingContent ? 'region' : undefined}
       aria-label={hasScrollingContent ? ariaLabel : undefined}
@@ -140,10 +141,10 @@
       <slot />
     </div>
     {#if hasScrollingContent}
-      <div class={cx('--modal-content--overflow-indicator')} />
+      <div class:bx--modal-content--overflow-indicator={true} />
     {/if}
     {#if !passiveModal}
-      <div class={cx('--modal-footer')}>
+      <div class:bx--modal-footer={true}>
         <Button
           kind="secondary"
           on:click={() => {