From e886d772c731cabb5992650fca966e9786da5a03 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 18 Jul 2020 20:00:20 -0700
Subject: [PATCH] refactor: use $$restProps API

- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
---
 .storybook/preview-body.html                  |   8 +
 .storybook/preview-head.html                  |   5 +-
 package.json                                  |   2 +-
 .../Accordion/Accordion.Skeleton.svelte       |  37 ++-
 .../Accordion/Accordion.Story.svelte          |  95 +++----
 src/components/Accordion/Accordion.stories.js |  31 ++-
 src/components/Accordion/Accordion.svelte     |  23 +-
 src/components/Accordion/AccordionItem.svelte |  28 +-
 src/components/Accordion/index.js             |   8 +-
 .../Breadcrumb/Breadcrumb.Skeleton.svelte     |  19 +-
 .../Breadcrumb/Breadcrumb.Story.svelte        |  63 ++---
 .../Breadcrumb/Breadcrumb.stories.js          |  16 +-
 src/components/Breadcrumb/Breadcrumb.svelte   |  16 +-
 src/components/Breadcrumb/Breadcrumb.test.js  |  40 +--
 .../Breadcrumb/BreadcrumbItem.svelte          |  20 +-
 src/components/Breadcrumb/index.js            |   8 +-
 src/components/Button/Button.Skeleton.svelte  |  23 +-
 src/components/Button/Button.Story.svelte     |  72 +++--
 src/components/Button/Button.stories.js       |  72 ++---
 src/components/Button/Button.svelte           |  81 +++---
 src/components/Button/index.js                |   6 +-
 .../Checkbox/Checkbox.Skeleton.svelte         |  18 +-
 src/components/Checkbox/Checkbox.Story.svelte |  70 ++---
 src/components/Checkbox/Checkbox.stories.js   |  30 +-
 src/components/Checkbox/Checkbox.svelte       |  55 ++--
 src/components/Checkbox/index.js              |   6 +-
 .../CodeSnippet/CodeSnippet.Skeleton.svelte   |  18 +-
 .../CodeSnippet/CodeSnippet.Story.svelte      |  52 ++--
 .../CodeSnippet/CodeSnippet.stories.js        |  53 ++--
 src/components/CodeSnippet/CodeSnippet.svelte | 102 ++++---
 src/components/CodeSnippet/index.js           |   6 +-
 src/components/ComboBox/ComboBox.Story.svelte |  82 +++---
 src/components/ComboBox/ComboBox.stories.js   |  34 +--
 src/components/ComboBox/ComboBox.svelte       |  66 +++--
 src/components/ComboBox/index.js              |   4 +-
 .../ComposedModal/ComposedModal.Story.svelte  | 128 +++++----
 .../ComposedModal/ComposedModal.stories.js    | 176 +++++++-----
 .../ComposedModal/ComposedModal.svelte        |  65 +++--
 src/components/ComposedModal/ModalBody.svelte |  12 +-
 .../ComposedModal/ModalFooter.svelte          |  18 +-
 .../ComposedModal/ModalHeader.svelte          |  45 +--
 src/components/ComposedModal/index.js         |  10 +-
 .../ContentSwitcher.Story.svelte              |  24 +-
 .../ContentSwitcher.stories.js                |  16 +-
 .../ContentSwitcher/ContentSwitcher.svelte    |  46 ++--
 src/components/ContentSwitcher/Switch.svelte  |  48 ++--
 src/components/ContentSwitcher/index.js       |   6 +-
 src/components/Copy/Copy.svelte               |  53 ++--
 src/components/Copy/index.js                  |   4 +-
 .../CopyButton/CopyButton.Story.svelte        |  13 +-
 .../CopyButton/CopyButton.stories.js          |  20 +-
 src/components/CopyButton/CopyButton.svelte   |  54 +---
 src/components/CopyButton/index.js            |   4 +-
 .../DataTable/DataTable.Story.svelte          | 112 ++++----
 src/components/DataTable/DataTable.stories.js |  36 +--
 src/components/DataTable/DataTable.svelte     |  67 ++---
 src/components/DataTable/Table.svelte         |  31 ++-
 src/components/DataTable/TableBody.svelte     |   8 +-
 src/components/DataTable/TableCell.svelte     |   8 +-
 .../DataTable/TableContainer.svelte           |  20 +-
 src/components/DataTable/TableHead.svelte     |   8 +-
 src/components/DataTable/TableHeader.svelte   |  48 ++--
 src/components/DataTable/TableRow.svelte      |  11 +-
 src/components/DataTable/index.js             |  18 +-
 .../DataTableSkeleton/DataTable.stories.js    |  18 +-
 .../DataTableSkeleton.Story.svelte            |   4 +-
 .../DataTableSkeleton.svelte                  |  25 +-
 src/components/DataTableSkeleton/index.js     |   4 +-
 .../DatePicker/DatePicker.Skeleton.svelte     |  29 +-
 .../DatePicker/DatePicker.Story.svelte        |  12 +-
 .../DatePicker/DatePicker.stories.js          | 161 +++++++----
 src/components/DatePicker/DatePicker.svelte   |  69 +++--
 .../DatePicker/DatePickerInput.svelte         |  50 ++--
 src/components/DatePicker/createCalendar.js   |  66 +++--
 src/components/DatePicker/index.js            |   6 +-
 .../Dropdown/Dropdown.Skeleton.svelte         |  19 +-
 src/components/Dropdown/Dropdown.Story.svelte |  21 +-
 src/components/Dropdown/Dropdown.stories.js   |  50 ++--
 src/components/Dropdown/Dropdown.svelte       |  87 +++---
 src/components/Dropdown/index.js              |   6 +-
 .../FileUploader/FileUploader.Skeleton.svelte |  19 +-
 .../FileUploader/FileUploader.Story.svelte    |  22 +-
 .../FileUploader/FileUploader.stories.js      | 136 +++++----
 .../FileUploader/FileUploader.svelte          |  71 +++--
 .../FileUploader/FileUploaderButton.svelte    |  51 ++--
 .../FileUploaderDropContainer.svelte          |  56 ++--
 .../FileUploader/FileUploaderItem.svelte      |  37 ++-
 src/components/FileUploader/Filename.svelte   |  37 ++-
 src/components/FileUploader/index.js          |  12 +-
 src/components/Form/Form.Story.svelte         |  82 ++++--
 src/components/Form/Form.stories.js           |  16 +-
 src/components/Form/Form.svelte               |  14 +-
 src/components/Form/index.js                  |   4 +-
 src/components/FormGroup/FormGroup.svelte     |  19 +-
 src/components/FormGroup/index.js             |   4 +-
 src/components/FormItem/FormItem.Story.svelte |   6 +-
 src/components/FormItem/FormItem.stories.js   |   6 +-
 src/components/FormItem/FormItem.svelte       |  16 +-
 src/components/FormItem/index.js              |   4 +-
 .../FormLabel/FormLabel.Story.svelte          |   6 +-
 src/components/FormLabel/FormLabel.stories.js |   8 +-
 src/components/FormLabel/FormLabel.svelte     |  15 +-
 src/components/FormLabel/index.js             |   4 +-
 src/components/Icon/Icon.Skeleton.svelte      |  12 +-
 src/components/Icon/Icon.Story.svelte         |  12 +-
 src/components/Icon/Icon.stories.js           |  24 +-
 src/components/Icon/Icon.svelte               |  27 +-
 src/components/Icon/index.js                  |   6 +-
 .../InlineLoading/InlineLoading.Story.svelte  |  18 +-
 .../InlineLoading/InlineLoading.stories.js    |  30 +-
 .../InlineLoading/InlineLoading.svelte        |  35 +--
 .../InlineLoading/InlineLoading.test.js       |  28 +-
 src/components/InlineLoading/index.js         |   4 +-
 src/components/Link/Link.Story.svelte         |   9 +-
 src/components/Link/Link.stories.js           |  14 +-
 src/components/Link/Link.svelte               |  31 +--
 src/components/Link/Link.test.js              |  20 +-
 src/components/Link/index.js                  |   4 +-
 src/components/ListBox/ListBox.svelte         |  33 +--
 src/components/ListBox/ListBoxField.svelte    |  37 ++-
 src/components/ListBox/ListBoxMenu.svelte     |  13 +-
 src/components/ListBox/ListBoxMenuIcon.svelte |  21 +-
 src/components/ListBox/ListBoxMenuItem.svelte |  13 +-
 .../ListBox/ListBoxSelection.svelte           |  50 ++--
 src/components/ListBox/index.js               |  14 +-
 src/components/ListItem/ListItem.svelte       |  16 +-
 src/components/ListItem/index.js              |   4 +-
 src/components/Loading/Loading.Story.svelte   |   4 +-
 src/components/Loading/Loading.stories.js     |  16 +-
 src/components/Loading/Loading.svelte         |  65 +++--
 src/components/Loading/Loading.test.js        |  24 +-
 src/components/Loading/index.js               |   4 +-
 src/components/Modal/Modal.Story.svelte       |  60 ++--
 src/components/Modal/Modal.stories.js         |  63 +++--
 src/components/Modal/Modal.svelte             |  99 +++----
 src/components/Modal/index.js                 |   4 +-
 .../MultiSelect/MultiSelect.Story.svelte      |  27 +-
 .../MultiSelect/MultiSelect.stories.js        |  53 ++--
 src/components/MultiSelect/MultiSelect.svelte | 128 +++++----
 src/components/MultiSelect/index.js           |   4 +-
 .../Notification/InlineNotification.svelte    |  48 ++--
 .../Notification/Notification.Story.svelte    |  21 +-
 .../Notification/Notification.stories.js      |  62 +++--
 .../NotificationActionButton.svelte           |  13 +-
 .../Notification/NotificationButton.svelte    |  30 +-
 .../Notification/NotificationIcon.svelte      |  25 +-
 .../NotificationTextDetails.svelte            |  24 +-
 .../Notification/ToastNotification.svelte     |  53 ++--
 src/components/Notification/index.js          |  12 +-
 .../NumberInput/NumberInput.Skeleton.svelte   |  17 +-
 .../NumberInput/NumberInput.Story.svelte      |   8 +-
 .../NumberInput/NumberInput.stories.js        |  46 ++--
 src/components/NumberInput/NumberInput.svelte | 115 +++++---
 src/components/NumberInput/index.js           |   6 +-
 .../OrderedList/OrderedList.Story.svelte      |   6 +-
 .../OrderedList/OrderedList.stories.js        |   8 +-
 src/components/OrderedList/OrderedList.svelte |  12 +-
 src/components/OrderedList/index.js           |   4 +-
 .../OverflowMenu/OverflowMenu.Story.svelte    |  38 ++-
 .../OverflowMenu/OverflowMenu.stories.js      |  77 +++---
 .../OverflowMenu/OverflowMenu.svelte          |  94 ++++---
 .../OverflowMenu/OverflowMenuItem.svelte      |  38 ++-
 src/components/OverflowMenu/formatStyle.js    |   8 +-
 src/components/OverflowMenu/index.js          |   6 +-
 .../Pagination/Pagination.Skeleton.svelte     |  18 +-
 .../Pagination/Pagination.Story.svelte        |   6 +-
 .../Pagination/Pagination.stories.js          |  84 ++++--
 src/components/Pagination/Pagination.svelte   |  77 +++---
 src/components/Pagination/index.js            |   6 +-
 .../ProgressIndicator.Skeleton.svelte         |  25 +-
 .../ProgressIndicator.Story.svelte            |  14 +-
 .../ProgressIndicator.stories.js              |  26 +-
 .../ProgressIndicator.svelte                  |  26 +-
 .../ProgressIndicator/ProgressStep.svelte     |  49 ++--
 src/components/ProgressIndicator/index.js     |   8 +-
 .../RadioButton/RadioButton.Skeleton.svelte   |  18 +-
 .../RadioButton/RadioButton.Story.svelte      |  10 +-
 .../RadioButton/RadioButton.stories.js        |  28 +-
 src/components/RadioButton/RadioButton.svelte |  50 ++--
 src/components/RadioButton/index.js           |   6 +-
 .../RadioButtonGroup.Story.svelte             |  10 +-
 .../RadioButtonGroup.stories.js               |  56 ++--
 .../RadioButtonGroup/RadioButtonGroup.svelte  |  33 +--
 src/components/RadioButtonGroup/index.js      |   4 +-
 src/components/Search/Search.Skeleton.svelte  |  17 +-
 src/components/Search/Search.Story.svelte     |  12 +-
 src/components/Search/Search.stories.js       |  30 +-
 src/components/Search/Search.svelte           |  77 +++---
 src/components/Search/index.js                |   6 +-
 src/components/Select/Select.Skeleton.svelte  |  19 +-
 src/components/Select/Select.Story.svelte     |  26 +-
 src/components/Select/Select.stories.js       |  44 +--
 src/components/Select/Select.svelte           | 106 +++----
 src/components/Select/SelectItem.svelte       |  29 +-
 src/components/Select/SelectItemGroup.svelte  |   9 +-
 src/components/Select/index.js                |  10 +-
 .../SkeletonPlaceholder.Story.svelte          |   4 +-
 .../SkeletonPlaceholder.stories.js            |  16 +-
 .../SkeletonPlaceholder.svelte                |  14 +-
 src/components/SkeletonPlaceholder/index.js   |   4 +-
 .../SkeletonText/SkeletonText.Story.svelte    |   4 +-
 .../SkeletonText/SkeletonText.stories.js      |  22 +-
 .../SkeletonText/SkeletonText.svelte          |  36 ++-
 src/components/SkeletonText/index.js          |   4 +-
 src/components/Slider/Slider.Skeleton.svelte  |  29 +-
 src/components/Slider/Slider.Story.svelte     |   8 +-
 src/components/Slider/Slider.stories.js       |  49 ++--
 src/components/Slider/Slider.svelte           |  76 ++---
 src/components/Slider/index.js                |   6 +-
 .../StructuredList.Skeleton.svelte            |  37 ++-
 .../StructuredList.Story.svelte               |  54 ++--
 .../StructuredList/StructuredList.stories.js  |  10 +-
 .../StructuredList/StructuredList.svelte      |  27 +-
 .../StructuredList/StructuredListBody.svelte  |  14 +-
 .../StructuredList/StructuredListCell.svelte  |  13 +-
 .../StructuredList/StructuredListHead.svelte  |  14 +-
 .../StructuredList/StructuredListInput.svelte |  30 +-
 .../StructuredList/StructuredListRow.svelte   |  24 +-
 src/components/StructuredList/index.js        |  17 +-
 src/components/Tabs/Tab.svelte                |  41 ++-
 src/components/Tabs/TabContent.svelte         |  18 +-
 src/components/Tabs/Tabs.Story.svelte         |  12 +-
 src/components/Tabs/Tabs.stories.js           |  55 ++--
 src/components/Tabs/Tabs.svelte               |  41 +--
 src/components/Tabs/TabsSkeleton.svelte       |  25 +-
 src/components/Tabs/index.js                  |  10 +-
 src/components/Tag/Tag.svelte                 |   6 +-
 .../TextArea/TextArea.Skeleton.svelte         |  17 +-
 src/components/TextArea/TextArea.Story.svelte |  13 +-
 src/components/TextArea/TextArea.stories.js   |  36 +--
 src/components/TextArea/TextArea.svelte       |  70 +++--
 src/components/TextArea/index.js              |   6 +-
 src/components/TextInput/PasswordInput.svelte |  96 ++++---
 .../TextInput/TextInput.Skeleton.svelte       |  17 +-
 .../TextInput/TextInput.Story.svelte          |  21 +-
 src/components/TextInput/TextInput.stories.js | 120 ++++----
 src/components/TextInput/TextInput.svelte     |  71 ++---
 src/components/TextInput/index.js             |   8 +-
 src/components/Tile/ClickableTile.svelte      |  19 +-
 src/components/Tile/ExpandableTile.svelte     |  68 ++---
 src/components/Tile/RadioTile.svelte          |  53 ++--
 src/components/Tile/SelectableTile.svelte     |  49 ++--
 src/components/Tile/Tile.Story.svelte         |  45 +--
 src/components/Tile/Tile.stories.js           |  54 ++--
 src/components/Tile/Tile.svelte               |  12 +-
 src/components/Tile/TileGroup.svelte          |  23 +-
 src/components/Tile/index.js                  |  14 +-
 .../TimePicker/TimePicker.Story.svelte        |  29 +-
 .../TimePicker/TimePicker.stories.js          |  64 +++--
 src/components/TimePicker/TimePicker.svelte   |  53 ++--
 .../TimePicker/TimePickerSelect.svelte        |  44 +--
 src/components/TimePicker/index.js            |   6 +-
 src/components/Toggle/Toggle.Skeleton.svelte  |  36 ++-
 src/components/Toggle/Toggle.Story.svelte     |  13 +-
 src/components/Toggle/Toggle.stories.js       |  44 +--
 src/components/Toggle/Toggle.svelte           |  48 ++--
 src/components/Toggle/index.js                |   6 +-
 .../ToggleSmall/ToggleSmall.Skeleton.svelte   |  40 ++-
 .../ToggleSmall/ToggleSmall.Story.svelte      |  19 +-
 .../ToggleSmall/ToggleSmall.stories.js        |  44 +--
 src/components/ToggleSmall/ToggleSmall.svelte |  61 ++--
 src/components/ToggleSmall/index.js           |   6 +-
 src/components/Tooltip/Tooltip.Story.svelte   |  33 ++-
 src/components/Tooltip/Tooltip.stories.js     |  58 ++--
 src/components/Tooltip/Tooltip.svelte         | 104 ++++---
 src/components/Tooltip/index.js               |   4 +-
 .../TooltipDefinition.Story.svelte            |   6 +-
 .../TooltipDefinition.stories.js              |  34 +--
 .../TooltipDefinition.svelte                  |  51 +++-
 src/components/TooltipDefinition/index.js     |   4 +-
 .../TooltipIcon/TooltipIcon.Story.svelte      |   6 +-
 .../TooltipIcon/TooltipIcon.stories.js        |  28 +-
 src/components/TooltipIcon/TooltipIcon.svelte |  41 ++-
 src/components/TooltipIcon/index.js           |   4 +-
 src/components/UIShell/FormTest.svelte        |  21 +-
 src/components/UIShell/SkipToContent.svelte   |   2 +-
 .../UnorderedList/UnorderedList.Story.svelte  |   6 +-
 .../UnorderedList/UnorderedList.stories.js    |   8 +-
 .../UnorderedList/UnorderedList.svelte        |  12 +-
 src/components/UnorderedList/index.js         |   4 +-
 src/index.js                                  | 260 +++++-------------
 src/internal/ui/Layout.svelte                 |  13 +-
 src/lib/__tests__/css.spec.js                 |   9 -
 src/lib/__tests__/fill-array.spec.js          |   7 -
 src/lib/css.js                                |  16 --
 src/lib/fill-array.js                         |   5 -
 src/lib/index.js                              |   4 +-
 yarn.lock                                     |   8 +-
 288 files changed, 4681 insertions(+), 4498 deletions(-)
 create mode 100644 .storybook/preview-body.html
 delete mode 100644 src/lib/__tests__/css.spec.js
 delete mode 100644 src/lib/__tests__/fill-array.spec.js
 delete mode 100644 src/lib/css.js
 delete mode 100644 src/lib/fill-array.js

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
new file mode 100644
index 00000000..15966e2e
--- /dev/null
+++ b/.storybook/preview-body.html
@@ -0,0 +1,8 @@
+<style>
+  body {
+    padding: 3rem;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+</style>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 74f76ab2..a5204e1e 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1 +1,4 @@
-<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" />
\ No newline at end of file
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
+/>
diff --git a/package.json b/package.json
index 2c6fadd2..6793ca6e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "carbon-icons-svelte": "10.9.3",
+    "carbon-icons-svelte": "^10.13.0",
     "flatpickr": "4.6.3"
   },
   "devDependencies": {
diff --git a/src/components/Accordion/Accordion.Skeleton.svelte b/src/components/Accordion/Accordion.Skeleton.svelte
index 73b2def3..436d57ea 100644
--- a/src/components/Accordion/Accordion.Skeleton.svelte
+++ b/src/components/Accordion/Accordion.Skeleton.svelte
@@ -1,40 +1,39 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let count = 4;
   export let open = true;
-  export let style = undefined;
 
-  import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
-  import { cx, fillArray } from '../../lib';
-  import SkeletonText from '../SkeletonText';
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import { SkeletonText } from "../SkeletonText";
 </script>
 
 <ul
+  class:bx--accordion={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--accordion', '--skeleton', className)}
-  {style}>
+  on:mouseleave>
   {#if open}
-    <li class={cx('--accordion__item', '--accordion__item--active')}>
-      <span class={cx('--accordion__heading')}>
-        <ChevronRight16 class={cx('--accordion__arrow')} />
-        <SkeletonText class={cx('--accordion__title')} />
+    <li
+      class:bx--accordion__item={true}
+      class:bx--accordion__item--active={true}>
+      <span class:bx--accordion__heading={true}>
+        <ChevronRight16 class="bx--accordion__arrow" />
+        <SkeletonText class="bx--accordion__title" />
       </span>
-      <div class={cx('--accordion__content')}>
+      <div class="bx--accordion__content">
         <SkeletonText width="90%" />
         <SkeletonText width="80%" />
         <SkeletonText width="95%" />
       </div>
     </li>
   {/if}
-  {#each fillArray(open ? count - 1 : count) as item, i (item)}
-    <li class={cx('--accordion__item')}>
-      <span class={cx('--accordion__heading')}>
-        <ChevronRight16 class={cx('--accordion__arrow')} />
-        <SkeletonText class={cx('--accordion__title')} />
+  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)}
+    <li class="bx--accordion__item">
+      <span class="bx--accordion__heading">
+        <ChevronRight16 class="bx--accordion__arrow" />
+        <SkeletonText class="bx--accordion__title" />
       </span>
     </li>
   {/each}
diff --git a/src/components/Accordion/Accordion.Story.svelte b/src/components/Accordion/Accordion.Story.svelte
index b4288c6b..291db477 100644
--- a/src/components/Accordion/Accordion.Story.svelte
+++ b/src/components/Accordion/Accordion.Story.svelte
@@ -4,52 +4,53 @@
   export let open = undefined;
   export let count = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Accordion from './Accordion.svelte';
-  import AccordionItem from './AccordionItem.svelte';
-  import AccordionSkeleton from './Accordion.Skeleton.svelte';
+  import Accordion from "./Accordion.svelte";
+  import AccordionItem from "./AccordionItem.svelte";
+  import AccordionSkeleton from "./Accordion.Skeleton.svelte";
 </script>
 
-<Layout>
-  {#if story === 'skeleton'}
-    <div style="width: 500px">
-      <AccordionSkeleton {open} {count} />
-    </div>
-  {:else}
-    <Accordion>
-      <AccordionItem {title} {open}>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Section 2 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Section 3 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </AccordionItem>
-      <AccordionItem>
-        <div slot="title">
-          Section 4 title (
-          <em>the title can be a node</em>
-          )
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-      </AccordionItem>
-    </Accordion>
-  {/if}
-</Layout>
+{#if story === 'skeleton'}
+  <div style="width: 500px">
+    <AccordionSkeleton {open} {count} />
+  </div>
+{:else}
+  <Accordion>
+    <AccordionItem {title} {open}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 2 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 3 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem>
+      <div slot="title">
+        Section 4 title (
+        <em>the title can be a node</em>
+        )
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+  </Accordion>
+{/if}
diff --git a/src/components/Accordion/Accordion.stories.js b/src/components/Accordion/Accordion.stories.js
index e8ac18a9..4dd33cce 100644
--- a/src/components/Accordion/Accordion.stories.js
+++ b/src/components/Accordion/Accordion.stories.js
@@ -1,21 +1,32 @@
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
-import Component from './Accordion.Story.svelte';
+import {
+  withKnobs,
+  text,
+  boolean,
+  number,
+  select,
+} from "@storybook/addon-knobs";
+import Component from "./Accordion.Story.svelte";
 
-export default { title: 'Accordion', decorators: [withKnobs] };
+export default { title: "Accordion", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    title: text('The title (title)', 'Section 1 title'),
-    open: boolean('Open the section (open)', false)
-  }
+    align: select(
+      "Accordion heading alignment (align)",
+      ["start", "end"],
+      "end"
+    ),
+    title: text("The title (title)", "Section 1 title"),
+    open: boolean("Open the section (open)", false),
+  },
 });
 
 export const Skeleton = () => ({
   Component,
   props: {
-    story: 'skeleton',
-    open: boolean('Show first item opened (open)', true),
-    count: number('Set number of items (count)', 4)
-  }
+    story: "skeleton",
+    open: boolean("Show first item opened (open)", true),
+    count: number("Set number of items (count)", 4),
+  },
 });
diff --git a/src/components/Accordion/Accordion.svelte b/src/components/Accordion/Accordion.svelte
index 8b191c09..d08817c4 100644
--- a/src/components/Accordion/Accordion.svelte
+++ b/src/components/Accordion/Accordion.svelte
@@ -1,28 +1,21 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
+  export let align = "end"; // "start" | "end"
   export let skeleton = false;
-  export let count = 4;
-  export let open = true;
 
-  import { cx } from '../../lib';
-  import AccordionSkeleton from './Accordion.Skeleton.svelte';
+  import AccordionSkeleton from "./Accordion.Skeleton.svelte";
 </script>
 
 {#if skeleton}
-  <AccordionSkeleton {count} {open} class={className} {style} />
-{/if}
-
-{#if !skeleton}
+  <AccordionSkeleton {...$$restProps} />
+{:else}
   <ul
+    class:bx--accordion={true}
+    class="bx--accordion--{align}"
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--accordion', className)}
-    {style}>
+    on:mouseleave>
     <slot />
   </ul>
 {/if}
diff --git a/src/components/Accordion/AccordionItem.svelte b/src/components/Accordion/AccordionItem.svelte
index 20d18636..3d34937b 100644
--- a/src/components/Accordion/AccordionItem.svelte
+++ b/src/components/Accordion/AccordionItem.svelte
@@ -1,27 +1,25 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let iconDescription = 'Expand/Collapse';
+  export let title = "title";
   export let open = false;
-  export let style = undefined;
-  export let title = undefined;
+  export let iconDescription = "Expand/Collapse";
 
-  import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
-  import { cx } from '../../lib';
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
 
-  let animation = undefined;
+  $: animation = undefined;
 </script>
 
 <li
-  class={cx('--accordion__item', open && '--accordion__item--active', animation && `--accordion__item--${animation}`, className)}
+  class:bx--accordion__item={true}
+  class:bx--accordion__item--active={open}
+  class="bx--accordion__item--${animation}"
+  {...$$restProps}
   on:animationend
   on:animationend={() => {
     animation = undefined;
-  }}
-  {style}>
+  }}>
   <button
     type="button"
-    class={cx('--accordion__heading')}
+    class:bx--accordion__heading={true}
     title={iconDescription}
     aria-expanded={open}
     on:click
@@ -38,12 +36,12 @@
         open = false;
       }
     }}>
-    <ChevronRight16 class={cx('--accordion__arrow')} aria-label={iconDescription} />
-    <div class={cx('--accordion__title')}>
+    <ChevronRight16 class="bx--accordion__arrow" aria-label={iconDescription} />
+    <div class="bx--accordion__title">
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class={cx('--accordion__content')}>
+  <div class="bx--accordion__content">
     <slot />
   </div>
 </li>
diff --git a/src/components/Accordion/index.js b/src/components/Accordion/index.js
index 9b84d090..4c62b070 100644
--- a/src/components/Accordion/index.js
+++ b/src/components/Accordion/index.js
@@ -1,5 +1,3 @@
-import Accordion from './Accordion.svelte';
-
-export default Accordion;
-export { default as AccordionItem } from './AccordionItem.svelte';
-export { default as AccordionSkeleton } from './Accordion.Skeleton.svelte';
+export { default as Accordion } from "./Accordion.svelte";
+export { default as AccordionItem } from "./AccordionItem.svelte";
+export { default as AccordionSkeleton } from "./Accordion.Skeleton.svelte";
diff --git a/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte b/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte
index 1c79f8a9..c40197b1 100644
--- a/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte
+++ b/src/components/Breadcrumb/Breadcrumb.Skeleton.svelte
@@ -1,21 +1,14 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <div
+  class:bx--breadcrumb={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--breadcrumb', '--skeleton', className)}
-  {style}>
+  on:mouseleave>
   {#each [0, 1, 2] as item, i (item)}
-    <div class={cx('--breadcrumb-item')}>
-      <span class={cx('--link')}>&nbsp;</span>
+    <div class:bx--breadcrumb-item={true}>
+      <span class:bx--link={true}>&nbsp;</span>
     </div>
   {/each}
 </div>
diff --git a/src/components/Breadcrumb/Breadcrumb.Story.svelte b/src/components/Breadcrumb/Breadcrumb.Story.svelte
index 6e7c0df9..c42ecf85 100644
--- a/src/components/Breadcrumb/Breadcrumb.Story.svelte
+++ b/src/components/Breadcrumb/Breadcrumb.Story.svelte
@@ -2,38 +2,35 @@
   export let story = undefined;
   export let noTrailingSlash = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Breadcrumb from './Breadcrumb.svelte';
-  import BreadcrumbItem from './BreadcrumbItem.svelte';
-  import BreadcrumbSkeleton from './Breadcrumb.Skeleton.svelte';
+  import Breadcrumb from "./Breadcrumb.svelte";
+  import BreadcrumbItem from "./BreadcrumbItem.svelte";
+  import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
 </script>
 
-<Layout>
-  {#if story === 'current page'}
-    <Breadcrumb noTrailingSlash>
-      <BreadcrumbItem let:props>
-        <a {...props} href="/#">Breadcrumb 1</a>
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-      <BreadcrumbItem href="#" isCurrentPage>Breadcrumb 3</BreadcrumbItem>
-    </Breadcrumb>
-  {:else if story === 'current page with aria-current'}
-    <Breadcrumb noTrailingSlash>
-      <BreadcrumbItem let:props>
-        <a {...props} href="/#">Breadcrumb 1</a>
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-      <BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
-    </Breadcrumb>
-  {:else if story === 'skeleton'}
-    <BreadcrumbSkeleton />
-  {:else}
-    <Breadcrumb {noTrailingSlash}>
-      <BreadcrumbItem let:props>
-        <a {...props} href="/#">Breadcrumb 1</a>
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-      <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
-    </Breadcrumb>
-  {/if}
-</Layout>
+{#if story === 'current page'}
+  <Breadcrumb noTrailingSlash aria-label="Breadcrumb header">
+    <BreadcrumbItem let:props>
+      <a {...props} href="/#">Breadcrumb 1</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+    <BreadcrumbItem href="#" isCurrentPage>Breadcrumb 3</BreadcrumbItem>
+  </Breadcrumb>
+{:else if story === 'current page with aria-current'}
+  <Breadcrumb noTrailingSlash>
+    <BreadcrumbItem let:props>
+      <a {...props} href="/#">Breadcrumb 1</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+    <BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
+  </Breadcrumb>
+{:else if story === 'skeleton'}
+  <BreadcrumbSkeleton />
+{:else}
+  <Breadcrumb {noTrailingSlash}>
+    <BreadcrumbItem let:props>
+      <a {...props} href="/#">Breadcrumb 1</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
+  </Breadcrumb>
+{/if}
diff --git a/src/components/Breadcrumb/Breadcrumb.stories.js b/src/components/Breadcrumb/Breadcrumb.stories.js
index 63ddbe7e..44e80de0 100644
--- a/src/components/Breadcrumb/Breadcrumb.stories.js
+++ b/src/components/Breadcrumb/Breadcrumb.stories.js
@@ -1,24 +1,26 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import Component from './Breadcrumb.Story.svelte';
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import Component from "./Breadcrumb.Story.svelte";
 
-export default { title: 'Breadcrumb', decorators: [withKnobs] };
+export default { title: "Breadcrumb", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
-  props: { noTrailingSlash: boolean('No Trailing Slash (noTrailingSlash)', false) }
+  props: {
+    noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false),
+  },
 });
 
 export const Skeleton = () => ({
   Component,
-  props: { story: 'skeleton' }
+  props: { story: "skeleton" },
 });
 
 export const CurrentPage = () => ({
   Component,
-  props: { story: 'current page' }
+  props: { story: "current page" },
 });
 
 export const CurrentPageWithAriaCurrent = () => ({
   Component,
-  props: { story: 'current page with aria-current' }
+  props: { story: "current page with aria-current" },
 });
diff --git a/src/components/Breadcrumb/Breadcrumb.svelte b/src/components/Breadcrumb/Breadcrumb.svelte
index ee0b1f5a..df66126d 100644
--- a/src/components/Breadcrumb/Breadcrumb.svelte
+++ b/src/components/Breadcrumb/Breadcrumb.svelte
@@ -1,21 +1,17 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let noTrailingSlash = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <nav
+  aria-label="Breadcrumb"
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  aria-label={$$props['aria-label'] || 'Breadcrumb'}
-  class={className}
-  {style}>
-  <ol class={cx('--breadcrumb', noTrailingSlash && '--breadcrumb--no-trailing-slash')}>
+  on:mouseleave>
+  <ol
+    class:bx--breadcrumb={true}
+    class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
     <slot />
   </ol>
 </nav>
diff --git a/src/components/Breadcrumb/Breadcrumb.test.js b/src/components/Breadcrumb/Breadcrumb.test.js
index 292cc147..4e8071ba 100644
--- a/src/components/Breadcrumb/Breadcrumb.test.js
+++ b/src/components/Breadcrumb/Breadcrumb.test.js
@@ -1,18 +1,20 @@
-import { render } from '@testing-library/svelte';
-import Component from './Breadcrumb.Story.svelte';
+import { render } from "@testing-library/svelte";
+import Component from "./Breadcrumb.Story.svelte";
 
-describe('Breadcrumb', () => {
+describe("Breadcrumb", () => {
   function getLastBreadcrumbItem(container) {
-    const breadcrumbItems = container.querySelectorAll('.bx--breadcrumb-item');
+    const breadcrumbItems = container.querySelectorAll(".bx--breadcrumb-item");
     return breadcrumbItems[breadcrumbItems.length - 1];
   }
 
-  test('default', () => {
-    const { getByText, container, rerender } = render(Component, { noTrailingSlash: false });
-    const selector = '.bx--breadcrumb--no-trailing-slash';
-    expect(getByText('Breadcrumb 1')).toBeInTheDocument();
-    expect(getByText('Breadcrumb 2')).toBeInTheDocument();
-    expect(getByText('Breadcrumb 3')).toBeInTheDocument();
+  test("default", () => {
+    const { getByText, container, rerender } = render(Component, {
+      noTrailingSlash: false,
+    });
+    const selector = ".bx--breadcrumb--no-trailing-slash";
+    expect(getByText("Breadcrumb 1")).toBeInTheDocument();
+    expect(getByText("Breadcrumb 2")).toBeInTheDocument();
+    expect(getByText("Breadcrumb 3")).toBeInTheDocument();
     expect(container.querySelector(selector)).not.toBeInTheDocument();
     expect(container.innerHTML).toMatchSnapshot();
 
@@ -21,19 +23,23 @@ describe('Breadcrumb', () => {
     expect(container.innerHTML).toMatchSnapshot();
   });
 
-  test('skeleton', () => {
-    const { container } = render(Component, { story: 'skeleton' });
+  test("skeleton", () => {
+    const { container } = render(Component, { story: "skeleton" });
     expect(container.innerHTML).toMatchSnapshot();
   });
 
-  test('current page', () => {
-    const { container } = render(Component, { story: 'current page' });
+  test("current page", () => {
+    const { container } = render(Component, { story: "current page" });
     const lastItem = getLastBreadcrumbItem(container);
-    expect(lastItem.classList.contains('bx--breadcrumb-item--current')).toEqual(true);
+    expect(lastItem.classList.contains("bx--breadcrumb-item--current")).toEqual(
+      true
+    );
   });
 
-  test('current page with aria-current', () => {
-    const { container } = render(Component, { story: 'current page with aria-current' });
+  test("current page with aria-current", () => {
+    const { container } = render(Component, {
+      story: "current page with aria-current",
+    });
     const lastItem = getLastBreadcrumbItem(container);
     expect(lastItem.querySelector('[aria-current="page"]')).toBeTruthy();
   });
diff --git a/src/components/Breadcrumb/BreadcrumbItem.svelte b/src/components/Breadcrumb/BreadcrumbItem.svelte
index 7718f20d..80dbb9e6 100644
--- a/src/components/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/components/Breadcrumb/BreadcrumbItem.svelte
@@ -1,28 +1,24 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let href = undefined;
   export let isCurrentPage = false;
-  export let style = undefined;
 
-  import { cx } from '../../lib';
-  import Link from '../Link';
-
-  $: ariaCurrent = $$props['aria-current'];
+  import { Link } from "../Link";
 </script>
 
 <li
+  class:bx--breadcrumb-item={true}
+  class:bx--breadcrumb-item--current={isCurrentPage && $$restProps['aria-current'] !== 'page'}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--breadcrumb-item', isCurrentPage && ariaCurrent !== 'page' && '--breadcrumb-item--current', className)}
-  {style}>
+  on:mouseleave>
   {#if href}
-    <Link {href} aria-current={ariaCurrent}>
+    <Link {href} aria-current={$$restProps['aria-current']}>
       <slot />
     </Link>
   {:else}
-    <slot props={{ 'aria-current': ariaCurrent, class: cx('--link') }} />
+    <slot
+      props={{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }} />
   {/if}
 </li>
diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js
index d14c306a..cdda91e0 100644
--- a/src/components/Breadcrumb/index.js
+++ b/src/components/Breadcrumb/index.js
@@ -1,5 +1,3 @@
-import Breadcrumb from './Breadcrumb.svelte';
-
-export default Breadcrumb;
-export { default as BreadcrumbItem } from './BreadcrumbItem.svelte';
-export { default as BreadcrumbSkeleton } from './Breadcrumb.Skeleton.svelte';
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
+export { default as BreadcrumbSkeleton } from "./Breadcrumb.Skeleton.svelte";
diff --git a/src/components/Button/Button.Skeleton.svelte b/src/components/Button/Button.Skeleton.svelte
index 80cdff13..5ad89eb3 100644
--- a/src/components/Button/Button.Skeleton.svelte
+++ b/src/components/Button/Button.Skeleton.svelte
@@ -1,31 +1,30 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let href = undefined;
   export let small = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 {#if href}
   <a
+    {href}
     role="button"
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--sm={small}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--skeleton', '--btn', small && '--btn--sm', className)}
-    {style}
-    {href}>
+    on:mouseleave>
     {''}
   </a>
 {:else}
   <div
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--sm={small}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--skeleton', '--btn', small && '--btn--sm', className)}
-    {style} />
+    on:mouseleave />
 {/if}
diff --git a/src/components/Button/Button.Story.svelte b/src/components/Button/Button.Story.svelte
index a746bc81..3786864b 100644
--- a/src/components/Button/Button.Story.svelte
+++ b/src/components/Button/Button.Story.svelte
@@ -1,11 +1,9 @@
 <script>
   export let story = undefined;
 
-  import { cx } from '../../lib';
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Button from './Button.svelte';
-  import ButtonSkeleton from './Button.Skeleton.svelte';
-  import Add16 from 'carbon-icons-svelte/lib/Add16';
+  import Button from "./Button.svelte";
+  import ButtonSkeleton from "./Button.Skeleton.svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
 
   const {
     kind,
@@ -39,36 +37,34 @@
   const setProps = { disabled, small, size, iconDescription };
 </script>
 
-<Layout>
-  <div>
-    {#if story === 'skeleton'}
-      <ButtonSkeleton />
-      &nbsp;
-      <ButtonSkeleton href="#" />
-      &nbsp;
-      <ButtonSkeleton small />
-    {:else if story === 'inline'}
-      <Button />
-    {:else if story === 'icon-only buttons'}
-      <Button {...iconOnlyProps} />
-    {:else if story === 'set of buttons'}
-      <div class={cx('--btn-set')}>
-        <Button kind="secondary" {...setProps}>Secondary button</Button>
-        <Button kind="primary" {...setProps}>Primary button</Button>
-      </div>
-    {:else}
-      <Button {...regularProps}>Button</Button>
-      &nbsp;
-      <Button {...regularProps} href="#">Link</Button>
-      &nbsp;
-      <Button {...regularProps} as let:props>
-        <p {...props}>Element</p>
-      </Button>
-      &nbsp;
-      <Button {...regularProps} as let:props>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a {...props}>Custom component</a>
-      </Button>
-    {/if}
-  </div>
-</Layout>
+<div>
+  {#if story === 'skeleton'}
+    <ButtonSkeleton />
+    &nbsp;
+    <ButtonSkeleton href="#" />
+    &nbsp;
+    <ButtonSkeleton small />
+  {:else if story === 'inline'}
+    <Button />
+  {:else if story === 'icon-only buttons'}
+    <Button {...iconOnlyProps} />
+  {:else if story === 'set of buttons'}
+    <div class="bx--btn-set">
+      <Button kind="secondary" {...setProps}>Secondary button</Button>
+      <Button kind="primary" {...setProps}>Primary button</Button>
+    </div>
+  {:else}
+    <Button {...regularProps}>Button</Button>
+    &nbsp;
+    <Button {...regularProps} href="#">Link</Button>
+    &nbsp;
+    <Button {...regularProps} as let:props>
+      <p {...props}>Element</p>
+    </Button>
+    &nbsp;
+    <Button {...regularProps} as let:props>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a {...props}>Custom component</a>
+    </Button>
+  {/if}
+</div>
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index 11274f5b..e5527bdf 100644
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -1,62 +1,62 @@
-import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
-import Component from './Button.Story.svelte';
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Button.Story.svelte";
 
-export default { title: 'Button', decorators: [withKnobs] };
+export default { title: "Button", decorators: [withKnobs] };
 
 const kinds = {
-  'Primary button (primary)': 'primary',
-  'Secondary button (secondary)': 'secondary',
-  'Danger button (danger)': 'danger',
-  'Ghost button (ghost)': 'ghost'
+  "Primary button (primary)": "primary",
+  "Secondary button (secondary)": "secondary",
+  "Danger button (danger)": "danger",
+  "Ghost button (ghost)": "ghost",
 };
 
 const sizes = {
-  Default: 'default',
-  Field: 'field',
-  Small: 'small'
+  Default: "default",
+  Field: "field",
+  Small: "small",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    kind: select('Button kind (kind)', kinds, 'primary'),
-    disabled: boolean('Disabled (disabled)', false),
-    size: select('Button size (size)', sizes, 'default'),
-    iconDescription: text('Icon description (iconDescription)', 'Button icon'),
-    small: boolean('Small (small) - Deprecated in favor of `size`', false)
-  }
+    kind: select("Button kind (kind)", kinds, "primary"),
+    disabled: boolean("Disabled (disabled)", false),
+    size: select("Button size (size)", sizes, "default"),
+    iconDescription: text("Icon description (iconDescription)", "Button icon"),
+    small: boolean("Small (small) - Deprecated in favor of `size`", false),
+  },
 });
 
 export const IconOnlyButtons = () => ({
   Component,
   props: {
-    story: 'icon-only buttons',
-    kind: select('Button kind (kind)', kinds, 'primary'),
-    disabled: boolean('Disabled (disabled)', false),
-    size: select('Button size (size)', sizes, 'default'),
-    iconDescription: text('Icon description (iconDescription)', 'Button icon'),
+    story: "icon-only buttons",
+    kind: select("Button kind (kind)", kinds, "primary"),
+    disabled: boolean("Disabled (disabled)", false),
+    size: select("Button size (size)", sizes, "default"),
+    iconDescription: text("Icon description (iconDescription)", "Button icon"),
     tooltipPosition: select(
-      'Tooltip position (tooltipPosition)',
-      ['top', 'right', 'bottom', 'left'],
-      'bottom'
+      "Tooltip position (tooltipPosition)",
+      ["top", "right", "bottom", "left"],
+      "bottom"
     ),
     tooltipAlignment: select(
-      'Tooltip alignment (tooltipAlignment)',
-      ['start', 'center', 'end'],
-      'center'
-    )
-  }
+      "Tooltip alignment (tooltipAlignment)",
+      ["start", "center", "end"],
+      "center"
+    ),
+  },
 });
 
 export const SetOfButtons = () => ({
   Component,
   props: {
-    story: 'set of buttons',
-    disabled: boolean('Disabled (disabled)', false),
-    small: boolean('Small (small)', false),
-    size: select('Button size (size)', sizes, 'default'),
-    iconDescription: text('Icon description (iconDescription)', 'Button icon')
-  }
+    story: "set of buttons",
+    disabled: boolean("Disabled (disabled)", false),
+    small: boolean("Small (small)", false),
+    size: select("Button size (size)", sizes, "default"),
+    iconDescription: text("Icon description (iconDescription)", "Button icon"),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Button/Button.svelte b/src/components/Button/Button.svelte
index 9f8b5edc..c2db61e5 100644
--- a/src/components/Button/Button.svelte
+++ b/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>
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index a77dcd92..f87e835f 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -1,4 +1,2 @@
-import Button from './Button.svelte';
-
-export default Button;
-export { default as ButtonSkeleton } from './Button.Skeleton.svelte';
+export { default as Button } from "./Button.svelte";
+export { default as ButtonSkeleton } from "./Button.Skeleton.svelte";
diff --git a/src/components/Checkbox/Checkbox.Skeleton.svelte b/src/components/Checkbox/Checkbox.Skeleton.svelte
index 282d4b7e..02e85439 100644
--- a/src/components/Checkbox/Checkbox.Skeleton.svelte
+++ b/src/components/Checkbox/Checkbox.Skeleton.svelte
@@ -1,17 +1,11 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <div
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  class:bx--checkbox-label={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--form-item', '--checkbox-wrapper', '--checkbox-label', className)}
-  {style}>
-  <span class={cx('--checkbox-label-text', '--skeleton')} />
+  on:mouseleave>
+  <span class:bx--checkbox-label-text={true} class:bx--skeleton={true} />
 </div>
diff --git a/src/components/Checkbox/Checkbox.Story.svelte b/src/components/Checkbox/Checkbox.Story.svelte
index 3da0da39..6c795847 100644
--- a/src/components/Checkbox/Checkbox.Story.svelte
+++ b/src/components/Checkbox/Checkbox.Story.svelte
@@ -1,39 +1,47 @@
 <script>
   export let story = undefined;
 
-  import { cx } from '../../lib';
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Checkbox from './Checkbox.svelte';
-  import CheckboxSkeleton from './Checkbox.Skeleton.svelte';
+  import Checkbox from "./Checkbox.svelte";
+  import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
 
-  const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
-  const checkboxProps = { labelText, indeterminate, disabled, hideLabel, wrapperClassName };
+  const {
+    labelText,
+    indeterminate,
+    disabled,
+    hideLabel,
+    wrapperClassName
+  } = $$props;
+  const checkboxProps = {
+    labelText,
+    indeterminate,
+    disabled,
+    hideLabel,
+    wrapperClassName
+  };
 
   let checked = true;
 </script>
 
-<Layout>
-  {#if story === 'skeleton'}
-    <div>
-      <CheckboxSkeleton />
-    </div>
-  {:else if story === 'unchecked'}
-    <fieldset class={cx('--fieldset')}>
-      <legend class={cx('--label')}>Checkbox heading</legend>
-      <Checkbox {...checkboxProps} id="checkbox-label-1" />
-      <Checkbox {...checkboxProps} id="checkbox-label-2" />
-    </fieldset>
-  {:else}
-    <fieldset class={cx('--fieldset')}>
-      <legend class={cx('--label')}>Checkbox heading</legend>
-      <Checkbox
-        {...checkboxProps}
-        id="checkbox-label-1"
-        bind:checked
-        on:check={({ detail }) => {
-          console.log('on:check', detail);
-        }} />
-      <Checkbox {...checkboxProps} id="checkbox-label-2" checked />
-    </fieldset>
-  {/if}
-</Layout>
+{#if story === 'skeleton'}
+  <div>
+    <CheckboxSkeleton />
+  </div>
+{:else if story === 'unchecked'}
+  <fieldset class="bx--fieldset">
+    <legend class="bx--label">Checkbox heading</legend>
+    <Checkbox {...checkboxProps} id="checkbox-label-1" />
+    <Checkbox {...checkboxProps} id="checkbox-label-2" />
+  </fieldset>
+{:else}
+  <fieldset class="bx--fieldset">
+    <legend class="bx--label">Checkbox heading</legend>
+    <Checkbox
+      {...checkboxProps}
+      id="checkbox-label-1"
+      bind:checked
+      on:check={({ detail }) => {
+        console.log('on:check', detail);
+      }} />
+    <Checkbox {...checkboxProps} id="checkbox-label-2" checked />
+  </fieldset>
+{/if}
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
index 48726260..850f4ad6 100644
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/src/components/Checkbox/Checkbox.stories.js
@@ -1,27 +1,27 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import Component from './Checkbox.Story.svelte';
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Checkbox.Story.svelte";
 
-export default { title: 'Checkbox', decorators: [withKnobs] };
+export default { title: "Checkbox", decorators: [withKnobs] };
 
 export const Checked = () => ({
   Component,
   props: {
-    labelText: text('Label text (labelText)', 'Checkbox label'),
-    indeterminate: boolean('Intermediate (indeterminate)', false),
-    disabled: boolean('Disabled (disabled)', false),
-    hideLabel: boolean('Hide label (hideLabel)', false)
-  }
+    labelText: text("Label text (labelText)", "Checkbox label"),
+    indeterminate: boolean("Intermediate (indeterminate)", false),
+    disabled: boolean("Disabled (disabled)", false),
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
 });
 
 export const Unchecked = () => ({
   Component,
   props: {
-    story: 'unchecked',
-    labelText: text('Label text (labelText)', 'Checkbox label'),
-    indeterminate: boolean('Intermediate (indeterminate)', false),
-    disabled: boolean('Disabled (disabled)', false),
-    hideLabel: boolean('Hide label (hideLabel)', false)
-  }
+    story: "unchecked",
+    labelText: text("Label text (labelText)", "Checkbox label"),
+    indeterminate: boolean("Intermediate (indeterminate)", false),
+    disabled: boolean("Disabled (disabled)", false),
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Checkbox/Checkbox.svelte b/src/components/Checkbox/Checkbox.svelte
index e682f07c..a2d34c57 100644
--- a/src/components/Checkbox/Checkbox.svelte
+++ b/src/components/Checkbox/Checkbox.svelte
@@ -1,48 +1,49 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let indeterminate = false;
+  export let readonly = false;
   export let checked = false;
   export let disabled = false;
+  export let labelText = "";
   export let hideLabel = false;
-  export let id = Math.random();
-  export let indeterminate = false;
-  export let labelText = '';
-  export let name = '';
-  export let readonly = false;
-  export let style = undefined;
-  export let title = '';
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let title = undefined;
+  export let ref = null;
 
-  import { createEventDispatcher } from 'svelte';
-  import { cx } from '../../lib';
+  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
-  $: {
-    dispatch('check', checked);
-  }
+  $: dispatch("check", checked);
 </script>
 
 <div
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--form-item', '--checkbox-wrapper', className)}
-  {style}>
+  on:mouseleave>
   <input
+    bind:this={ref}
     type="checkbox"
-    class={cx('--checkbox')}
+    {checked}
+    {disabled}
+    {id}
+    {indeterminate}
+    {name}
+    {readonly}
+    class:bx--checkbox={true}
     on:change
     on:change={() => {
       checked = !checked;
-    }}
-    {indeterminate}
-    {disabled}
-    {checked}
-    {name}
-    {id}
-    {readonly} />
-  <label class={cx('--checkbox-label')} for={id} title={title || undefined}>
-    <span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
+    }} />
+  <label class:bx--checkbox-label={true} for={id} {title}>
+    <span
+      class:bx--checkbox-label-text={true}
+      class:bx--visually-hidden={hideLabel}>
+      {labelText}
+    </span>
   </label>
 </div>
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
index ab919dce..fd615337 100644
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@@ -1,4 +1,2 @@
-import Checkbox from './Checkbox.svelte';
-
-export default Checkbox;
-export { default as CheckboxSkeleton } from './Checkbox.Skeleton.svelte';
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte";
diff --git a/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte b/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
index cd988e15..994614ff 100644
--- a/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
+++ b/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
@@ -1,20 +1,18 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-  export let type = 'single';
-
-  import { cx } from '../../lib';
+  export let type = "single"; // "single" | "multi"
 </script>
 
 <div
+  class:bx--snippet={true}
+  class:bx--skeleton={true}
+  class:bx--snippet--single={type === 'single'}
+  class:bx--snippet--multi={type === 'multi'}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--snippet', '--skeleton', type === 'single' && '--snippet--single', type === 'multi' && '--snippet--multi', className)}
-  {style}>
-  <div class={cx('--snippet-container')}>
+  on:mouseleave>
+  <div class:bx--snippet-container={true}>
     {#if type === 'single'}
       <span />
     {:else if type === 'multi'}
diff --git a/src/components/CodeSnippet/CodeSnippet.Story.svelte b/src/components/CodeSnippet/CodeSnippet.Story.svelte
index 229f6225..ffdeb131 100644
--- a/src/components/CodeSnippet/CodeSnippet.Story.svelte
+++ b/src/components/CodeSnippet/CodeSnippet.Story.svelte
@@ -1,32 +1,25 @@
 <script>
   export let story = undefined;
-  const { light, feedback, copyLabel, copyButtonDescription, showLessText, showMoreText } = $$props;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import CodeSnippet from './CodeSnippet.svelte';
-  import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
+  import CodeSnippet from "./CodeSnippet.svelte";
+  import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
 </script>
 
-<Layout>
-  <div>
-    {#if story === 'skeleton'}
-      <div style="width: 800px">
-        <CodeSnippetSkeleton type="single" style="margin-bottom: 8px" />
-        <CodeSnippetSkeleton type="multi" />
-      </div>
-    {:else if story === 'inline'}
-      <CodeSnippet type="inline" {light} {feedback} {copyLabel}>{'node -v'}</CodeSnippet>
-    {:else if story === 'single line'}
-      <CodeSnippet
-        type="single"
-        {feedback}
-        {copyButtonDescription}
-        aria-label={$$props['aria-label']}>
-        {'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'}
-      </CodeSnippet>
-    {:else if story === 'multi line'}
-      <CodeSnippet type="multi" {feedback} {showLessText} {showMoreText}>
-        {`@mixin grid-container {
+<div>
+  {#if story === 'skeleton'}
+    <div style="width: 800px">
+      <CodeSnippetSkeleton type="single" style="margin-bottom: 8px" />
+      <CodeSnippetSkeleton type="multi" />
+    </div>
+  {:else if story === 'inline'}
+    <CodeSnippet {...$$restProps} type="inline">{'node -v'}</CodeSnippet>
+  {:else if story === 'single line'}
+    <CodeSnippet {...$$restProps} type="single">
+      {'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'}
+    </CodeSnippet>
+  {:else if story === 'multi line'}
+    <CodeSnippet {...$$restProps} type="multi">
+      {`@mixin grid-container {
   width: 100%;
   padding-right: padding(mobile);
   padding-left: padding(mobile);
@@ -43,11 +36,10 @@ $z-indexes: (
   dropdown : 7000,
   header : 6000,
   footer : 5000,
-  hidden : - 1,
-  overflowHidden: - 1,
+  hidden : -1,
+  overflowHidden: -1,
   floating: 10000
 );`}
-      </CodeSnippet>
-    {/if}
-  </div>
-</Layout>
+    </CodeSnippet>
+  {/if}
+</div>
diff --git a/src/components/CodeSnippet/CodeSnippet.stories.js b/src/components/CodeSnippet/CodeSnippet.stories.js
index 5db61d0f..b53aab78 100644
--- a/src/components/CodeSnippet/CodeSnippet.stories.js
+++ b/src/components/CodeSnippet/CodeSnippet.stories.js
@@ -1,39 +1,52 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import Component from './CodeSnippet.Story.svelte';
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./CodeSnippet.Story.svelte";
 
-export default { title: 'CodeSnippet', decorators: [withKnobs] };
+export default { title: "CodeSnippet", decorators: [withKnobs] };
 
 export const Inline = () => ({
   Component,
   props: {
-    story: 'inline',
-    light: boolean('Light variant (light)', false),
-    feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'),
-    copyLabel: text('ARIA label for the snippet/copy button (copyLabel)', 'copyable code snippet')
-  }
+    story: "inline",
+    light: boolean("Light variant (light)", false),
+    feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
+    copyLabel: text(
+      "ARIA label for the snippet/copy button (copyLabel)",
+      "copyable code snippet"
+    ),
+  },
 });
 
 export const SingleLine = () => ({
   Component,
   props: {
-    story: 'single line',
-    feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'),
+    story: "single line",
+    light: boolean("Light variant (light)", false),
+    feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
     copyButtonDescription: text(
-      'Copy icon description (copyButtonDescription)',
-      'copyable code snippet'
+      "Copy icon description (copyButtonDescription)",
+      "copyable code snippet"
     ),
-    'aria-label': text('ARIA label of the container (ariaLabel)', 'Container label')
-  }
+    "aria-label": text(
+      "ARIA label of the container (ariaLabel)",
+      "Container label"
+    ),
+  },
 });
 
 export const MultiLine = () => ({
   Component,
   props: {
-    story: 'multi line',
-    feedback: text('Feedback text (feedback)', 'Feedback Enabled 👍'),
-    showMoreText: text('Text for "show more" button (showMoreText)', 'Show more'),
-    showLessText: text('Text for "show less" button (showLessText)', 'Show less')
-  }
+    story: "multi line",
+    feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
+    showMoreText: text(
+      'Text for "show more" button (showMoreText)',
+      "Show more"
+    ),
+    showLessText: text(
+      'Text for "show less" button (showLessText)',
+      "Show less"
+    ),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/CodeSnippet/CodeSnippet.svelte b/src/components/CodeSnippet/CodeSnippet.svelte
index 0cc3abb3..c0887296 100644
--- a/src/components/CodeSnippet/CodeSnippet.svelte
+++ b/src/components/CodeSnippet/CodeSnippet.svelte
@@ -1,97 +1,95 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let type = "single"; // "single" | "inline" | "multi"
   export let code = undefined;
+  export let light = false;
+  export let skeleton = false;
   export let copyButtonDescription = undefined;
   export let copyLabel = undefined;
-  export let feedback = undefined;
-  export let feedbackTimeout = undefined;
-  export let id = Math.random();
-  export let light = false;
-  export let showLessText = 'Show less';
-  export let showMoreText = 'Show more';
-  export let skeleton = false;
-  export let style = undefined;
-  export let type = 'single';
+  export let feedback = "Copied!";
+  export let feedbackTimeout = 2000;
+  export let showLessText = "Show less";
+  export let showMoreText = "Show more";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { afterUpdate } from 'svelte';
-  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import { cx } from '../../lib';
-  import Button from '../Button';
-  import Copy from '../Copy';
-  import CopyButton from '../CopyButton';
-  import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
+  import { afterUpdate } from "svelte";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import { Button } from "../Button";
+  import { Copy } from "../Copy";
+  import { CopyButton } from "../CopyButton";
+  import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
 
-  let codeRef = undefined;
-  let expanded = false;
-  let showMoreLess = false;
+  $: showMoreLess = false;
+  $: expanded = false;
+  $: expandText = expanded ? showLessText : showMoreText;
 
   afterUpdate(() => {
-    if (type === 'multi' && codeRef) {
-      showMoreLess = codeRef.getBoundingClientRect().height > 255;
+    if (type === "multi" && ref) {
+      showMoreLess = ref.getBoundingClientRect().height > 255;
     }
   });
-
-  $: expandText = expanded ? showLessText : showMoreText;
 </script>
 
 {#if skeleton}
-  <CodeSnippetSkeleton class={className} {type} {style} />
-{/if}
-
-{#if !skeleton}
+  <CodeSnippetSkeleton {type} {...$$restProps} />
+{:else}
   {#if type === 'inline'}
     <Copy
-      aria-label={$$props['aria-label'] || copyLabel}
+      aria-label={copyLabel}
       aria-describedby={id}
-      class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
-      on:click
+      class="bx--snippet {type && `bx--snippet--${type}`}
+      {type === 'inline' && 'bx--btn--copy'}
+      {expanded && 'bx--snippet--expand'}
+      {light && 'bx--snippet--light'}"
+      {...$$restProps}
+      on:clicks
       on:mouseover
       on:mouseenter
-      on:mouseleave
-      {feedback}
-      {feedbackTimeout}
-      {style}>
+      on:mouseleave>
       <code {id}>
         <slot>{code}</slot>
       </code>
     </Copy>
   {:else}
     <div
+      class:bx--snippet={true}
+      class={type && `bx--snippet--${type}`}
+      class:bx--btn--copy={type === 'inline'}
+      class:bx--snippet--expand={expanded}
+      class:bx--snippet--light={light}
+      {...$$restProps}
       on:mouseover
       on:mouseenter
-      on:mouseleave
-      class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
-      {style}>
+      on:mouseleave>
       <div
-        role="textbox"
-        tabindex="0"
-        class={cx('--snippet-container')}
-        aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
+        role={type === 'single' ? 'textbox' : undefined}
+        tabindex={type === 'single' ? '0' : undefined}
+        class:bx--snippet-container={true}
+        aria-label={$$restProps['aria-label'] || copyLabel || 'code-snippet'}>
         <code>
-          <pre bind:this={codeRef}>
+          <pre bind:this={ref}>
             <slot>{code}</slot>
           </pre>
         </code>
       </div>
       <CopyButton
-        iconDescription={copyButtonDescription}
-        class={cx('--snippet-button')}
-        on:click
         {feedback}
-        {feedbackTimeout} />
+        {feedbackTimeout}
+        iconDescription={copyButtonDescription}
+        on:click
+        on:animationend />
       {#if showMoreLess}
         <Button
           kind="ghost"
           size="small"
-          class={cx('--snippet-btn--expand')}
+          class="bx--snippet-btn--expand"
           on:click={() => {
             expanded = !expanded;
           }}>
-          <span class={cx('--snippet-btn--text')}>{expandText}</span>
+          <span class:bx--snippet-btn--text={true}>{expandText}</span>
           <ChevronDown16
-            aria-label={expandText}
-            class={cx('--icon-chevron--down', '--snippet__icon')} />
+            class="bx--icon-chevron--down bx--snippet__icon"
+            aria-label={expandText} />
         </Button>
       {/if}
     </div>
diff --git a/src/components/CodeSnippet/index.js b/src/components/CodeSnippet/index.js
index 1c83bd55..4775c90e 100644
--- a/src/components/CodeSnippet/index.js
+++ b/src/components/CodeSnippet/index.js
@@ -1,4 +1,2 @@
-import CodeSnippet from './CodeSnippet.svelte';
-
-export default CodeSnippet;
-export { default as CodeSnippetSkeleton } from './CodeSnippet.Skeleton.svelte';
+export { default as CodeSnippet } from "./CodeSnippet.svelte";
+export { default as CodeSnippetSkeleton } from "./CodeSnippet.Skeleton.svelte";
diff --git a/src/components/ComboBox/ComboBox.Story.svelte b/src/components/ComboBox/ComboBox.Story.svelte
index 652f51ec..a54292b9 100644
--- a/src/components/ComboBox/ComboBox.Story.svelte
+++ b/src/components/ComboBox/ComboBox.Story.svelte
@@ -1,23 +1,25 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import ToggleSmall from '../ToggleSmall';
-  import Button from '../Button';
-  import ComboBox from './ComboBox.svelte';
+  import { ToggleSmall } from "../ToggleSmall";
+  import { Button } from "../Button";
+  import ComboBox from "./ComboBox.svelte";
 
   let items = [
-    { id: 'option-0', text: 'Option 1' },
-    { id: 'option-1', text: 'Option 2' },
-    { id: 'option-2', text: 'Option 3' },
-    { id: 'option-3', text: 'Option 4' },
+    { id: "option-0", text: "Option 1" },
+    { id: "option-1", text: "Option 2" },
+    { id: "option-2", text: "Option 3" },
+    { id: "option-3", text: "Option 4" },
     {
-      id: 'option-4',
-      text: 'An example option that is really long to show what should be done to handle long text'
+      id: "option-4",
+      text:
+        "An example option that is really long to show what should be done to handle long text"
     }
   ];
 
-  let toggled = false;
-  let value = undefined;
-  let selectedIndex = -1;
+  $: toggled = false;
+  $: value = undefined;
+  $: selectedIndex = -1;
+  $: ref = null;
+  $: ref && ref.focus();
 
   function shouldFilterItem(item, value) {
     if (!toggled || !value) {
@@ -28,26 +30,34 @@
   }
 </script>
 
-<Layout>
-  <p>Currently, this component does not support items as slots.</p>
-  <p>
-    <code>items</code>
-    must be an array of objects; mandatory fields are `id` and `text`.
-  </p>
-  <pre style="margin-top: 1rem;">
-    <code>{'items = Array<{ id: string; text: string; }>'}</code>
-  </pre>
-  <div style="margin-top: 2rem;">
-    <ToggleSmall labelText="Enable filtering" bind:toggled />
-    <Button
-      size="small"
-      on:click={() => {
-        selectedIndex = 1;
-      }}>
-      Set item to 'Option 2'
-    </Button>
-  </div>
-  <div style="width: 300px; margin-top: 2rem;">
-    <ComboBox {...$$props} id="combobox" bind:value bind:selectedIndex {items} {shouldFilterItem} />
-  </div>
-</Layout>
+<p>Currently, this component does not support items as slots.</p>
+<p>
+  <code>items</code>
+  must be an array of objects; mandatory fields are `id` and `text`.
+</p>
+<pre style="margin-top: 1rem;">
+  <code>{'items = Array<{ id: string; text: string; }>'}</code>
+</pre>
+<div style="margin-top: 2rem;">
+  <ToggleSmall
+    labelText="Enable filtering"
+    bind:toggled
+    style="margin-top: 1rem;" />
+  <Button
+    size="small"
+    on:click={() => {
+      selectedIndex = 1;
+    }}>
+    Set item to 'Option 2'
+  </Button>
+</div>
+<div style="width: 300px; margin-top: 2rem;">
+  <ComboBox
+    {...$$props}
+    id="combobox"
+    bind:ref
+    bind:value
+    bind:selectedIndex
+    {items}
+    {shouldFilterItem} />
+</div>
diff --git a/src/components/ComboBox/ComboBox.stories.js b/src/components/ComboBox/ComboBox.stories.js
index 4e6973f4..f16ef26b 100644
--- a/src/components/ComboBox/ComboBox.stories.js
+++ b/src/components/ComboBox/ComboBox.stories.js
@@ -1,25 +1,27 @@
-import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
-import Component from './ComboBox.Story.svelte';
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./ComboBox.Story.svelte";
 
-export default { title: 'ComboBox', decorators: [withKnobs] };
+export default { title: "ComboBox", decorators: [withKnobs] };
 
 const sizes = {
-  'Extra large size (xl)': 'xl',
-  'Regular size (lg)': '',
-  'Small size (sm)': 'sm'
+  "Extra large size (xl)": "xl",
+  "Regular size (lg)": "",
+  "Small size (sm)": "sm",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    size: select('Field size (size)', sizes, ''),
-    placeholder: text('Placeholder text (placeholder)', 'Filter...'),
-    titleText: text('Title (titleText)', 'Combobox title'),
-    helperText: text('Helper text (helperText)', 'Optional helper text here'),
-    light: boolean('Light (light)', false),
-    disabled: boolean('Disabled (disabled)', false),
-    invalid: boolean('Invalid (invalid)', false),
-    invalidText: text('Invalid text (invalidText)', 'A valid value is required'),
-    name: 'combo-box-name'
-  }
+    size: select("Field size (size)", sizes, ""),
+    placeholder: text("Placeholder text (placeholder)", "Filter..."),
+    titleText: text("Title (titleText)", "Combobox title"),
+    light: boolean("Light (light)", false),
+    disabled: boolean("Disabled (disabled)", false),
+    invalid: boolean("Invalid (invalid)", false),
+    invalidText: text(
+      "Invalid text (invalidText)",
+      "A valid value is required"
+    ),
+    name: "combo-box-name",
+  },
 });
diff --git a/src/components/ComboBox/ComboBox.svelte b/src/components/ComboBox/ComboBox.svelte
index 964c4f76..c7ddd0c0 100644
--- a/src/components/ComboBox/ComboBox.svelte
+++ b/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={() => {
diff --git a/src/components/ComboBox/index.js b/src/components/ComboBox/index.js
index f6e61b53..f29f6df7 100644
--- a/src/components/ComboBox/index.js
+++ b/src/components/ComboBox/index.js
@@ -1,3 +1 @@
-import ComboBox from './ComboBox.svelte';
-
-export default ComboBox;
+export { default as ComboBox } from "./ComboBox.svelte";
diff --git a/src/components/ComposedModal/ComposedModal.Story.svelte b/src/components/ComposedModal/ComposedModal.Story.svelte
index 1adaf875..107c4604 100644
--- a/src/components/ComposedModal/ComposedModal.Story.svelte
+++ b/src/components/ComposedModal/ComposedModal.Story.svelte
@@ -2,14 +2,14 @@
   export let story = undefined;
   const { modalBody } = $$props;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Button from '../Button';
-  import ComposedModal from './ComposedModal.svelte';
-  import ModalHeader from './ModalHeader.svelte';
-  import ModalBody from './ModalBody.svelte';
-  import ModalFooter from './ModalFooter.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Button } from "../Button";
+  import ComposedModal from "./ComposedModal.svelte";
+  import ModalHeader from "./ModalHeader.svelte";
+  import ModalBody from "./ModalBody.svelte";
+  import ModalFooter from "./ModalFooter.svelte";
 
-  let open = false;
+  $: open = false;
 </script>
 
 <Layout>
@@ -19,13 +19,17 @@
       <ModalBody
         {...$$props.modalBody}
         aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
-        <p>Please see ModalWrapper for more examples and demo of the functionality.</p>
+        <p>
+          Please see ModalWrapper for more examples and demo of the
+          functionality.
+        </p>
         {#if modalBody.hasScrollingContent}
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
         {/if}
       </ModalBody>
@@ -41,28 +45,39 @@
       <ModalBody
         {...$$props.modalBody}
         aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
-        <p>Please see ModalWrapper for more examples and demo of the functionality.</p>
+        <p>
+          Please see ModalWrapper for more examples and demo of the
+          functionality.
+        </p>
         {#if modalBody.hasScrollingContent}
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
         {/if}
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary">Cancel</Button>
-        <Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>Primary</Button>
+        <Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
+          Primary
+        </Button>
       </ModalFooter>
     </ComposedModal>
   {/if}
 
   {#if story === 'title'}
-    <ComposedModal {...$$props.composedModal} open on:close={() => {}} on:submit={() => {}}>
+    <ComposedModal
+      {...$$props.composedModal}
+      open
+      on:close={() => {}}
+      on:submit={() => {}}>
       <ModalHeader
         {...$$props.modalHeader}
-        title="Passive modal title as the message. Should be direct and 3 lines or less." />
+        title="Passive modal title as the message. Should be direct and 3 lines
+        or less." />
       <ModalBody {...$$props.modalBody} />
       <ModalFooter {...$$props.modalFooter} />
     </ComposedModal>
@@ -77,55 +92,68 @@
         Launch composed modal
       </Button>
     </div>
-    <ComposedModal {...$$props.composedModal} {open} on:close={() => (open = false)}>
+    <ComposedModal
+      {...$$props.composedModal}
+      {open}
+      on:close={() => (open = false)}>
       <ModalHeader {...$$props.modalHeader} />
       <ModalBody
         {...$$props.modalBody}
         aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
-        <p>Please see ModalWrapper for more examples and demo of the functionality.</p>
+        <p>
+          Please see ModalWrapper for more examples and demo of the
+          functionality.
+        </p>
         {#if modalBody.hasScrollingContent}
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
           <h3>Lorem ipsum</h3>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue.
-            Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna,
-            consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
-            venenatis molestie tellus. Quisque consectetur non risus eu rutrum.{' '}
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+            accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+            posuere. Curabitur justo urna, consectetur vel elit iaculis,
+            ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie
+            tellus. Quisque consectetur non risus eu rutrum.{' '}
           </p>
         {/if}
       </ModalBody>
diff --git a/src/components/ComposedModal/ComposedModal.stories.js b/src/components/ComposedModal/ComposedModal.stories.js
index a1281a05..afbdf4eb 100644
--- a/src/components/ComposedModal/ComposedModal.stories.js
+++ b/src/components/ComposedModal/ComposedModal.stories.js
@@ -1,135 +1,177 @@
-import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
-import Component from './ComposedModal.Story.svelte';
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./ComposedModal.Story.svelte";
 
-export default { title: 'ComposedModal', decorators: [withKnobs] };
+export default { title: "ComposedModal", decorators: [withKnobs] };
 
 const sizes = {
-  Default: '',
-  'Extra small (xs)': 'xs',
-  'Small (sm)': 'sm',
-  'Large (lg)': 'lg'
+  Default: "",
+  "Extra small (xs)": "xs",
+  "Small (sm)": "sm",
+  "Large (lg)": "lg",
 };
 
 export const Default = () => ({
   Component,
   props: {
     composedModal: {
-      open: boolean('Open (open in <ComposedModal>)', true),
-      danger: boolean('Danger mode (danger)', false),
+      open: boolean("Open (open in <ComposedModal>)", true),
+      danger: boolean("Danger mode (danger)", false),
       selectorPrimaryFocus: text(
-        'Primary focus element selector (selectorPrimaryFocus)',
-        '[data-modal-primary-focus]'
+        "Primary focus element selector (selectorPrimaryFocus)",
+        "[data-modal-primary-focus]"
       ),
-      size: select('Size (size)', sizes, 'sm')
+      size: select("Size (size)", sizes, "sm"),
     },
     modalHeader: {
-      label: text('Optional Label (label in <ModalHeader>)', 'Optional Label'),
-      title: text('Optional title (title in <ModalHeader>)', 'Example'),
-      iconDescription: text('Close icon description (iconDescription in <ModalHeader>)', 'Close')
+      label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
+      title: text("Optional title (title in <ModalHeader>)", "Example"),
+      iconDescription: text(
+        "Close icon description (iconDescription in <ModalHeader>)",
+        "Close"
+      ),
     },
     modalBody: {
-      hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true),
-      'aria-label': text('ARIA label for content', 'Example modal content')
+      hasScrollingContent: boolean(
+        "Modal contains scrollable content (hasScrollingContent)",
+        true
+      ),
+      "aria-label": text("ARIA label for content", "Example modal content"),
     },
     modalFooter: {
-      primaryButtonText: text('Primary button text (primaryButtonText in <ModalFooter>)', 'Save'),
+      primaryButtonText: text(
+        "Primary button text (primaryButtonText in <ModalFooter>)",
+        "Save"
+      ),
       primaryButtonDisabled: boolean(
-        'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
+        "Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
         false
       ),
-      secondaryButtonText: text('Secondary button text (secondaryButtonText in <ModalFooter>)', '')
-    }
-  }
+      secondaryButtonText: text(
+        "Secondary button text (secondaryButtonText in <ModalFooter>)",
+        ""
+      ),
+    },
+  },
 });
 
 export const ChildNodes = () => ({
   Component,
   props: {
-    story: 'child nodes',
+    story: "child nodes",
     composedModal: {
-      open: boolean('Open (open in <ComposedModal>)', true),
-      danger: boolean('Danger mode (danger)', false),
+      open: boolean("Open (open in <ComposedModal>)", true),
+      danger: boolean("Danger mode (danger)", false),
       selectorPrimaryFocus: text(
-        'Primary focus element selector (selectorPrimaryFocus)',
-        '[data-modal-primary-focus]'
+        "Primary focus element selector (selectorPrimaryFocus)",
+        "[data-modal-primary-focus]"
       ),
-      size: select('Size (size)', sizes, 'sm')
+      size: select("Size (size)", sizes, "sm"),
     },
     modalHeader: {
-      label: text('Optional Label (label in <ModalHeader>)', 'Optional Label'),
-      title: text('Optional title (title in <ModalHeader>)', 'Example'),
-      iconDescription: text('Close icon description (iconDescription in <ModalHeader>)', 'Close')
+      label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
+      title: text("Optional title (title in <ModalHeader>)", "Example"),
+      iconDescription: text(
+        "Close icon description (iconDescription in <ModalHeader>)",
+        "Close"
+      ),
     },
     modalBody: {
-      hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true),
-      'aria-label': text('ARIA label for content', 'Example modal content')
+      hasScrollingContent: boolean(
+        "Modal contains scrollable content (hasScrollingContent)",
+        true
+      ),
+      "aria-label": text("ARIA label for content", "Example modal content"),
     },
-    modalFooter: {}
-  }
+    modalFooter: {},
+  },
 });
 
 export const TitleOnly = () => ({
   Component,
   props: {
-    story: 'title',
+    story: "title",
     composedModal: {
-      open: boolean('Open (open in <ComposedModal>)', true),
-      danger: boolean('Danger mode (danger)', false),
+      open: boolean("Open (open in <ComposedModal>)", true),
+      danger: boolean("Danger mode (danger)", false),
       selectorPrimaryFocus: text(
-        'Primary focus element selector (selectorPrimaryFocus)',
-        '[data-modal-primary-focus]'
+        "Primary focus element selector (selectorPrimaryFocus)",
+        "[data-modal-primary-focus]"
       ),
-      size: select('Size (size)', sizes, 'sm')
+      size: select("Size (size)", sizes, "sm"),
     },
     modalHeader: {
-      label: text('Optional Label (label in <ModalHeader>)', 'Optional Label'),
-      title: text('Optional title (title in <ModalHeader>)', 'Example'),
-      iconDescription: text('Close icon description (iconDescription in <ModalHeader>)', 'Close')
+      label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
+      title: text("Optional title (title in <ModalHeader>)", "Example"),
+      iconDescription: text(
+        "Close icon description (iconDescription in <ModalHeader>)",
+        "Close"
+      ),
     },
     modalBody: {
-      hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true),
-      'aria-label': text('ARIA label for content', 'Example modal content')
+      hasScrollingContent: boolean(
+        "Modal contains scrollable content (hasScrollingContent)",
+        true
+      ),
+      "aria-label": text("ARIA label for content", "Example modal content"),
     },
     modalFooter: {
-      primaryButtonText: text('Primary button text (primaryButtonText in <ModalFooter>)', 'Save'),
+      primaryButtonText: text(
+        "Primary button text (primaryButtonText in <ModalFooter>)",
+        "Save"
+      ),
       primaryButtonDisabled: boolean(
-        'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
+        "Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
         false
       ),
-      secondaryButtonText: text('Secondary button text (secondaryButtonText in <ModalFooter>)', '')
-    }
-  }
+      secondaryButtonText: text(
+        "Secondary button text (secondaryButtonText in <ModalFooter>)",
+        ""
+      ),
+    },
+  },
 });
 
 export const Trigger = () => ({
   Component,
   props: {
-    story: 'trigger',
+    story: "trigger",
     composedModal: {
-      open: boolean('Open (open in <ComposedModal>)', true),
-      danger: boolean('Danger mode (danger)', false),
+      open: boolean("Open (open in <ComposedModal>)", true),
+      danger: boolean("Danger mode (danger)", false),
       selectorPrimaryFocus: text(
-        'Primary focus element selector (selectorPrimaryFocus)',
-        '[data-modal-primary-focus]'
+        "Primary focus element selector (selectorPrimaryFocus)",
+        "[data-modal-primary-focus]"
       ),
-      size: select('Size (size)', sizes, 'sm')
+      size: select("Size (size)", sizes, "sm"),
     },
     modalHeader: {
-      label: text('Optional Label (label in <ModalHeader>)', 'Optional Label'),
-      title: text('Optional title (title in <ModalHeader>)', 'Example'),
-      iconDescription: text('Close icon description (iconDescription in <ModalHeader>)', 'Close')
+      label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
+      title: text("Optional title (title in <ModalHeader>)", "Example"),
+      iconDescription: text(
+        "Close icon description (iconDescription in <ModalHeader>)",
+        "Close"
+      ),
     },
     modalBody: {
-      hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', true),
-      'aria-label': text('ARIA label for content', 'Example modal content')
+      hasScrollingContent: boolean(
+        "Modal contains scrollable content (hasScrollingContent)",
+        true
+      ),
+      "aria-label": text("ARIA label for content", "Example modal content"),
     },
     modalFooter: {
-      primaryButtonText: text('Primary button text (primaryButtonText in <ModalFooter>)', 'Save'),
+      primaryButtonText: text(
+        "Primary button text (primaryButtonText in <ModalFooter>)",
+        "Save"
+      ),
       primaryButtonDisabled: boolean(
-        'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
+        "Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
         false
       ),
-      secondaryButtonText: text('Secondary button text (secondaryButtonText in <ModalFooter>)', '')
-    }
-  }
+      secondaryButtonText: text(
+        "Secondary button text (secondaryButtonText in <ModalFooter>)",
+        ""
+      ),
+    },
+  },
 });
diff --git a/src/components/ComposedModal/ComposedModal.svelte b/src/components/ComposedModal/ComposedModal.svelte
index 2282d40e..7842851a 100644
--- a/src/components/ComposedModal/ComposedModal.svelte
+++ b/src/components/ComposedModal/ComposedModal.svelte
@@ -1,48 +1,51 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let containerClass = undefined;
-  export let danger = false;
   export let open = false;
-  export let selectorPrimaryFocus = '[data-modal-primary-focus]';
-  export let size = undefined;
-  export let style = undefined;
+  export let danger = false;
+  export let size = undefined; // "xs" | "sm" | "lg"
+  export let containerClass = "";
+  export let selectorPrimaryFocus = "[data-modal-primary-focus]";
+  export let ref = null;
 
-  import { createEventDispatcher, tick, setContext, onMount, afterUpdate } from 'svelte';
-  import { cx } from '../../lib';
+  import {
+    createEventDispatcher,
+    tick,
+    setContext,
+    onMount,
+    afterUpdate
+  } from "svelte";
 
   const dispatch = createEventDispatcher();
 
-  let buttonRef = undefined;
-  let outerModal = undefined;
-  let innerModal = undefined;
+  let buttonRef = null;
+  let innerModal = null;
 
-  let opened = false;
-
-  setContext('ComposedModal', {
+  setContext("ComposedModal", {
     closeModal: () => {
       open = false;
     },
     submit: () => {
-      dispatch('submit');
+      dispatch("submit");
     },
     declareRef: ref => {
       buttonRef = ref;
     }
   });
 
-  // TODO: reuse in Modal
   function focus(element) {
-    const node = (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
+    const node =
+      (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
     node.focus();
   }
 
+  $: opened = false;
+  $: didOpen = open;
+
   onMount(async () => {
     await tick();
     focus();
 
     return () => {
-      document.body.classList.remove(cx('--body--with-modal-open'));
+      document.body.classList.remove("bx--body--with-modal-open");
     };
   });
 
@@ -50,24 +53,25 @@
     if (opened) {
       if (!open) {
         opened = false;
-        dispatch('close');
-        document.body.classList.add(cx('--body--with-modal-open'));
+        dispatch("close");
+        document.body.classList.add("bx--body--with-modal-open");
       }
     } else if (open) {
       opened = true;
-      dispatch('open');
-      document.body.classList.remove(cx('--body--with-modal-open'));
+      dispatch("open");
+      document.body.classList.remove("bx--body--with-modal-open");
     }
   });
-
-  $: didOpen = open;
 </script>
 
 <div
-  bind:this={outerModal}
+  bind:this={ref}
   role="presentation"
   tabindex="-1"
-  class={cx('--modal', open && 'is-visible', danger && '--modal--danger', className)}
+  class:bx--modal={true}
+  class:is-visible={open}
+  class:bx--modal--danger={danger}
+  {...$$restProps}
   on:click
   on:click={({ target }) => {
     if (!innerModal.contains(target)) {
@@ -83,11 +87,12 @@
       focus(currentTarget);
       didOpen = false;
     }
-  }}
-  {style}>
+  }}>
   <div
     bind:this={innerModal}
-    class={cx('--modal-container', size && `--modal-container--${size}`, containerClass)}>
+    class:bx--modal-container={true}
+    class="{size && `bx--modal-container--${size}`}
+    {containerClass}">
     <slot />
   </div>
 </div>
diff --git a/src/components/ComposedModal/ModalBody.svelte b/src/components/ComposedModal/ModalBody.svelte
index 700ea7b8..d47c3eb9 100644
--- a/src/components/ComposedModal/ModalBody.svelte
+++ b/src/components/ComposedModal/ModalBody.svelte
@@ -1,20 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let hasForm = false;
   export let hasScrollingContent = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <div
   tabindex={hasScrollingContent ? '0' : undefined}
   role={hasScrollingContent ? 'region' : undefined}
-  class={cx('--modal-content', hasForm && '--modal-content--with-form', className)}
-  {style}>
+  class:bx--modal-content={true}
+  class:bx--modal-content--with-form={hasForm}
+  {...$$restProps}>
   <slot />
 </div>
 {#if hasScrollingContent}
-  <div class={cx('--modal-content--overflow-indicator')} />
+  <div class:bx--modal-content--overflow-indicator={true} />
 {/if}
diff --git a/src/components/ComposedModal/ModalFooter.svelte b/src/components/ComposedModal/ModalFooter.svelte
index adfdde7c..f4a4ea95 100644
--- a/src/components/ComposedModal/ModalFooter.svelte
+++ b/src/components/ComposedModal/ModalFooter.svelte
@@ -1,22 +1,18 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let primaryClass = undefined;
-  export let primaryButtonText = '';
+  export let primaryButtonText = "";
   export let primaryButtonDisabled = false;
   export let secondaryClass = undefined;
-  export let secondaryButtonText = '';
+  export let secondaryButtonText = "";
   export let danger = false;
-  export let style = undefined;
 
-  import { getContext } from 'svelte';
-  import { cx } from '../../lib';
-  import Button from '../Button';
+  import { getContext } from "svelte";
+  import { Button } from "../Button";
 
-  const { closeModal, submit } = getContext('ComposedModal');
+  const { closeModal, submit } = getContext("ComposedModal");
 </script>
 
-<div class={cx('--modal-footer', className)} {style}>
+<div class:bx--modal-footer={true} {...$$restProps}>
   {#if secondaryButtonText}
     <Button kind="secondary" class={secondaryClass} on:click={closeModal}>
       {secondaryButtonText}
@@ -24,9 +20,9 @@
   {/if}
   {#if primaryButtonText}
     <Button
-      class={primaryClass}
       kind={danger ? 'danger' : 'primary'}
       disabled={primaryButtonDisabled}
+      class={primaryClass}
       on:click={submit}>
       {primaryButtonText}
     </Button>
diff --git a/src/components/ComposedModal/ModalHeader.svelte b/src/components/ComposedModal/ModalHeader.svelte
index 340d021c..ef4fed22 100644
--- a/src/components/ComposedModal/ModalHeader.svelte
+++ b/src/components/ComposedModal/ModalHeader.svelte
@@ -1,37 +1,44 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let labelClass = undefined;
-  export let titleClass = undefined;
-  export let closeClass = undefined;
-  export let closeIconClass = undefined;
-  export let label = undefined;
-  export let title = '';
-  export let iconDescription = 'Close';
-  export let style = undefined;
+  export let title = "";
+  export let label = "";
+  export let labelClass = "";
+  export let titleClass = "";
+  export let closeClass = "";
+  export let closeIconClass = "";
+  export let iconDescription = "Close";
 
-  import { getContext } from 'svelte';
-  import Close20 from 'carbon-icons-svelte/lib/Close20';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
+  import Close20 from "carbon-icons-svelte/lib/Close20";
 
-  const { closeModal } = getContext('ComposedModal');
+  const { closeModal } = getContext("ComposedModal");
 </script>
 
-<div class={cx('--modal-header', className)} {style}>
+<div class:bx--modal-header={true} {...$$restProps}>
   {#if label}
-    <p class={cx('--modal-header__label', '--type-delta', labelClass)}>{label}</p>
+    <p
+      class:bx--modal-header__label={true}
+      class:bx--type-delta={true}
+      class:labelClass>
+      {label}
+    </p>
   {/if}
   {#if title}
-    <p class={cx('--modal-header__heading', '--type-beta', titleClass)}>{title}</p>
+    <p
+      class:bx--modal-header__heading={true}
+      class:bx--type-beta={true}
+      class:titleClass>
+      {title}
+    </p>
   {/if}
   <slot />
   <button
     type="button"
     title={iconDescription}
     aria-label={iconDescription}
-    class={cx('--modal-close', closeClass)}
+    class:bx--modal-close={true}
+    class:closeClass
     on:click
     on:click={closeModal}>
-    <Close20 class={cx('--modal-close__icon', closeIconClass)} />
+    <Close20 class="bx--modal-close__icon {closeIconClass}" />
   </button>
 </div>
diff --git a/src/components/ComposedModal/index.js b/src/components/ComposedModal/index.js
index e1ff8ac0..7274a1af 100644
--- a/src/components/ComposedModal/index.js
+++ b/src/components/ComposedModal/index.js
@@ -1,6 +1,4 @@
-import ComposedModal from './ComposedModal.svelte';
-
-export default ComposedModal;
-export { default as ModalHeader } from './ModalHeader.svelte';
-export { default as ModalBody } from './ModalBody.svelte';
-export { default as ModalFooter } from './ModalFooter.svelte';
+export { default as ComposedModal } from "./ComposedModal.svelte";
+export { default as ModalHeader } from "./ModalHeader.svelte";
+export { default as ModalBody } from "./ModalBody.svelte";
+export { default as ModalFooter } from "./ModalFooter.svelte";
diff --git a/src/components/ContentSwitcher/ContentSwitcher.Story.svelte b/src/components/ContentSwitcher/ContentSwitcher.Story.svelte
index 39037db7..4777b628 100644
--- a/src/components/ContentSwitcher/ContentSwitcher.Story.svelte
+++ b/src/components/ContentSwitcher/ContentSwitcher.Story.svelte
@@ -1,11 +1,13 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import ContentSwitcher from './ContentSwitcher.svelte';
-  import Switch from './Switch.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import ContentSwitcher from "./ContentSwitcher.svelte";
+  import Switch from "./Switch.svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
 
-  let selectedIndex = 0;
+  $: selectedIndex = 0;
+  $: console.log("bind selectedIndex", selectedIndex);
 </script>
 
 <Layout>
@@ -26,7 +28,19 @@
       }}>
       <Switch {...$$props} text="First section" />
       <Switch {...$$props} text="Second section" />
-      <Switch {...$$props} text="Third section" />
+      <Switch {...$$props}>
+        <div style="display: flex; align-items:center;">
+          <Add16 style="margin-right: .25rem;" />
+          Third section
+        </div>
+      </Switch>
     </ContentSwitcher>
+    <div
+      style="margin-top: 1.5rem"
+      on:click={() => {
+        selectedIndex = 1;
+      }}>
+      Programmatically set to second index
+    </div>
   {/if}
 </Layout>
diff --git a/src/components/ContentSwitcher/ContentSwitcher.stories.js b/src/components/ContentSwitcher/ContentSwitcher.stories.js
index b25659a3..43de4986 100644
--- a/src/components/ContentSwitcher/ContentSwitcher.stories.js
+++ b/src/components/ContentSwitcher/ContentSwitcher.stories.js
@@ -1,19 +1,17 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import Component from './ContentSwitcher.Story.svelte';
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import Component from "./ContentSwitcher.Story.svelte";
 
-export default { title: 'ContentSwitcher', decorators: [withKnobs] };
+export default { title: "ContentSwitcher", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
-  props: {
-    disabled: boolean('Disabled (disabled)', false)
-  }
+  props: { disabled: boolean("Disabled (disabled)", false) },
 });
 
 export const Selected = () => ({
   Component,
   props: {
-    story: 'selected',
-    disabled: boolean('Disabled (disabled)', false)
-  }
+    story: "selected",
+    disabled: boolean("Disabled (disabled)", false),
+  },
 });
diff --git a/src/components/ContentSwitcher/ContentSwitcher.svelte b/src/components/ContentSwitcher/ContentSwitcher.svelte
index c2eae36f..80a6e302 100644
--- a/src/components/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/components/ContentSwitcher/ContentSwitcher.svelte
@@ -1,30 +1,30 @@
 <script>
-  export let className = undefined;
-  export { className as class };
   export let selectedIndex = 0;
-  export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { cx } from '../../lib';
+  import { afterUpdate, createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const currentId = writable(null);
 
-  let currentId = writable(null);
-  let currentIndex = selectedIndex;
-  let switches = [];
+  $: currentIndex = -1;
+  $: switches = [];
+  $: if (switches[currentIndex]) {
+    dispatch("change", currentIndex);
+    currentId.set(switches[currentIndex].id);
+  }
 
-  setContext('ContentSwitcher', {
+  setContext("ContentSwitcher", {
     currentId,
     add: ({ id, text, selected }) => {
-      switches = [...switches, { id, text, selected }];
-
       if (selected) {
-        currentIndex = switches.length;
+        selectedIndex = switches.length;
       }
+
+      switches = [...switches, { id, text, selected }];
     },
     update: id => {
-      currentIndex = switches.map(({ id }) => id).indexOf(id);
+      selectedIndex = switches.map(({ id }) => id).indexOf(id);
     },
     change: direction => {
       let index = currentIndex + direction;
@@ -35,24 +35,24 @@
         index = 0;
       }
 
-      currentIndex = index;
+      selectedIndex = index;
     }
   });
 
-  $: if (switches[currentIndex]) {
-    dispatch('change', currentIndex);
-    selectedIndex = currentIndex;
-    currentId.set(switches[currentIndex].id);
-  }
+  afterUpdate(() => {
+    if (selectedIndex !== currentIndex) {
+      currentIndex = selectedIndex;
+    }
+  });
 </script>
 
 <div
   role="tablist"
+  class:bx--content-switcher={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--content-switcher', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </div>
diff --git a/src/components/ContentSwitcher/Switch.svelte b/src/components/ContentSwitcher/Switch.svelte
index f88314b3..32b894dd 100644
--- a/src/components/ContentSwitcher/Switch.svelte
+++ b/src/components/ContentSwitcher/Switch.svelte
@@ -1,39 +1,44 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let text = "Provide text";
   export let selected = false;
-  export let text = 'Provide text';
   export let disabled = false;
-  export let style = undefined;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { afterUpdate, getContext } from 'svelte';
-  import { cx } from '../../lib';
+  import { afterUpdate, getContext, onDestroy } from "svelte";
 
-  const id = Math.random();
-  const { currentId, add, update, change } = getContext('ContentSwitcher');
+  const ctx = getContext("ContentSwitcher");
 
-  let buttonRef = undefined;
+  ctx.add({ id, text, selected });
 
-  add({ id, text, selected });
+  const unsubscribe = ctx.currentId.subscribe($ => {
+    selected = $ === id;
+  });
 
   afterUpdate(() => {
     if (selected) {
-      buttonRef.focus();
+      ref.focus();
     }
   });
 
-  $: selected = $currentId === id;
+  onDestroy(() => {
+    unsubscribe();
+  });
 </script>
 
 <button
-  bind:this={buttonRef}
+  bind:this={ref}
   role="tab"
   tabindex={selected ? '0' : '-1'}
   aria-selected={selected}
-  class={cx('--content-switcher-btn', selected && '--content-switcher--selected', className)}
+  {disabled}
+  {id}
+  class:bx--content-switcher-btn={true}
+  class:bx--content-switcher--selected={selected}
+  {...$$restProps}
   on:click
   on:click|preventDefault={() => {
-    update(id);
+    ctx.update(id);
   }}
   on:mouseover
   on:mouseenter
@@ -41,12 +46,13 @@
   on:keydown
   on:keydown={({ key }) => {
     if (key === 'ArrowRight') {
-      change(1);
+      ctx.change(1);
     } else if (key === 'ArrowLeft') {
-      change(-1);
+      ctx.change(-1);
     }
-  }}
-  {disabled}
-  {style}>
-  <span class={cx('--content-switcher__label')}>{text}</span>
+  }}>
+
+  <span class:bx--content-switcher__label={true}>
+    <slot>{text}</slot>
+  </span>
 </button>
diff --git a/src/components/ContentSwitcher/index.js b/src/components/ContentSwitcher/index.js
index 273931c9..297c5156 100644
--- a/src/components/ContentSwitcher/index.js
+++ b/src/components/ContentSwitcher/index.js
@@ -1,4 +1,2 @@
-import ContentSwitcher from './ContentSwitcher.svelte';
-
-export default ContentSwitcher;
-export { default as Switch } from './Switch.svelte';
+export { default as ContentSwitcher } from "./ContentSwitcher.svelte";
+export { default as Switch } from "./Switch.svelte";
diff --git a/src/components/Copy/Copy.svelte b/src/components/Copy/Copy.svelte
index f7fbf910..8c2448a4 100644
--- a/src/components/Copy/Copy.svelte
+++ b/src/components/Copy/Copy.svelte
@@ -1,38 +1,51 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let feedback = 'Copied!';
+  export let feedback = "Copied!";
   export let feedbackTimeout = 2000;
-  export let style = undefined;
+  export let ref = null;
 
-  import { onDestroy } from 'svelte';
-  import { cx } from '../../lib';
+  import { onDestroy } from "svelte";
 
-  let timeoutId = undefined;
+  $: animation = undefined;
+  $: timeoutId = undefined;
+  $: showFeedback = timeoutId !== undefined;
 
   onDestroy(() => {
     window.clearTimeout(timeoutId);
     timeoutId = undefined;
   });
-
-  $: showFeedback = timeoutId !== undefined;
 </script>
 
 <button
+  bind:this={ref}
   type="button"
-  class={className}
+  aria-live="polite"
+  class:bx--copy={true}
+  class:bx--copy-btn--animating={animation}
+  aria-label={animation ? feedback : undefined}
+  {...$$restProps}
+  class="{$$restProps.class}
+  {animation && `bx--copy-btn--${animation}`}"
   on:click
   on:click={() => {
-    timeoutId = window.setTimeout(() => {
-      showFeedback = undefined;
+    if (animation === 'fade-in') return;
+    animation = 'fade-in';
+    timeoutId = setTimeout(() => {
+      animation = 'fade-out';
     }, feedbackTimeout);
   }}
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  {style}>
-  <slot />
-  <div
-    class={cx('--btn--copy__feedback', showFeedback && '--btn--copy__feedback--displayed')}
-    data-feedback={feedback} />
+  on:animationend
+  on:animationend={({ animationName }) => {
+    if (animationName === 'hide-feedback') {
+      animation = undefined;
+    }
+  }}>
+  <slot>
+    {#if animation}{feedback || $$restProps['aria-label']}{/if}
+  </slot>
+  <span
+    aria-hidden="true"
+    class:bx--assistive-text={true}
+    class:bx--copy-btn__feedback={true}>
+    {feedback}
+  </span>
 </button>
diff --git a/src/components/Copy/index.js b/src/components/Copy/index.js
index 051c7a98..4caff0e6 100644
--- a/src/components/Copy/index.js
+++ b/src/components/Copy/index.js
@@ -1,3 +1 @@
-import Copy from './Copy.svelte';
-
-export default Copy;
+export { default as Copy } from "./Copy.svelte";
diff --git a/src/components/CopyButton/CopyButton.Story.svelte b/src/components/CopyButton/CopyButton.Story.svelte
index 7608224a..884d51c4 100644
--- a/src/components/CopyButton/CopyButton.Story.svelte
+++ b/src/components/CopyButton/CopyButton.Story.svelte
@@ -1,8 +1,15 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import CopyButton from './CopyButton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import CopyButton from "./CopyButton.svelte";
 </script>
 
 <Layout>
-  <CopyButton {...$$props} />
+  <CopyButton
+    {...$$props}
+    on:click={() => {
+      console.log('click');
+    }}
+    on:animationend={e => {
+      console.log('animation end', e.animationName);
+    }} />
 </Layout>
diff --git a/src/components/CopyButton/CopyButton.stories.js b/src/components/CopyButton/CopyButton.stories.js
index 71b9ce6a..61dee57e 100644
--- a/src/components/CopyButton/CopyButton.stories.js
+++ b/src/components/CopyButton/CopyButton.stories.js
@@ -1,13 +1,19 @@
-import { withKnobs, text, number } from '@storybook/addon-knobs';
-import Component from './CopyButton.Story.svelte';
+import { withKnobs, text, number } from "@storybook/addon-knobs";
+import Component from "./CopyButton.Story.svelte";
 
-export default { title: 'CopyButton', decorators: [withKnobs] };
+export default { title: "CopyButton", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    feedback: text('The text shown upon clicking (feedback)', 'Copied!'),
-    feedbackTimeout: number('How long the text is shown upon clicking (feedbackTimeout)', 2000),
-    iconDescription: text('Feedback icon description (iconDescription)', 'Copy to clipboard')
-  }
+    feedback: text("The text shown upon clicking (feedback)", "Copied!"),
+    feedbackTimeout: number(
+      "How long the text is shown upon clicking (feedbackTimeout)",
+      2000
+    ),
+    iconDescription: text(
+      "Feedback icon description (iconDescription)",
+      "Copy to clipboard"
+    ),
+  },
 });
diff --git a/src/components/CopyButton/CopyButton.svelte b/src/components/CopyButton/CopyButton.svelte
index 1fd5386a..c9953e1c 100644
--- a/src/components/CopyButton/CopyButton.svelte
+++ b/src/components/CopyButton/CopyButton.svelte
@@ -1,52 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let feedback = 'Copied!';
-  export let feedbackTimeout = 2000;
-  export let iconDescription = 'Copy to clipboard';
-  export let style = undefined;
+  export let iconDescription = "Copy to clipboard";
 
-  import { afterUpdate, onDestroy } from 'svelte';
-  import Copy16 from 'carbon-icons-svelte/lib/Copy16';
-  import { cx } from '../../lib';
-
-  let animation = undefined;
-  let timeoutId = undefined;
-
-  afterUpdate(() => {
-    if (animation === 'fade-in') {
-      timeoutId = window.setTimeout(() => {
-        animation = 'fade-out';
-      }, feedbackTimeout);
-    }
-  });
-
-  onDestroy(() => {
-    window.clearTimeout(timeoutId);
-    timeoutId = undefined;
-  });
+  import { Copy } from "../Copy";
+  import Copy16 from "carbon-icons-svelte/lib/Copy16";
 </script>
 
-<button
-  type="button"
-  tabindex="0"
+<Copy
+  class="bx--copy-btn"
   aria-label={iconDescription}
   title={iconDescription}
-  class={cx('--copy-btn', animation && '--copy-btn--animating', animation && `--copy-btn--${animation}`, animation === 'fade-in' && '--btn--copy__feedback--displayed', className)}
+  {...$$restProps}
   on:click
-  on:click={() => {
-    animation = 'fade-in';
-  }}
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:animationend
-  on:animationend={({ animationName }) => {
-    if (animationName === 'hide-feedback') {
-      animation = undefined;
-    }
-  }}
-  {style}>
-  <span class={cx('--assistive-text', '--copy-btn__feedback')}>{feedback}</span>
-  <Copy16 class={cx('--snippet__icon')} />
-</button>
+  on:animationend>
+  <Copy16 class="bx--snippet__icon" />
+</Copy>
diff --git a/src/components/CopyButton/index.js b/src/components/CopyButton/index.js
index d699ce72..3ae3caf6 100644
--- a/src/components/CopyButton/index.js
+++ b/src/components/CopyButton/index.js
@@ -1,3 +1 @@
-import CopyButton from './CopyButton.svelte';
-
-export default CopyButton;
+export { default as CopyButton } from "./CopyButton.svelte";
diff --git a/src/components/DataTable/DataTable.Story.svelte b/src/components/DataTable/DataTable.Story.svelte
index e1640bdc..c494c901 100644
--- a/src/components/DataTable/DataTable.Story.svelte
+++ b/src/components/DataTable/DataTable.Story.svelte
@@ -1,81 +1,81 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import DataTable from './DataTable.svelte';
-  import Table from './Table.svelte';
-  import TableBody from './TableBody.svelte';
-  import TableCell from './TableCell.svelte';
-  import TableContainer from './TableContainer.svelte';
-  import TableHead from './TableHead.svelte';
-  import TableHeader from './TableHeader.svelte';
-  import TableRow from './TableRow.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import DataTable from "./DataTable.svelte";
+  import Table from "./Table.svelte";
+  import TableBody from "./TableBody.svelte";
+  import TableCell from "./TableCell.svelte";
+  import TableContainer from "./TableContainer.svelte";
+  import TableHead from "./TableHead.svelte";
+  import TableHeader from "./TableHeader.svelte";
+  import TableRow from "./TableRow.svelte";
 
-  let rows = [
+  const rows = [
     {
-      id: 'a',
-      name: 'Load Balancer 3',
-      protocol: 'HTTP',
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
-      attached_groups: 'Kevins VM Groups',
-      status: 'Disabled'
+      rule: "Round robin",
+      attached_groups: "Kevins VM Groups",
+      status: "Disabled"
     },
     {
-      id: 'b',
-      name: 'Load Balancer 1',
-      protocol: 'HTTP',
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
-      attached_groups: 'Maureens VM Groups',
-      status: 'Starting'
+      rule: "Round robin",
+      attached_groups: "Maureens VM Groups",
+      status: "Starting"
     },
     {
-      id: 'c',
-      name: 'Load Balancer 2',
-      protocol: 'HTTP',
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
-      attached_groups: 'Andrews VM Groups',
-      status: 'Active'
+      rule: "DNS delegation",
+      attached_groups: "Andrews VM Groups",
+      status: "Active"
     },
     {
-      id: 'd',
-      name: 'Load Balancer 6',
-      protocol: 'HTTP',
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
       port: 3000,
-      rule: 'Round robin',
-      attached_groups: 'Marcs VM Groups',
-      status: 'Disabled'
+      rule: "Round robin",
+      attached_groups: "Marcs VM Groups",
+      status: "Disabled"
     },
     {
-      id: 'e',
-      name: 'Load Balancer 4',
-      protocol: 'HTTP',
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
       port: 443,
-      rule: 'Round robin',
-      attached_groups: 'Mels VM Groups',
-      status: 'Starting'
+      rule: "Round robin",
+      attached_groups: "Mels VM Groups",
+      status: "Starting"
     },
     {
-      id: 'f',
-      name: 'Load Balancer 5',
-      protocol: 'HTTP',
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
       port: 80,
-      rule: 'DNS delegation',
-      attached_groups: 'Ronjas VM Groups',
-      status: 'Active'
+      rule: "DNS delegation",
+      attached_groups: "Ronjas VM Groups",
+      status: "Active"
     }
   ];
-  let headers = [
-    { key: 'name', value: 'Name' },
-    { key: 'protocol', value: 'Protocol' },
-    { key: 'port', value: 'Port' },
-    { key: 'rule', value: 'Rule' },
-    { key: 'attached_groups', value: 'Attached Groups' },
-    { key: 'status', value: 'Status' }
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+    { key: "attached_groups", value: "Attached Groups" },
+    { key: "status", value: "Status" }
   ];
-  let sortable = true;
+  $: sortable = true;
 </script>
 
 <Layout>
@@ -89,7 +89,9 @@
           <TableHead>
             <TableRow>
               {#each props.headers as header, i (header.key)}
-                <TableHeader {...props.getHeaderProps({ header })}>{header.header}</TableHeader>
+                <TableHeader {...props.getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
               {/each}
             </TableRow>
           </TableHead>
diff --git a/src/components/DataTable/DataTable.stories.js b/src/components/DataTable/DataTable.stories.js
index dbf2de70..0e23445d 100644
--- a/src/components/DataTable/DataTable.stories.js
+++ b/src/components/DataTable/DataTable.stories.js
@@ -1,35 +1,35 @@
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import Component from './DataTable.Story.svelte';
+import { withKnobs, boolean, select, text } from "@storybook/addon-knobs";
+import Component from "./DataTable.Story.svelte";
 
-export default { title: 'DataTable', decorators: [withKnobs] };
+export default { title: "DataTable", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    title: text('Optional DataTable title (title)', ''),
-    description: text('Optional DataTable description (description)', ''),
-    zebra: boolean('Zebra row styles (zebra)', false),
+    title: text("Optional DataTable title (title)", ""),
+    description: text("Optional DataTable description (description)", ""),
+    zebra: boolean("Zebra row styles (zebra)", false),
     size: select(
-      'Row height (size)',
-      { compact: 'compact', short: 'short', tall: 'tall', none: null },
+      "Row height (size)",
+      { compact: "compact", short: "short", tall: "tall", none: null },
       null
     ),
-    stickyHeader: boolean('Sticky header (experimental)', false)
-  }
+    stickyHeader: boolean("Sticky header (experimental)", false),
+  },
 });
 
 export const Sortable = () => ({
   Component,
   props: {
-    story: 'sortable',
-    title: text('Optional DataTable title (title)', ''),
-    description: text('Optional DataTable description (description)', ''),
-    zebra: boolean('Zebra row styles (zebra)', false),
+    story: "sortable",
+    title: text("Optional DataTable title (title)", ""),
+    description: text("Optional DataTable description (description)", ""),
+    zebra: boolean("Zebra row styles (zebra)", false),
     size: select(
-      'Row height (size)',
-      { compact: 'compact', short: 'short', tall: 'tall', none: null },
+      "Row height (size)",
+      { compact: "compact", short: "short", tall: "tall", none: null },
       null
     ),
-    stickyHeader: boolean('Sticky header (experimental)', false)
-  }
+    stickyHeader: boolean("Sticky header (experimental)", false),
+  },
 });
diff --git a/src/components/DataTable/DataTable.svelte b/src/components/DataTable/DataTable.svelte
index 857e6044..fe783cd8 100644
--- a/src/components/DataTable/DataTable.svelte
+++ b/src/components/DataTable/DataTable.svelte
@@ -1,39 +1,39 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let title = '';
-  export let description = '';
+  export let size = undefined; // "compact" | "short" | "tall"
+  export let title = "";
+  export let description = "";
   export let zebra = false;
+  export let sortable = false;
+  export let stickyHeader = false;
   export let rows = [];
   export let headers = [];
-  export let stickyHeader = false;
-  export let size = undefined;
-  export let sortable = false;
-  export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { writable, derived } from 'svelte/store';
-  import Table from './Table.svelte';
-  import TableBody from './TableBody.svelte';
-  import TableCell from './TableCell.svelte';
-  import TableContainer from './TableContainer.svelte';
-  import TableHead from './TableHead.svelte';
-  import TableHeader from './TableHeader.svelte';
-  import TableRow from './TableRow.svelte';
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import Table from "./Table.svelte";
+  import TableBody from "./TableBody.svelte";
+  import TableCell from "./TableCell.svelte";
+  import TableContainer from "./TableContainer.svelte";
+  import TableHead from "./TableHead.svelte";
+  import TableHeader from "./TableHeader.svelte";
+  import TableRow from "./TableRow.svelte";
 
+  const sortDirectionMap = {
+    none: "ascending",
+    ascending: "descending",
+    descending: "none"
+  };
   const dispatch = createEventDispatcher();
-  const sortDirectionMap = { none: 'ascending', ascending: 'descending', descending: 'none' };
-
-  let tableSortable = writable(sortable);
-  let sortHeader = writable({ id: null, key: null, sortDirection: 'none' });
-  let headerItems = writable([]);
-  let thKeys = derived(headerItems, () =>
+  const tableSortable = writable(sortable);
+  const sortHeader = writable({ id: null, key: null, sortDirection: "none" });
+  const headerItems = writable([]);
+  const thKeys = derived(headerItems, () =>
     headers
       .map(({ key }, i) => ({ key, id: $headerItems[i] }))
       .reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
   );
 
-  setContext('DataTable', {
+  setContext("DataTable", {
     sortHeader,
     tableSortable,
     add: id => {
@@ -43,24 +43,29 @@
 
   $: tableSortable.set(sortable);
   $: headerKeys = headers.map(({ key }) => key);
-  $: rows = rows.map(row => ({ ...row, cells: headerKeys.map(key => ({ key, value: row[key] })) }));
+  $: rows = rows.map(row => ({
+    ...row,
+    cells: headerKeys.map(key => ({ key, value: row[key] }))
+  }));
   $: sortedRows = rows;
-  $: ascending = $sortHeader.sortDirection === 'ascending';
+  $: ascending = $sortHeader.sortDirection === "ascending";
   $: sortKey = $sortHeader.key;
   $: sorting = sortable && sortKey != null;
   $: if (sorting) {
-    if ($sortHeader.sortDirection === 'none') {
+    if ($sortHeader.sortDirection === "none") {
       sortedRows = rows;
     } else {
       sortedRows = [...rows].sort((a, b) => {
         const itemA = ascending ? a[sortKey] : b[sortKey];
         const itemB = ascending ? b[sortKey] : a[sortKey];
 
-        if (typeof itemA === 'number' && typeof itemB === 'number') {
+        if (typeof itemA === "number" && typeof itemB === "number") {
           return itemA - itemB;
         }
 
-        return itemA.toString().localeCompare(itemB.toString(), 'en', { numeric: true });
+        return itemA
+          .toString()
+          .localeCompare(itemB.toString(), "en", { numeric: true });
       });
     }
   }
@@ -71,7 +76,7 @@
 </script>
 
 <slot {props}>
-  <TableContainer class={className} {title} {description} {style}>
+  <TableContainer {title} {description} {...$$restProps}>
     <Table {zebra} {size} {stickyHeader} {sortable}>
       <TableHead>
         <TableRow>
@@ -82,7 +87,7 @@
                 let active = header.key === $sortHeader.key;
                 let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
                 let sortDirection = sortDirectionMap[currentSortDirection];
-                dispatch('click:header', {header, sortDirection});
+                dispatch('click:header', { header, sortDirection });
                 sortHeader.set({
                   id: sortDirection === 'none' ? null : $thKeys[header.key],
                   key: header.key,
diff --git a/src/components/DataTable/Table.svelte b/src/components/DataTable/Table.svelte
index 910aaa86..b57aa169 100644
--- a/src/components/DataTable/Table.svelte
+++ b/src/components/DataTable/Table.svelte
@@ -1,28 +1,39 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let size = undefined; // "compact" | "short" | "tall"
   export let zebra = false;
-  export let size = undefined;
   export let useStaticWidth = false;
   export let shouldShowBorder = false;
   export let sortable = false;
   export let stickyHeader = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 {#if stickyHeader}
-  <section class={cx('--data-table_inner-container', className)} {style}>
+  <section class:bx--data-table_inner-container={true} {...$$restProps}>
     <table
-      class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
+      class:bx--data-table={true}
+      class:bx--data-table--compact={size === 'compact'}
+      class:bx--data-table--short={size === 'short'}
+      class:bx--data-table--tall={size === 'tall'}
+      class:bx--data-table--sort={sortable}
+      class:bx--data-table--zebra={zebra}
+      class:bx--data-table--static={useStaticWidth}
+      class:bx--data-table--no-border={!shouldShowBorder}
+      class:bx--data-table--sticky-header={stickyHeader}>
       <slot />
     </table>
   </section>
 {:else}
   <table
-    class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
-    {style}>
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === 'compact'}
+    class:bx--data-table--short={size === 'short'}
+    class:bx--data-table--tall={size === 'tall'}
+    class:bx--data-table--sort={sortable}
+    class:bx--data-table--zebra={zebra}
+    class:bx--data-table--static={useStaticWidth}
+    class:bx--data-table--no-border={!shouldShowBorder}
+    class:bx--data-table--sticky-header={stickyHeader}
+    {...$$restProps}>
     <slot />
   </table>
 {/if}
diff --git a/src/components/DataTable/TableBody.svelte b/src/components/DataTable/TableBody.svelte
index fcb38748..83b4984f 100644
--- a/src/components/DataTable/TableBody.svelte
+++ b/src/components/DataTable/TableBody.svelte
@@ -1,9 +1,3 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-</script>
-
-<tbody aria-live={$$props['aria-live'] || 'polite'} class={className} {style}>
+<tbody aria-live="polite" {...$$restProps}>
   <slot />
 </tbody>
diff --git a/src/components/DataTable/TableCell.svelte b/src/components/DataTable/TableCell.svelte
index 1d3e93cd..d43f6f28 100644
--- a/src/components/DataTable/TableCell.svelte
+++ b/src/components/DataTable/TableCell.svelte
@@ -1,9 +1,3 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-</script>
-
-<td on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+<td {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </td>
diff --git a/src/components/DataTable/TableContainer.svelte b/src/components/DataTable/TableContainer.svelte
index 5d5adc3d..60b6d6af 100644
--- a/src/components/DataTable/TableContainer.svelte
+++ b/src/components/DataTable/TableContainer.svelte
@@ -1,21 +1,17 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let stickyHeader = false;
-  export let title = '';
-  export let description = '';
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let title = "";
+  export let description = "";
 </script>
 
 <div
-  class={cx('--data-table-container', stickyHeader && '--data-table--max-width', className)}
-  {style}>
+  class:bx--data-table-container={true}
+  class:bx--data-table--max-width={stickyHeader}
+  {...$$restProps}>
   {#if title}
-    <div class={cx('--data-table-header')}>
-      <h4 class={cx('--data-table-header__title')}>{title}</h4>
-      <p class={cx('--data-table-header__description')}>{description}</p>
+    <div class:bx--data-table-header={true}>
+      <h4 class:bx--data-table-header__title={true}>{title}</h4>
+      <p class:bx--data-table-header__description={true}>{description}</p>
     </div>
   {/if}
   <slot />
diff --git a/src/components/DataTable/TableHead.svelte b/src/components/DataTable/TableHead.svelte
index 522cd18b..ac356ae0 100644
--- a/src/components/DataTable/TableHead.svelte
+++ b/src/components/DataTable/TableHead.svelte
@@ -1,9 +1,3 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-</script>
-
-<thead on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+<thead {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </thead>
diff --git a/src/components/DataTable/TableHeader.svelte b/src/components/DataTable/TableHeader.svelte
index b73fd21f..aa829319 100644
--- a/src/components/DataTable/TableHeader.svelte
+++ b/src/components/DataTable/TableHeader.svelte
@@ -1,17 +1,13 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let scope = 'col';
-  export let translateWithId = () => '';
-  export let style = undefined;
+  export let scope = "col";
+  export let translateWithId = () => "";
+  export let id = "ccs-" + Math.random().toString(36);
 
-  import { getContext } from 'svelte';
-  import ArrowUp20 from 'carbon-icons-svelte/lib/ArrowUp20';
-  import ArrowsVertical20 from 'carbon-icons-svelte/lib/ArrowsVertical20';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
+  import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20";
+  import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20";
 
-  const id = Math.random();
-  const { sortHeader, tableSortable, add } = getContext('DataTable');
+  const { sortHeader, tableSortable, add } = getContext("DataTable");
 
   add(id);
 
@@ -22,25 +18,35 @@
 
 {#if $tableSortable}
   <th
+    aria-sort={active ? $sortHeader.sortDirection : 'none'}
+    {scope}
+    {...$$restProps}
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={className}
-    aria-sort={active ? $sortHeader.sortDirection : 'none'}
-    {scope}>
+    on:mouseleave>
     <button
-      class={cx('--table-sort', active && '--table-sort--active', active && $sortHeader.sortDirection === 'descending' && '--table-sort--ascending')}
+      class:bx--table-sort={true}
+      class:bx--table-sort--active={active}
+      class:bx--table-sort--ascending={active && $sortHeader.sortDirection === 'descending'}
       on:click>
-      <span class={cx('--table-header-label')}>
+      <span class:bx--table-header-label={true}>
         <slot />
       </span>
-      <ArrowUp20 class={cx('--table-sort__icon')} aria-label={ariaLabel} />
-      <ArrowsVertical20 class={cx('--table-sort__icon-unsorted')} aria-label={ariaLabel} />
+      <ArrowUp20 aria-label={ariaLabel} class="bx--table-sort__icon" />
+      <ArrowsVertical20
+        aria-label={ariaLabel}
+        class="bx--table-sort__icon-unsorted" />
     </button>
   </th>
 {:else}
-  <th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
-    <span class={cx('--table-header-label')}>
+  <th
+    {scope}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <span class:bx--table-header-label={true}>
       <slot />
     </span>
   </th>
diff --git a/src/components/DataTable/TableRow.svelte b/src/components/DataTable/TableRow.svelte
index ca89ca26..7a43dd1a 100644
--- a/src/components/DataTable/TableRow.svelte
+++ b/src/components/DataTable/TableRow.svelte
@@ -1,20 +1,15 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let isSelected = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 
   // TODO: include ariaLabel, onExpand, isExpanded, isSelected
 </script>
 
 <tr
+  class:bx--data-table--selected={isSelected}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx(isSelected && '--data-table--selected', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </tr>
diff --git a/src/components/DataTable/index.js b/src/components/DataTable/index.js
index ef3fcd76..30ac61d7 100644
--- a/src/components/DataTable/index.js
+++ b/src/components/DataTable/index.js
@@ -1,10 +1,8 @@
-import DataTable from './DataTable.svelte';
-
-export default DataTable;
-export { default as Table } from './Table.svelte';
-export { default as TableBody } from './TableBody.svelte';
-export { default as TableCell } from './TableCell.svelte';
-export { default as TableContainer } from './TableContainer.svelte';
-export { default as TableHead } from './TableHead.svelte';
-export { default as TableHeader } from './TableHeader.svelte';
-export { default as TableRow } from './TableRow.svelte';
+export { default as DataTable } from "./DataTable.svelte";
+export { default as Table } from "./Table.svelte";
+export { default as TableBody } from "./TableBody.svelte";
+export { default as TableCell } from "./TableCell.svelte";
+export { default as TableContainer } from "./TableContainer.svelte";
+export { default as TableHead } from "./TableHead.svelte";
+export { default as TableHeader } from "./TableHeader.svelte";
+export { default as TableRow } from "./TableRow.svelte";
diff --git a/src/components/DataTableSkeleton/DataTable.stories.js b/src/components/DataTableSkeleton/DataTable.stories.js
index 42793577..b748424f 100644
--- a/src/components/DataTableSkeleton/DataTable.stories.js
+++ b/src/components/DataTableSkeleton/DataTable.stories.js
@@ -1,17 +1,17 @@
-import { withKnobs, array, boolean } from '@storybook/addon-knobs';
-import Component from './DataTableSkeleton.Story.svelte';
+import { withKnobs, array, boolean } from "@storybook/addon-knobs";
+import Component from "./DataTableSkeleton.Story.svelte";
 
-export default { title: 'DataTableSkeleton', decorators: [withKnobs] };
+export default { title: "DataTableSkeleton", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
     headers: array(
-      'Optional table headers (headers)',
-      ['Name', 'Protocol', 'Port', 'Rule', 'Attached Groups'],
-      ','
+      "Optional table headers (headers)",
+      ["Name", "Protocol", "Port", "Rule", "Attached Groups"],
+      ","
     ),
-    zebra: boolean('Use zebra stripe (zebra)', false),
-    compact: boolean('Compact variant (compact)', false)
-  }
+    zebra: boolean("Use zebra stripe (zebra)", false),
+    compact: boolean("Compact variant (compact)", false),
+  },
 });
diff --git a/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte b/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte
index 56778837..c09df2d5 100644
--- a/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte
+++ b/src/components/DataTableSkeleton/DataTableSkeleton.Story.svelte
@@ -1,6 +1,6 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import DataTableSkeleton from './DataTableSkeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import DataTableSkeleton from "./DataTableSkeleton.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/DataTableSkeleton/DataTableSkeleton.svelte b/src/components/DataTableSkeleton/DataTableSkeleton.svelte
index c73faa85..3ffe2cec 100644
--- a/src/components/DataTableSkeleton/DataTableSkeleton.svelte
+++ b/src/components/DataTableSkeleton/DataTableSkeleton.svelte
@@ -1,25 +1,26 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let columns = 5;
-  export let compact = false;
-  export let headers = [];
   export let rows = 5;
-  export let style = undefined;
+  export let compact = false;
   export let zebra = false;
+  export let headers = [];
 
-  import { cx, fillArray } from '../../lib';
-
-  $: cols = fillArray(headers.length > 0 ? headers.length : columns);
+  $: cols = Array.from(
+    { length: headers.length > 0 ? headers.length : columns },
+    (_, i) => i
+  );
 </script>
 
 <table
+  class:bx--skeleton={true}
+  class:bx--data-table={true}
+  class:bx--data-table--zebra={zebra}
+  class:bx--data-table--compact={compact}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--skeleton', '--data-table', zebra && '--data-table--zebra', compact && '--data-table--compact', className)}
-  {style}>
+  on:mouseleave>
   <thead>
     <tr>
       {#each cols as col, i (col)}
@@ -35,7 +36,7 @@
         </td>
       {/each}
     </tr>
-    {#each fillArray(rows - 1) as row, i (row)}
+    {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
       <tr>
         {#each cols as col, j (col)}
           <td />
diff --git a/src/components/DataTableSkeleton/index.js b/src/components/DataTableSkeleton/index.js
index 67f5dcff..a88ac913 100644
--- a/src/components/DataTableSkeleton/index.js
+++ b/src/components/DataTableSkeleton/index.js
@@ -1,3 +1 @@
-import DataTableSkeleton from './DataTableSkeleton.svelte';
-
-export default DataTableSkeleton;
+export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte";
diff --git a/src/components/DatePicker/DatePicker.Skeleton.svelte b/src/components/DatePicker/DatePicker.Skeleton.svelte
index 87a6ad8c..6d4d2613 100644
--- a/src/components/DatePicker/DatePicker.Skeleton.svelte
+++ b/src/components/DatePicker/DatePicker.Skeleton.svelte
@@ -1,20 +1,25 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let id = Math.random();
   export let range = false;
-  export let style = undefined;
-
-  import { cx, fillArray } from '../../lib';
+  export let id = "ccs-" + Math.random().toString(36);
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <div
-    class={cx('--date-picker', '--skeleton', range && '--date-picker--range', !range && '--date-picker--short', !range && '--date-picker--simple', className)}>
-    {#each fillArray(range ? 2 : 1) as input, i (input)}
-      <div class={cx('--date-picker-container')}>
-        <label class={cx('--label')} for={id} />
-        <div class={cx('--date-picker__input', '--skeleton')} />
+    class:bx--date-picker={true}
+    class:bx--skeleton={true}
+    class:bx--date-picker--range={true}
+    class:bx--date-picker--short={!range}
+    class:bx--date-picker--simple={!range}>
+    {#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
+      <div class:bx--date-picker-container={true}>
+        <label for={id} class:bx--label={true} />
+        <div class:bx--date-picker__input={true} class:bx--skeleton={true} />
       </div>
     {/each}
   </div>
diff --git a/src/components/DatePicker/DatePicker.Story.svelte b/src/components/DatePicker/DatePicker.Story.svelte
index 4bf399cc..93d8a070 100644
--- a/src/components/DatePicker/DatePicker.Story.svelte
+++ b/src/components/DatePicker/DatePicker.Story.svelte
@@ -1,13 +1,13 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import DatePicker from './DatePicker.svelte';
-  import DatePickerInput from './DatePickerInput.svelte';
-  import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import DatePicker from "./DatePicker.svelte";
+  import DatePickerInput from "./DatePickerInput.svelte";
+  import DatePickerSkeleton from "./DatePicker.Skeleton.svelte";
 
-  let datePickerType = 'simple';
-  let value = '';
+  $: datePickerType = "simple";
+  $: value = "";
 </script>
 
 <Layout>
diff --git a/src/components/DatePicker/DatePicker.stories.js b/src/components/DatePicker/DatePicker.stories.js
index 74fe3d90..9fcaa6ae 100644
--- a/src/components/DatePicker/DatePicker.stories.js
+++ b/src/components/DatePicker/DatePicker.stories.js
@@ -1,100 +1,139 @@
-import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
-import Component from './DatePicker.Story.svelte';
+import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
+import Component from "./DatePicker.Story.svelte";
 
-export default { title: 'DatePicker', decorators: [withKnobs] };
+export default { title: "DatePicker", decorators: [withKnobs] };
 
 const patterns = {
-  'Short (d{1,2}/d{4})': 'd{1,2}/d{4}',
-  'Regular (d{1,2}/d{1,2}/d{4})': 'd{1,2}/d{1,2}/d{4}'
+  "Short (d{1,2}/d{4})": "d{1,2}/d{4}",
+  "Regular (d{1,2}/d{1,2}/d{4})": "d{1,2}/d{1,2}/d{4}",
 };
 
 export const Default = () => ({
   Component,
   props: {
     datePicker: {
-      id: 'date-picker',
-      light: boolean('Light variant (light in <DatePicker>)', false),
-      short: boolean('Use shorter width (short in <DatePicker>)', false)
+      id: "date-picker",
+      light: boolean("Light variant (light in <DatePicker>)", false),
+      short: boolean("Use shorter width (short in <DatePicker>)", false),
     },
     datePickerInput: {
-      id: 'date-picker-input-id',
-      name: 'date-picker-input-name',
-      labelText: text('Label text (labelText in <DatePickerInput>)', 'Date Picker label'),
-      hideLabel: boolean('Hide label (hideLabel)', false),
-      pattern: select('The date format (pattern in <DatePickerInput>)', patterns, 'd{1,2}/d{4}'),
-      placeholder: text('Placeholder text (placeholder in <DatePickerInput>)', 'mm/dd/yyyy'),
-      disabled: boolean('Disabled (disabled in <DatePickerInput>)', false),
-      invalid: boolean('Show form validation UI (invalid in <DatePickerInput>)', false),
+      id: "date-picker-input-id",
+      name: "date-picker-input-name",
+      labelText: text(
+        "Label text (labelText in <DatePickerInput>)",
+        "Date Picker label"
+      ),
+      hideLabel: boolean("Hide label (hideLabel)", false),
+      pattern: select(
+        "The date format (pattern in <DatePickerInput>)",
+        patterns,
+        "d{1,2}/d{4}"
+      ),
+      placeholder: text(
+        "Placeholder text (placeholder in <DatePickerInput>)",
+        "mm/dd/yyyy"
+      ),
+      disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
+      invalid: boolean(
+        "Show form validation UI (invalid in <DatePickerInput>)",
+        false
+      ),
       invalidText: text(
-        'Form validation UI content (invalidText in <DatePickerInput>)',
-        'A valid value is required'
+        "Form validation UI content (invalidText in <DatePickerInput>)",
+        "A valid value is required"
       ),
       iconDescription: text(
-        'Icon description (iconDescription in <DatePickerInput>)',
-        'Icon description'
-      )
-    }
-  }
+        "Icon description (iconDescription in <DatePickerInput>)",
+        "Icon description"
+      ),
+    },
+  },
 });
 
-Default.story = { name: 'Default (simple)' };
+Default.story = { name: "Default (simple)" };
 
 export const Single = () => ({
   Component,
   props: {
-    story: 'single',
+    story: "single",
     datePicker: {
-      id: 'date-picker',
-      light: boolean('Light variant (light in <DatePicker>)', false),
-      dateFormat: text('The date format (dateFormat in <DatePicker>)', 'm/d/Y')
+      id: "date-picker",
+      light: boolean("Light variant (light in <DatePicker>)", false),
+      dateFormat: text("The date format (dateFormat in <DatePicker>)", "m/d/Y"),
     },
     datePickerInput: {
-      id: 'date-picker-input-id',
-      labelText: text('Label text (labelText in <DatePickerInput>)', 'Date Picker label'),
-      hideLabel: boolean('Hide label (hideLabel)', false),
-      pattern: select('The date format (pattern in <DatePickerInput>)', patterns, 'd{1,2}/d{4}'),
-      placeholder: text('Placeholder text (placeholder in <DatePickerInput>)', 'mm/dd/yyyy'),
-      disabled: boolean('Disabled (disabled in <DatePickerInput>)', false),
-      invalid: boolean('Show form validation UI (invalid in <DatePickerInput>)', false),
+      id: "date-picker-input-id",
+      labelText: text(
+        "Label text (labelText in <DatePickerInput>)",
+        "Date Picker label"
+      ),
+      hideLabel: boolean("Hide label (hideLabel)", false),
+      pattern: select(
+        "The date format (pattern in <DatePickerInput>)",
+        patterns,
+        "d{1,2}/d{4}"
+      ),
+      placeholder: text(
+        "Placeholder text (placeholder in <DatePickerInput>)",
+        "mm/dd/yyyy"
+      ),
+      disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
+      invalid: boolean(
+        "Show form validation UI (invalid in <DatePickerInput>)",
+        false
+      ),
       invalidText: text(
-        'Form validation UI content (invalidText in <DatePickerInput>)',
-        'A valid value is required'
+        "Form validation UI content (invalidText in <DatePickerInput>)",
+        "A valid value is required"
       ),
       iconDescription: text(
-        'Icon description (iconDescription in <DatePickerInput>)',
-        'Icon description'
-      )
-    }
-  }
+        "Icon description (iconDescription in <DatePickerInput>)",
+        "Icon description"
+      ),
+    },
+  },
 });
 
 export const Range = () => ({
   Component,
   props: {
-    story: 'range',
+    story: "range",
     datePicker: {
-      id: 'date-picker',
-      light: boolean('Light variant (light in <DatePicker>)', false),
-      dateFormat: text('The date format (dateFormat in <DatePicker>)', 'm/d/Y')
+      id: "date-picker",
+      light: boolean("Light variant (light in <DatePicker>)", false),
+      dateFormat: text("The date format (dateFormat in <DatePicker>)", "m/d/Y"),
     },
     datePickerInput: {
-      id: 'date-picker-input-id',
-      labelText: text('Label text (labelText in <DatePickerInput>)', 'Date Picker label'),
-      hideLabel: boolean('Hide label (hideLabel)', false),
-      pattern: select('The date format (pattern in <DatePickerInput>)', patterns, 'd{1,2}/d{4}'),
-      placeholder: text('Placeholder text (placeholder in <DatePickerInput>)', 'mm/dd/yyyy'),
-      disabled: boolean('Disabled (disabled in <DatePickerInput>)', false),
-      invalid: boolean('Show form validation UI (invalid in <DatePickerInput>)', false),
+      id: "date-picker-input-id",
+      labelText: text(
+        "Label text (labelText in <DatePickerInput>)",
+        "Date Picker label"
+      ),
+      hideLabel: boolean("Hide label (hideLabel)", false),
+      pattern: select(
+        "The date format (pattern in <DatePickerInput>)",
+        patterns,
+        "d{1,2}/d{4}"
+      ),
+      placeholder: text(
+        "Placeholder text (placeholder in <DatePickerInput>)",
+        "mm/dd/yyyy"
+      ),
+      disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
+      invalid: boolean(
+        "Show form validation UI (invalid in <DatePickerInput>)",
+        false
+      ),
       invalidText: text(
-        'Form validation UI content (invalidText in <DatePickerInput>)',
-        'A valid value is required'
+        "Form validation UI content (invalidText in <DatePickerInput>)",
+        "A valid value is required"
       ),
       iconDescription: text(
-        'Icon description (iconDescription in <DatePickerInput>)',
-        'Icon description'
-      )
-    }
-  }
+        "Icon description (iconDescription in <DatePickerInput>)",
+        "Icon description"
+      ),
+    },
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/DatePicker/DatePicker.svelte b/src/components/DatePicker/DatePicker.svelte
index 137cc078..3af2ccb2 100644
--- a/src/components/DatePicker/DatePicker.svelte
+++ b/src/components/DatePicker/DatePicker.svelte
@@ -1,39 +1,42 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let appendTo = document.body;
-  export let dateFormat = 'm/d/Y';
-  export let datePickerType = 'simple';
-  export let id = Math.random();
+  export let dateFormat = "m/d/Y";
+  export let datePickerType = "simple";
+  export let id = "ccs-" + Math.random().toString(36);
   export let light = false;
-  export let locale = 'en';
+  export let locale = "en";
   export let maxDate = null;
   export let minDate = null;
   export let short = false;
-  export let style = undefined;
-  export let value = '';
+  export let value = "";
 
-  import { createEventDispatcher, setContext, afterUpdate, onDestroy } from 'svelte';
-  import { writable, derived } from 'svelte/store';
-  import { createCalendar } from './createCalendar';
-  import { cx } from '../../lib';
+  import {
+    createEventDispatcher,
+    setContext,
+    afterUpdate,
+    onDestroy
+  } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import { createCalendar } from "./createCalendar";
 
   const dispatch = createEventDispatcher();
-
-  let inputs = writable([]);
-  let inputIds = derived(inputs, _ => _.map(({ id }) => id));
-  let labelTextEmpty = derived(inputs, _ => _.filter(({ labelText }) => !!labelText).length === 0);
-  let inputValue = writable(value);
-  let mode = writable(datePickerType);
-  let range = derived(mode, _ => _ === 'range');
-  let hasCalendar = derived(mode, _ => _ === 'single' || _ === 'range');
+  const inputs = writable([]);
+  const inputIds = derived(inputs, _ => _.map(({ id }) => id));
+  const labelTextEmpty = derived(
+    inputs,
+    _ => _.filter(({ labelText }) => !!labelText).length === 0
+  );
+  const inputValue = writable(value);
+  const mode = writable(datePickerType);
+  const range = derived(mode, _ => _ === "range");
+  const hasCalendar = derived(mode, _ => _ === "single" || _ === "range");
 
   let calendar = undefined;
   let datePickerRef = undefined;
   let inputRef = undefined;
   let inputRefTo = undefined;
 
-  setContext('DatePicker', {
+  setContext("DatePicker", {
     range,
     inputValue,
     hasCalendar,
@@ -48,12 +51,12 @@
       }
     },
     updateValue: ({ type, value }) => {
-      if ((!calendar && type === 'input') || type === 'change') {
+      if ((!calendar && type === "input") || type === "change") {
         inputValue.set(value);
       }
 
-      if (!calendar && type === 'change') {
-        dispatch('change', value);
+      if (!calendar && type === "change") {
+        dispatch("change", value);
       }
     },
     blurInput: relatedTarget => {
@@ -68,7 +71,7 @@
       (
         calendar.selectedDateElem ||
         calendar.todayDateElem ||
-        calendar.calendarContainer.querySelector('.flatpickr-day[tabindex]') ||
+        calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") ||
         calendar.calendarContainer
       ).focus();
     }
@@ -133,11 +136,21 @@
     }
   }} />
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <div
     bind:this={datePickerRef}
-    class={cx('--date-picker', short && '--date-picker--short', light && '--date-picker--light', datePickerType && `--date-picker--${datePickerType}`, datePickerType === 'range' && $labelTextEmpty && '--date-picker--nolabel')}
-    {id}>
+    {id}
+    class:bx--date-picker={true}
+    class:bx--date-picker--short={short}
+    class:bx--date-picker--light={light}
+    class="{datePickerType && `--date-picker--${datePickerType}`}
+    {datePickerType === 'range' && $labelTextEmpty && '--date-picker--nolabel'}">
     <slot />
   </div>
 </div>
diff --git a/src/components/DatePicker/DatePickerInput.svelte b/src/components/DatePicker/DatePickerInput.svelte
index 1e8950fc..b86b560c 100644
--- a/src/components/DatePicker/DatePickerInput.svelte
+++ b/src/components/DatePicker/DatePickerInput.svelte
@@ -1,22 +1,19 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let type = "text";
+  export let placeholder = "";
+  export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
   export let disabled = false;
+  export let iconDescription = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelText = "";
   export let hideLabel = false;
-  export let iconDescription = '';
-  export let id = Math.random();
   export let invalid = false;
-  export let invalidText = '';
-  export let labelText = '';
-  export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
-  export let placeholder = '';
-  export let style = undefined;
-  export let type = 'text';
+  export let invalidText = "";
   export let name = undefined;
+  export let ref = null;
 
-  import { getContext, onMount } from 'svelte';
-  import Calendar16 from 'carbon-icons-svelte/lib/Calendar16';
-  import { cx } from '../../lib';
+  import { getContext, onMount } from "svelte";
+  import Calendar16 from "carbon-icons-svelte/lib/Calendar16";
 
   const {
     range,
@@ -28,32 +25,33 @@
     openCalendar,
     focusCalendar,
     inputValue
-  } = getContext('DatePicker');
-
-  let inputRef = undefined;
+  } = getContext("DatePicker");
 
   add({ id, labelText });
 
   onMount(() => {
-    declareRef({ id, ref: inputRef });
+    declareRef({ id, ref });
   });
 </script>
 
 <div
-  class={cx('--date-picker-container', !labelText && '--date-picker--nolabel', className)}
-  {style}>
+  class:bx--date-picker-container={true}
+  class:bx--date-picker--nolabel={!labelText}
+  {...$$restProps}>
   {#if labelText}
     <label
-      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
-      for={id}>
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}>
       {labelText}
     </label>
   {/if}
-  <div class={cx('--date-picker-input__wrapper')}>
+  <div class:bx--date-picker-input__wrapper={true}>
     <input
-      bind:this={inputRef}
+      bind:this={ref}
       data-invalid={invalid || undefined}
-      class={cx('--date-picker__input')}
+      class:bx--date-picker__input={true}
       on:input
       on:input={({ target }) => {
         updateValue({ type: 'input', value: target.value });
@@ -81,13 +79,13 @@
     {#if $hasCalendar}
       <Calendar16
         role="img"
-        class={cx('--date-picker__icon')}
+        class="bx--date-picker__icon"
         aria-label={iconDescription}
         title={iconDescription}
         on:click={openCalendar} />
     {/if}
   </div>
   {#if invalid}
-    <div class={cx('--form-requirement')}>{invalidText}</div>
+    <div class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
 </div>
diff --git a/src/components/DatePicker/createCalendar.js b/src/components/DatePicker/createCalendar.js
index 4d0f4d6d..16273183 100644
--- a/src/components/DatePicker/createCalendar.js
+++ b/src/components/DatePicker/createCalendar.js
@@ -1,40 +1,47 @@
-import flatpickr from 'flatpickr';
-import l10n from 'flatpickr/dist/l10n/index.js';
-import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
-import { cx } from '../../lib';
+import flatpickr from "flatpickr";
+import l10n from "flatpickr/dist/l10n/index.js";
+import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 
 function updateClasses(instance) {
-  const { calendarContainer, days, daysContainer, weekdayContainer, selectedDates } = instance;
+  const {
+    calendarContainer,
+    days,
+    daysContainer,
+    weekdayContainer,
+    selectedDates,
+  } = instance;
 
-  calendarContainer.classList.add(cx('--date-picker__calendar'));
-  calendarContainer.querySelector('.flatpickr-month').classList.add(cx('--date-picker__month'));
+  calendarContainer.classList.add("bx--date-picker__calendar");
+  calendarContainer
+    .querySelector(".flatpickr-month")
+    .classList.add("bx--date-picker__month");
 
-  weekdayContainer.classList.add(cx('--date-picker__weekdays'));
-  weekdayContainer.querySelectorAll('.flatpickr-weekday').forEach(node => {
-    node.classList.add(cx('--date-picker__weekday'));
+  weekdayContainer.classList.add("bx--date-picker__weekdays");
+  weekdayContainer.querySelectorAll(".flatpickr-weekday").forEach((node) => {
+    node.classList.add("bx--date-picker__weekday");
   });
 
-  daysContainer.classList.add(cx('--date-picker__days'));
-  days.querySelectorAll('.flatpickr-day').forEach(node => {
-    node.classList.add(cx('--date-picker__day'));
-    if (node.classList.contains('today') && selectedDates.length > 0) {
-      node.classList.add('no-border');
-    } else if (node.classList.contains('today') && selectedDates.length === 0) {
-      node.classList.remove('no-border');
+  daysContainer.classList.add("bx--date-picker__days");
+  days.querySelectorAll(".flatpickr-day").forEach((node) => {
+    node.classList.add("bx--date-picker__day");
+    if (node.classList.contains("today") && selectedDates.length > 0) {
+      node.classList.add("no-border");
+    } else if (node.classList.contains("today") && selectedDates.length === 0) {
+      node.classList.remove("no-border");
     }
   });
 }
 
 function updateMonthNode(instance) {
   const monthText = instance.l10n.months.longhand[instance.currentMonth];
-  const staticMonthNode = instance.monthNav.querySelector('.cur-month');
+  const staticMonthNode = instance.monthNav.querySelector(".cur-month");
 
   if (staticMonthNode) {
     staticMonthNode.textContent = monthText;
   } else {
     const monthSelectNode = instance.monthsDropdownContainer;
-    const span = document.createElement('span');
-    span.setAttribute('class', 'cur-month');
+    const span = document.createElement("span");
+    span.setAttribute("class", "cur-month");
     span.textContent = monthText;
     monthSelectNode.parentNode.replaceChild(span, monthSelectNode);
   }
@@ -43,10 +50,11 @@ function updateMonthNode(instance) {
 function createCalendar({ options, base, input, dispatch }) {
   let locale = options.locale;
 
-  if (options.locale === 'en' && l10n && l10n.en) {
+  if (options.locale === "en" && l10n && l10n.en) {
     l10n.en.weekdays.shorthand.forEach((_, index) => {
       const shorthand = _.slice(0, 2);
-      l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
+      l10n.en.weekdays.shorthand[index] =
+        shorthand === "Th" ? "Th" : shorthand.charAt(0);
     });
 
     locale = l10n.en;
@@ -58,27 +66,27 @@ function createCalendar({ options, base, input, dispatch }) {
     disableMobile: true,
     clickOpens: true,
     locale,
-    plugins: [options.mode === 'range' && new rangePlugin({ position: 'left', input })].filter(
-      Boolean
-    ),
+    plugins: [
+      options.mode === "range" && new rangePlugin({ position: "left", input }),
+    ].filter(Boolean),
     nextArrow:
       '<svg width="16px" height="16px" viewBox="0 0 16 16"><polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/><rect width="16" height="16" style="fill: none" /></svg>',
     prevArrow:
       '<svg width="16px" height="16px" viewBox="0 0 16 16"><polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/><rect width="16" height="16" style="fill: none" /></svg>',
     onChange: () => {
-      dispatch('change');
+      dispatch("change");
     },
     onClose: () => {
-      dispatch('close');
+      dispatch("close");
     },
     onMonthChange: (s, d, instance) => {
       updateMonthNode(instance);
     },
     onOpen: (s, d, instance) => {
-      dispatch('open');
+      dispatch("open");
       updateClasses(instance);
       updateMonthNode(instance);
-    }
+    },
   });
 }
 
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index 84e60751..5e19fa24 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -1,4 +1,2 @@
-import DatePicker from './DatePicker.svelte';
-
-export default DatePicker;
-export { default as DatePickerInput } from './DatePickerInput.svelte';
+export { default as DatePicker } from "./DatePicker.svelte";
+export { default as DatePickerInput } from "./DatePickerInput.svelte";
diff --git a/src/components/Dropdown/Dropdown.Skeleton.svelte b/src/components/Dropdown/Dropdown.Skeleton.svelte
index d6381922..a7202976 100644
--- a/src/components/Dropdown/Dropdown.Skeleton.svelte
+++ b/src/components/Dropdown/Dropdown.Skeleton.svelte
@@ -1,20 +1,19 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let inline = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <div
+  class:bx--skeleton={true}
+  class:bx--dropdown-v2={true}
+  class:bx--list-box={true}
+  class:bx--form-item={true}
+  class:bx--list-box--inline={inline}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--skeleton', '--dropdown-v2', '--list-box', '--form-item', inline && '--list-box--inline', className)}
-  {style}>
-  <div role="button" class={cx('--list-box__field')}>
-    <span class={cx('--list-box__label')} />
+  on:mouseleave>
+  <div role="button" class:bx--list-box__field={true}>
+    <span class:bx--list-box__label={true} />
   </div>
 </div>
diff --git a/src/components/Dropdown/Dropdown.Story.svelte b/src/components/Dropdown/Dropdown.Story.svelte
index 7ff22997..69ac488e 100644
--- a/src/components/Dropdown/Dropdown.Story.svelte
+++ b/src/components/Dropdown/Dropdown.Story.svelte
@@ -1,19 +1,18 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Button from '../Button';
-  import Dropdown from './Dropdown.svelte';
-  import DropdownSkeleton from './Dropdown.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Button } from "../Button";
+  import Dropdown from "./Dropdown.svelte";
+  import DropdownSkeleton from "./Dropdown.Skeleton.svelte";
 
-  let items = [
-    { id: 'option-0', text: 'Option 1' },
-    { id: 'option-1', text: 'Option 2' },
-    { id: 'option-2', text: 'Option 3' },
-    { id: 'option-3', text: 'Option 4' }
+  $: items = [
+    { id: "option-0", text: "Option 1" },
+    { id: "option-1", text: "Option 2" },
+    { id: "option-2", text: "Option 3" },
+    { id: "option-3", text: "Option 4" }
   ];
-
-  let selectedIndex = -1;
+  $: selectedIndex = -1;
 </script>
 
 <Layout>
diff --git a/src/components/Dropdown/Dropdown.stories.js b/src/components/Dropdown/Dropdown.stories.js
index efe335b7..6d3b9730 100644
--- a/src/components/Dropdown/Dropdown.stories.js
+++ b/src/components/Dropdown/Dropdown.stories.js
@@ -1,35 +1,41 @@
-import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
-import Component from './Dropdown.Story.svelte';
+import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
+import Component from "./Dropdown.Story.svelte";
 
-export default { title: 'Dropdown', decorators: [withKnobs] };
+export default { title: "Dropdown", decorators: [withKnobs] };
 
 const types = {
-  'Default (default)': 'default',
-  'Inline (inline)': 'inline'
+  "Default (default)": "default",
+  "Inline (inline)": "inline",
 };
 
 const sizes = {
-  'Extra large size (xl)': 'xl',
-  'Regular size (lg)': '',
-  'Small size (sm)': 'sm'
+  "Extra large size (xl)": "xl",
+  "Regular size (lg)": "",
+  "Small size (sm)": "sm",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    id: text('Dropdown id', 'carbon-dropdown-id'),
-    name: text('Dropdown name', 'carbon-dropdown-name'),
-    type: select('Dropdown type (type)', types, 'default'),
-    size: select('Field size (size)', sizes, '') || undefined,
-    label: text('Label (label)', 'Dropdown menu options'),
-    'aria-label': text('Aria Label (aria-label)', 'Dropdown'),
-    disabled: boolean('Disabled (disabled)', false),
-    light: boolean('Light variant (light)', false),
-    titleText: text('Title (titleText)', 'This is not a dropdown title.'),
-    helperText: text('Helper text (helperText)', 'This is not some helper text.'),
-    invalid: boolean('Show form validation UI (invalid)', false),
-    invalidText: text('Form validation UI content (invalidText)', 'A valid value is required')
-  }
+    id: text("Dropdown id", "carbon-dropdown-id"),
+    name: text("Dropdown name", "carbon-dropdown-name"),
+    type: select("Dropdown type (type)", types, "default"),
+    size: select("Field size (size)", sizes, "") || undefined,
+    label: text("Label (label)", "Dropdown menu options"),
+    "aria-label": text("Aria Label (aria-label)", "Dropdown"),
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    titleText: text("Title (titleText)", "This is not a dropdown title."),
+    helperText: text(
+      "Helper text (helperText)",
+      "This is not some helper text."
+    ),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Form validation UI content (invalidText)",
+      "A valid value is required"
+    ),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Dropdown/Dropdown.svelte b/src/components/Dropdown/Dropdown.svelte
index a46673a8..399e66a6 100644
--- a/src/components/Dropdown/Dropdown.svelte
+++ b/src/components/Dropdown/Dropdown.svelte
@@ -1,40 +1,35 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let helperText = '';
-  export let id = Math.random();
-  export let name = undefined;
+  export let selectedIndex = -1;
+  export let open = false;
   export let inline = false;
+  export let light = false;
+  export let disabled = false;
   export let invalid = false;
-  export let invalidText = '';
   export let items = [];
   export let itemToString = item => item.text || item.id;
+  export let type = "default"; // "default" | "inline"
+  export let size = undefined; // "sm" | "lg" | "xl"
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let invalidText = "";
+  export let helperText = "";
   export let label = undefined;
-  export let light = false;
-  export let open = false;
-  export let selectedIndex = -1;
-  export let size = undefined;
-  export let style = undefined;
-  export let titleText = '';
+  export let titleText = "";
   export let translateWithId = undefined;
-  export let type = 'default';
+  export let ref = null;
 
-  import { setContext } from 'svelte';
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
-  import ListBox, { ListBoxField, ListBoxMenu, ListBoxMenuIcon, ListBoxMenuItem } from '../ListBox';
+  import { setContext } from "svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import {
+    ListBox,
+    ListBoxMenu,
+    ListBoxMenuIcon,
+    ListBoxMenuItem
+  } from "../ListBox";
 
   let selectedId = undefined;
-  let fieldRef = undefined;
   let highlightedIndex = -1;
 
-  setContext('Dropdown', {
-    declareRef: ({ ref }) => {
-      fieldRef = ref;
-    }
-  });
-
   function change(direction) {
     let index = highlightedIndex + direction;
 
@@ -47,7 +42,7 @@
     highlightedIndex = index;
   }
 
-  $: inline = type === 'inline';
+  $: inline = type === "inline";
   $: selectedItem = items[selectedIndex];
   $: if (!open) {
     highlightedIndex = -1;
@@ -56,19 +51,27 @@
 
 <svelte:body
   on:click={({ target }) => {
-    if (open && fieldRef && !fieldRef.contains(target)) {
+    if (open && ref && !ref.contains(target)) {
       open = false;
     }
   }} />
 
 <div
-  class={cx('--dropdown__wrapper', '--list-box__wrapper', inline && '--dropdown__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--dropdown__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
-  {style}>
+  class:bx--dropdown__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--dropdown__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
+  {...$$restProps}>
   {#if titleText}
-    <label for={id} class={cx('--label', disabled && '--label--disabled')}>{titleText}</label>
+    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+      {titleText}
+    </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}
@@ -78,9 +81,13 @@
     {id}
     {name}
     aria-label={$$props['aria-label']}
-    class={cx('--dropdown', invalid && '--dropdown--invalid', open && '--dropdown--open', inline && '--dropdown--inline', disabled && '--dropdown--disabled', light && '--dropdown--light')}
+    class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
+    {open && 'bx--dropdown--open'}
+    {inline && 'bx--dropdown--inline'}
+    {disabled && 'bx--dropdown--disabled'}
+    {light && 'bx--dropdown--light'}"
     on:click={({ target }) => {
-      open = fieldRef.contains(target) ? !open : false;
+      open = ref.contains(target) ? !open : false;
     }}
     {disabled}
     {open}
@@ -88,9 +95,11 @@
     {invalidText}
     {light}>
     {#if invalid}
-      <WarningFilled16 class={cx('--list-box__invalid-icon')} />
+      <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}
-    <ListBoxField
+    <button
+      bind:this={ref}
+      class:bx--list-box__field={true}
       tabindex="0"
       role="button"
       aria-expanded={open}
@@ -103,7 +112,7 @@
           }
         } else if (key === 'Tab') {
           open = false;
-          fieldRef.blur();
+          ref.blur();
         } else if (key === 'ArrowDown') {
           change(1);
         } else if (key === 'ArrowUp') {
@@ -112,17 +121,17 @@
       }}
       on:blur={({ relatedTarget }) => {
         if (relatedTarget) {
-          fieldRef.focus();
+          ref.focus();
         }
       }}
       {disabled}
       {translateWithId}
       {id}>
-      <span class={cx('--list-box__label')}>
+      <span class="bx--list-box__label">
         {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
       </span>
       <ListBoxMenuIcon {open} {translateWithId} />
-    </ListBoxField>
+    </button>
     {#if open}
       <ListBoxMenu aria-labelledby={id} {id}>
         {#each items as item, i (item.id || i)}
diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
index b6df05fe..e5c140b2 100644
--- a/src/components/Dropdown/index.js
+++ b/src/components/Dropdown/index.js
@@ -1,4 +1,2 @@
-import Dropdown from './Dropdown.svelte';
-
-export default Dropdown;
-export { default as DropdownSkeleton } from './Dropdown.Skeleton.svelte';
+export { default as Dropdown } from "./Dropdown.svelte";
+export { default as DropdownSkeleton } from "./Dropdown.Skeleton.svelte";
diff --git a/src/components/FileUploader/FileUploader.Skeleton.svelte b/src/components/FileUploader/FileUploader.Skeleton.svelte
index 7e3da126..9c4da2e4 100644
--- a/src/components/FileUploader/FileUploader.Skeleton.svelte
+++ b/src/components/FileUploader/FileUploader.Skeleton.svelte
@@ -1,15 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-  import { ButtonSkeleton } from '../Button';
-  import SkeletonText from '../SkeletonText';
+  import { ButtonSkeleton } from "../Button";
+  import { SkeletonText } from "../SkeletonText";
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <SkeletonText heading width="100px" />
-  <SkeletonText width="225px" class={cx('--label-description')} />
+  <SkeletonText width="225px" class="bx--label-description" />
   <ButtonSkeleton />
 </div>
diff --git a/src/components/FileUploader/FileUploader.Story.svelte b/src/components/FileUploader/FileUploader.Story.svelte
index 0d0a6bfc..c338e679 100644
--- a/src/components/FileUploader/FileUploader.Story.svelte
+++ b/src/components/FileUploader/FileUploader.Story.svelte
@@ -1,18 +1,16 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import { cx } from '../../lib';
-  import Button from '../Button';
-  import FileUploader from './FileUploader.svelte';
-  import FileUploaderButton from './FileUploaderButton.svelte';
-  import FileUploaderDropContainer from './FileUploaderDropContainer.svelte';
-  import FileUploaderItem from './FileUploaderItem.svelte';
-  import FileUploaderSkeleton from './FileUploader.Skeleton.svelte';
-
-  let fileUploader = undefined;
-  let files = [];
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Button } from "../Button";
+  import FileUploader from "./FileUploader.svelte";
+  import FileUploaderButton from "./FileUploaderButton.svelte";
+  import FileUploaderDropContainer from "./FileUploaderDropContainer.svelte";
+  import FileUploaderItem from "./FileUploaderItem.svelte";
+  import FileUploaderSkeleton from "./FileUploader.Skeleton.svelte";
 
+  $: fileUploader = undefined;
+  $: files = [];
   $: disabled = files.length === 0;
 </script>
 
@@ -36,7 +34,7 @@
           console.log('click');
         }} />
     {:else if story === 'uploader'}
-      <div class={cx('--file__container')}>
+      <div class="bx--file__container">
         <FileUploader
           bind:this={fileUploader}
           {...$$props}
diff --git a/src/components/FileUploader/FileUploader.stories.js b/src/components/FileUploader/FileUploader.stories.js
index 8615b368..728b0b6d 100644
--- a/src/components/FileUploader/FileUploader.stories.js
+++ b/src/components/FileUploader/FileUploader.stories.js
@@ -1,98 +1,116 @@
-import { withKnobs, text, select, boolean, array } from '@storybook/addon-knobs';
-import Component from './FileUploader.Story.svelte';
+import {
+  withKnobs,
+  text,
+  select,
+  boolean,
+  array,
+} from "@storybook/addon-knobs";
+import Component from "./FileUploader.Story.svelte";
 
-export default { title: 'FileUploader', decorators: [withKnobs] };
+export default { title: "FileUploader", decorators: [withKnobs] };
 
 const buttonKinds = {
-  'Primary (primary)': 'primary',
-  'Secondary (secondary)': 'secondary',
-  'Danger (danger)': 'danger',
-  'Ghost (ghost)': 'ghost',
-  'Tertiary (tertiary)': 'tertiary'
+  "Primary (primary)": "primary",
+  "Secondary (secondary)": "secondary",
+  "Danger (danger)": "danger",
+  "Ghost (ghost)": "ghost",
+  "Tertiary (tertiary)": "tertiary",
 };
 
 const filenameStatuses = {
-  'Edit (edit)': 'edit',
-  'Complete (complete)': 'complete',
-  'Uploading (uploading)': 'uploading'
+  "Edit (edit)": "edit",
+  "Complete (complete)": "complete",
+  "Uploading (uploading)": "uploading",
 };
 
 export const FileUploaderButton = () => ({
   Component,
   props: {
-    story: 'button',
-    kind: select('Button kind (kind)', buttonKinds, 'primary'),
-    labelText: text('Label text (labelText)', 'Add files'),
-    name: text('Form item name: (name)', ''),
-    multiple: boolean('Supports multiple files (multiple)', true),
-    disabled: boolean('Disabled (disabled)', false),
+    story: "button",
+    kind: select("Button kind (kind)", buttonKinds, "primary"),
+    labelText: text("Label text (labelText)", "Add files"),
+    name: text("Form item name: (name)", ""),
+    multiple: boolean("Supports multiple files (multiple)", true),
+    disabled: boolean("Disabled (disabled)", false),
     disableLabelChanges: boolean(
-      'Prevent the label from being replaced with file selected file (disableLabelChanges)',
+      "Prevent the label from being replaced with file selected file (disableLabelChanges)",
       false
     ),
-    role: text('ARIA role of the button (role)', 'button'),
-    tabindex: text('Tab index (tabindex)', '0')
-  }
+    role: text("ARIA role of the button (role)", "button"),
+    tabindex: text("Tab index (tabindex)", "0"),
+  },
 });
 
-FileUploaderButton.story = { name: 'FileUploaderButton' };
+FileUploaderButton.story = { name: "FileUploaderButton" };
 
 export const FileUploader = () => ({
   Component,
   props: {
-    story: 'uploader',
-    labelTitle: text('The label title (labelTitle)', 'Upload'),
+    story: "uploader",
+    labelTitle: text("The label title (labelTitle)", "Upload"),
     labelDescription: text(
-      'The label description (labelDescription)',
-      'only .jpg files at 500mb or less'
+      "The label description (labelDescription)",
+      "only .jpg files at 500mb or less"
     ),
-    buttonLabel: text('The button label (buttonLabel)', 'Add files'),
-    status: select('Status for file name (status)', filenameStatuses, 'edit'),
-    accept: array('Accepted file extensions (accept)', ['.jpg', '.png'], ','),
-    name: text('Form item name: (name)', ''),
-    multiple: boolean('Supports multiple files (multiple)', true),
-    iconDescription: text('Close button icon description (iconDescription)', 'Clear file')
-  }
+    buttonLabel: text("The button label (buttonLabel)", "Add files"),
+    status: select("Status for file name (status)", filenameStatuses, "edit"),
+    accept: array("Accepted file extensions (accept)", [".jpg", ".png"], ","),
+    name: text("Form item name: (name)", ""),
+    multiple: boolean("Supports multiple files (multiple)", true),
+    iconDescription: text(
+      "Close button icon description (iconDescription)",
+      "Clear file"
+    ),
+  },
 });
 
-FileUploader.story = { name: 'FileUploader' };
+FileUploader.story = { name: "FileUploader" };
 
 export const FileUploaderItem = () => ({
   Component,
   props: {
-    story: 'item',
-    name: text('Filename (name)', 'README.md'),
-    status: select('Status for file name (status)', filenameStatuses, 'edit'),
-    iconDescription: text('Close button icon description (iconDescription)', 'Clear file'),
-    invalid: boolean('Invalid (invalid)', false),
-    errorSubject: text('Error subject (errorSubject)', 'File size exceeds limit'),
+    story: "item",
+    name: text("Filename (name)", "README.md"),
+    status: select("Status for file name (status)", filenameStatuses, "edit"),
+    iconDescription: text(
+      "Close button icon description (iconDescription)",
+      "Clear file"
+    ),
+    invalid: boolean("Invalid (invalid)", false),
+    errorSubject: text(
+      "Error subject (errorSubject)",
+      "File size exceeds limit"
+    ),
     errorBody: text(
-      'Error body (errorBody)',
-      '500kb max file size. Select a new file and try again.'
-    )
-  }
+      "Error body (errorBody)",
+      "500kb max file size. Select a new file and try again."
+    ),
+  },
 });
 
-FileUploaderItem.story = { name: 'FileUploaderItem' };
+FileUploaderItem.story = { name: "FileUploaderItem" };
 
 export const FileUploaderDropContainer = () => ({
   Component,
   props: {
-    story: 'drop container',
-    labelText: text('Label text (labelText)', 'Drag and drop files here or click to upload'),
-    name: text('Form item name (name)', ''),
-    multiple: boolean('Supports multiple files (multiple)', true),
-    accept: array(
-      'Accepted MIME types or file extensions (accept)',
-      ['image/jpeg', 'image/png'],
-      ','
+    story: "drop container",
+    labelText: text(
+      "Label text (labelText)",
+      "Drag and drop files here or click to upload"
     ),
-    disabled: boolean('Disabled (disabled)', false),
-    role: text('ARIA role of the button (role)', ''),
-    tabindex: text('Tab index (tabindex)', '0')
-  }
+    name: text("Form item name (name)", ""),
+    multiple: boolean("Supports multiple files (multiple)", true),
+    accept: array(
+      "Accepted MIME types or file extensions (accept)",
+      ["image/jpeg", "image/png"],
+      ","
+    ),
+    disabled: boolean("Disabled (disabled)", false),
+    role: text("ARIA role of the button (role)", ""),
+    tabindex: text("Tab index (tabindex)", "0"),
+  },
 });
 
-FileUploaderDropContainer.story = { name: 'FileUploaderDropContainer' };
+FileUploaderDropContainer.story = { name: "FileUploaderDropContainer" };
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/FileUploader/FileUploader.svelte b/src/components/FileUploader/FileUploader.svelte
index 841fc1d9..56bd042d 100644
--- a/src/components/FileUploader/FileUploader.svelte
+++ b/src/components/FileUploader/FileUploader.svelte
@@ -1,62 +1,63 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export const clearFiles = () => (files = []);
+  export let status = "uploading"; // "uploading" | "edit" | "complete"
   export let accept = [];
-  export let buttonLabel = '';
   export let files = [];
-  export let iconDescription = 'Provide icon description';
-  export let kind = 'primary';
-  export let labelDescription = '';
-  export let labelTitle = '';
+  export const clearFiles = () => (files = []);
+  export let buttonLabel = "";
+  export let iconDescription = "Provide icon description";
+  export let kind = "primary";
+  export let labelDescription = "";
+  export let labelTitle = "";
   export let multiple = false;
-  export let name = '';
-  export let status = 'uploading';
-  export let style = undefined;
+  export let name = "";
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
-  import { cx } from '../../lib';
-  import Filename from './Filename.svelte';
-  import FileUploaderButton from './FileUploaderButton.svelte';
+  import { createEventDispatcher, afterUpdate } from "svelte";
+  import Filename from "./Filename.svelte";
+  import FileUploaderButton from "./FileUploaderButton.svelte";
 
   const dispatch = createEventDispatcher();
 
-  let prevFiles = [];
+  $: prevFiles = [];
 
   afterUpdate(() => {
     if (files.length > prevFiles.length) {
-      dispatch('add', files);
+      dispatch("add", files);
     } else {
-      dispatch(
-        'remove',
-        prevFiles.filter(_ => !files.includes(_))
-      );
+      dispatch("remove", prevFiles.filter(_ => !files.includes(_)));
     }
 
     prevFiles = [...files];
   });
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
-  <strong class={cx('--file--label')}>{labelTitle}</strong>
-  <p class={cx('--label-description')}>{labelDescription}</p>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <strong class:bx--file--label={true}>{labelTitle}</strong>
+  <p class:bx--label-description={true}>{labelDescription}</p>
   <FileUploaderButton
     disableLabelChanges
     labelText={buttonLabel}
-    on:change
-    on:change={({ target }) => {
-      files = [...target.files].map(({ name }) => name);
-    }}
     {accept}
     {name}
     {multiple}
-    {kind} />
-  <div class={cx('--file-container')}>
+    {kind}
+    on:change
+    on:change={({ target }) => {
+      files = [...target.files].map(({ name }) => name);
+    }} />
+  <div class:bx--file-container={true}>
     {#each files as name, i (name)}
-      <span class={cx('--file__selected-file')}>
-        <p class={cx('--file-filename')}>{name}</p>
-        <span class={cx('--file__state-container')}>
+      <span class:bx--file__selected-file={true}>
+        <p class:bx--file-filename={true}>{name}</p>
+        <span class:bx--file__state-container={true}>
           <Filename
+            {iconDescription}
+            {status}
             on:keydown
             on:keydown={({ key }) => {
               if (key === ' ' || key === 'Enter') {
@@ -66,9 +67,7 @@
             on:click
             on:click={() => {
               files = files.filter((_, index) => index !== i);
-            }}
-            {iconDescription}
-            {status} />
+            }} />
         </span>
       </span>
     {/each}
diff --git a/src/components/FileUploader/FileUploaderButton.svelte b/src/components/FileUploader/FileUploaderButton.svelte
index 0fbbda72..bd4befee 100644
--- a/src/components/FileUploader/FileUploaderButton.svelte
+++ b/src/components/FileUploader/FileUploaderButton.svelte
@@ -1,42 +1,44 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let accept = [];
+  export let multiple = false;
   export let disabled = false;
   export let disableLabelChanges = false;
-  export let id = Math.random();
-  export let kind = 'primary';
-  export let labelText = 'Add file';
-  export let multiple = false;
-  export let name = '';
-  export let role = 'button';
-  export let style = undefined;
-  export let tabindex = '0';
-
-  import { cx } from '../../lib';
-
-  let inputRef = undefined;
+  export let kind = "primary"; // Button.kind
+  export let labelText = "Add file";
+  export let role = "button";
+  export let tabindex = "0";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let ref = null;
 </script>
 
 <label
-  tabindex={disabled ? '-1' : tabindex}
   aria-disabled={disabled}
-  class={cx('--btn', '--btn--sm', kind && `--btn--${kind}`, disabled && '--btn--disabled', className)}
   for={id}
+  tabindex={disabled ? '-1' : tabindex}
+  class:bx--btn={true}
+  class:bx--btn--sm={true}
+  class:bx--btn--disabled={disabled}
+  class={kind && `bx--btn--${kind}`}
   on:keydown
   on:keydown={({ key }) => {
     if (key === ' ' || key === 'Enter') {
-      inputRef.click();
+      ref.click();
     }
-  }}
-  {style}>
+  }}>
   <span {role}>{labelText}</span>
 </label>
 <input
-  bind:this={inputRef}
+  bind:this={ref}
   type="file"
   tabindex="-1"
-  class={cx('--visually-hidden')}
+  {accept}
+  {disabled}
+  {id}
+  {multiple}
+  {name}
+  class:bx--visually-hidden={true}
+  {...$$restProps}
   on:change|stopPropagation
   on:change|stopPropagation={({ target }) => {
     const files = target.files;
@@ -48,9 +50,4 @@
   on:click
   on:click={({ target }) => {
     target.value = null;
-  }}
-  {id}
-  {disabled}
-  {multiple}
-  {accept}
-  {name} />
+  }} />
diff --git a/src/components/FileUploader/FileUploaderDropContainer.svelte b/src/components/FileUploader/FileUploaderDropContainer.svelte
index 9c768f1e..9b61416d 100644
--- a/src/components/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/components/FileUploader/FileUploaderDropContainer.svelte
@@ -1,28 +1,25 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let accept = [];
   export let disabled = false;
-  export let id = Math.random();
-  export let labelText = 'Add file';
   export let multiple = false;
-  export let name = '';
-  export let role = 'button';
-  export let style = undefined;
-  export let tabindex = '0';
   export let validateFiles = files => files;
+  export let labelText = "Add file";
+  export let role = "button";
+  export let tabindex = "0";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let ref = null;
 
-  import { createEventDispatcher } from 'svelte';
-  import { cx } from '../../lib';
+  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
-  let over = false;
-  let inputRef = undefined;
+  $: over = false;
 </script>
 
 <div
-  class={cx('--file')}
+  class:bx--file={true}
+  {...$$restProps}
   on:dragover
   on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => {
     if (!disabled) {
@@ -43,27 +40,33 @@
       over = false;
       dispatch('add', validateFiles(dataTransfer.files));
     }
-  }}
-  {style}>
+  }}>
   <label
-    class={cx('--file-browse-btn', disabled && '--file-browse-btn--disabled')}
     for={id}
+    {tabindex}
+    class:bx--file-browse-btn={true}
+    class:bx--file-browse-btn--disabled={disabled}
     on:keydown
     on:keydown={({ key }) => {
       if (key === ' ' || key === 'Enter') {
-        inputRef.click();
+        ref.click();
       }
-    }}
-    {tabindex}>
+    }}>
     <div
-      class={cx('--file__drop-container', over && '--file__drop-container--drag-over', className)}
-      {role}>
+      {role}
+      class:bx--file__drop-container={true}
+      class:bx--file__drop-container--drag-over={over}>
       {labelText}
       <input
-        bind:this={inputRef}
+        bind:this={ref}
         type="file"
         tabindex="-1"
-        class={cx('--file-input')}
+        {id}
+        {disabled}
+        {accept}
+        {name}
+        {multiple}
+        class:bx--file-input={true}
         on:change
         on:change={({ target }) => {
           dispatch('add', validateFiles(target.files));
@@ -71,12 +74,7 @@
         on:click
         on:click={({ target }) => {
           target.value = null;
-        }}
-        {id}
-        {disabled}
-        {accept}
-        {name}
-        {multiple} />
+        }} />
     </div>
   </label>
 </div>
diff --git a/src/components/FileUploader/FileUploaderItem.svelte b/src/components/FileUploader/FileUploaderItem.svelte
index aeabe16a..958a25ce 100644
--- a/src/components/FileUploader/FileUploaderItem.svelte
+++ b/src/components/FileUploader/FileUploaderItem.svelte
@@ -1,30 +1,27 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let errorBody = '';
-  export let errorSubject = '';
-  export let iconDescription = '';
-  export let id = Math.random();
+  export let errorBody = "";
+  export let errorSubject = "";
+  export let iconDescription = "";
+  export let id = "ccs-" + Math.random().toString(36);
   export let invalid = false;
-  export let name = '';
-  export let status = 'uploading';
-  export let style = undefined;
+  export let name = "";
+  export let status = "uploading";
 
-  import { createEventDispatcher } from 'svelte';
-  import { cx } from '../../lib';
-  import Filename from './Filename.svelte';
+  import { createEventDispatcher } from "svelte";
+  import Filename from "./Filename.svelte";
 
   const dispatch = createEventDispatcher();
 </script>
 
 <span
+  class:bx--file__selected-file={true}
+  class:bx--file__selected-file--invalid={invalid}
+  {...$$restProps}
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--file__selected-file', invalid && '--file__selected-file--invalid', className)}
-  {style}>
-  <p class={cx('--file-filename')}>{name}</p>
-  <span class={cx('--file__state-container')}>
+  on:mouseleave>
+  <p class:bx--file-filename={true}>{name}</p>
+  <span class:bx--file__state-container={true}>
     <Filename
       on:keydown={({ key }) => {
         if (key === ' ' || key === 'Enter') {
@@ -39,10 +36,10 @@
       {invalid} />
   </span>
   {#if invalid && errorSubject}
-    <div class={cx('--form-requirement')}>
-      <div class={cx('--form-requirement__title')}>{errorSubject}</div>
+    <div class:bx--form-requirement={true}>
+      <div class:bx--form-requirement__title={true}>{errorSubject}</div>
       {#if errorBody}
-        <p class={cx('--form-requirement__supplement')}>{errorBody}</p>
+        <p class:bx--form-requirement__supplement={true}>{errorBody}</p>
       {/if}
     </div>
   {/if}
diff --git a/src/components/FileUploader/Filename.svelte b/src/components/FileUploader/Filename.svelte
index 4127b5f8..f75674fc 100644
--- a/src/components/FileUploader/Filename.svelte
+++ b/src/components/FileUploader/Filename.svelte
@@ -1,42 +1,39 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let iconDescription = '';
+  export let iconDescription = "";
   export let invalid = false;
-  export let status = 'uploading';
-  export let style = undefined;
-  export let tabindex = '0';
+  export let status = "uploading"; // "uploading" | "edit" | "complete"
 
-  import Close16 from 'carbon-icons-svelte/lib/Close16';
-  import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
-  import Loading from '../Loading';
+  import Close16 from "carbon-icons-svelte/lib/Close16";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import { Loading } from "../Loading";
 </script>
 
 {#if status === 'uploading'}
-  <Loading small description={iconDescription} withOverlay={false} class={className} {style} />
+  <Loading
+    description={iconDescription}
+    {...$$restProps}
+    small
+    withOverlay={false} />
 {/if}
 
 {#if status === 'edit'}
   {#if invalid}
-    <WarningFilled16 class={cx('--file-invalid')} />
+    <WarningFilled16 class="bx--file-invalid" />
   {/if}
   <Close16
-    class={cx('--file-close', className)}
     aria-label={iconDescription}
     title={iconDescription}
+    class="bx--file-close"
+    {...$$restProps}
     on:click
-    on:keydown
-    {tabindex}
-    {style} />
+    on:keydown />
 {/if}
 
 {#if status === 'complete'}
   <CheckmarkFilled16
-    class={cx('--file-complete', className)}
     aria-label={iconDescription}
     title={iconDescription}
-    {tabindex}
-    {style} />
+    class="bx--file-complete"
+    {...$$restProps} />
 {/if}
diff --git a/src/components/FileUploader/index.js b/src/components/FileUploader/index.js
index b38a0d9e..0163dd0a 100644
--- a/src/components/FileUploader/index.js
+++ b/src/components/FileUploader/index.js
@@ -1,7 +1,5 @@
-import FileUploader from './FileUploader.svelte';
-
-export default FileUploader;
-export { default as FileUploaderButton } from './FileUploaderButton.svelte';
-export { default as FileUploaderItem } from './FileUploaderItem.svelte';
-export { default as FileUploaderDropContainer } from './FileUploaderDropContainer.svelte';
-export { default as Filename } from './Filename.svelte';
+export { default as FileUploader } from "./FileUploader.svelte";
+export { default as FileUploaderButton } from "./FileUploaderButton.svelte";
+export { default as FileUploaderItem } from "./FileUploaderItem.svelte";
+export { default as FileUploaderDropContainer } from "./FileUploaderDropContainer.svelte";
+export { default as Filename } from "./Filename.svelte";
diff --git a/src/components/Form/Form.Story.svelte b/src/components/Form/Form.Story.svelte
index b7edd83e..9933d751 100644
--- a/src/components/Form/Form.Story.svelte
+++ b/src/components/Form/Form.Story.svelte
@@ -1,18 +1,18 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Checkbox from '../Checkbox';
-  import FormGroup from '../FormGroup';
-  import FileUploader from '../FileUploader';
-  import NumberInput from '../NumberInput';
-  import RadioButton from '../RadioButton';
-  import RadioButtonGroup from '../RadioButtonGroup';
-  import Button from '../Button';
-  import Search from '../Search';
-  import Select, { SelectItem } from '../Select';
-  import TextArea from '../TextArea';
-  import TextInput from '../TextInput';
-  import Toggle from '../Toggle';
-  import Form from './Form.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Checkbox } from "../Checkbox";
+  import { FormGroup } from "../FormGroup";
+  import { FileUploader } from "../FileUploader";
+  import { NumberInput } from "../NumberInput";
+  import { RadioButton } from "../RadioButton";
+  import { RadioButtonGroup } from "../RadioButtonGroup";
+  import { Button } from "../Button";
+  import { Search } from "../Search";
+  import { Select, SelectItem } from "../Select";
+  import { TextArea } from "../TextArea";
+  import { TextInput } from "../TextInput";
+  import { Toggle } from "../Toggle";
+  import Form from "./Form.svelte";
 </script>
 
 <Layout>
@@ -25,42 +25,74 @@
       <Checkbox id="checkbox-1" labelText="Checkbox Label" />
       <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
     </FormGroup>
-    <NumberInput id="number-input-1" label="Number Input" min={0} max={100} value={50} step={10} />
+    <NumberInput
+      id="number-input-1"
+      label="Number Input"
+      min={0}
+      max={100}
+      value={50}
+      step={10} />
     <FormGroup legendText="Toggle heading">
       <Toggle id="toggle-1" />
       <Toggle id="toggle-2" disabled />
     </FormGroup>
     <FormGroup legendText="File Uploader">
-      <FileUploader id="file-1" buttonLabel="Add files" labelDescription="Choose Files..." />
+      <FileUploader
+        id="file-1"
+        buttonLabel="Add files"
+        labelDescription="Choose Files..." />
     </FormGroup>
     <FormGroup legendText="Radio Button heading">
-      <RadioButtonGroup name="radio-button-group" defaultSelected="default-selected">
-        <RadioButton id="radio-1" value="standard" labelText="Standard Radio Button" />
+      <RadioButtonGroup
+        name="radio-button-group"
+        defaultSelected="default-selected">
+        <RadioButton
+          id="radio-1"
+          value="standard"
+          labelText="Standard Radio Button" />
         <RadioButton
           id="radio-2"
           value="default-selected"
           labelText="Default Selected Radio Button" />
-        <RadioButton id="radio-3" value="blue" labelText="Standard Radio Button" />
-        <RadioButton id="radio-4" value="disabled" labelText="Disabled Radio Button" disabled />
+        <RadioButton
+          id="radio-3"
+          value="blue"
+          labelText="Standard Radio Button" />
+        <RadioButton
+          id="radio-4"
+          value="disabled"
+          labelText="Disabled Radio Button"
+          disabled />
       </RadioButtonGroup>
     </FormGroup>
     <FormGroup legendText="Search">
       <Search id="search-1" labelText="Search" placeholder="Search" />
     </FormGroup>
     <Select id="select-1" defaultValue="placeholder-item">
-      <SelectItem disabled hidden value="placeholder-item" text="Choose an option" />
+      <SelectItem
+        disabled
+        hidden
+        value="placeholder-item"
+        text="Choose an option" />
       <SelectItem value="option-1" text="Option 1" />
       <SelectItem value="option-2" text="Option 2" />
       <SelectItem value="option-3" text="Option 3" />
     </Select>
-    <TextInput id="text-input-1" labelText="Text Input label" placeholder="Placeholder text" />
-    <TextInput id="text-input-2" type="password" labelText="Password" required />
+    <TextInput
+      id="text-input-1"
+      labelText="Text Input label"
+      placeholder="Placeholder text" />
+    <TextInput
+      id="text-input-2"
+      type="password"
+      labelText="Password"
+      required />
     <TextInput
       id="text-input-3"
       type="password"
       labelText="Password"
-      invalidText="Your password must be at least 6 characters as well as contain at least one
-      uppercase, one lowercase, and one number."
+      invalidText="Your password must be at least 6 characters as well as
+      contain at least one uppercase, one lowercase, and one number."
       required
       invalid />
     <TextArea
diff --git a/src/components/Form/Form.stories.js b/src/components/Form/Form.stories.js
index 43cea5c4..74445f7e 100644
--- a/src/components/Form/Form.stories.js
+++ b/src/components/Form/Form.stories.js
@@ -1,14 +1,14 @@
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import Component from './Form.Story.svelte';
+import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+import Component from "./Form.Story.svelte";
 
-export default { title: 'Form', decorators: [withKnobs] };
+export default { title: "Form", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    legendText: text('Text in <legend> (legendText)', 'Checkbox heading'),
-    message: boolean('Show form requirement (message)', false),
-    messageText: text('Form requirement text (messageText)', ''),
-    invalid: boolean('Mark as invalid (invalid)', false)
-  }
+    legendText: text("Text in <legend> (legendText)", "Checkbox heading"),
+    message: boolean("Show form requirement (message)", false),
+    messageText: text("Form requirement text (messageText)", ""),
+    invalid: boolean("Mark as invalid (invalid)", false),
+  },
 });
diff --git a/src/components/Form/Form.svelte b/src/components/Form/Form.svelte
index b096bfab..1a205088 100644
--- a/src/components/Form/Form.svelte
+++ b/src/components/Form/Form.svelte
@@ -1,18 +1,10 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <form
+  class:bx--form={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:submit|preventDefault
-  class={cx('--form', className)}
-  {style}>
+  on:submit|preventDefault>
   <slot />
 </form>
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
index bac12c9b..87101659 100644
--- a/src/components/Form/index.js
+++ b/src/components/Form/index.js
@@ -1,3 +1 @@
-import Form from './Form.svelte';
-
-export default Form;
+export { default as Form } from "./Form.svelte";
diff --git a/src/components/FormGroup/FormGroup.svelte b/src/components/FormGroup/FormGroup.svelte
index 1463cf4e..f4ee9b1a 100644
--- a/src/components/FormGroup/FormGroup.svelte
+++ b/src/components/FormGroup/FormGroup.svelte
@@ -1,26 +1,21 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let legendText = "";
   export let invalid = false;
-  export let legendText = '';
   export let message = false;
-  export let messageText = '';
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let messageText = "";
 </script>
 
 <fieldset
   data-invalid={invalid || undefined}
-  class={cx('--fieldset', className)}
+  class:bx--fieldset={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  {style}>
-  <legend class={cx('--label', className)}>{legendText}</legend>
+  on:mouseleave>
+  <legend class:bx--label={true}>{legendText}</legend>
   <slot />
   {#if message}
-    <div class={cx('--form__requirements')}>{messageText}</div>
+    <div class:bx--form__requirement={true}>{messageText}</div>
   {/if}
 </fieldset>
diff --git a/src/components/FormGroup/index.js b/src/components/FormGroup/index.js
index 00df6628..ed2978fc 100644
--- a/src/components/FormGroup/index.js
+++ b/src/components/FormGroup/index.js
@@ -1,3 +1 @@
-import FormGroup from './FormGroup.svelte';
-
-export default FormGroup;
+export { default as FormGroup } from "./FormGroup.svelte";
diff --git a/src/components/FormItem/FormItem.Story.svelte b/src/components/FormItem/FormItem.Story.svelte
index 3e72e894..ca48a18f 100644
--- a/src/components/FormItem/FormItem.Story.svelte
+++ b/src/components/FormItem/FormItem.Story.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import NumberInput from '../NumberInput';
-  import FormItem from './FormItem.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { NumberInput } from "../NumberInput";
+  import FormItem from "./FormItem.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/FormItem/FormItem.stories.js b/src/components/FormItem/FormItem.stories.js
index fec1b60f..e330040c 100644
--- a/src/components/FormItem/FormItem.stories.js
+++ b/src/components/FormItem/FormItem.stories.js
@@ -1,6 +1,6 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import Component from './FormItem.Story.svelte';
+import { withKnobs } from "@storybook/addon-knobs";
+import Component from "./FormItem.Story.svelte";
 
-export default { title: 'FormItem', decorators: [withKnobs] };
+export default { title: "FormItem", decorators: [withKnobs] };
 
 export const Default = () => ({ Component });
diff --git a/src/components/FormItem/FormItem.svelte b/src/components/FormItem/FormItem.svelte
index ae913a57..560aa86a 100644
--- a/src/components/FormItem/FormItem.svelte
+++ b/src/components/FormItem/FormItem.svelte
@@ -1,11 +1,9 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <slot />
 </div>
diff --git a/src/components/FormItem/index.js b/src/components/FormItem/index.js
index 864b45aa..382b620d 100644
--- a/src/components/FormItem/index.js
+++ b/src/components/FormItem/index.js
@@ -1,3 +1 @@
-import FormItem from './FormItem.svelte';
-
-export default FormItem;
+export { default as FormItem } from "./FormItem.svelte";
diff --git a/src/components/FormLabel/FormLabel.Story.svelte b/src/components/FormLabel/FormLabel.Story.svelte
index 14e33770..cb12f700 100644
--- a/src/components/FormLabel/FormLabel.Story.svelte
+++ b/src/components/FormLabel/FormLabel.Story.svelte
@@ -1,9 +1,9 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Tooltip from '../Tooltip';
-  import FormLabel from './FormLabel.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Tooltip } from "../Tooltip";
+  import FormLabel from "./FormLabel.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/FormLabel/FormLabel.stories.js b/src/components/FormLabel/FormLabel.stories.js
index fb5b05dd..43a92ff6 100644
--- a/src/components/FormLabel/FormLabel.stories.js
+++ b/src/components/FormLabel/FormLabel.stories.js
@@ -1,8 +1,8 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import Component from './FormLabel.Story.svelte';
+import { withKnobs } from "@storybook/addon-knobs";
+import Component from "./FormLabel.Story.svelte";
 
-export default { title: 'FormLabel', decorators: [withKnobs] };
+export default { title: "FormLabel", decorators: [withKnobs] };
 
 export const Default = () => ({ Component });
 
-export const WithTooltip = () => ({ Component, props: { story: 'tooltip' } });
+export const WithTooltip = () => ({ Component, props: { story: "tooltip" } });
diff --git a/src/components/FormLabel/FormLabel.svelte b/src/components/FormLabel/FormLabel.svelte
index 1f06cdd6..c2341a5f 100644
--- a/src/components/FormLabel/FormLabel.svelte
+++ b/src/components/FormLabel/FormLabel.svelte
@@ -1,19 +1,14 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let id = Math.random();
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let id = "ccs-" + Math.random().toString(36);
 </script>
 
 <label
+  class:bx--label={true}
+  for={id}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  for={id}
-  class={cx('--label', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </label>
diff --git a/src/components/FormLabel/index.js b/src/components/FormLabel/index.js
index 3ed2b608..176fd769 100644
--- a/src/components/FormLabel/index.js
+++ b/src/components/FormLabel/index.js
@@ -1,3 +1 @@
-import FormLabel from './FormLabel.svelte';
-
-export default FormLabel;
+export { default as FormLabel } from "./FormLabel.svelte";
diff --git a/src/components/Icon/Icon.Skeleton.svelte b/src/components/Icon/Icon.Skeleton.svelte
index 992b931d..8c221a93 100644
--- a/src/components/Icon/Icon.Skeleton.svelte
+++ b/src/components/Icon/Icon.Skeleton.svelte
@@ -1,16 +1,12 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let size = 16;
-  export let style = undefined;
-
-  import { cx, css } from '../../lib';
 </script>
 
 <div
+  class:bx--icon--skeleton={true}
+  {...$$restProps}
+  style="{$$restProps.style}; width: {size}px; height: {size}px"
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--icon--skeleton', className)}
-  style={css([style, ['width', `${size}px`], ['height', `${size}px`]])} />
+  on:mouseleave />
diff --git a/src/components/Icon/Icon.Story.svelte b/src/components/Icon/Icon.Story.svelte
index 6c0015bb..c58ebe5d 100644
--- a/src/components/Icon/Icon.Story.svelte
+++ b/src/components/Icon/Icon.Story.svelte
@@ -1,12 +1,12 @@
 <script>
   export let story = undefined;
 
-  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import ArrowLeft20 from 'carbon-icons-svelte/lib/ArrowLeft20';
-  import Add24 from 'carbon-icons-svelte/lib/Add24';
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Icon from './Icon.svelte';
-  import IconSkeleton from './Icon.Skeleton.svelte';
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ArrowLeft20 from "carbon-icons-svelte/lib/ArrowLeft20";
+  import Add24 from "carbon-icons-svelte/lib/Add24";
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Icon from "./Icon.svelte";
+  import IconSkeleton from "./Icon.Skeleton.svelte";
 
   const icons = { ChevronDown16, ArrowLeft20, Add24 };
 </script>
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
index a76ce333..3af8acfa 100644
--- a/src/components/Icon/Icon.stories.js
+++ b/src/components/Icon/Icon.stories.js
@@ -1,20 +1,24 @@
-import { withKnobs, select, boolean } from '@storybook/addon-knobs';
-import Component from './Icon.Story.svelte';
+import { withKnobs, select, boolean } from "@storybook/addon-knobs";
+import Component from "./Icon.Story.svelte";
 
-export default { title: 'Icon', decorators: [withKnobs] };
+export default { title: "Icon", decorators: [withKnobs] };
 
 const icons = {
-  ChevronDown16: 'ChevronDown16',
-  ArrowLeft20: 'ArrowLeft20',
-  Add24: 'Add24'
+  ChevronDown16: "ChevronDown16",
+  ArrowLeft20: "ArrowLeft20",
+  Add24: "Add24",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    icon: select('Render icon from `carbon-icons-svelte` (render)', icons, 'ChevronDown16'),
-    skeleton: boolean('Display icon skeleton (skeleton)', false)
-  }
+    icon: select(
+      "Render icon from `carbon-icons-svelte` (render)",
+      icons,
+      "ChevronDown16"
+    ),
+    skeleton: boolean("Display icon skeleton (skeleton)", false),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Icon/Icon.svelte b/src/components/Icon/Icon.svelte
index d93ca25b..fc724742 100644
--- a/src/components/Icon/Icon.svelte
+++ b/src/components/Icon/Icon.svelte
@@ -1,40 +1,27 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let focusable = false;
   export let render = undefined;
   export let skeleton = false;
-  export let style = undefined;
-  export let tabindex = undefined;
-  export let title = undefined;
 
-  import IconSkeleton from './Icon.Skeleton.svelte';
+  import IconSkeleton from "./Icon.Skeleton.svelte";
 
-  $: iconName = render.toString().split(' ')[1];
+  $: iconName = render.toString().split(" ")[1];
   $: size = parseInt(iconName.slice(-2), 10);
 </script>
 
 {#if skeleton}
   <IconSkeleton
+    {size}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={className}
-    {style}
-    {size} />
+    on:mouseleave />
 {:else}
   <svelte:component
     this={render}
-    aria-label={$$props['aria-label']}
-    aria-labelledby={$$props['aria-labelledby']}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={className}
-    {tabindex}
-    {focusable}
-    {style}
-    {title} />
+    on:mouseleave />
 {/if}
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
index db93ce26..41f46931 100644
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@@ -1,4 +1,2 @@
-import Icon from './Icon.svelte';
-
-export default Icon;
-export { default as IconSkeleton } from './Icon.Skeleton.svelte';
+export { default as Icon } from "./Icon.svelte";
+export { default as IconSkeleton } from "./Icon.Skeleton.svelte";
diff --git a/src/components/InlineLoading/InlineLoading.Story.svelte b/src/components/InlineLoading/InlineLoading.Story.svelte
index 47274f1e..e3c6e369 100644
--- a/src/components/InlineLoading/InlineLoading.Story.svelte
+++ b/src/components/InlineLoading/InlineLoading.Story.svelte
@@ -5,30 +5,30 @@
   export let description = undefined;
   export let successDelay = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Button from '../Button';
-  import InlineLoading from './InlineLoading.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Button } from "../Button";
+  import InlineLoading from "./InlineLoading.svelte";
 
   const props = { status, iconDescription, description, successDelay };
 
   let isSubmitting = false;
   let success = false;
-  let ariaLive = 'off';
-  let loadingDescription = 'Submitting...';
+  let ariaLive = "off";
+  let loadingDescription = "Submitting...";
 
   function handleSubmit() {
     isSubmitting = true;
-    ariaLive = 'assertive';
+    ariaLive = "assertive";
 
     setTimeout(() => {
       isSubmitting = false;
-      loadingDescription = 'Submitted!';
+      loadingDescription = "Submitted!";
       success = true;
       setTimeout(() => {
         success = false;
         isSubmitting = false;
-        loadingDescription = 'Submitting...';
-        ariaLive = 'off';
+        loadingDescription = "Submitting...";
+        ariaLive = "off";
       }, 1500);
     }, 2000);
   }
diff --git a/src/components/InlineLoading/InlineLoading.stories.js b/src/components/InlineLoading/InlineLoading.stories.js
index bbd25ad5..86ab3497 100644
--- a/src/components/InlineLoading/InlineLoading.stories.js
+++ b/src/components/InlineLoading/InlineLoading.stories.js
@@ -1,23 +1,29 @@
-import { withKnobs, select, text, number } from '@storybook/addon-knobs';
-import Component from './InlineLoading.Story.svelte';
+import { withKnobs, select, text, number } from "@storybook/addon-knobs";
+import Component from "./InlineLoading.Story.svelte";
 
-export default { title: 'InlineLoading', decorators: [withKnobs] };
+export default { title: "InlineLoading", decorators: [withKnobs] };
 
-const loadingStatus = ['inactive', 'active', 'finished', 'error'];
+const loadingStatus = ["inactive", "active", "finished", "error"];
 
 export const Default = () => ({
   Component,
   props: {
-    status: select('Loading status (status)', loadingStatus, 'active'),
-    iconDescription: text('Icon description (iconDescription)', 'Active loading indicator'),
-    description: text('Loading progress description (description)', 'Loading data...'),
+    status: select("Loading status (status)", loadingStatus, "active"),
+    iconDescription: text(
+      "Icon description (iconDescription)",
+      "Active loading indicator"
+    ),
+    description: text(
+      "Loading progress description (description)",
+      "Loading data..."
+    ),
     successDelay: number(
-      'The duration for successful state before `on:success` fires (successDelay)',
+      "The duration for successful state before `on:success` fires (successDelay)",
       1500
-    )
-  }
+    ),
+  },
 });
 
-export const UxExample = () => ({ Component, props: { story: 'ux-example' } });
+export const UxExample = () => ({ Component, props: { story: "ux-example" } });
 
-UxExample.story = { name: 'UX Example' };
+UxExample.story = { name: "UX Example" };
diff --git a/src/components/InlineLoading/InlineLoading.svelte b/src/components/InlineLoading/InlineLoading.svelte
index 917b96de..d9dd5333 100644
--- a/src/components/InlineLoading/InlineLoading.svelte
+++ b/src/components/InlineLoading/InlineLoading.svelte
@@ -1,26 +1,22 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let status = "active"; // "active" | "inactive" | "finished" | "error"
   export let description = undefined;
   export let iconDescription = undefined;
-  export let status = 'active';
-  export let style = undefined;
   export let successDelay = 1500;
 
-  import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
-  import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
-  import Error20 from 'carbon-icons-svelte/lib/Error20';
-  import { cx } from '../../lib';
-  import Loading from '../Loading';
+  import { createEventDispatcher, afterUpdate, onDestroy } from "svelte";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import Error20 from "carbon-icons-svelte/lib/Error20";
+  import { Loading } from "../Loading";
 
   const dispatch = createEventDispatcher();
 
-  let timeoutId = undefined;
+  $: timeoutId = undefined;
 
   afterUpdate(() => {
-    if (status === 'finished') {
+    if (status === "finished") {
       timeoutId = window.setTimeout(() => {
-        dispatch('success');
+        dispatch("success");
       }, successDelay);
     }
   });
@@ -32,18 +28,17 @@
 </script>
 
 <div
-  aria-live={$$props['aria-live'] || 'assertive'}
-  class={cx('--inline-loading', className)}
+  aria-live="assertive"
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  {style}>
-  <div class={cx('--inline-loading__animation')}>
+  on:mouseleave>
+  <div class:bx--inline-loading__animation={true}>
     {#if status === 'error'}
-      <Error20 class={cx('--inline-loading--error')} />
+      <Error20 class="bx--inline-loading--error" />
     {:else if status === 'finished'}
-      <CheckmarkFilled16 class={cx('--inline-loading__checkmark-container')} />
+      <CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
     {:else if status === 'inactive' || status === 'active'}
       <Loading
         small
@@ -53,6 +48,6 @@
     {/if}
   </div>
   {#if description}
-    <div class={cx('--inline-loading__text')}>{description}</div>
+    <div class:bx--inline-loading__text={true}>{description}</div>
   {/if}
 </div>
diff --git a/src/components/InlineLoading/InlineLoading.test.js b/src/components/InlineLoading/InlineLoading.test.js
index 12b3b473..c5eccdaa 100644
--- a/src/components/InlineLoading/InlineLoading.test.js
+++ b/src/components/InlineLoading/InlineLoading.test.js
@@ -1,18 +1,24 @@
-import { render } from '@testing-library/svelte';
-import Component from './InlineLoading.svelte';
+import { render } from "@testing-library/svelte";
+import Component from "./InlineLoading.svelte";
 
-test('InlineLoading', () => {
+test("InlineLoading", () => {
   const { container, rerender } = render(Component, {
-    description: 'description',
-    iconDescription: 'icon description'
+    description: "description",
+    iconDescription: "icon description",
   });
 
-  expect(container.querySelector('.bx--inline-loading')).toHaveTextContent('description');
-  expect(container.querySelector('.bx--loading')).toBeInTheDocument();
+  expect(container.querySelector(".bx--inline-loading")).toHaveTextContent(
+    "description"
+  );
+  expect(container.querySelector(".bx--loading")).toBeInTheDocument();
 
-  rerender({ props: { status: 'error' } });
-  expect(container.querySelector('.bx--inline-loading--error')).toBeInTheDocument();
+  rerender({ props: { status: "error" } });
+  expect(
+    container.querySelector(".bx--inline-loading--error")
+  ).toBeInTheDocument();
 
-  rerender({ props: { status: 'finished' } });
-  expect(container.querySelector('.bx--inline-loading__checkmark-container')).toBeInTheDocument();
+  rerender({ props: { status: "finished" } });
+  expect(
+    container.querySelector(".bx--inline-loading__checkmark-container")
+  ).toBeInTheDocument();
 });
diff --git a/src/components/InlineLoading/index.js b/src/components/InlineLoading/index.js
index a1072fe5..f0f1af1c 100644
--- a/src/components/InlineLoading/index.js
+++ b/src/components/InlineLoading/index.js
@@ -1,3 +1 @@
-import InlineLoading from './InlineLoading.svelte';
-
-export default InlineLoading;
+export { default as InlineLoading } from "./InlineLoading.svelte";
diff --git a/src/components/Link/Link.Story.svelte b/src/components/Link/Link.Story.svelte
index 0516dfbf..d35fcb64 100644
--- a/src/components/Link/Link.Story.svelte
+++ b/src/components/Link/Link.Story.svelte
@@ -1,10 +1,13 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Link from './Link.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Link from "./Link.svelte";
+
+  $: ref = null;
+  $: ref && console.log(ref);
 </script>
 
 <Layout>
   <div>
-    <Link {...$$props}>Link</Link>
+    <Link {...$$props} bind:ref>Link</Link>
   </div>
 </Layout>
diff --git a/src/components/Link/Link.stories.js b/src/components/Link/Link.stories.js
index 3021eb5d..f577bf12 100644
--- a/src/components/Link/Link.stories.js
+++ b/src/components/Link/Link.stories.js
@@ -1,13 +1,13 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import Component from './Link.Story.svelte';
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Link.Story.svelte";
 
-export default { title: 'Link', decorators: [withKnobs] };
+export default { title: "Link", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    href: text('The link href (href)', '#'),
-    inline: boolean('Use the in-line variant (inline)', false),
-    disabled: boolean('Disabled (disabled)', false)
-  }
+    href: text("The link href (href)", "#"),
+    inline: boolean("Use the in-line variant (inline)", false),
+    disabled: boolean("Disabled (disabled)", false),
+  },
 });
diff --git a/src/components/Link/Link.svelte b/src/components/Link/Link.svelte
index 0506299d..3f2b398b 100644
--- a/src/components/Link/Link.svelte
+++ b/src/components/Link/Link.svelte
@@ -1,35 +1,34 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let href = undefined;
   export let inline = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let disabled = false;
+  export let ref = null;
 </script>
 
 {#if disabled}
   <p
-    aria-current={$$props['aria-current']}
-    class={cx('--link', disabled && '--link--disabled', inline && '--link--inline', className)}
+    bind:this={ref}
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    {style}>
+    on:mouseleave>
     <slot />
   </p>
 {:else}
+  <!-- svelte-ignore a11y-missing-attribute -->
   <a
-    aria-current={$$props['aria-current']}
-    class={cx('--link', disabled && '--link--disabled', inline && '--link--inline', className)}
+    bind:this={ref}
+    class:bx--link={true}
+    class:bx--link--disabled={disabled}
+    class:bx--link--inline={inline}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    {style}
-    {href}>
+    on:mouseleave>
     <slot />
   </a>
 {/if}
diff --git a/src/components/Link/Link.test.js b/src/components/Link/Link.test.js
index 09e4c194..37324442 100644
--- a/src/components/Link/Link.test.js
+++ b/src/components/Link/Link.test.js
@@ -1,23 +1,23 @@
-import { render } from '@testing-library/svelte';
-import Component from './Link.Story.svelte';
+import { render } from "@testing-library/svelte";
+import Component from "./Link.Story.svelte";
 
-test('Link', () => {
+test("Link", () => {
   const { container, rerender } = render(Component, {
-    href: '#',
+    href: "#",
     inline: false,
-    disabled: false
+    disabled: false,
   });
 
-  const selector = '.bx--link';
+  const selector = ".bx--link";
   let element = null;
 
   element = container.querySelector(selector);
-  expect(element).toHaveAttribute('href', '#');
-  expect(element).not.toHaveClass('bx--link--inline', 'bx--link--disabled');
-  expect(element).toHaveTextContent('Link');
+  expect(element).toHaveAttribute("href", "#");
+  expect(element).not.toHaveClass("bx--link--inline", "bx--link--disabled");
+  expect(element).toHaveTextContent("Link");
 
   rerender({ props: { inline: true, disabled: true } });
 
   element = container.querySelector(selector);
-  expect(element).toHaveClass('bx--link--inline', 'bx--link--disabled');
+  expect(element).toHaveClass("bx--link--inline", "bx--link--disabled");
 });
diff --git a/src/components/Link/index.js b/src/components/Link/index.js
index 3fd78d62..759d5a75 100644
--- a/src/components/Link/index.js
+++ b/src/components/Link/index.js
@@ -1,3 +1 @@
-import Link from './Link.svelte';
-
-export default Link;
+export { default as Link } from "./Link.svelte";
diff --git a/src/components/ListBox/ListBox.svelte b/src/components/ListBox/ListBox.svelte
index 0a6810ec..2dc1cabc 100644
--- a/src/components/ListBox/ListBox.svelte
+++ b/src/components/ListBox/ListBox.svelte
@@ -1,36 +1,33 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let size = undefined; // "sm" | "xl"
+  export let type = "default"; // "default" | "inline"
   export let disabled = false;
-  export let id = Math.random();
   export let invalid = false;
-  export let invalidText = '';
+  export let invalidText = "";
   export let light = false;
   export let open = false;
-  export let size = undefined;
-  export let style = undefined;
-  export let type = 'default';
-
-  import { cx } from '../../lib';
 </script>
 
 <div
   role="listbox"
   tabindex="-1"
   data-invalid={invalid || undefined}
-  aria-label={$$props['aria-label']}
-  class={cx('--list-box', size && `--list-box--${size}`, type === 'inline' && '--list-box--inline', disabled && '--list-box--disabled', open && '--list-box--expanded', light && '--list-box--light', className)}
+  class:bx--list-box={true}
+  class:bx--list-box--inline={type === 'inline'}
+  class:bx--list-box--disabled={disabled}
+  class:bx--list-box--expanded={open}
+  class:bx--list-box--light={light}
+  class={size && `bx--list-box--${size}`}
+  {...$$restProps}
   on:keydown
-  on:keydown={event => {
-    if (event.key === 'Escape') {
-      event.stopPropagation();
+  on:keydown={e => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
     }
   }}
-  on:click|preventDefault|stopPropagation
-  {style}
-  {id}>
+  on:click|preventDefault|stopPropagation>
   <slot />
 </div>
 {#if invalid}
-  <div class={cx('--form-requirement')}>{invalidText}</div>
+  <div class:bx--form-requirement={true}>{invalidText}</div>
 {/if}
diff --git a/src/components/ListBox/ListBoxField.svelte b/src/components/ListBox/ListBoxField.svelte
index 0db719b7..b29442eb 100644
--- a/src/components/ListBox/ListBoxField.svelte
+++ b/src/components/ListBox/ListBoxField.svelte
@@ -1,35 +1,30 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export const translationIds = { close: 'close', open: 'open' };
+  export const translationIds = { close: "close", open: "open" };
   export let disabled = false;
-  export let id = Math.random();
-  export let role = 'combobox';
-  export let style = undefined;
-  export let tabindex = '-1';
+  export let id = "ccs-" + Math.random().toString(36);
+  export let role = "combobox";
+  export let tabindex = "-1";
   export let translateWithId = id => defaultTranslations[id];
+  export let ref = null;
 
-  import { getContext } from 'svelte';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
 
   const defaultTranslations = {
-    [translationIds.close]: 'Close menu',
-    [translationIds.open]: 'Open menu'
+    [translationIds.close]: "Close menu",
+    [translationIds.open]: "Open menu"
   };
-  const ctx = getContext('MultiSelect') || getContext('Dropdown');
+  const ctx = getContext("MultiSelect");
 
-  let fieldRef = undefined;
-
-  $: if (ctx && fieldRef) {
-    ctx.declareRef({ key: 'field', ref: fieldRef });
+  $: if (ctx && ref) {
+    ctx.declareRef({ key: "field", ref });
   }
 
-  $: ariaExpanded = $$props['aria-expanded'];
+  $: ariaExpanded = $$props["aria-expanded"];
   $: menuId = `menu-${id}`;
 </script>
 
 <div
-  bind:this={fieldRef}
+  bind:this={ref}
   role={ariaExpanded ? 'combobox' : role}
   aria-expanded={ariaExpanded}
   aria-owns={(ariaExpanded && menuId) || undefined}
@@ -37,13 +32,13 @@
   aria-disabled={disabled}
   aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
   tabindex={disabled ? '-1' : tabindex}
-  class={cx('--list-box__field', className)}
+  class:bx--list-box__field={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown|preventDefault|stopPropagation
-  on:blur
-  {style}>
+  on:blur>
   <slot />
 </div>
diff --git a/src/components/ListBox/ListBoxMenu.svelte b/src/components/ListBox/ListBoxMenu.svelte
index 3599e8ab..4fcda930 100644
--- a/src/components/ListBox/ListBoxMenu.svelte
+++ b/src/components/ListBox/ListBoxMenu.svelte
@@ -1,10 +1,5 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let id = Math.random();
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let id = "ccs-" + Math.random().toString(36);
 
   $: menuId = `menu-${id}`;
 </script>
@@ -12,9 +7,7 @@
 <div
   role="listbox"
   id={menuId}
-  aria-labelledby={$$props['aria-labelledby']}
-  aria-label={$$props['aria-label']}
-  class={cx('--list-box__menu', className)}
-  {style}>
+  class:bx--list-box__menu={true}
+  {...$$restProps}>
   <slot />
 </div>
diff --git a/src/components/ListBox/ListBoxMenuIcon.svelte b/src/components/ListBox/ListBoxMenuIcon.svelte
index 36b390a4..bdff9302 100644
--- a/src/components/ListBox/ListBoxMenuIcon.svelte
+++ b/src/components/ListBox/ListBoxMenuIcon.svelte
@@ -1,25 +1,22 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export const translationIds = { close: 'close', open: 'open' };
+  export const translationIds = { close: "close", open: "open" };
   export let open = false;
-  export let style = undefined;
   export let translateWithId = id => defaultTranslations[id];
 
-  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import { cx } from '../../lib';
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
 
   const defaultTranslations = {
-    [translationIds.close]: 'Close menu',
-    [translationIds.open]: 'Open menu'
+    [translationIds.close]: "Close menu",
+    [translationIds.open]: "Open menu"
   };
 
-  $: description = open ? translateWithId('close') : translateWithId('open');
+  $: description = open ? translateWithId("close") : translateWithId("open");
 </script>
 
 <div
-  on:click|preventDefault|stopPropagation
-  class={cx('--list-box__menu-icon', open && '--list-box__menu-icon--open', className)}
-  {style}>
+  class:bx--list-box__menu-icon={true}
+  class:bx--list-box__menu-icon--open={open}
+  {...$$restProps}
+  on:click|preventDefault|stopPropagation>
   <ChevronDown16 aria-label={description} title={description} />
 </div>
diff --git a/src/components/ListBox/ListBoxMenuItem.svelte b/src/components/ListBox/ListBoxMenuItem.svelte
index 8bb7c2c8..3829f3c1 100644
--- a/src/components/ListBox/ListBoxMenuItem.svelte
+++ b/src/components/ListBox/ListBoxMenuItem.svelte
@@ -1,18 +1,17 @@
 <script>
-  export let id = undefined;
   export let active = false;
   export let highlighted = false;
-
-  import { cx } from '../../lib';
 </script>
 
 <div
+  class:bx--list-box__menu-item={true}
+  class:bx--list-box__menu-item--active={active}
+  class:bx--list-box__menu-item--highlighted={highlighted}
+  {...$$restProps}
   on:click
   on:mouseenter
-  on:mouseleave
-  class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted')}
-  {id}>
-  <div class={cx('--list-box__menu-item__option')}>
+  on:mouseleave>
+  <div class:bx--list-box__menu-item__option={true}>
     <slot />
   </div>
 </div>
diff --git a/src/components/ListBox/ListBoxSelection.svelte b/src/components/ListBox/ListBoxSelection.svelte
index 93695b0a..0acbd4a2 100644
--- a/src/components/ListBox/ListBoxSelection.svelte
+++ b/src/components/ListBox/ListBoxSelection.svelte
@@ -1,50 +1,52 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
+  export const translationIds = {
+    clearAll: "clearAll",
+    clearSelection: "clearSelection"
+  };
   export let disabled = false;
   export let selectionCount = undefined;
-  export let style = undefined;
   export let translateWithId = id => defaultTranslations[id];
+  export let ref = null;
 
-  import { createEventDispatcher, getContext } from 'svelte';
-  import Close16 from 'carbon-icons-svelte/lib/Close16';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, getContext } from "svelte";
+  import Close16 from "carbon-icons-svelte/lib/Close16";
 
   const defaultTranslations = {
-    [translationIds.clearAll]: 'Clear all selected items',
-    [translationIds.clearSelection]: 'Clear selected item'
+    [translationIds.clearAll]: "Clear all selected items",
+    [translationIds.clearSelection]: "Clear selected item"
   };
   const dispatch = createEventDispatcher();
-  const ctx = getContext('MultiSelect');
+  const ctx = getContext("MultiSelect");
 
-  let selectionRef = undefined;
-
-  $: if (ctx && selectionRef) {
-    ctx.declareRef({ key: 'selection', ref: selectionRef });
+  $: if (ctx && ref) {
+    ctx.declareRef({ key: "selection", ref });
   }
 
-  $: description = selectionCount ? translateWithId('clearAll') : translateWithId('clearSelection');
+  $: description = selectionCount
+    ? translateWithId("clearAll")
+    : translateWithId("clearSelection");
 </script>
 
 <div
-  bind:this={selectionRef}
+  bind:this={ref}
   role="button"
   aria-label="Clear Selection"
   tabindex={disabled ? '-1' : '0'}
   title={description}
-  class={cx('--list-box__selection', selectionCount && '--tag--filter', selectionCount && '--list-box__selection--multi', className)}
-  on:click|preventDefault|stopPropagation={event => {
+  class:bx--list-box__selection={true}
+  class:bx--tag--filter={selectionCount}
+  class:bx--list-box__selection--multi={selectionCount}
+  {...$$restProps}
+  on:click|preventDefault|stopPropagation={e => {
     if (!disabled) {
-      dispatch('clear', event);
+      dispatch('clear', e);
     }
   }}
-  on:keydown|stopPropagation={event => {
-    if (!disabled && event.key === 'Enter') {
-      dispatch('clear', event);
+  on:keydown|stopPropagation={e => {
+    if (!disabled && e.key === 'Enter') {
+      dispatch('clear', e);
     }
-  }}
-  {style}>
+  }}>
   {#if selectionCount}{selectionCount}{/if}
   <Close16 />
 </div>
diff --git a/src/components/ListBox/index.js b/src/components/ListBox/index.js
index 7bf4f8ea..9f1967d6 100644
--- a/src/components/ListBox/index.js
+++ b/src/components/ListBox/index.js
@@ -1,8 +1,6 @@
-import ListBox from './ListBox.svelte';
-
-export default ListBox;
-export { default as ListBoxField } from './ListBoxField.svelte';
-export { default as ListBoxMenu } from './ListBoxMenu.svelte';
-export { default as ListBoxMenuIcon } from './ListBoxMenuIcon.svelte';
-export { default as ListBoxMenuItem } from './ListBoxMenuItem.svelte';
-export { default as ListBoxSelection } from './ListBoxSelection.svelte';
+export { default as ListBox } from "./ListBox.svelte";
+export { default as ListBoxField } from "./ListBoxField.svelte";
+export { default as ListBoxMenu } from "./ListBoxMenu.svelte";
+export { default as ListBoxMenuIcon } from "./ListBoxMenuIcon.svelte";
+export { default as ListBoxMenuItem } from "./ListBoxMenuItem.svelte";
+export { default as ListBoxSelection } from "./ListBoxSelection.svelte";
diff --git a/src/components/ListItem/ListItem.svelte b/src/components/ListItem/ListItem.svelte
index 2fbc533e..0037171c 100644
--- a/src/components/ListItem/ListItem.svelte
+++ b/src/components/ListItem/ListItem.svelte
@@ -1,11 +1,9 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
-<li on:click on:mouseover on:mouseenter on:mouseleave class={cx('--list__item', className)} {style}>
+<li
+  class:bx--list__item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <slot />
 </li>
diff --git a/src/components/ListItem/index.js b/src/components/ListItem/index.js
index ee2375df..54bd4d77 100644
--- a/src/components/ListItem/index.js
+++ b/src/components/ListItem/index.js
@@ -1,3 +1 @@
-import ListItem from './ListItem.svelte';
-
-export default ListItem;
+export { default as ListItem } from "./ListItem.svelte";
diff --git a/src/components/Loading/Loading.Story.svelte b/src/components/Loading/Loading.Story.svelte
index aee2a7b0..1208dfea 100644
--- a/src/components/Loading/Loading.Story.svelte
+++ b/src/components/Loading/Loading.Story.svelte
@@ -1,6 +1,6 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Loading from './Loading.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Loading from "./Loading.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/Loading/Loading.stories.js b/src/components/Loading/Loading.stories.js
index f6fabd29..5206ea51 100644
--- a/src/components/Loading/Loading.stories.js
+++ b/src/components/Loading/Loading.stories.js
@@ -1,14 +1,14 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import Component from './Loading.Story.svelte';
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Loading.Story.svelte";
 
-export default { title: 'Loading', decorators: [withKnobs] };
+export default { title: "Loading", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    active: boolean('Active (active)', true),
-    withOverlay: boolean('With overlay (withOverlay)', false),
-    small: boolean('Small (small)', false),
-    description: text('Description (description)', 'Active loading indicator')
-  }
+    active: boolean("Active (active)", true),
+    withOverlay: boolean("With overlay (withOverlay)", false),
+    small: boolean("Small (small)", false),
+    description: text("Description (description)", "Active loading indicator"),
+  },
 });
diff --git a/src/components/Loading/Loading.svelte b/src/components/Loading/Loading.svelte
index e85638c5..49890d8c 100644
--- a/src/components/Loading/Loading.svelte
+++ b/src/components/Loading/Loading.svelte
@@ -1,50 +1,67 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let active = true;
-  export let description = 'Active loading indicator';
   export let small = false;
-  export let style = undefined;
+  export let active = true;
   export let withOverlay = true;
+  export let description = "Active loading indicator";
+  export let id = "ccs-" + Math.random().toString(36);
 
-  import { cx } from '../../lib';
-
-  $: loadingId = `loading-${Math.random()}`;
-  $: spinnerRadius = small ? '26.8125' : '37.5';
+  $: spinnerRadius = small ? "26.8125" : "37.5";
 </script>
 
 {#if withOverlay}
-  <div class={cx('--loading-overlay', !active && '--loading-overlay--stop')}>
+  <div
+    class:bx--loading-overlay={true}
+    class:bx--loading-overlay--stop={!active}
+    {...$$restProps}>
     <div
       aria-atomic="true"
-      aria-labelledby={loadingId}
+      aria-labelledby={id}
       aria-live={active ? 'assertive' : 'off'}
-      class={cx('--loading', small && '--loading--small', !active && '--loading--stop', className)}
-      {style}>
-      <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
-      <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
+      class:bx--loading={true}
+      class:bx--loading--small={small}
+      class:bx--loading--stop={!active}>
+      <label class:bx--visually-hidden={true} {id}>{description}</label>
+      <svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
         <title>{description}</title>
         {#if small}
-          <circle class={cx('--loading__background')} cx="0" cy="0" r={spinnerRadius} />
+          <circle
+            class:bx--loading__background={true}
+            cx="0"
+            cy="0"
+            r={spinnerRadius} />
         {/if}
-        <circle class={cx('--loading__stroke')} cx="0" cy="0" r={spinnerRadius} />
+        <circle
+          class:bx--loading__stroke={true}
+          cx="0"
+          cy="0"
+          r={spinnerRadius} />
       </svg>
     </div>
   </div>
 {:else}
   <div
     aria-atomic="true"
-    aria-labelledby={loadingId}
+    aria-labelledby={id}
     aria-live={active ? 'assertive' : 'off'}
-    class={cx('--loading', small && '--loading--small', !active && '--loading--stop', className)}
-    {style}>
-    <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
-    <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
+    class:bx--loading={true}
+    class:bx--loading--small={small}
+    class:bx--loading--stop={!active}
+    {...$$restProps}>
+    <label class:bx--visually-hidden={true} {id}>{description}</label>
+    <svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
       <title>{description}</title>
       {#if small}
-        <circle class={cx('--loading__background')} cx="0" cy="0" r={spinnerRadius} />
+        <circle
+          class:bx--loading__background={true}
+          cx="0"
+          cy="0"
+          r={spinnerRadius} />
       {/if}
-      <circle class={cx('--loading__stroke')} cx="0" cy="0" r={spinnerRadius} />
+      <circle
+        class:bx--loading__stroke={true}
+        cx="0"
+        cy="0"
+        r={spinnerRadius} />
     </svg>
   </div>
 {/if}
diff --git a/src/components/Loading/Loading.test.js b/src/components/Loading/Loading.test.js
index 72fffb04..cb731e03 100644
--- a/src/components/Loading/Loading.test.js
+++ b/src/components/Loading/Loading.test.js
@@ -1,18 +1,24 @@
-import { render } from '@testing-library/svelte';
-import Component from './Loading.svelte';
+import { render } from "@testing-library/svelte";
+import Component from "./Loading.svelte";
 
-test('Loading', () => {
+test("Loading", () => {
   const { container, rerender } = render(Component);
 
-  let element = container.querySelector('.bx--loading-overlay');
+  let element = container.querySelector(".bx--loading-overlay");
 
   expect(element).toBeInTheDocument();
-  expect(element).not.toHaveClass('bx--loading-overlay--stop');
-  expect(element.querySelector('.bx--loading__stroke')).toHaveAttribute('r', '37.5');
+  expect(element).not.toHaveClass("bx--loading-overlay--stop");
+  expect(element.querySelector(".bx--loading__stroke")).toHaveAttribute(
+    "r",
+    "37.5"
+  );
 
   rerender({ props: { active: false, small: true, withOverlay: false } });
 
-  element = container.querySelector('.bx--loading');
-  expect(element).toHaveClass('bx--loading--small', 'bx--loading--stop');
-  expect(element.querySelector('.bx--loading__background')).toHaveAttribute('r', '26.8125');
+  element = container.querySelector(".bx--loading");
+  expect(element).toHaveClass("bx--loading--small", "bx--loading--stop");
+  expect(element.querySelector(".bx--loading__background")).toHaveAttribute(
+    "r",
+    "26.8125"
+  );
 });
diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
index 56132a62..ce0cdf3c 100644
--- a/src/components/Loading/index.js
+++ b/src/components/Loading/index.js
@@ -1,3 +1 @@
-import Loading from './Loading.svelte';
-
-export default Loading;
+export { default as Loading } from "./Loading.svelte";
diff --git a/src/components/Modal/Modal.Story.svelte b/src/components/Modal/Modal.Story.svelte
index 5802b7b9..d3b974a4 100644
--- a/src/components/Modal/Modal.Story.svelte
+++ b/src/components/Modal/Modal.Story.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Button from '../Button';
-  import Modal from './Modal.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Button } from "../Button";
+  import Modal from "./Modal.svelte";
 
   let open = $$props.open;
 </script>
@@ -20,6 +20,7 @@
     bind:open
     on:click:button--secondary={() => {
       console.log('click button secondary');
+      open = false;
     }}
     on:open={() => {
       console.log('open');
@@ -31,51 +32,58 @@
       console.log('submit');
     }}>
     <p>
-      This component supports two-way binding by default. Please see ComposedModal for piecemeal
-      functionality.
+      This component supports two-way binding by default. Please see
+      ComposedModal for piecemeal functionality.
     </p>
     {#if $$props.hasScrollingContent}
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
-        consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
-        iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+        accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+        posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+        condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
         Quisque consectetur non risus eu rutrum.{' '}
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
-        consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
-        iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+        accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+        posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+        condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
         Quisque consectetur non risus eu rutrum.{' '}
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
-        consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
-        iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+        accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+        posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+        condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
         Quisque consectetur non risus eu rutrum.{' '}
       </p>
       <h3>Lorem ipsum</h3>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
-        consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
-        iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+        accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+        posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+        condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
         Quisque consectetur non risus eu rutrum.{' '}
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
-        consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
-        iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+        accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+        posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+        condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
         Quisque consectetur non risus eu rutrum.{' '}
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
-        consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
-        iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+        accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+        posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+        condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
         Quisque consectetur non risus eu rutrum.{' '}
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus
-        consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit
-        iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+        accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+        posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+        condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
         Quisque consectetur non risus eu rutrum.{' '}
       </p>
     {/if}
diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index 4cf74c9c..ae668a7f 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -1,37 +1,52 @@
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
-import Component from './Modal.Story.svelte';
+import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
+import Component from "./Modal.Story.svelte";
 
-export default { title: 'Modal', decorators: [withKnobs] };
+export default { title: "Modal", decorators: [withKnobs] };
 
 const sizes = {
-  Default: '',
-  'Extra small (xs)': 'xs',
-  'Small (sm)': 'sm',
-  'Large (lg)': 'lg'
+  Default: "",
+  "Extra small (xs)": "xs",
+  "Small (sm)": "sm",
+  "Large (lg)": "lg",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    open: boolean('Open (open)', true),
-    passiveModal: boolean('Without footer (passiveModal)', false),
-    danger: boolean('Danger mode (danger)', false),
-    shouldSubmitOnEnter: boolean('Enter key to submit (shouldSubmitOnEnter)', false),
-    focusTrap: boolean('Trap focus (focusTrap)', false),
-    hasScrollingContent: boolean('Modal contains scrollable content (hasScrollingContent)', false),
-    modalHeading: text('Modal heading (modalHeading)', 'Modal heading'),
-    modalLabel: text('Optional label (modalLabel)', 'Label'),
+    open: boolean("Open (open)", true),
+    passiveModal: boolean("Without footer (passiveModal)", false),
+    danger: boolean("Danger mode (danger)", false),
+    shouldSubmitOnEnter: boolean(
+      "Enter key to submit (shouldSubmitOnEnter)",
+      false
+    ),
+    focusTrap: boolean("Trap focus (focusTrap)", false),
+    hasScrollingContent: boolean(
+      "Modal contains scrollable content (hasScrollingContent)",
+      false
+    ),
+    modalHeading: text("Modal heading (modalHeading)", "Modal heading"),
+    modalLabel: text("Optional label (modalLabel)", "Label"),
     modalAriaLabel: text(
-      'ARIA label, used only if modalLabel not provided (modalAriaLabel)',
-      'A label to be read by screen readers on the modal root node'
+      "ARIA label, used only if modalLabel not provided (modalAriaLabel)",
+      "A label to be read by screen readers on the modal root node"
+    ),
+    primaryButtonText: text(
+      "Primary button text (primaryButtonText)",
+      "Primary Button"
+    ),
+    secondaryButtonText: text(
+      "Secondary button text (secondaryButtonText)",
+      "Secondary Button"
     ),
-    primaryButtonText: text('Primary button text (primaryButtonText)', 'Primary Button'),
-    secondaryButtonText: text('Secondary button text (secondaryButtonText)', 'Secondary Button'),
     selectorPrimaryFocus: text(
-      'Primary focus element selector (selectorPrimaryFocus)',
-      '[data-modal-primary-focus]'
+      "Primary focus element selector (selectorPrimaryFocus)",
+      "[data-modal-primary-focus]"
     ),
-    size: select('Size (size)', sizes),
-    iconDescription: text('Close icon description (iconDescription)', 'Close the modal')
-  }
+    size: select("Size (size)", sizes),
+    iconDescription: text(
+      "Close icon description (iconDescription)",
+      "Close the modal"
+    ),
+  },
 });
diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte
index 5f689b10..48844caf 100644
--- a/src/components/Modal/Modal.svelte
+++ b/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={() => {
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
index 542af275..5ddd0fee 100644
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
@@ -1,3 +1 @@
-import Modal from './Modal.svelte';
-
-export default Modal;
+export { default as Modal } from "./Modal.svelte";
diff --git a/src/components/MultiSelect/MultiSelect.Story.svelte b/src/components/MultiSelect/MultiSelect.Story.svelte
index e7795678..c3311f90 100644
--- a/src/components/MultiSelect/MultiSelect.Story.svelte
+++ b/src/components/MultiSelect/MultiSelect.Story.svelte
@@ -1,22 +1,21 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Button from '../Button';
-  import MultiSelect from './MultiSelect.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Button } from "../Button";
+  import MultiSelect from "./MultiSelect.svelte";
 
-  let value = '';
-
-  let items = [
-    { id: 'option-0', text: 'Option 1' },
-    { id: 'option-1', text: 'Option 2' },
-    { id: 'option-2', text: 'Option 3' },
-    { id: 'option-3', text: 'Option 4' },
+  $: value = "";
+  $: selectedIds = [];
+  $: items = [
+    { id: "option-0", text: "Option 1" },
+    { id: "option-1", text: "Option 2" },
+    { id: "option-2", text: "Option 3" },
+    { id: "option-3", text: "Option 4" },
     {
-      id: 'option-4',
-      text: 'An example option that is really long to show what should be done to handle long text'
+      id: "option-4",
+      text:
+        "An example option that is really long to show what should be done to handle long text"
     }
   ];
-
-  let selectedIds = [];
 </script>
 
 <Layout>
diff --git a/src/components/MultiSelect/MultiSelect.stories.js b/src/components/MultiSelect/MultiSelect.stories.js
index fc2decbd..c67b119c 100644
--- a/src/components/MultiSelect/MultiSelect.stories.js
+++ b/src/components/MultiSelect/MultiSelect.stories.js
@@ -1,39 +1,42 @@
-import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
-import Component from './MultiSelect.Story.svelte';
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./MultiSelect.Story.svelte";
 
-export default { title: 'MultiSelect', decorators: [withKnobs] };
+export default { title: "MultiSelect", decorators: [withKnobs] };
 
 const types = {
-  'Default (default)': 'default',
-  'Inline (inline)': 'inline'
+  "Default (default)": "default",
+  "Inline (inline)": "inline",
 };
 
 const sizes = {
-  'Extra large size (xl)': 'xl',
-  'Regular size (lg)': '',
-  'Small size (sm)': 'sm'
+  "Extra large size (xl)": "xl",
+  "Regular size (lg)": "",
+  "Small size (sm)": "sm",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    id: text('MultiSelect id', 'multi-select-id'),
-    name: text('MultiSelect name', 'multi-select-name'),
-    titleText: text('Title (titleText)', 'Multiselect Title'),
-    helperText: text('Helper text (helperText)', 'This is not helper text'),
-    filterable: boolean('Filterable (filterable)', false),
+    id: text("MultiSelect id", "multi-select-id"),
+    name: text("MultiSelect name", "multi-select-name"),
+    titleText: text("Title (titleText)", "Multiselect Title"),
+    helperText: text("Helper text (helperText)", "This is not helper text"),
+    filterable: boolean("Filterable (filterable)", false),
     selectionFeedback: select(
-      'Selection feedback (selectionFeedback)',
-      ['top', 'fixed', 'top-after-reopen'],
-      'top-after-reopen'
+      "Selection feedback (selectionFeedback)",
+      ["top", "fixed", "top-after-reopen"],
+      "top-after-reopen"
     ),
-    disabled: boolean('Disabled (disabled)', false),
-    light: boolean('Light variant (light)', false),
-    useTitleInItem: boolean('Show tooltip on hover', false),
-    type: select('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
-    size: select('Field size (size)', sizes, '') || undefined,
-    label: text('Label (label)', 'MultiSelect Label'),
-    invalid: boolean('Show form validation UI (invalid)', false),
-    invalidText: text('Form validation UI content (invalidText)', 'Invalid Selection')
-  }
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    useTitleInItem: boolean("Show tooltip on hover", false),
+    type: select("UI type (Only for `<MultiSelect>`) (type)", types, "default"),
+    size: select("Field size (size)", sizes, "") || undefined,
+    label: text("Label (label)", "MultiSelect Label"),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Form validation UI content (invalidText)",
+      "Invalid Selection"
+    ),
+  },
 });
diff --git a/src/components/MultiSelect/MultiSelect.svelte b/src/components/MultiSelect/MultiSelect.svelte
index 137f3e66..27e4cbfd 100644
--- a/src/components/MultiSelect/MultiSelect.svelte
+++ b/src/components/MultiSelect/MultiSelect.svelte
@@ -1,60 +1,61 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let size = undefined; // "sm" | "lg" | "xl"
+  export let type = "default"; // "default" | "inline"
+  export let selectionFeedback = "top-after-reopen"; // "top" | "fixed" | "top-after-reopen"
   export let disabled = false;
   export let filterable = false;
-  export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
-  export let helperText = '';
-  export let id = Math.random();
+  export let filterItem = (item, value) =>
+    item.text.toLowerCase().includes(value.toLowerCase());
+  export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;
-  export let invalidText = '';
+  export let invalidText = "";
+  export let helperText = "";
   export let items = [];
   export let itemToString = item => item.text || item.id;
-  export let label = '';
+  export let label = "";
   export let light = false;
-  export let locale = 'en';
+  export let locale = "en";
   export let open = false;
-  export let placeholder = '';
+  export let placeholder = "";
   export let selectedIds = [];
-  export let selectionFeedback = 'top-after-reopen';
-  export let size = undefined;
-  export let sortItem = (a, b) => a.text.localeCompare(b.text, locale, { numeric: true });
-  export let style = undefined;
-  export let titleText = '';
+  export let sortItem = (a, b) =>
+    a.text.localeCompare(b.text, locale, { numeric: true });
+  export let titleText = "";
   export let translateWithId = undefined;
-  export let type = 'default';
-  export let useTitleInItem = false;
-  export let value = '';
 
-  import { afterUpdate, setContext } from 'svelte';
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
-  import Checkbox from '../Checkbox';
-  import ListBox, {
+  export let useTitleInItem = false;
+  export let value = "";
+
+  import { afterUpdate, setContext } from "svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import { Checkbox } from "../Checkbox";
+  import {
+    ListBox,
     ListBoxField,
     ListBoxMenu,
     ListBoxMenuIcon,
     ListBoxMenuItem,
     ListBoxSelection
-  } from '../ListBox';
+  } from "../ListBox";
 
-  let multiSelectRef = undefined;
-  let fieldRef = undefined;
-  let selectionRef = undefined;
-  let inputRef = undefined;
-  let inputValue = '';
-  let initialSorted = false;
-  let highlightedIndex = -1;
-  let prevChecked = [];
+  let multiSelectRef = null;
+  let fieldRef = null;
+  let selectionRef = null;
+  let inputRef = null;
 
-  setContext('MultiSelect', {
+  $: inputValue = "";
+  $: initialSorted = false;
+  $: highlightedIndex = -1;
+  $: prevChecked = [];
+
+  setContext("MultiSelect", {
     declareRef: ({ key, ref }) => {
       switch (key) {
-        case 'field':
+        case "field":
           fieldRef = ref;
           break;
-        case 'selection':
+        case "selection":
           selectionRef = ref;
           break;
       }
@@ -82,7 +83,7 @@
 
   afterUpdate(() => {
     if (checked.length !== prevChecked.length) {
-      if (selectionFeedback === 'top') {
+      if (selectionFeedback === "top") {
         sortedItems = sort();
       }
       prevChecked = checked;
@@ -90,26 +91,31 @@
     }
 
     if (!open) {
-      if (!initialSorted || selectionFeedback !== 'fixed') {
+      if (!initialSorted || selectionFeedback !== "fixed") {
         sortedItems = sort();
         initialSorted = true;
       }
 
       highlightedIndex = -1;
-      inputValue = '';
+      inputValue = "";
     }
 
     items = sortedItems;
   });
 
   $: menuId = `menu-${id}`;
-  $: inline = type === 'inline';
-  $: ariaLabel = $$props['aria-label'] || 'Choose an item';
-  $: sortedItems = items.map(item => ({ ...item, checked: selectedIds.includes(item.id) }));
+  $: inline = type === "inline";
+  $: ariaLabel = $$props["aria-label"] || "Choose an item";
+  $: sortedItems = items.map(item => ({
+    ...item,
+    checked: selectedIds.includes(item.id)
+  }));
   $: checked = sortedItems.filter(({ checked }) => checked);
   $: unchecked = sortedItems.filter(({ checked }) => !checked);
   $: filteredItems = sortedItems.filter(item => filterItem(item, value));
-  $: highlightedId = sortedItems[highlightedIndex] ? sortedItems[highlightedIndex].id : undefined;
+  $: highlightedId = sortedItems[highlightedIndex]
+    ? sortedItems[highlightedIndex].id
+    : undefined;
   $: value = inputValue;
 </script>
 
@@ -122,28 +128,40 @@
 
 <div
   bind:this={multiSelectRef}
-  class={cx('--multi-select__wrapper', '--list-box__wrapper', inline && '--multi-select__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--multi-select__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
-  {style}>
+  class:bx--multi-select__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--multi-select__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--multi-select__wrapper--inline--invalid={inline && invalid}
+  {...$$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 !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}
   <ListBox
     aria-label={ariaLabel}
-    class={cx('--multi-select', filterable && '--combo-box', filterable && '--multi-select--filterable', invalid && '--multi-select--invalid', inline && '--multi-select--inline', checked.length > 0 && '--multi-select--selected')}
     {id}
     {disabled}
     {invalid}
     {invalidText}
     {open}
     {light}
-    {size}>
+    {size}
+    class="bx--multi-select {filterable && 'bx--combo-box'}
+    {filterable && 'bx--multi-select--filterable'}
+    {invalid && 'bx--multi-select--invalid'}
+    {inline && 'bx--multi-select--inline'}
+    {checked.length > 0 && 'bx--multi-select--selected'}">
     {#if invalid}
-      <WarningFilled16 class={cx('--list-box__invalid-icon')} />
+      <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}
     <ListBoxField
       role="button"
@@ -192,7 +210,10 @@
         <ListBoxSelection
           selectionCount={checked.length}
           on:clear={() => {
-            sortedItems = sortedItems.map(item => ({ ...item, checked: false }));
+            sortedItems = sortedItems.map(item => ({
+              ...item,
+              checked: false
+            }));
             fieldRef.blur();
           }}
           {translateWithId}
@@ -209,7 +230,8 @@
           aria-activedescendant={highlightedId}
           aria-disabled={disabled}
           aria-controls={menuId}
-          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;
           }}
@@ -240,7 +262,7 @@
           {name}
           value={inputValue} />
         {#if invalid}
-          <WarningFilled16 class={cx('--list-box__invalid-icon')} />
+          <WarningFilled16 class="bx--list-box__invalid-icon" />
         {/if}
         {#if inputValue}
           <ListBoxSelection
@@ -260,7 +282,7 @@
           {open} />
       {/if}
       {#if !filterable}
-        <span class={cx('--list-box__label')}>{label}</span>
+        <span class="bx--list-box__label">{label}</span>
         <ListBoxMenuIcon {open} {translateWithId} />
       {/if}
     </ListBoxField>
@@ -283,7 +305,7 @@
             <Checkbox
               readonly
               tabindex="-1"
-              id={`checkbox-${item.id}`}
+              id="checkbox-{item.id}"
               title={useTitleInItem ? itemToString(item) : undefined}
               name={itemToString(item)}
               labelText={itemToString(item)}
diff --git a/src/components/MultiSelect/index.js b/src/components/MultiSelect/index.js
index 5164a2b4..d695b217 100644
--- a/src/components/MultiSelect/index.js
+++ b/src/components/MultiSelect/index.js
@@ -1,3 +1 @@
-import MultiSelect from './MultiSelect.svelte';
-
-export default MultiSelect;
+export { default as MultiSelect } from "./MultiSelect.svelte";
diff --git a/src/components/Notification/InlineNotification.svelte b/src/components/Notification/InlineNotification.svelte
index 53971659..5ce91602 100644
--- a/src/components/Notification/InlineNotification.svelte
+++ b/src/components/Notification/InlineNotification.svelte
@@ -1,42 +1,37 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let hideCloseButton = false;
-  export let iconDescription = 'closes notification';
-  export let kind = 'error';
+  export let notificationType = "inline";
+  export let kind = "error"; // "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"
+  export let role = "alert";
+  export let title = "provide a title";
+  export let subtitle = "";
+  export let iconDescription = "closes notification";
   export let lowContrast = false;
-  export let notificationType = 'inline';
-  export let role = 'alert';
-  export let style = undefined;
-  export let subtitle = ''; // TODO: support subtitle slot?
-  export let title = 'provide a title';
+  export let hideCloseButton = false;
 
-  import { createEventDispatcher } from 'svelte';
-  import NotificationIcon from './NotificationIcon.svelte';
-  import NotificationTextDetails from './NotificationTextDetails.svelte';
-  import NotificationButton from './NotificationButton.svelte';
-  import { cx } from '../../lib';
+  import { createEventDispatcher } from "svelte";
+  import NotificationIcon from "./NotificationIcon.svelte";
+  import NotificationTextDetails from "./NotificationTextDetails.svelte";
+  import NotificationButton from "./NotificationButton.svelte";
 
   const dispatch = createEventDispatcher();
 
-  let open = true;
-
-  $: if (!open) {
-    dispatch('close');
-  }
+  $: open = true;
 </script>
 
 {#if open}
   <div
+    {role}
+    {kind}
+    class:bx--inline-notification={true}
+    class:bx--inline-notification--low-contrast={lowContrast}
+    class:bx--inline-notification--hide-close-button={hideCloseButton}
+    class={kind && `bx--inline-notification--${kind}`}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--inline-notification', lowContrast && '--inline-notification--low-contrast', kind && `--inline-notification--${kind}`, hideCloseButton && '--inline-notification--hide-close-button', className)}
-    {style}
-    {role}
-    {kind}>
-    <div class={cx('--inline-notification__details')}>
+    on:mouseleave>
+    <div class:bx--inline-notification__details={true}>
       <NotificationIcon {notificationType} {kind} {iconDescription} />
       <NotificationTextDetails {title} {subtitle} {notificationType}>
         <slot />
@@ -49,6 +44,7 @@
         {notificationType}
         on:click={() => {
           open = false;
+          dispatch('close');
         }} />
     {/if}
   </div>
diff --git a/src/components/Notification/Notification.Story.svelte b/src/components/Notification/Notification.Story.svelte
index 0e39f440..c2640910 100644
--- a/src/components/Notification/Notification.Story.svelte
+++ b/src/components/Notification/Notification.Story.svelte
@@ -1,20 +1,29 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import InlineNotification from './InlineNotification.svelte';
-  import NotificationActionButton from './NotificationActionButton.svelte';
-  import ToastNotification from './ToastNotification.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import InlineNotification from "./InlineNotification.svelte";
+  import NotificationActionButton from "./NotificationActionButton.svelte";
+  import ToastNotification from "./ToastNotification.svelte";
 </script>
 
 <Layout>
   {#if story === 'inline'}
-    <InlineNotification {...$$props}>
+    <InlineNotification
+      {...$$props}
+      on:close={() => {
+        console.log('on:close');
+      }}>
       <div slot="actions">
         <NotificationActionButton>{$$props.action}</NotificationActionButton>
       </div>
     </InlineNotification>
   {:else if story === 'toast'}
-    <ToastNotification {...$$props} style="min-width: 30rem; margin-bottom: .5rem" />
+    <ToastNotification
+      {...$$props}
+      on:close={() => {
+        console.log('on:close');
+      }}
+      style="min-width: 30rem; margin-bottom: .5rem" />
   {/if}
 </Layout>
diff --git a/src/components/Notification/Notification.stories.js b/src/components/Notification/Notification.stories.js
index 161cbeb4..63388003 100644
--- a/src/components/Notification/Notification.stories.js
+++ b/src/components/Notification/Notification.stories.js
@@ -1,42 +1,48 @@
-import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
-import Component from './Notification.Story.svelte';
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Notification.Story.svelte";
 
-export default { title: 'Notification', decorators: [withKnobs] };
+export default { title: "Notification", decorators: [withKnobs] };
 
 const kinds = {
-  'Error (error)': 'error',
-  'Info (info)': 'info',
-  'Success (success)': 'success',
-  'Warning (warning)': 'warning'
+  "Error (error)": "error",
+  "Info (info)": "info",
+  "Success (success)": "success",
+  "Warning (warning)": "warning",
 };
 
 export const Toast = () => ({
   Component,
   props: {
-    story: 'toast',
-    kind: select('The notification kind (kind)', kinds, 'info'),
-    lowContrast: boolean('Use low contrast variant (lowContrast)', false),
-    role: text('ARIA role (role)', 'alert'),
-    title: text('Title (title)', 'Notification title'),
-    subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
-    caption: text('Caption (caption)', 'Time stamp [00:00:00]'),
-    iconDescription: text('Icon description (iconDescription)', 'describes the close button'),
-    hideCloseButton: boolean('Hide close button (hideCloseButton)', false)
-  }
+    story: "toast",
+    kind: select("The notification kind (kind)", kinds, "info"),
+    lowContrast: boolean("Use low contrast variant (lowContrast)", false),
+    role: text("ARIA role (role)", "alert"),
+    title: text("Title (title)", "Notification title"),
+    subtitle: text("Subtitle (subtitle)", "Subtitle text goes here."),
+    caption: text("Caption (caption)", "Time stamp [00:00:00]"),
+    iconDescription: text(
+      "Icon description (iconDescription)",
+      "describes the close button"
+    ),
+    hideCloseButton: boolean("Hide close button (hideCloseButton)", false),
+  },
 });
 
 export const Inline = () => ({
   Component,
   props: {
-    story: 'inline',
-    kind: select('The notification kind (kind)', kinds, 'info'),
-    lowContrast: boolean('Use low contrast variant (lowContrast)', false),
-    role: text('ARIA role (role)', 'alert'),
-    title: text('Title (title)', 'Notification title'),
-    subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
-    caption: text('Caption (caption)', 'Time stamp [00:00:00]'),
-    iconDescription: text('Icon description (iconDescription)', 'describes the close button'),
-    hideCloseButton: boolean('Hide close button (hideCloseButton)', false),
-    action: text('Action (NotificationActionButton > $$slot#action)', 'Action')
-  }
+    story: "inline",
+    kind: select("The notification kind (kind)", kinds, "info"),
+    lowContrast: boolean("Use low contrast variant (lowContrast)", false),
+    role: text("ARIA role (role)", "alert"),
+    title: text("Title (title)", "Notification title"),
+    subtitle: text("Subtitle (subtitle)", "Subtitle text goes here."),
+    caption: text("Caption (caption)", "Time stamp [00:00:00]"),
+    iconDescription: text(
+      "Icon description (iconDescription)",
+      "describes the close button"
+    ),
+    hideCloseButton: boolean("Hide close button (hideCloseButton)", false),
+    action: text("Action (NotificationActionButton > $$slot#action)", "Action"),
+  },
 });
diff --git a/src/components/Notification/NotificationActionButton.svelte b/src/components/Notification/NotificationActionButton.svelte
index 97cf9b45..63e9452f 100644
--- a/src/components/Notification/NotificationActionButton.svelte
+++ b/src/components/Notification/NotificationActionButton.svelte
@@ -1,20 +1,15 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-  import Button from '../Button';
+  import { Button } from "../Button";
 </script>
 
 <Button
   kind="ghost"
   size="small"
+  class="bx--inline-notification__action-button"
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--inline-notification__action-button', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </Button>
diff --git a/src/components/Notification/NotificationButton.svelte b/src/components/Notification/NotificationButton.svelte
index 280b1e2d..c9ec5ffb 100644
--- a/src/components/Notification/NotificationButton.svelte
+++ b/src/components/Notification/NotificationButton.svelte
@@ -1,29 +1,27 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let iconDescription = 'close icon';
-  export let notificationType = 'toast';
+  export let notificationType = "toast"; // "toast" | "inline"
+  export let iconDescription = "close icon";
   export let renderIcon = Close20;
-  export let style = undefined;
   export let title = undefined;
-  export let type = 'button';
+  export let type = "button";
 
-  import Close20 from 'carbon-icons-svelte/lib/Close20';
-  import { cx } from '../../lib';
+  import Close20 from "carbon-icons-svelte/lib/Close20";
 </script>
 
 <button
+  aria-label={iconDescription}
+  title={iconDescription}
+  {type}
+  class:bx--toast-notification__close-button={notificationType === 'toast'}
+  class:bx--inline-notification__close-button={notificationType === 'inline'}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  aria-label={iconDescription}
-  title={iconDescription}
-  class={cx(notificationType === 'toast' && '--toast-notification__close-button', notificationType === 'inline' && '--inline-notification__close-button', className)}
-  {style}
-  {type}>
+  on:mouseleave>
   <svelte:component
     this={renderIcon}
-    class={cx(notificationType === 'toast' && '--toast-notification__close-icon', notificationType === 'inline' && '--inline-notification__close-icon')}
-    {title} />
+    {title}
+    class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
+    {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
 </button>
diff --git a/src/components/Notification/NotificationIcon.svelte b/src/components/Notification/NotificationIcon.svelte
index cb97a0ac..220efc47 100644
--- a/src/components/Notification/NotificationIcon.svelte
+++ b/src/components/Notification/NotificationIcon.svelte
@@ -1,21 +1,26 @@
 <script>
-  export let kind = 'error';
-  export let notificationType = 'toast';
-  export let iconDescription = 'closes notification';
+  export let kind = "error";
+  export let notificationType = "toast";
+  export let iconDescription = "closes notification";
 
-  import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
-  import ErrorFilled20 from 'carbon-icons-svelte/lib/ErrorFilled20';
-  import WarningFilled20 from 'carbon-icons-svelte/lib/WarningFilled20';
-  import { cx } from '../../lib';
+  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
+  import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20";
+  import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20";
+  import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20";
+  import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20";
+  import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20";
 
   const icons = {
     error: ErrorFilled20,
+    "info-square": InformationSquareFilled20,
+    info: InformationFilled20,
     success: CheckmarkFilled20,
-    warning: WarningFilled20
+    warning: WarningFilled20,
+    "warning-alt": WarningAltFilled20
   };
 </script>
 
 <svelte:component
   this={icons[kind]}
-  class={cx(`--${notificationType}-notification__icon`)}
-  title={iconDescription} />
+  title={iconDescription}
+  class="bx--{notificationType}-notification__icon" />
diff --git a/src/components/Notification/NotificationTextDetails.svelte b/src/components/Notification/NotificationTextDetails.svelte
index 2c7dd5fa..31162d05 100644
--- a/src/components/Notification/NotificationTextDetails.svelte
+++ b/src/components/Notification/NotificationTextDetails.svelte
@@ -1,25 +1,23 @@
 <script>
-  export let caption = 'caption';
-  export let notificationType = 'toast';
-  export let subtitle = '';
-  export let title = 'title';
-
-  import { cx } from '../../lib';
+  export let notificationType = "toast"; // "toast" | "inline"
+  export let title = "title";
+  export let subtitle = "";
+  export let caption = "caption";
 </script>
 
 {#if notificationType === 'toast'}
-  <div class={cx('--toast-notification__details')}>
-    <h3 class={cx('--toast-notification__title')}>{title}</h3>
-    <div class={cx('--toast-notification__subtitle')}>{subtitle}</div>
-    <div class={cx('--toast-notification__caption')}>{caption}</div>
+  <div class:bx--toast-notification__details={true}>
+    <h3 class:bx--toast-notification__title={true}>{title}</h3>
+    <div class:bx--toast-notification__subtitle={true}>{subtitle}</div>
+    <div class:bx--toast-notification__caption={true}>{caption}</div>
     <slot />
   </div>
 {/if}
 
 {#if notificationType === 'inline'}
-  <div class={cx('--inline-notification__text-wrapper')}>
-    <p class={cx('--inline-notification__title')}>{title}</p>
-    <div class={cx('--inline-notification__subtitle')}>{subtitle}</div>
+  <div class:bx--inline-notification__text-wrapper={true}>
+    <p class:bx--inline-notification__title={true}>{title}</p>
+    <div class:bx--inline-notification__subtitle={true}>{subtitle}</div>
     <slot />
   </div>
 {/if}
diff --git a/src/components/Notification/ToastNotification.svelte b/src/components/Notification/ToastNotification.svelte
index b88bd329..d40da068 100644
--- a/src/components/Notification/ToastNotification.svelte
+++ b/src/components/Notification/ToastNotification.svelte
@@ -1,28 +1,24 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let caption = 'provide a caption';
+  export let iconDescription = "closes notification";
+  export let notificationType = "toast"; // "toast" | "inline"
+  export let kind = "error";
   export let hideCloseButton = false;
-  export let iconDescription = 'closes notification';
-  export let kind = 'error';
   export let lowContrast = false;
-  export let notificationType = 'toast';
-  export let role = 'alert';
-  export let style = undefined;
-  export let subtitle = ''; // TODO: support subtitle slot?
   export let timeout = 0;
-  export let title = 'provide a title';
+  export let role = "alert";
+  export let title = "provide a title";
+  export let subtitle = "";
+  export let caption = "provide a caption";
 
-  import { createEventDispatcher, onMount } from 'svelte';
-  import NotificationButton from './NotificationButton.svelte';
-  import NotificationIcon from './NotificationIcon.svelte';
-  import NotificationTextDetails from './NotificationTextDetails.svelte';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, onMount } from "svelte";
+  import NotificationButton from "./NotificationButton.svelte";
+  import NotificationIcon from "./NotificationIcon.svelte";
+  import NotificationTextDetails from "./NotificationTextDetails.svelte";
 
   const dispatch = createEventDispatcher();
 
-  let timeoutId = undefined;
-  let open = true;
+  $: open = true;
+  $: timeoutId = undefined;
 
   onMount(() => {
     if (timeout) {
@@ -36,33 +32,32 @@
       timeoutId = undefined;
     };
   });
-
-  $: if (!open) {
-    dispatch('close');
-  }
 </script>
 
 {#if open}
   <div
+    {role}
+    {kind}
+    class:bx--toast-notification={true}
+    class:bx--toast-notification--low-contrast={lowContrast}
+    class={kind && `bx--toast-notification--${kind}`}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--toast-notification', lowContrast && '--toast-notification--low-contrast', kind && `--toast-notification--${kind}`, className)}
-    {style}
-    {role}
-    {kind}>
+    on:mouseleave>
     <NotificationIcon {notificationType} {kind} {iconDescription} />
     <NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
       <slot />
     </NotificationTextDetails>
     {#if !hideCloseButton}
       <NotificationButton
+        {iconDescription}
+        {notificationType}
         on:click={() => {
           open = false;
-        }}
-        {iconDescription}
-        {notificationType} />
+          dispatch('close');
+        }} />
     {/if}
   </div>
 {/if}
diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js
index 07b463b9..ad3c5e5b 100644
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@@ -1,6 +1,6 @@
-export { default as ToastNotification } from './ToastNotification.svelte';
-export { default as InlineNotification } from './InlineNotification.svelte';
-export { default as NotificationActionButton } from './NotificationActionButton.svelte';
-export { default as NotificationButton } from './NotificationButton.svelte';
-export { default as NotificationIcon } from './NotificationIcon.svelte';
-export { default as NotificationTextDetails } from './NotificationTextDetails.svelte';
+export { default as ToastNotification } from "./ToastNotification.svelte";
+export { default as InlineNotification } from "./InlineNotification.svelte";
+export { default as NotificationActionButton } from "./NotificationActionButton.svelte";
+export { default as NotificationButton } from "./NotificationButton.svelte";
+export { default as NotificationIcon } from "./NotificationIcon.svelte";
+export { default as NotificationTextDetails } from "./NotificationTextDetails.svelte";
diff --git a/src/components/NumberInput/NumberInput.Skeleton.svelte b/src/components/NumberInput/NumberInput.Skeleton.svelte
index 3a0fc21c..e7d45b27 100644
--- a/src/components/NumberInput/NumberInput.Skeleton.svelte
+++ b/src/components/NumberInput/NumberInput.Skeleton.svelte
@@ -1,15 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let hideLabel = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   {#if !hideLabel}
-    <span class={cx('--label', '--skeleton')} />
+    <span class:bx--label={true} class:bx--skeleton={true} />
   {/if}
-  <div class={cx('--number', '--skeleton')} />
+  <div class:bx--number={true} class:bx--skeleton={true} />
 </div>
diff --git a/src/components/NumberInput/NumberInput.Story.svelte b/src/components/NumberInput/NumberInput.Story.svelte
index 3acbf769..5821faa2 100644
--- a/src/components/NumberInput/NumberInput.Story.svelte
+++ b/src/components/NumberInput/NumberInput.Story.svelte
@@ -1,11 +1,11 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import NumberInput from './NumberInput.svelte';
-  import NumberInputSkeleton from './NumberInput.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import NumberInput from "./NumberInput.svelte";
+  import NumberInputSkeleton from "./NumberInput.Skeleton.svelte";
 
-  let value = $$props.value;
+  $: value = $$props.value;
 </script>
 
 <Layout>
diff --git a/src/components/NumberInput/NumberInput.stories.js b/src/components/NumberInput/NumberInput.stories.js
index 6e7893c7..424eefda 100644
--- a/src/components/NumberInput/NumberInput.stories.js
+++ b/src/components/NumberInput/NumberInput.stories.js
@@ -1,33 +1,35 @@
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
-import Component from './NumberInput.Story.svelte';
+import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
+import Component from "./NumberInput.Story.svelte";
 
-export default { title: 'NumberInput', decorators: [withKnobs] };
+export default { title: "NumberInput", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    id: text('NumberInput id', 'number-input-id'),
-    name: text('NumberInput name', 'number-input-name'),
-    label: text('Label (label)', 'Number Input label'),
-    hideLabel: boolean('Hide label (hideLabel)', false),
-    min: number('Minimum value (min)', 0),
-    max: number('Maximum value (max)', 100),
-    value: number('Value (value)', 50),
-    step: number('Step of up/down arrow (step)', 10),
-    disabled: boolean('Disabled (disabled)', false),
-    readonly: boolean('Read only (readonly)', false),
-    invalid: boolean('Show form validation UI (invalid)', false),
-    mobile: boolean('Mobile variant (mobile)', false),
-    invalidText: text('Form validation UI content (invalidText)', 'Number is not valid'),
-    helperText: text('Helper text (helperText)', 'Optional helper text.'),
-    light: boolean('Light variant (light)', false)
-  }
+    id: text("NumberInput id", "number-input-id"),
+    name: text("NumberInput name", "number-input-name"),
+    label: text("Label (label)", "Number Input label"),
+    hideLabel: boolean("Hide label (hideLabel)", false),
+    min: number("Minimum value (min)", 0),
+    max: number("Maximum value (max)", 100),
+    value: number("Value (value)", 50),
+    step: number("Step of up/down arrow (step)", 10),
+    disabled: boolean("Disabled (disabled)", false),
+    readonly: boolean("Read only (readonly)", false),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    mobile: boolean("Mobile variant (mobile)", false),
+    invalidText: text(
+      "Form validation UI content (invalidText)",
+      "Number is not valid"
+    ),
+    light: boolean("Light variant (light)", false),
+  },
 });
 
 export const Skeleton = () => ({
   Component,
   props: {
-    story: 'skeleton',
-    hideLabel: boolean('Hide label (hideLabel)', false)
-  }
+    story: "skeleton",
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
 });
diff --git a/src/components/NumberInput/NumberInput.svelte b/src/components/NumberInput/NumberInput.svelte
index 260a43ec..21aea508 100644
--- a/src/components/NumberInput/NumberInput.svelte
+++ b/src/components/NumberInput/NumberInput.svelte
@@ -1,36 +1,36 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export const translationIds = { increment: 'increment', decrement: 'decrement' };
-  export let allowEmpty = false;
-  export let disabled = false;
-  export let helperText = '';
-  export let hideLabel = false;
-  export let iconDescription = '';
-  export let id = Math.random();
-  export let name = undefined;
-  export let invalid = false;
-  export let invalidText = 'Provide invalidText';
-  export let mobile = false;
-  export let label = '';
-  export let light = false;
+  export let value = "";
+  export let step = 1;
   export let max = undefined;
   export let min = undefined;
+  export let light = false;
   export let readonly = false;
-  export let step = 1;
-  export let style = undefined;
+  export let mobile = false;
+  export let allowEmpty = false;
+  export let disabled = false;
+  export let iconDescription = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let invalid = false;
+  export let invalidText = "Provide invalidText";
+  export let helperText = "";
+  export let label = "";
+  export let hideLabel = false;
+  export let ref = null;
   export let translateWithId = id => defaultTranslations[id];
-  export let value = '';
+  export const translationIds = {
+    increment: "increment",
+    decrement: "decrement"
+  };
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
-  import CaretDownGlyph from 'carbon-icons-svelte/lib/CaretDownGlyph';
-  import CaretUpGlyph from 'carbon-icons-svelte/lib/CaretUpGlyph';
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, afterUpdate } from "svelte";
+  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
+  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
 
   const defaultTranslations = {
-    [translationIds.increment]: 'Increment number',
-    [translationIds.decrement]: 'Decrement number'
+    [translationIds.increment]: "Increment number",
+    [translationIds.decrement]: "Decrement number"
   };
 
   const dispatch = createEventDispatcher();
@@ -48,39 +48,56 @@
   }
 
   afterUpdate(() => {
-    dispatch('change', value);
+    dispatch("change", value);
   });
 
-  $: incrementLabel = translateWithId('increment');
-  $: decrementLabel = translateWithId('decrement');
+  $: incrementLabel = translateWithId("increment");
+  $: decrementLabel = translateWithId("decrement");
   $: value = Number(value);
-  $: error = invalid || (!allowEmpty && value === '') || value > max || value < min;
+  $: error =
+    invalid || (!allowEmpty && value === "") || value > max || value < min;
   $: errorId = `error-${id}`;
   $: ariaLabel =
-    $$props['aria-label'] || 'Numeric input field with increment and decrement buttons';
+    $$props["aria-label"] ||
+    "Numeric input field with increment and decrement buttons";
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <div
     data-invalid={error || undefined}
-    class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', mobile && '--number--mobile')}>
+    class:bx--number={true}
+    class:bx--number--helpertext={true}
+    class:bx--number--readonly={readonly}
+    class:bx--number--light={light}
+    class:bx--number--nolabel={hideLabel}
+    class:bx--number--mobile={mobile}>
     {#if mobile}
       {#if label}
-        <label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
+        <label
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}>
           <slot name="label">{label}</slot>
         </label>
       {/if}
       {#if helperText}
-        <div class={cx('--form__helper-text')}>{helperText}</div>
+        <div class:bx--form__helper-text={true}>{helperText}</div>
       {/if}
-      <div class={cx('--number__input-wrapper')}>
+      <div class:bx--number__input-wrapper={true}>
         <button
           type="button"
           aria-live="polite"
           aria-atomic="true"
           title={decrementLabel}
           aria-label={decrementLabel || iconDescription}
-          class={cx('--number__control-btn', 'down-icon')}
+          class:bx--number__control-btn={true}
+          class:down-icon={true}
           on:click={() => {
             updateValue(-1);
           }}
@@ -88,6 +105,7 @@
           <CaretDownGlyph class="down-icon" />
         </button>
         <input
+          bind:this={ref}
           type="number"
           pattern="[0-9]*"
           aria-label={label ? undefined : ariaLabel}
@@ -109,7 +127,8 @@
           aria-atomic="true"
           title={incrementLabel}
           aria-label={incrementLabel || iconDescription}
-          class={cx('--number__control-btn', 'up-icon')}
+          class:bx--number__control-btn={true}
+          class:up-icon={true}
           on:click={() => {
             updateValue(1);
           }}
@@ -119,15 +138,19 @@
       </div>
     {:else}
       {#if label}
-        <label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
+        <label
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}>
           <slot name="label">{label}</slot>
         </label>
       {/if}
       {#if helperText}
-        <div class={cx('--form__helper-text')}>{helperText}</div>
+        <div class:bx--form__helper-text={true}>{helperText}</div>
       {/if}
-      <div class={cx('--number__input-wrapper')}>
+      <div class:bx--number__input-wrapper={true}>
         <input
+          bind:this={ref}
           type="number"
           pattern="[0-9]*"
           aria-describedby={errorId}
@@ -146,16 +169,17 @@
           {value}
           {readonly} />
         {#if invalid}
-          <WarningFilled16 class={cx('--number__invalid')} />
+          <WarningFilled16 class="bx--number__invalid" />
         {/if}
-        <div class={cx('--number__controls')}>
+        <div class:bx--number__controls={true}>
           <button
             type="button"
             aria-live="polite"
             aria-atomic="true"
             title={incrementLabel || iconDescription}
             aria-label={incrementLabel || iconDescription}
-            class={cx('--number__control-btn', 'up-icon')}
+            class:bx--number__control-btn={true}
+            class:up-icon={true}
             on:click={() => {
               updateValue(1);
             }}
@@ -168,7 +192,8 @@
             aria-atomic="true"
             title={decrementLabel || iconDescription}
             aria-label={decrementLabel || iconDescription}
-            class={cx('--number__control-btn', 'down-icon')}
+            class:bx--number__control-btn={true}
+            class:down-icon={true}
             on:click={() => {
               updateValue(-1);
             }}
@@ -179,7 +204,7 @@
       </div>
     {/if}
     {#if error}
-      <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+      <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
     {/if}
   </div>
 </div>
diff --git a/src/components/NumberInput/index.js b/src/components/NumberInput/index.js
index c1ec6fdc..af304831 100644
--- a/src/components/NumberInput/index.js
+++ b/src/components/NumberInput/index.js
@@ -1,4 +1,2 @@
-import NumberInput from './NumberInput.svelte';
-
-export default NumberInput;
-export { default as NumberInputSkeleton } from './NumberInput.Skeleton.svelte';
+export { default as NumberInput } from "./NumberInput.svelte";
+export { default as NumberInputSkeleton } from "./NumberInput.Skeleton.svelte";
diff --git a/src/components/OrderedList/OrderedList.Story.svelte b/src/components/OrderedList/OrderedList.Story.svelte
index 73a1ada1..a083880b 100644
--- a/src/components/OrderedList/OrderedList.Story.svelte
+++ b/src/components/OrderedList/OrderedList.Story.svelte
@@ -1,9 +1,9 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import ListItem from '../ListItem';
-  import OrderedList from './OrderedList.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { ListItem } from "../ListItem";
+  import OrderedList from "./OrderedList.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/OrderedList/OrderedList.stories.js b/src/components/OrderedList/OrderedList.stories.js
index c45f6c9c..8dc8b49f 100644
--- a/src/components/OrderedList/OrderedList.stories.js
+++ b/src/components/OrderedList/OrderedList.stories.js
@@ -1,8 +1,8 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import Component from './OrderedList.Story.svelte';
+import { withKnobs } from "@storybook/addon-knobs";
+import Component from "./OrderedList.Story.svelte";
 
-export default { title: 'OrderedList', decorators: [withKnobs] };
+export default { title: "OrderedList", decorators: [withKnobs] };
 
 export const Default = () => ({ Component });
 
-export const Nested = () => ({ Component, props: { story: 'nested' } });
+export const Nested = () => ({ Component, props: { story: "nested" } });
diff --git a/src/components/OrderedList/OrderedList.svelte b/src/components/OrderedList/OrderedList.svelte
index d8db2eb8..023ef81a 100644
--- a/src/components/OrderedList/OrderedList.svelte
+++ b/src/components/OrderedList/OrderedList.svelte
@@ -1,18 +1,14 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let nested = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <ol
+  class:bx--list--ordered={true}
+  class:bx--list--nested={nested}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--list--ordered', nested && '--list--nested', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </ol>
diff --git a/src/components/OrderedList/index.js b/src/components/OrderedList/index.js
index 8a516062..60d3cc83 100644
--- a/src/components/OrderedList/index.js
+++ b/src/components/OrderedList/index.js
@@ -1,3 +1 @@
-import OrderedList from './OrderedList.svelte';
-
-export default OrderedList;
+export { default as OrderedList } from "./OrderedList.svelte";
diff --git a/src/components/OverflowMenu/OverflowMenu.Story.svelte b/src/components/OverflowMenu/OverflowMenu.Story.svelte
index e8d3b7f5..d0025a23 100644
--- a/src/components/OverflowMenu/OverflowMenu.Story.svelte
+++ b/src/components/OverflowMenu/OverflowMenu.Story.svelte
@@ -1,11 +1,11 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import OverflowMenu from './OverflowMenu.svelte';
-  import OverflowMenuItem from './OverflowMenuItem.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import OverflowMenu from "./OverflowMenu.svelte";
+  import OverflowMenuItem from "./OverflowMenuItem.svelte";
 
-  let primaryFocus = true;
+  $: primaryFocus = true;
 </script>
 
 <Layout>
@@ -24,10 +24,18 @@
         <OverflowMenuItem
           {...$$props.menuItem}
           href="https://ibm.com"
-          text="Option 2 is an example of a really long string and how we recommend handling this"
+          text="Option 2 is an example of a really long string and how we
+          recommend handling this"
           requireTitle />
-        <OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 3" disabled />
-        <OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 4" />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          href="https://ibm.com"
+          text="Option 3"
+          disabled />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          href="https://ibm.com"
+          text="Option 4" />
         <OverflowMenuItem
           {...$$props.menuItem}
           href="https://ibm.com"
@@ -42,10 +50,14 @@
         }}
         style="width: auto">
         <div slot="menu" style="padding: 0 1rem">Menu</div>
-        <OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
         <OverflowMenuItem
           {...$$props.menuItem}
-          text="Option 2 is an example of a really long string and how we recommend handling this"
+          text="Option 1"
+          bind:primaryFocus />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          text="Option 2 is an example of a really long string and how we
+          recommend handling this"
           requireTitle />
         <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
         <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
@@ -57,10 +69,14 @@
         on:close={({ detail }) => {
           console.log('close', detail);
         }}>
-        <OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
         <OverflowMenuItem
           {...$$props.menuItem}
-          text="Option 2 is an example of a really long string and how we recommend handling this"
+          text="Option 1"
+          bind:primaryFocus />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          text="Option 2 is an example of a really long string and how we
+          recommend handling this"
           requireTitle />
         <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
         <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
diff --git a/src/components/OverflowMenu/OverflowMenu.stories.js b/src/components/OverflowMenu/OverflowMenu.stories.js
index 2c879e9c..3af00e58 100644
--- a/src/components/OverflowMenu/OverflowMenu.stories.js
+++ b/src/components/OverflowMenu/OverflowMenu.stories.js
@@ -1,62 +1,71 @@
-import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
-import Component from './OverflowMenu.Story.svelte';
+import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
+import Component from "./OverflowMenu.Story.svelte";
 
-export default { title: 'OverflowMenu', decorators: [withKnobs] };
+export default { title: "OverflowMenu", decorators: [withKnobs] };
 
 const directions = {
-  'Bottom of the trigger button (bottom)': 'bottom',
-  'Top of the trigger button (top)': 'top'
+  "Bottom of the trigger button (bottom)": "bottom",
+  "Top of the trigger button (top)": "top",
 };
 
 export const Default = () => ({
   Component,
   props: {
     menu: {
-      direction: select('Menu direction (direction)', directions, 'bottom'),
-      ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
-      iconDescription: text('Icon description (iconDescription)', ''),
-      flipped: boolean('Flipped (flipped)', false),
-      light: boolean('Light (light)', false)
+      direction: select("Menu direction (direction)", directions, "bottom"),
+      ariaLabel: text("ARIA label (ariaLabel)", "Menu"),
+      iconDescription: text("Icon description (iconDescription)", ""),
+      flipped: boolean("Flipped (flipped)", false),
+      light: boolean("Light (light)", false),
     },
     menuItem: {
-      disabled: boolean('Disabled (disabled)', false),
-      requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
-    }
-  }
+      disabled: boolean("Disabled (disabled)", false),
+      requireTitle: boolean(
+        "Use hover over text for menu item (requireTitle)",
+        false
+      ),
+    },
+  },
 });
 
 export const WithLinks = () => ({
   Component,
   props: {
-    story: 'links',
+    story: "links",
     menu: {
-      direction: select('Menu direction (direction)', directions, 'bottom'),
-      ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
-      iconDescription: text('Icon description (iconDescription)', ''),
-      flipped: boolean('Flipped (flipped)', false),
-      light: boolean('Light (light)', false)
+      direction: select("Menu direction (direction)", directions, "bottom"),
+      ariaLabel: text("ARIA label (ariaLabel)", "Menu"),
+      iconDescription: text("Icon description (iconDescription)", ""),
+      flipped: boolean("Flipped (flipped)", false),
+      light: boolean("Light (light)", false),
     },
     menuItem: {
-      disabled: boolean('Disabled (disabled)', false),
-      requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
-    }
-  }
+      disabled: boolean("Disabled (disabled)", false),
+      requireTitle: boolean(
+        "Use hover over text for menu item (requireTitle)",
+        false
+      ),
+    },
+  },
 });
 
 export const CustomTrigger = () => ({
   Component,
   props: {
-    story: 'trigger',
+    story: "trigger",
     menu: {
-      direction: select('Menu direction (direction)', directions, 'bottom'),
-      ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
-      iconDescription: text('Icon description (iconDescription)', ''),
-      flipped: boolean('Flipped (flipped)', false),
-      light: boolean('Light (light)', false)
+      direction: select("Menu direction (direction)", directions, "bottom"),
+      ariaLabel: text("ARIA label (ariaLabel)", "Menu"),
+      iconDescription: text("Icon description (iconDescription)", ""),
+      flipped: boolean("Flipped (flipped)", false),
+      light: boolean("Light (light)", false),
     },
     menuItem: {
-      disabled: boolean('Disabled (disabled)', false),
-      requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
-    }
-  }
+      disabled: boolean("Disabled (disabled)", false),
+      requireTitle: boolean(
+        "Use hover over text for menu item (requireTitle)",
+        false
+      ),
+    },
+  },
 });
diff --git a/src/components/OverflowMenu/OverflowMenu.svelte b/src/components/OverflowMenu/OverflowMenu.svelte
index bbedf30f..2072ca06 100644
--- a/src/components/OverflowMenu/OverflowMenu.svelte
+++ b/src/components/OverflowMenu/OverflowMenu.svelte
@@ -1,37 +1,32 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let direction = 'bottom';
+  export let open = false;
+  export let light = false;
   export let flipped = false;
+  export let direction = "bottom"; // "top" | "bottom"
+  export let tabindex = "0";
   export let icon = OverflowMenuVertical16;
   export let iconClass = undefined;
-  export let iconDescription = 'Open and close list of options';
-  export let id = Math.random();
-  export let light = false;
+  export let iconDescription = "Open and close list of options";
+  export let id = "ccs-" + Math.random().toString(36);
   export let menuOptionsClass = undefined;
-  export let open = false;
-  export let style = undefined;
-  export let tabindex = '0';
 
-  import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
-  import { writable } from 'svelte/store';
-  import OverflowMenuVertical16 from 'carbon-icons-svelte/lib/OverflowMenuVertical16';
-  import { cx } from '../../lib';
-  import { formatStyle } from './formatStyle';
+  import { createEventDispatcher, setContext, afterUpdate } from "svelte";
+  import { writable } from "svelte/store";
+  import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
+  import { formatStyle } from "./formatStyle";
 
   const dispatch = createEventDispatcher();
+  const items = writable([]);
+  const currentId = writable(undefined);
+  const focusedId = writable(undefined);
+  const currentIndex = writable(-1);
 
-  let items = writable([]);
-  let currentId = writable(undefined);
-  let focusedId = writable(undefined);
-  let currentIndex = writable(-1);
+  $: buttonRef = undefined;
+  $: buttonWidth = undefined;
+  $: menuRef = undefined;
+  $: didOpen = false;
 
-  let buttonRef = undefined;
-  let buttonWidth = undefined;
-  let menuRef = undefined;
-  let didOpen = false;
-
-  setContext('OverflowMenu', {
+  setContext("OverflowMenu", {
     focusedId,
     add: ({ id, text, primaryFocus }) => {
       items.update(_ => {
@@ -62,7 +57,7 @@
   afterUpdate(() => {
     if ($currentId) {
       const { index, text } = $items.filter(_ => _.id === $currentId)[0];
-      dispatch('close', { index, text });
+      dispatch("close", { index, text });
       open = false;
     }
 
@@ -76,13 +71,13 @@
       }
 
       if (flipped) {
-        menuRef.style.left = 'auto';
+        menuRef.style.left = "auto";
         menuRef.style.right = 0;
       }
 
-      if (direction === 'top') {
-        menuRef.style.top = 'auto';
-        menuRef.style.bottom = height + 'px';
+      if (direction === "top") {
+        menuRef.style.top = "auto";
+        menuRef.style.bottom = height + "px";
       }
     }
 
@@ -98,12 +93,12 @@
     }
   });
 
-  $: ariaLabel = $$props['aria-label'] || 'menu';
+  $: ariaLabel = $$props["aria-label"] || "menu";
   $: if ($items[$currentIndex]) {
     focusedId.set($items[$currentIndex].id);
   }
   $: dynamicPseudoWidth = `.bx--overflow-menu-options.bx--overflow-menu-options:after {
-      width: ${buttonWidth ? buttonWidth + 'px' : '2rem'};
+      width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
     }`;
   $: styles = formatStyle(dynamicPseudoWidth);
 </script>
@@ -112,12 +107,9 @@
   {@html styles}
 </svelte:head>
 
-<!-- TODO: extract utility component -->
 <svelte:body
   on:click={({ target }) => {
-    if (buttonRef && buttonRef.contains(target)) {
-      return;
-    }
+    if (buttonRef && buttonRef.contains(target)) return;
     if (menuRef && !menuRef.contains(target)) {
       open = false;
     }
@@ -128,7 +120,12 @@
   aria-haspopup
   aria-expanded={open}
   aria-label={ariaLabel}
-  class={cx('--overflow-menu', open && '--overflow-menu--open', light && '--overflow-menu--light', className)}
+  {id}
+  {tabindex}
+  class:bx--overflow-menu={true}
+  class:bx--overflow-menu--open={open}
+  class:bx--overflow-menu--light={light}
+  {...$$restProps}
   on:click
   on:click={({ target }) => {
     if (!(menuRef && menuRef.contains(target))) {
@@ -139,25 +136,22 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={event => {
+  on:keydown={e => {
     if (open) {
-      if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(event.key)) {
-        event.preventDefault();
-      } else if (event.key === 'Escape') {
-        event.stopPropagation();
+      if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+      } else if (e.key === 'Escape') {
+        e.stopPropagation();
         open = false;
       }
     }
-  }}
-  {id}
-  {tabindex}
-  {style}>
+  }}>
   <slot name="menu">
     <svelte:component
       this={icon}
-      class={cx('--overflow-menu__icon', iconClass)}
       aria-label={iconDescription}
-      title={iconDescription} />
+      title={iconDescription}
+      class="bx--overflow-menu__icon {iconClass}" />
   </slot>
   {#if open}
     <ul
@@ -166,7 +160,11 @@
       tabindex="-1"
       aria-label={ariaLabel}
       data-floating-menu-direction={direction}
-      class={cx('--overflow-menu-options', flipped && '--overflow-menu--flip', open && '--overflow-menu-options--open', light && '--overflow-menu-options--light', menuOptionsClass)}>
+      class:bx--overflow-menu-options={true}
+      class:bx--overflow-menu--flip={flipped}
+      class:bx--overflow-menu-options--open={open}
+      class:bx--overflow-menu-options--light={light}
+      class:menuOptionsClass>
       <slot />
     </ul>
   {/if}
diff --git a/src/components/OverflowMenu/OverflowMenuItem.svelte b/src/components/OverflowMenu/OverflowMenuItem.svelte
index 1ac2f9c2..56f478df 100644
--- a/src/components/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/components/OverflowMenu/OverflowMenuItem.svelte
@@ -1,36 +1,31 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let danger = false;
   export let disabled = false;
   export let hasDivider = false;
-  export let href = '';
+  export let href = "";
   export let primaryFocus = false;
   export let requireTitle = true;
-  export let style = undefined;
-  export let text = 'Provide text';
+  export let text = "Provide text";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { getContext, afterUpdate } from 'svelte';
-  import { cx } from '../../lib';
+  import { getContext, afterUpdate } from "svelte";
 
-  const id = Math.random();
-  const { focusedId, add, update, change } = getContext('OverflowMenu');
-
-  let buttonRef = undefined;
+  const { focusedId, add, update, change } = getContext("OverflowMenu");
 
   add({ id, text, primaryFocus });
 
   afterUpdate(() => {
     if (primaryFocus) {
-      buttonRef.focus();
+      ref.focus();
     }
   });
 
   $: primaryFocus = $focusedId === id;
   $: buttonProps = {
-    tabindex: '-1',
+    tabindex: "-1",
     title: requireTitle ? text : undefined,
-    class: cx('--overflow-menu-options__btn'),
+    class: "bx--overflow-menu-options__btn",
     disabled: href ? undefined : disabled,
     href: href ? href : undefined
   };
@@ -38,12 +33,15 @@
 
 <li
   role="menuitem"
-  class={cx('--overflow-menu-options__option', hasDivider && '--overflow-menu--divider', danger && '--overflow-menu-options__option--danger', disabled && '--overflow-menu-options__option--disabled', className)}
-  {style}>
+  class:bx--overflow-menu-options__option={true}
+  class:bx--overflow-menu--divider={hasDivider}
+  class:bx--overflow-menu-options__option--danger={danger}
+  class:bx--overflow-menu-options__option--disabled={disabled}
+  {...$$restProps}>
   {#if href}
     <!-- svelte-ignore a11y-missing-attribute -->
     <a
-      bind:this={buttonRef}
+      bind:this={ref}
       {...buttonProps}
       on:click
       on:click={() => {
@@ -58,12 +56,12 @@
         }
       }}>
       <slot>
-        <div class={cx('--overflow-menu-options__option-content')}>{text}</div>
+        <div class:bx--overflow-menu-options__option-content={true}>{text}</div>
       </slot>
     </a>
   {:else}
     <button
-      bind:this={buttonRef}
+      bind:this={ref}
       {...buttonProps}
       on:click
       on:click={() => {
@@ -78,7 +76,7 @@
         }
       }}>
       <slot>
-        <div class={cx('--overflow-menu-options__option-content')}>{text}</div>
+        <div class:bx--overflow-menu-options__option-content={true}>{text}</div>
       </slot>
     </button>
   {/if}
diff --git a/src/components/OverflowMenu/formatStyle.js b/src/components/OverflowMenu/formatStyle.js
index 8316ac2b..33cd5089 100644
--- a/src/components/OverflowMenu/formatStyle.js
+++ b/src/components/OverflowMenu/formatStyle.js
@@ -1,7 +1 @@
-// TODO: extract utility
-// TODO: refactor params to present nicer API
-function formatStyle(style) {
-  return ['<style>', style, '</style>'].join('');
-}
-
-export { formatStyle };
+export const formatStyle = (style) => ["<style>", style, "</style>"].join("");
diff --git a/src/components/OverflowMenu/index.js b/src/components/OverflowMenu/index.js
index 2e008883..075c5362 100644
--- a/src/components/OverflowMenu/index.js
+++ b/src/components/OverflowMenu/index.js
@@ -1,4 +1,2 @@
-import OverflowMenu from './OverflowMenu.svelte';
-
-export default OverflowMenu;
-export { default as OverflowMenuItem } from './OverflowMenuItem.svelte';
+export { default as OverflowMenu } from "./OverflowMenu.svelte";
+export { default as OverflowMenuItem } from "./OverflowMenuItem.svelte";
diff --git a/src/components/Pagination/Pagination.Skeleton.svelte b/src/components/Pagination/Pagination.Skeleton.svelte
index 0bb19a49..7ae3030d 100644
--- a/src/components/Pagination/Pagination.Skeleton.svelte
+++ b/src/components/Pagination/Pagination.Skeleton.svelte
@@ -1,25 +1,21 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-  import SkeletonText from '../SkeletonText';
+  import { SkeletonText } from "../SkeletonText";
 </script>
 
 <div
+  class:bx--pagination={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--pagination', '--skeleton', className)}
-  {style}>
-  <div class={cx('--pagination__left')}>
+  on:mouseleave>
+  <div class:bx--pagination__left={true}>
     <SkeletonText width="70px" />
     <SkeletonText width="35px" />
     <SkeletonText width="105px" />
   </div>
-  <div class={cx('--pagination__right', '--pagination--inline')}>
+  <div class:bx--pagination__right={true} class:bx--pagination--inline={true}>
     <SkeletonText width="70px" />
   </div>
 </div>
diff --git a/src/components/Pagination/Pagination.Story.svelte b/src/components/Pagination/Pagination.Story.svelte
index a7af3463..5e554b80 100644
--- a/src/components/Pagination/Pagination.Story.svelte
+++ b/src/components/Pagination/Pagination.Story.svelte
@@ -1,9 +1,9 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Pagination from './Pagination.svelte';
-  import PaginationSkeleton from './Pagination.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Pagination from "./Pagination.svelte";
+  import PaginationSkeleton from "./Pagination.Skeleton.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/Pagination/Pagination.stories.js b/src/components/Pagination/Pagination.stories.js
index 6ed53632..1d8f9776 100644
--- a/src/components/Pagination/Pagination.stories.js
+++ b/src/components/Pagination/Pagination.stories.js
@@ -1,39 +1,69 @@
-import { withKnobs, text, number, boolean, array } from '@storybook/addon-knobs';
-import Component from './Pagination.Story.svelte';
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  array,
+} from "@storybook/addon-knobs";
+import Component from "./Pagination.Story.svelte";
 
-export default { title: 'Pagination', decorators: [withKnobs] };
+export default { title: "Pagination", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    disabled: boolean('Disable backward/forward buttons (disabled)', false),
-    page: number('The current page (page)', 1),
-    totalItems: number('Total number of items (totalItems)', 103),
-    pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
-    pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
-    backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
-    forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
-    pageSize: number('Number of items per page (pageSize)', 10),
-    pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
-    itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
-  }
+    disabled: boolean("Disable backward/forward buttons (disabled)", false),
+    page: number("The current page (page)", 1),
+    totalItems: number("Total number of items (totalItems)", 103),
+    pagesUnknown: boolean(
+      "Total number of items unknown (pagesUnknown)",
+      false
+    ),
+    pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false),
+    backwardText: text(
+      "The description for the backward icon (backwardText)",
+      "Previous page"
+    ),
+    forwardText: text(
+      "The description for the forward icon (forwardText)",
+      "Next page"
+    ),
+    pageSize: number("Number of items per page (pageSize)", 10),
+    pageSizes: array("Choices of `pageSize` (pageSizes)", [10, 20, 30, 40, 50]),
+    itemsPerPageText: text(
+      "Label for `pageSizes` select UI (itemsPerPageText)",
+      "Items per page:"
+    ),
+  },
 });
 
 export const Multiple = () => ({
   Component,
   props: {
-    story: 'multiple',
-    disabled: boolean('Disable backward/forward buttons (disabled)', false),
-    page: number('The current page (page)', 1),
-    totalItems: number('Total number of items (totalItems)', 103),
-    pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
-    pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
-    backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
-    forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
-    pageSize: number('Number of items per page (pageSize)', 10),
-    pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
-    itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
-  }
+    story: "multiple",
+    disabled: boolean("Disable backward/forward buttons (disabled)", false),
+    page: number("The current page (page)", 1),
+    totalItems: number("Total number of items (totalItems)", 103),
+    pagesUnknown: boolean(
+      "Total number of items unknown (pagesUnknown)",
+      false
+    ),
+    pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false),
+    backwardText: text(
+      "The description for the backward icon (backwardText)",
+      "Previous page"
+    ),
+    forwardText: text(
+      "The description for the forward icon (forwardText)",
+      "Next page"
+    ),
+    pageSize: number("Number of items per page (pageSize)", 10),
+    pageSizes: array("Choices of `pageSize` (pageSizes)", [10, 20, 30, 40, 50]),
+    itemsPerPageText: text(
+      "Label for `pageSizes` select UI (itemsPerPageText)",
+      "Items per page:"
+    ),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Pagination/Pagination.svelte b/src/components/Pagination/Pagination.svelte
index 6d76340e..69b0e19d 100644
--- a/src/components/Pagination/Pagination.svelte
+++ b/src/components/Pagination/Pagination.svelte
@@ -1,12 +1,11 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let backwardText = 'Previous page';
+  export let totalItems = 0;
   export let disabled = false;
-  export let forwardText = 'Next page';
-  export let id = Math.random();
-  export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
-  export let itemsPerPageText = 'Items per page:';
+  export let forwardText = "Next page";
+  export let backwardText = "Previous page";
+  export let itemRangeText = (min, max, total) =>
+    `${min}–${max} of ${total} items`;
+  export let itemsPerPageText = "Items per page:";
   export let itemText = (min, max) => `${min}–${max} items`;
   export let page = 1;
   export let pageInputDisabled = false;
@@ -15,38 +14,36 @@
   export let pageSizes = [10];
   export let pagesUnknown = false;
   export let pageText = page => `page ${page}`;
-  export let style = undefined;
-  export let totalItems = 0;
+  export let id = "ccs-" + Math.random().toString(36);
 
-  import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
-  import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
-  import { cx, fillArray } from '../../lib';
-  import Select, { SelectItem } from '../Select';
-  import { afterUpdate, createEventDispatcher } from 'svelte';  
+  import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24";
+  import CaretRight24 from "carbon-icons-svelte/lib/CaretRight24";
+  import { Select, SelectItem } from "../Select";
+  import { afterUpdate, createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
   afterUpdate(() => {
-    dispatch('update', {pageSize: parseInt(pageSize), page: parseInt(page)});
+    dispatch("update", { pageSize: parseInt(pageSize), page: parseInt(page) });
   });
 
   $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
-  $: selectItems = fillArray(totalPages);
+  $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
   $: backButtonDisabled = disabled || page === 1;
   $: forwardButtonDisabled = disabled || page === totalPages;
 </script>
 
-<div class={cx('--pagination', className)} {style}>
-  <div class={cx('--pagination__left')}>
+<div class:bx--pagination={true} {...$$restProps}>
+  <div class:bx--pagination__left={true}>
     <label
-      id={cx(`--pagination-select-${id}-count-label`)}
-      class={cx('--pagination__text')}
-      for={cx(`--pagination-select-${id}`)}>
+      id="bx--pagination-select-{id}-count-label"
+      class:bx--pagination__text={true}
+      for="bx--pagination-select-{id}">
       {itemsPerPageText}
     </label>
     <Select
-      id={cx(`--pagination-select-${id}`)}
-      class={cx('--select__item-count')}
+      id="bx--pagination-select-{id}"
+      class="bx--select__item-count"
       labelText=""
       hideLabel
       noLabel
@@ -59,7 +56,7 @@
         <SelectItem value={size} text={size.toString()} />
       {/each}
     </Select>
-    <span class={cx('--pagination__text')}>
+    <span class:bx--pagination__text={true}>
       {#if pagesUnknown}
         {itemText(pageSize * (page - 1) + 1, page * pageSize)}
       {:else}
@@ -67,12 +64,12 @@
       {/if}
     </span>
   </div>
-  <div class={cx('--pagination__right')}>
+  <div class:bx--pagination__right={true}>
     {#if !pageInputDisabled}
       <Select
-        id={cx(`--pagination-select-${id + 2}`)}
-        class={cx('--select__page-number')}
-        labelText={`Page number, of ${totalPages} pages`}
+        id="bx--pagination-select-{id + 2}"
+        class="bx--select__page-number"
+        labelText="Page number, of {totalPages} pages"
         inline
         hideLabel
         bind:selected={page}>
@@ -80,28 +77,34 @@
           <SelectItem value={size + 1} text={(size + 1).toString()} />
         {/each}
       </Select>
-      <span class={cx('--pagination__text')}>
-        {#if pagesUnknown}{pageText(page)}{:else}{pageRangeText(page, totalPages)}{/if}
+      <span class:bx--pagination__text={true}>
+        {#if pagesUnknown}
+          {pageText(page)}
+        {:else}{pageRangeText(page, totalPages)}{/if}
       </span>
     {/if}
     <button
       type="button"
-      class={cx('--pagination__button', '--pagination__button--backward', backButtonDisabled && '--pagination__button--no-index')}
+      aria-label={backwardText}
+      disabled={backButtonDisabled}
+      class:bx--pagination__button={true}
+      class:bx--pagination__button--backward={true}
+      class:bx--pagination__button--no-index={backButtonDisabled}
       on:click={() => {
         page--;
-      }}
-      aria-label={backwardText}
-      disabled={backButtonDisabled}>
+      }}>
       <CaretLeft24 />
     </button>
     <button
       type="button"
-      class={cx('--pagination__button', '--pagination__button--forward', forwardButtonDisabled && '--pagination__button--no-index')}
       aria-label={forwardText}
+      disabled={forwardButtonDisabled}
+      class:bx--pagination__button={true}
+      class:bx--pagination__button--forward={true}
+      class:bx--pagination__button--no-index={forwardButtonDisabled}
       on:click={() => {
         page++;
-      }}
-      disabled={forwardButtonDisabled}>
+      }}>
       <CaretRight24 />
     </button>
   </div>
diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js
index ee284e4b..2e51501b 100644
--- a/src/components/Pagination/index.js
+++ b/src/components/Pagination/index.js
@@ -1,4 +1,2 @@
-import Pagination from './Pagination.svelte';
-
-export default Pagination;
-export { default as PaginationSkeleton } from './Pagination.Skeleton.svelte';
+export { default as Pagination } from "./Pagination.svelte";
+export { default as PaginationSkeleton } from "./Pagination.Skeleton.svelte";
diff --git a/src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte b/src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte
index 7e6c057f..e05ff064 100644
--- a/src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte
+++ b/src/components/ProgressIndicator/ProgressIndicator.Skeleton.svelte
@@ -1,27 +1,28 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
   export let vertical = false;
-
-  import { cx } from '../../lib';
 </script>
 
 <ul
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--skeleton={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--progress', vertical && '--progress--vertical', '--skeleton', className)}
-  {style}>
+  on:mouseleave>
   {#each [0, 1, 2, 3] as item, i (item)}
-    <li class={cx('--progress-step', '--progress-step--incomplete')}>
-      <div class={cx('--progress-step-button', '--progress-step-button--unclickable')}>
+    <li
+      class:bx--progress-step={true}
+      class:bx--progress-step--incomplete={true}>
+      <div
+        class:bx--progress-step-button={true}
+        class:bx--progress-step-button--unclickable={true}>
         <svg>
           <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
         </svg>
-        <p class={cx('--progress-label')} />
-        <span class={cx('--progress-line')} />
+        <p class:bx--progress-label={true} />
+        <span class:bx--progress-line={true} />
       </div>
     </li>
   {/each}
diff --git a/src/components/ProgressIndicator/ProgressIndicator.Story.svelte b/src/components/ProgressIndicator/ProgressIndicator.Story.svelte
index 93449be5..ff050433 100644
--- a/src/components/ProgressIndicator/ProgressIndicator.Story.svelte
+++ b/src/components/ProgressIndicator/ProgressIndicator.Story.svelte
@@ -1,10 +1,10 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import ProgressIndicator from './ProgressIndicator.svelte';
-  import ProgressIndicatorSkeleton from './ProgressIndicator.Skeleton.svelte';
-  import ProgressStep from './ProgressStep.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import ProgressIndicator from "./ProgressIndicator.svelte";
+  import ProgressIndicatorSkeleton from "./ProgressIndicator.Skeleton.svelte";
+  import ProgressStep from "./ProgressStep.svelte";
 </script>
 
 <Layout>
@@ -18,10 +18,12 @@
         </ProgressStep>
         <ProgressStep
           label="Really long label"
-          description="The progress indicator will listen for clicks on the steps" />
+          description="The progress indicator will listen for clicks on the
+          steps" />
         <ProgressStep
           label="Tooltip and really long label"
-          description="The progress indicator will listen for clicks on the steps" />
+          description="The progress indicator will listen for clicks on the
+          steps" />
       </ProgressIndicator>
     {:else}
       <ProgressIndicator {...$$props}>
diff --git a/src/components/ProgressIndicator/ProgressIndicator.stories.js b/src/components/ProgressIndicator/ProgressIndicator.stories.js
index b9a4712f..419c3ab0 100644
--- a/src/components/ProgressIndicator/ProgressIndicator.stories.js
+++ b/src/components/ProgressIndicator/ProgressIndicator.stories.js
@@ -1,29 +1,29 @@
-import { withKnobs, boolean, number } from '@storybook/addon-knobs';
-import Component from './ProgressIndicator.Story.svelte';
+import { withKnobs, boolean, number } from "@storybook/addon-knobs";
+import Component from "./ProgressIndicator.Story.svelte";
 
-export default { title: 'ProgressIndicator', decorators: [withKnobs] };
+export default { title: "ProgressIndicator", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    currentIndex: number('Current progress (currentIndex)', 1),
-    vertical: boolean('Vertical orientation (vertical)', false)
-  }
+    currentIndex: number("Current progress (currentIndex)", 1),
+    vertical: boolean("Vertical orientation (vertical)", false),
+  },
 });
 
 export const Interactive = () => ({
   Component,
   props: {
-    story: 'interactive',
-    currentIndex: number('Current progress (currentIndex)', 1),
-    vertical: boolean('Vertical orientation (vertical)', false)
-  }
+    story: "interactive",
+    currentIndex: number("Current progress (currentIndex)", 1),
+    vertical: boolean("Vertical orientation (vertical)", false),
+  },
 });
 
 export const Skeleton = () => ({
   Component,
   props: {
-    story: 'skeleton',
-    vertical: boolean('Vertical orientation (vertical)', false)
-  }
+    story: "skeleton",
+    vertical: boolean("Vertical orientation (vertical)", false),
+  },
 });
diff --git a/src/components/ProgressIndicator/ProgressIndicator.svelte b/src/components/ProgressIndicator/ProgressIndicator.svelte
index 59daa9b4..df28350c 100644
--- a/src/components/ProgressIndicator/ProgressIndicator.svelte
+++ b/src/components/ProgressIndicator/ProgressIndicator.svelte
@@ -1,20 +1,17 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let currentIndex = 0;
-  export let style = undefined;
   export let vertical = false;
 
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { writable, derived } from 'svelte/store';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const steps = writable([]);
+  const stepsById = derived(steps, $ =>
+    $.reduce((a, c) => ({ ...a, [c.id]: c }), {})
+  );
 
-  let steps = writable([]);
-  let stepsById = derived(steps, $steps => $steps.reduce((a, c) => ({ ...a, [c.id]: c }), {}));
-
-  setContext('ProgressIndicator', {
+  setContext("ProgressIndicator", {
     steps,
     stepsById,
     add: step => {
@@ -29,17 +26,18 @@
       ]);
     },
     change: index => {
-      dispatch('change', index);
+      dispatch("change", index);
     }
   });
 </script>
 
 <ul
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--progress', vertical && '--progress--vertical', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </ul>
diff --git a/src/components/ProgressIndicator/ProgressStep.svelte b/src/components/ProgressIndicator/ProgressStep.svelte
index 40b980c7..31de5b24 100644
--- a/src/components/ProgressIndicator/ProgressStep.svelte
+++ b/src/components/ProgressIndicator/ProgressStep.svelte
@@ -1,22 +1,18 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let complete = false;
   export let current = false;
-  export let description = '';
   export let disabled = false;
   export let invalid = false;
-  export let label = '';
-  export let secondaryLabel = '';
-  export let style = undefined;
+  export let description = "";
+  export let label = "";
+  export let secondaryLabel = "";
+  export let id = "ccs-" + Math.random().toString(36);
 
-  import { getContext } from 'svelte';
-  import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16';
-  import Warning16 from 'carbon-icons-svelte/lib/Warning16';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
+  import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16";
+  import Warning16 from "carbon-icons-svelte/lib/Warning16";
 
-  const id = Math.random();
-  const { stepsById, add, change } = getContext('ProgressIndicator');
+  const { stepsById, add, change } = getContext("ProgressIndicator");
 
   add({ id, disabled });
 
@@ -29,12 +25,17 @@
 
 <li
   aria-disabled={disabled}
-  class={cx('--progress-step', current && '--progress-step--current', complete && '--progress-step--complete', !complete && !current && '--progress-step--incomplete', disabled && '--progress-step--disabled', className)}
-  {style}>
+  class:bx--progress-step={true}
+  class:bx--progress-step--current={current}
+  class:bx--progress-step--complete={complete}
+  class:bx--progress-step--incomplete={!complete && !current}
+  class:bx--progress-step--disabled={disabled}
+  {...$$restProps}>
   <div
     role="button"
     tabindex={current ? '-1' : '0'}
-    class={cx('--progress-step-button', current && '--progress-step-button--unclickable')}
+    class:bx--progress-step-button={true}
+    class:bx--progress-step-button--unclickable={current}
     on:click={() => {
       change(step.index);
     }}
@@ -42,13 +43,13 @@
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown={event => {
-      if (event.key === ' ' || event.key === 'Enter') {
+    on:keydown={e => {
+      if (e.key === ' ' || e.key === 'Enter') {
         change(step.index);
       }
     }}>
     {#if invalid}
-      <Warning16 class={cx('--progress__warning')} />
+      <Warning16 class="bx--progress__warning" />
     {:else if current}
       <svg>
         <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
@@ -60,16 +61,16 @@
       <svg>
         <title>{description}</title>
         <path
-          d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6
-          2.7 6 6-2.7 6-6 6z" />
+          d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
+          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
       </svg>
     {/if}
-    <slot props={{ class: cx('--progress-label') }}>
-      <p class={cx('--progress-label')}>{label}</p>
+    <slot props={{ class: 'bx--progress-label' }}>
+      <p class:bx--progress-label={true}>{label}</p>
     </slot>
     {#if secondaryLabel}
-      <p class={cx('--progress-optional')}>{secondaryLabel}</p>
+      <p class:bx--progress-optional={true}>{secondaryLabel}</p>
     {/if}
-    <span class={cx('--progress-line')} />
+    <span class:bx--progress-line={true} />
   </div>
 </li>
diff --git a/src/components/ProgressIndicator/index.js b/src/components/ProgressIndicator/index.js
index 515beda2..c2901882 100644
--- a/src/components/ProgressIndicator/index.js
+++ b/src/components/ProgressIndicator/index.js
@@ -1,5 +1,3 @@
-import ProgressIndicator from './ProgressIndicator.svelte';
-
-export default ProgressIndicator;
-export { default as ProgressIndicatorSkeleton } from './ProgressIndicator.Skeleton.svelte';
-export { default as ProgressStep } from './ProgressStep.svelte';
+export { default as ProgressIndicator } from "./ProgressIndicator.svelte";
+export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator.Skeleton.svelte";
+export { default as ProgressStep } from "./ProgressStep.svelte";
diff --git a/src/components/RadioButton/RadioButton.Skeleton.svelte b/src/components/RadioButton/RadioButton.Skeleton.svelte
index 2fc41420..a39368b3 100644
--- a/src/components/RadioButton/RadioButton.Skeleton.svelte
+++ b/src/components/RadioButton/RadioButton.Skeleton.svelte
@@ -1,18 +1,10 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <div
+  class:bx--radio-button-wrapper={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--radio-button-wrapper', className)}
-  {style}>
-  <div class={cx('--radio-button', '--skeleton')} />
-  <span class={cx('--radio-button__label', '--skeleton')} />
+  on:mouseleave>
+  <div class:bx--radio-button={true} class:bx--skeleton={true} />
+  <span class:bx--radio-button__label={true} class:bx--skeleton={true} />
 </div>
diff --git a/src/components/RadioButton/RadioButton.Story.svelte b/src/components/RadioButton/RadioButton.Story.svelte
index 0747f322..18c24edc 100644
--- a/src/components/RadioButton/RadioButton.Story.svelte
+++ b/src/components/RadioButton/RadioButton.Story.svelte
@@ -1,15 +1,17 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import RadioButton from './RadioButton.svelte';
-  import RadioButtonSkeleton from './RadioButton.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import RadioButton from "./RadioButton.svelte";
+  import RadioButtonSkeleton from "./RadioButton.Skeleton.svelte";
+
+  $: checked = false;
 </script>
 
 <Layout>
   {#if story === 'skeleton'}
     <RadioButtonSkeleton />
   {:else}
-    <RadioButton {...$$props} id="radio-1" />
+    <RadioButton {...$$props} bind:checked id="radio-1" />
   {/if}
 </Layout>
diff --git a/src/components/RadioButton/RadioButton.stories.js b/src/components/RadioButton/RadioButton.stories.js
index 7a7997b5..eb5904b0 100644
--- a/src/components/RadioButton/RadioButton.stories.js
+++ b/src/components/RadioButton/RadioButton.stories.js
@@ -1,22 +1,26 @@
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import Component from './RadioButton.Story.svelte';
+import { withKnobs, text, select, boolean } from "@storybook/addon-knobs";
+import Component from "./RadioButton.Story.svelte";
 
-export default { title: 'RadioButton', decorators: [withKnobs] };
+export default { title: "RadioButton", decorators: [withKnobs] };
 
 const labelPositions = {
-  'Left (left)': 'left',
-  'Right (right)': 'right'
+  "Left (left)": "left",
+  "Right (right)": "right",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    name: text('Form item name (name)', 'test'),
-    value: text('Value (value)', 'standard'),
-    labelText: text('Label text (labelText)', 'Standard Radio Button'),
-    labelPosition: select('Label position (labelPosition)', labelPositions, 'right'),
-    disabled: boolean('Disabled (disabled)', false)
-  }
+    name: text("Form item name (name)", "test"),
+    value: text("Value (value)", "standard"),
+    labelText: text("Label text (labelText)", "Standard Radio Button"),
+    labelPosition: select(
+      "Label position (labelPosition)",
+      labelPositions,
+      "right"
+    ),
+    disabled: boolean("Disabled (disabled)", false),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/RadioButton/RadioButton.svelte b/src/components/RadioButton/RadioButton.svelte
index d5571659..4040f3da 100644
--- a/src/components/RadioButton/RadioButton.svelte
+++ b/src/components/RadioButton/RadioButton.svelte
@@ -1,23 +1,20 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let value = "";
   export let checked = false;
   export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelPosition = "right"; // "left" | "right"
+  export let labelText = "";
   export let hideLabel = false;
-  export let id = Math.random();
-  export let labelPosition = 'right';
-  export let labelText = '';
-  export let name = '';
-  export let style = undefined;
-  export let value = '';
+  export let name = "";
 
-  import { getContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
+  import { writable } from "svelte/store";
 
-  const ctx = getContext('RadioButtonGroup');
-
-  let selectedValue = ctx ? ctx.selectedValue : writable(checked ? value : undefined);
+  const ctx = getContext("RadioButtonGroup");
+  const selectedValue = ctx
+    ? ctx.selectedValue
+    : writable(checked ? value : undefined);
 
   if (ctx) {
     ctx.add({ id, checked, disabled, value });
@@ -27,24 +24,25 @@
 </script>
 
 <div
-  class={cx('--radio-button-wrapper', labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`, className)}
-  {style}>
+  class:bx--radio-button-wrapper={true}
+  class:bx--radio-button-wrapper--label-left={labelPosition === 'left'}
+  {...$$restProps}>
   <input
     type="radio"
-    class={cx('--radio-button')}
+    {id}
+    {name}
+    {checked}
+    {disabled}
+    {value}
+    class:bx--radio-button={true}
     on:change
     on:change={() => {
       if (ctx) {
         ctx.update(value);
       }
-    }}
-    {id}
-    {name}
-    {checked}
-    {disabled}
-    {value} />
-  <label class={cx('--radio-button__label')} for={id}>
-    <span class={cx('--radio-button__appearance')} />
-    <span class={cx(hideLabel && '--visually-hidden')}>{labelText}</span>
+    }} />
+  <label class:bx--radio-button__label={true} for={id}>
+    <span class:bx--radio-button__appearance={true} />
+    <span class:bx--visually-hidden={hideLabel}>{labelText}</span>
   </label>
 </div>
diff --git a/src/components/RadioButton/index.js b/src/components/RadioButton/index.js
index 998d60c7..e88a6bf0 100644
--- a/src/components/RadioButton/index.js
+++ b/src/components/RadioButton/index.js
@@ -1,4 +1,2 @@
-import RadioButton from './RadioButton.svelte';
-
-export default RadioButton;
-export { default as RadioButtonSkeleton } from './RadioButton.Skeleton.svelte';
+export { default as RadioButton } from "./RadioButton.svelte";
+export { default as RadioButtonSkeleton } from "./RadioButton.Skeleton.svelte";
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte b/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
index b4bfc244..a6bd82c5 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
@@ -1,10 +1,10 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import RadioButtonGroup from './RadioButtonGroup.svelte';
-  import RadioButton from '../RadioButton';
-  import FormGroup from '../FormGroup';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import RadioButtonGroup from "./RadioButtonGroup.svelte";
+  import { RadioButton } from "../RadioButton";
+  import { FormGroup } from "../FormGroup";
 
-  let selected = 'default-selected';
+  $: selected = "default-selected";
 </script>
 
 <Layout>
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.stories.js b/src/components/RadioButtonGroup/RadioButtonGroup.stories.js
index 10471188..d41fc073 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.stories.js
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.stories.js
@@ -1,40 +1,54 @@
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import Component from './RadioButtonGroup.Story.svelte';
+import { withKnobs, text, select, boolean } from "@storybook/addon-knobs";
+import Component from "./RadioButtonGroup.Story.svelte";
 
-export default { title: 'RadioButtonGroup', decorators: [withKnobs] };
+export default { title: "RadioButtonGroup", decorators: [withKnobs] };
 
 const values = {
-  standard: 'standard',
-  'default-selected': 'default-selected',
-  disabled: 'disabled'
+  standard: "standard",
+  "default-selected": "default-selected",
+  disabled: "disabled",
 };
 
 const orientations = {
-  'Horizontal (horizontal)': 'horizontal',
-  'Vertical (vertical)': 'vertical'
+  "Horizontal (horizontal)": "horizontal",
+  "Vertical (vertical)": "vertical",
 };
 
 const labelPositions = {
-  'Left (left)': 'left',
-  'Right (right)': 'right'
+  "Left (left)": "left",
+  "Right (right)": "right",
 };
 
 export const Default = () => ({
   Component,
   props: {
     group: {
-      name: text('The form control name (name in <RadioButtonGroup>)', 'radio-button-group'),
-      valueSelected: select(
-        'Value of the selected button (valueSelected in <RadioButtonGroup>)',
-        values,
-        'default-selected'
+      name: text(
+        "The form control name (name in <RadioButtonGroup>)",
+        "radio-button-group"
+      ),
+      valueSelected: select(
+        "Value of the selected button (valueSelected in <RadioButtonGroup>)",
+        values,
+        "default-selected"
+      ),
+      orientation: select(
+        "Radio button orientation (orientation)",
+        orientations,
+        "horizontal"
+      ),
+      labelPosition: select(
+        "Label position (labelPosition)",
+        labelPositions,
+        "right"
       ),
-      orientation: select('Radio button orientation (orientation)', orientations, 'horizontal'),
-      labelPosition: select('Label position (labelPosition)', labelPositions, 'right')
     },
     radio: {
-      disabled: boolean('Disabled (disabled in <RadioButton>)', false),
-      labelText: text('Label text (labelText in <RadioButton>)', 'Radio button label')
-    }
-  }
+      disabled: boolean("Disabled (disabled in <RadioButton>)", false),
+      labelText: text(
+        "Label text (labelText in <RadioButton>)",
+        "Radio button label"
+      ),
+    },
+  },
 });
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.svelte b/src/components/RadioButtonGroup/RadioButtonGroup.svelte
index 58e136ea..a95c26d1 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.svelte
@@ -1,21 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let selected = undefined;
   export let disabled = false;
-  export let labelPosition = 'right';
-  export let orientation = 'horizontal';
-  export let style = undefined;
+  export let labelPosition = "right"; // "right" | "left"
+  export let orientation = "horizontal"; // "horizontal" | "vertical"
 
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
 
-  let selectedValue = writable(selected);
-
-  setContext('RadioButtonGroup', {
+  setContext("RadioButtonGroup", {
     selectedValue,
     add: ({ checked, value }) => {
       if (checked) {
@@ -28,14 +23,20 @@
   });
 
   $: selected = $selectedValue;
-  $: {
-    dispatch('change', $selectedValue);
-  }
+  $: dispatch("change", $selectedValue);
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <div
-    class={cx('--radio-button-group', orientation === 'vertical' && `--radio-button-group--${orientation}`, labelPosition && `--radio-button-group--label-${labelPosition}`, className)}
+    class:bx--radio-button-group={true}
+    class:bx--radio-button-group--vertical={orientation === 'vertical'}
+    class={labelPosition && `bx--radio-button-group--label-${labelPosition}`}
     {disabled}>
     <slot />
   </div>
diff --git a/src/components/RadioButtonGroup/index.js b/src/components/RadioButtonGroup/index.js
index 6e800ebd..0154dce9 100644
--- a/src/components/RadioButtonGroup/index.js
+++ b/src/components/RadioButtonGroup/index.js
@@ -1,3 +1 @@
-import RadioButtonGroup from './RadioButtonGroup.svelte';
-
-export default RadioButtonGroup;
+export { default as RadioButtonGroup } from "./RadioButtonGroup.svelte";
diff --git a/src/components/Search/Search.Skeleton.svelte b/src/components/Search/Search.Skeleton.svelte
index 8a63bea6..3d2bf120 100644
--- a/src/components/Search/Search.Skeleton.svelte
+++ b/src/components/Search/Search.Skeleton.svelte
@@ -1,19 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let small = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <div
+  class:bx--skeleton={true}
+  class:bx--search--xl={!small}
+  class:bx--search--sm={small}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--skeleton', !small && '--search--xl', small && '--search--sm', className)}
-  {style}>
-  <span class={cx('--label')} />
-  <div class={cx('--search-input')} />
+  on:mouseleave>
+  <span class:bx--label={true} />
+  <div class:bx--search-input={true} />
 </div>
diff --git a/src/components/Search/Search.Story.svelte b/src/components/Search/Search.Story.svelte
index 42ae1165..ea4fdcb8 100644
--- a/src/components/Search/Search.Story.svelte
+++ b/src/components/Search/Search.Story.svelte
@@ -1,17 +1,17 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Search from './Search.svelte';
-  import SearchSkeleton from './Search.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Search from "./Search.svelte";
+  import SearchSkeleton from "./Search.Skeleton.svelte";
 
-  let value = '';
+  let value = "";
 
   $: {
     if (!value.length) {
-      console.log('cleared');
+      console.log("cleared");
     } else {
-      console.log('value', value);
+      console.log("value", value);
     }
   }
 </script>
diff --git a/src/components/Search/Search.stories.js b/src/components/Search/Search.stories.js
index 4297796c..03efff22 100644
--- a/src/components/Search/Search.stories.js
+++ b/src/components/Search/Search.stories.js
@@ -1,27 +1,27 @@
-import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
-import Component from './Search.Story.svelte';
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Search.Story.svelte";
 
-export default { title: 'Search', decorators: [withKnobs] };
+export default { title: "Search", decorators: [withKnobs] };
 
 const sizes = {
-  'Regular size (xl)': 'xl',
-  'Large size (lg)': 'lg',
-  'Small size (sm)': 'sm'
+  "Regular size (xl)": "xl",
+  "Large size (lg)": "lg",
+  "Small size (sm)": "sm",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    size: select('Size (size)', sizes, 'xl'),
-    light: boolean('Light variant (light)', false),
-    name: text('Form item name (name)', ''),
-    labelText: text('Label text (labelText)', 'Search'),
+    size: select("Size (size)", sizes, "xl"),
+    light: boolean("Light variant (light)", false),
+    name: text("Form item name (name)", ""),
+    labelText: text("Label text (labelText)", "Search"),
     closeButtonLabelText: text(
-      'The label text for the close button (closeButtonLabelText)',
-      'Clear search input'
+      "The label text for the close button (closeButtonLabelText)",
+      "Clear search input"
     ),
-    placeholder: text('Placeholder text (placeholder)', 'Search')
-  }
+    placeholder: text("Placeholder text (placeholder)", "Search"),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Search/Search.svelte b/src/components/Search/Search.svelte
index 77bdf84e..5810791c 100644
--- a/src/components/Search/Search.svelte
+++ b/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>
diff --git a/src/components/Search/index.js b/src/components/Search/index.js
index 47fdbd17..535981c0 100644
--- a/src/components/Search/index.js
+++ b/src/components/Search/index.js
@@ -1,4 +1,2 @@
-import Search from './Search.svelte';
-
-export default Search;
-export { default as SearchSkeleton } from './Search.Skeleton.svelte';
+export { default as Search } from "./Search.svelte";
+export { default as SearchSkeleton } from "./Search.Skeleton.svelte";
diff --git a/src/components/Select/Select.Skeleton.svelte b/src/components/Select/Select.Skeleton.svelte
index 2d646ce3..895ccbc3 100644
--- a/src/components/Select/Select.Skeleton.svelte
+++ b/src/components/Select/Select.Skeleton.svelte
@@ -1,17 +1,18 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let hideLabel = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   {#if !hideLabel}
-    <span class={cx('--label', '--skeleton')} />
+    <span class:bx--label={true} class:bx--skeleton={true} />
   {/if}
-  <div class={cx('--select', '--skeleton')}>
-    <div class={cx('--select-input')} />
+  <div class:bx--select={true} class:bx--skeleton={true}>
+    <div class:bx--select-input={true} />
   </div>
 </div>
diff --git a/src/components/Select/Select.Story.svelte b/src/components/Select/Select.Story.svelte
index ceaa58fc..6d15639c 100644
--- a/src/components/Select/Select.Story.svelte
+++ b/src/components/Select/Select.Story.svelte
@@ -1,23 +1,31 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Select from './Select.svelte';
-  import SelectItem from './SelectItem.svelte';
-  import SelectSkeleton from './Select.Skeleton.svelte';
-  import SelectItemGroup from './SelectItemGroup.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Select from "./Select.svelte";
+  import SelectItem from "./SelectItem.svelte";
+  import SelectSkeleton from "./Select.Skeleton.svelte";
+  import SelectItemGroup from "./SelectItemGroup.svelte";
 
-  let selected = 'placeholder-item';
+  $: selected = "placeholder-item";
+  $: console.log(selected);
 </script>
 
 <Layout>
   <div>
-    {selected}
     {#if story === 'skeleton'}
       <SelectSkeleton {...$$props} />
     {:else}
-      <Select {...$$props.select} id="select-id" name="select-name" bind:selected>
-        <SelectItem value="placeholder-item" text="Choose an option" disabled hidden />
+      <Select
+        {...$$props.select}
+        id="select-id"
+        name="select-name"
+        bind:selected>
+        <SelectItem
+          value="placeholder-item"
+          text="Choose an option"
+          disabled
+          hidden />
         <SelectItemGroup {...$$props.group} label="Category 1">
           <SelectItem value="option-1" text="Option 1" />
           <SelectItem value="option-2" text="Option 2" />
diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
index a5347148..57a9d9d2 100644
--- a/src/components/Select/Select.stories.js
+++ b/src/components/Select/Select.stories.js
@@ -1,36 +1,38 @@
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import Component from './Select.Story.svelte';
+import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+import Component from "./Select.Story.svelte";
 
-export default { title: 'Select', decorators: [withKnobs] };
+export default { title: "Select", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
     select: {
-      light: boolean('Light variant (light in <Select>)', false),
-      inline: boolean('Put control in-line with label (inline in <Select>)', false),
-      disabled: boolean('Disabled (disabled in <Select>)', false),
-      hideLabel: boolean('No label (hideLabel in <Select>)', false),
-      invalid: boolean('Show form validation UI (invalid in <Select>)', false),
-      invalidText: text(
-        'Form validation UI content (invalidText in <Select>)',
-        'A valid value is required'
+      light: boolean("Light variant (light in <Select>)", false),
+      inline: boolean(
+        "Put control in-line with label (inline in <Select>)",
+        false
       ),
-      labelText: text('Label text (helperText)', 'Select'),
-      helperText: text('Helper text (helperText)', 'Optional helper text.'),
-      id: text('Select id', 'select-id'),
-      name: text('Select name', 'select-name')
+      disabled: boolean("Disabled (disabled in <Select>)", false),
+      hideLabel: boolean("No label (hideLabel in <Select>)", false),
+      invalid: boolean("Show form validation UI (invalid in <Select>)", false),
+      invalidText: text(
+        "Form validation UI content (invalidText in <Select>)",
+        "A valid value is required"
+      ),
+      labelText: text("Label text (helperText)", "Select"),
+      id: text("Select id", "select-id"),
+      name: text("Select name", "select-name"),
     },
     group: {
-      disabled: boolean('Disabled (disabled in <SelectItemGroup>)', false)
-    }
-  }
+      disabled: boolean("Disabled (disabled in <SelectItemGroup>)", false),
+    },
+  },
 });
 
 export const Skeleton = () => ({
   Component,
   props: {
-    story: 'skeleton',
-    hideLabel: boolean('No label (hideLabel in <Select>)', false)
-  }
+    story: "skeleton",
+    hideLabel: boolean("No label (hideLabel in <Select>)", false),
+  },
 });
diff --git a/src/components/Select/Select.svelte b/src/components/Select/Select.svelte
index 00bb6374..7bc7cd8b 100644
--- a/src/components/Select/Select.svelte
+++ b/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>
diff --git a/src/components/Select/SelectItem.svelte b/src/components/Select/SelectItem.svelte
index c04fb683..6acfed9f 100644
--- a/src/components/Select/SelectItem.svelte
+++ b/src/components/Select/SelectItem.svelte
@@ -1,24 +1,31 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let disabled = false;
   export let hidden = false;
-  export let style = undefined;
-  export let text = '';
-  export let value = '';
+  export let text = "";
+  export let value = "";
 
-  import { getContext } from 'svelte';
-  import { cx } from '../../lib';
+  import { getContext, onDestroy } from "svelte";
 
-  const ctx = getContext('Select') || getContext('TimePickerSelect');
+  const ctx = getContext("Select") || getContext("TimePickerSelect");
 
   let selected = false;
 
-  ctx.selectedValue.subscribe(currentValue => {
-    selected = currentValue === value;
+  const unsubscribe = ctx.selectedValue.subscribe($ => {
+    selected = $ === value;
+  });
+
+  onDestroy(() => {
+    unsubscribe();
   });
 </script>
 
-<option class={cx('--select-option', className)} {value} {disabled} {hidden} {style} {selected}>
+<option
+  {value}
+  {disabled}
+  {hidden}
+  {selected}
+  class:bx--select-option={true}
+  class={$$restProps.class}
+  style={$$restProps.style}>
   {text || value}
 </option>
diff --git a/src/components/Select/SelectItemGroup.svelte b/src/components/Select/SelectItemGroup.svelte
index e9fbf91d..e125402e 100644
--- a/src/components/Select/SelectItemGroup.svelte
+++ b/src/components/Select/SelectItemGroup.svelte
@@ -1,13 +1,8 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let disabled = false;
-  export let label = 'Provide label';
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let label = "Provide label";
 </script>
 
-<optgroup class={cx('--select-optgroup', className)} {label} {disabled} {style}>
+<optgroup {label} {disabled} class:bx--select-optgroup={true} {...$$restProps}>
   <slot />
 </optgroup>
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index b5ab0843..22f8cd67 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -1,6 +1,4 @@
-import Select from './Select.svelte';
-
-export default Select;
-export { default as SelectSkeleton } from './Select.Skeleton.svelte';
-export { default as SelectItem } from './SelectItem.svelte';
-export { default as SelectItemGroup } from './SelectItemGroup.svelte';
+export { default as Select } from "./Select.svelte";
+export { default as SelectSkeleton } from "./Select.Skeleton.svelte";
+export { default as SelectItem } from "./SelectItem.svelte";
+export { default as SelectItemGroup } from "./SelectItemGroup.svelte";
diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
index 815b0b42..c812182f 100644
--- a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
+++ b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
@@ -1,6 +1,6 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import SkeletonPlaceholder from './SkeletonPlaceholder.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import SkeletonPlaceholder from "./SkeletonPlaceholder.svelte";
 </script>
 
 <style>
diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
index 7a1b54f6..74ca3235 100644
--- a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
+++ b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
@@ -1,17 +1,17 @@
-import { withKnobs, select } from '@storybook/addon-knobs';
-import Component from './SkeletonPlaceholder.Story.svelte';
+import { withKnobs, select } from "@storybook/addon-knobs";
+import Component from "./SkeletonPlaceholder.Story.svelte";
 
-export default { title: 'SkeletonPlaceholder', decorators: [withKnobs] };
+export default { title: "SkeletonPlaceholder", decorators: [withKnobs] };
 
 const classes = {
-  'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
-  'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
-  'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large'
+  "my--skeleton__placeholder--small": "my--skeleton__placeholder--small",
+  "my--skeleton__placeholder--medium": "my--skeleton__placeholder--medium",
+  "my--skeleton__placeholder--large": "my--skeleton__placeholder--large",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    class: select('Classes with different sizes', classes)
-  }
+    class: select("Classes with different sizes", classes),
+  },
 });
diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
index 440b734e..c875b900 100644
--- a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
+++ b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
@@ -1,15 +1,7 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <div
+  class:bx--skeleton__placeholder={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--skeleton__placeholder', className)}
-  {style} />
+  on:mouseleave />
diff --git a/src/components/SkeletonPlaceholder/index.js b/src/components/SkeletonPlaceholder/index.js
index e725e815..ccdeebff 100644
--- a/src/components/SkeletonPlaceholder/index.js
+++ b/src/components/SkeletonPlaceholder/index.js
@@ -1,3 +1 @@
-import SkeletonPlaceholder from './SkeletonPlaceholder.svelte';
-
-export default SkeletonPlaceholder;
+export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder.svelte";
diff --git a/src/components/SkeletonText/SkeletonText.Story.svelte b/src/components/SkeletonText/SkeletonText.Story.svelte
index d35321b0..0a4969f0 100644
--- a/src/components/SkeletonText/SkeletonText.Story.svelte
+++ b/src/components/SkeletonText/SkeletonText.Story.svelte
@@ -1,6 +1,6 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import SkeletonText from './SkeletonText.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import SkeletonText from "./SkeletonText.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/SkeletonText/SkeletonText.stories.js b/src/components/SkeletonText/SkeletonText.stories.js
index d20942be..61039311 100644
--- a/src/components/SkeletonText/SkeletonText.stories.js
+++ b/src/components/SkeletonText/SkeletonText.stories.js
@@ -1,18 +1,18 @@
-import { withKnobs, select, boolean, number } from '@storybook/addon-knobs';
-import Component from './SkeletonText.Story.svelte';
+import { withKnobs, select, boolean, number } from "@storybook/addon-knobs";
+import Component from "./SkeletonText.Story.svelte";
 
-export default { title: 'SkeletonText', decorators: [withKnobs] };
+export default { title: "SkeletonText", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    heading: boolean('Skeleton text at a larger size (heading)'),
-    paragraph: boolean('Use multiple lines of text (paragraph)'),
-    lines: number('The number of lines in a paragraph (lines)', 3),
+    heading: boolean("Skeleton text at a larger size (heading)"),
+    paragraph: boolean("Use multiple lines of text (paragraph)"),
+    lines: number("The number of lines in a paragraph (lines)", 3),
     width: select(
-      'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
-      { '100%': '100%', '250px': '250px' },
-      '100%'
-    )
-  }
+      "Width (in px or %) of single line of text or max-width of paragraph lines (width)",
+      { "100%": "100%", "250px": "250px" },
+      "100%"
+    ),
+  },
 });
diff --git a/src/components/SkeletonText/SkeletonText.svelte b/src/components/SkeletonText/SkeletonText.svelte
index df8b1b8d..07c260bc 100644
--- a/src/components/SkeletonText/SkeletonText.svelte
+++ b/src/components/SkeletonText/SkeletonText.svelte
@@ -1,45 +1,41 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let heading = false;
   export let lines = 3;
+  export let heading = false;
   export let paragraph = false;
-  export let style = undefined;
-  export let width = '100%';
+  export let width = "100%";
 
-  import { cx, css } from '../../lib';
-
-  const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
-
-  let rows = [];
+  const randoms = [0.973, 0.153, 0.567];
 
+  $: rows = [];
   $: widthNum = parseInt(width, 10);
-  $: widthPx = width.includes('px');
-  $: widthPercent = width.includes('%');
+  $: widthPx = width.includes("px");
   $: if (paragraph) {
     for (let i = 0; i < lines; i++) {
       const min = widthPx ? widthNum - 75 : 0;
       const max = widthPx ? widthNum : 75;
-      const randomWidth = Math.floor(randoms[i % 3] * (max - min + 1)) + min + 'px';
-      rows = [...rows, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
+      const rand = Math.floor(randoms[i % 3] * (max - min + 1)) + min + "px";
+      rows = [...rows, { width: widthPx ? rand : `calc(${width} - ${rand})` }];
     }
   }
 </script>
 
 {#if paragraph}
-  <div on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+  <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
     {#each rows as { width }, i (width)}
       <p
-        class={cx('--skeleton__text', heading && '--skeleton__heading')}
-        style={`width: ${width};`} />
+        class:bx--skeleton__text={true}
+        class:bx--skeleton__heading={heading}
+        style="width: {width}" />
     {/each}
   </div>
 {:else}
   <p
+    class:bx--skeleton__text={true}
+    class:bx--skeleton__heading={heading}
+    {...$$restProps}
+    style="width: {width};{$$restProps.style}"
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--skeleton__text', heading && '--skeleton__heading', className)}
-    style={css([style, ['width', width]])} />
+    on:mouseleave />
 {/if}
diff --git a/src/components/SkeletonText/index.js b/src/components/SkeletonText/index.js
index 1f5595e0..7d47f3e4 100644
--- a/src/components/SkeletonText/index.js
+++ b/src/components/SkeletonText/index.js
@@ -1,3 +1 @@
-import SkeletonText from './SkeletonText.svelte';
-
-export default SkeletonText;
+export { default as SkeletonText } from "./SkeletonText.svelte";
diff --git a/src/components/Slider/Slider.Skeleton.svelte b/src/components/Slider/Slider.Skeleton.svelte
index f074f788..788b11ac 100644
--- a/src/components/Slider/Slider.Skeleton.svelte
+++ b/src/components/Slider/Slider.Skeleton.svelte
@@ -1,23 +1,24 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let hideLabel = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   {#if !hideLabel}
-    <span class={cx('--label', '--skeleton')} />
+    <span class:bx--label={true} class:bx--skeleton={true} />
   {/if}
-  <div class={cx('--slider-container', '--skeleton')}>
-    <span class={cx('--slider__range-label')} />
-    <div class={cx('--slider')}>
-      <div class={cx('--slider__track')} />
-      <div class={cx('--slider__filled-track')} />
-      <div class={cx('--slider__thumb')} />
+  <div class:bx--slider-container={true} class:bx--skeleton={true}>
+    <span class:bx--slider__range-label={true} />
+    <div class:bx--slider={true}>
+      <div class:bx--slider__track={true} />
+      <div class:bx--slider__filled-track={true} />
+      <div class:bx--slider__thumb={true} />
     </div>
-    <span class={cx('--slider__range-label')} />
+    <span class:bx--slider__range-label={true} />
   </div>
 </div>
diff --git a/src/components/Slider/Slider.Story.svelte b/src/components/Slider/Slider.Story.svelte
index a5f393b0..a86a0224 100644
--- a/src/components/Slider/Slider.Story.svelte
+++ b/src/components/Slider/Slider.Story.svelte
@@ -1,11 +1,11 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Slider from './Slider.svelte';
-  import SliderSkeleton from './Slider.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Slider from "./Slider.svelte";
+  import SliderSkeleton from "./Slider.Skeleton.svelte";
 
-  let value = 50;
+  $: value = 50;
 </script>
 
 <Layout>
diff --git a/src/components/Slider/Slider.stories.js b/src/components/Slider/Slider.stories.js
index 783edbdb..25b3d8d0 100644
--- a/src/components/Slider/Slider.stories.js
+++ b/src/components/Slider/Slider.stories.js
@@ -1,36 +1,39 @@
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
-import Component from './Slider.Story.svelte';
+import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
+import Component from "./Slider.Story.svelte";
 
-export default { title: 'Slider', decorators: [withKnobs] };
+export default { title: "Slider", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    id: text('Slider id', 'slider-id'),
-    name: text('Form item name (name)', ''),
-    inputType: text('The form element type (inputType)', 'number'),
+    id: text("Slider id", "slider-id"),
+    name: text("Form item name (name)", ""),
+    inputType: text("The form element type (inputType)", "number"),
     ariaLabelInput: text(
-      'The ARIA label for the <input> (ariaLabelInput)',
-      'Label for slider value'
+      "The ARIA label for the <input> (ariaLabelInput)",
+      "Label for slider value"
     ),
-    disabled: boolean('Disabled (disabled)', false),
-    light: boolean('Light variant (light)', false),
-    hideTextInput: boolean('Without text input (hideTextInput)', false),
-    min: number('The minimum value (min)', 0),
-    max: number('The maximum value (max)', 100),
-    step: number('The step (step)', 1),
-    stepMuliplier: number('The step factor for Shift+arrow keys (stepMuliplier)', 4),
-    labelText: text('Label text (labelText)', 'Slider Label'),
-    minLabel: text('Label for minimum value (minLabel)', ''),
-    maxLabel: text('Label for maximum value (maxLabel)', ''),
-    hideLabel: boolean('Hide label (hideLabel)', false)
-  }
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    hideTextInput: boolean("Without text input (hideTextInput)", false),
+    min: number("The minimum value (min)", 0),
+    max: number("The maximum value (max)", 100),
+    step: number("The step (step)", 1),
+    stepMuliplier: number(
+      "The step factor for Shift+arrow keys (stepMuliplier)",
+      4
+    ),
+    labelText: text("Label text (labelText)", "Slider Label"),
+    minLabel: text("Label for minimum value (minLabel)", ""),
+    maxLabel: text("Label for maximum value (maxLabel)", ""),
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
 });
 
 export const Skeleton = () => ({
   Component,
   props: {
-    story: 'skeleton',
-    hideLabel: boolean('Hide label (hideLabel)', false)
-  }
+    story: "skeleton",
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
 });
diff --git a/src/components/Slider/Slider.svelte b/src/components/Slider/Slider.svelte
index 2d795a19..2def372a 100644
--- a/src/components/Slider/Slider.svelte
+++ b/src/components/Slider/Slider.svelte
@@ -1,33 +1,29 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let disabled = false;
   export let hideTextInput = false;
-  export let id = Math.random();
-  export let inputType = 'number';
+  export let id = "ccs-" + Math.random().toString(36);
+  export let inputType = "number";
   export let invalid = false;
-  export let labelText = '';
+  export let labelText = "";
   export let light = false;
   export let max = 100;
-  export let maxLabel = '';
+  export let maxLabel = "";
   export let min = 0;
-  export let minLabel = '';
-  export let name = '';
+  export let minLabel = "";
+  export let name = "";
   export let required = false;
   export let step = 1;
   export let stepMultiplier = 4;
-  export let style = undefined;
-  export let value = '';
+  export let value = "";
+  export let ref = null;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, afterUpdate } from "svelte";
 
   const dispatch = createEventDispatcher();
 
+  let trackRef = null;
   let dragging = false;
   let holding = false;
-  let elementRef = undefined;
-  let trackRef = undefined;
 
   function startDragging() {
     dragging = true;
@@ -41,10 +37,12 @@
     holding = false;
   }
 
-  function calcValue(event) {
-    const offsetX = event.touches ? event.touches[0].clientX : event.clientX;
+  function calcValue(e) {
+    const offsetX = e.touches ? e.touches[0].clientX : e.clientX;
     const { left, width } = trackRef.getBoundingClientRect();
-    let nextValue = min + Math.round(((max - min) * ((offsetX - left) / width)) / step) * step;
+    let nextValue =
+      min +
+      Math.round(((max - min) * ((offsetX - left) / width)) / step) * step;
 
     if (nextValue <= min) {
       nextValue = min;
@@ -57,7 +55,7 @@
 
   afterUpdate(() => {
     if (!holding) {
-      dispatch('change', value);
+      dispatch("change", value);
     }
   });
 
@@ -77,15 +75,24 @@
   }
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
-  <label for={id} class={cx('--label', disabled && '--label--disabled')}>{labelText}</label>
-  <div class={cx('--slider-container')}>
-    <span class={cx('--slider__range-label')}>{minLabel || min}</span>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+    {labelText}
+  </label>
+  <div class:bx--slider-container={true}>
+    <span class:bx--slider__range-label={true}>{minLabel || min}</span>
     <div
-      bind:this={elementRef}
+      bind:this={ref}
       role="presentation"
       tabindex="-1"
-      class={cx('--slider', disabled && '--slider--disabled')}
+      class:bx--slider={true}
+      class:bx--slider--disabled={disabled}
       on:click={startDragging}
       on:mousemove={() => {
         if (holding) {
@@ -104,8 +111,8 @@
       <div
         role="slider"
         tabindex="0"
-        class={cx('--slider__thumb')}
-        style={`left: ${left}%`}
+        class:bx--slider__thumb={true}
+        style="left: {left}%"
         aria-valuemax={max}
         aria-valuemin={min}
         aria-valuenow={value}
@@ -118,13 +125,13 @@
           }
         }}
         {id} />
-      <div bind:this={trackRef} class={cx('--slider__track')} />
+      <div bind:this={trackRef} class:bx--slider__track={true} />
       <div
-        class={cx('--slider__filled-track')}
-        style={`transform: translate(0, -50%) scaleX(${left / 100})`} />
+        class:bx--slider__filled-track={true}
+        style="transform: translate(0, -50%) scaleX({left / 100})" />
       <input
         type="hidden"
-        class={cx('--slider__input')}
+        class:bx--slider__input={true}
         {name}
         {value}
         {required}
@@ -132,13 +139,16 @@
         {max}
         {step} />
     </div>
-    <span class={cx('--slider__range-label')}>{maxLabel || max}</span>
+    <span class:bx--slider__range-label={true}>{maxLabel || max}</span>
     {#if !hideTextInput}
       <input
         type={inputType}
-        id={`input-${id}`}
+        id="input-{id}"
         aria-label={$$props['aria-label'] || 'Slider number input'}
-        class={cx('--text-input', '--slider-text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+        class:bx--text-input={true}
+        class:bx--slider-text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
         on:change={({ target }) => {
           value = Number(target.value);
         }}
diff --git a/src/components/Slider/index.js b/src/components/Slider/index.js
index 21935888..558290e1 100644
--- a/src/components/Slider/index.js
+++ b/src/components/Slider/index.js
@@ -1,4 +1,2 @@
-import Slider from './Slider.svelte';
-
-export default Slider;
-export { default as SliderSkeleton } from './Slider.Skeleton.svelte';
+export { default as Slider } from "./Slider.svelte";
+export { default as SliderSkeleton } from "./Slider.Skeleton.svelte";
diff --git a/src/components/StructuredList/StructuredList.Skeleton.svelte b/src/components/StructuredList/StructuredList.Skeleton.svelte
index 6596baef..05e50df6 100644
--- a/src/components/StructuredList/StructuredList.Skeleton.svelte
+++ b/src/components/StructuredList/StructuredList.Skeleton.svelte
@@ -1,39 +1,38 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let border = false;
   export let rows = 5;
-  export let style = undefined;
-
-  import { cx, fillArray } from '../../lib';
 </script>
 
 <section
+  class:bx--skeleton={true}
+  class:bx--structured-list={true}
+  class:bx--structured-list--border={border}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--skeleton', '--structured-list', border && '--structured-list--border', className)}
-  {style}>
-  <div class={cx('--structured-list-thead')}>
-    <div class={cx('--structured-list-row', '--structured-list-row--header-row')}>
-      <div class={cx('--structured-list-th')}>
+  on:mouseleave>
+  <div class:bx--structured-list-thead={true}>
+    <div
+      class:bx--structured-list-row={true}
+      class:bx--structured-list-row--header-row={true}>
+      <div class:bx--structured-list-th={true}>
         <span />
       </div>
-      <div class={cx('--structured-list-th')}>
+      <div class:bx--structured-list-th={true}>
         <span />
       </div>
-      <div class={cx('--structured-list-th')}>
+      <div class:bx--structured-list-th={true}>
         <span />
       </div>
     </div>
   </div>
-  <div class={cx('--structured-list-tbody')}>
-    {#each fillArray(rows) as row, i (row)}
-      <div class={cx('--structured-list-row')}>
-        <div class={cx('--structured-list-td')} />
-        <div class={cx('--structured-list-td')} />
-        <div class={cx('--structured-list-td')} />
+  <div class:bx--structured-list-tbody={true}>
+    {#each Array.from({ length: rows }, (_, i) => i) as row, i (row)}
+      <div class:bx--structured-list-row={true}>
+        <div class:bx--structured-list-td={true} />
+        <div class:bx--structured-list-td={true} />
+        <div class:bx--structured-list-td={true} />
       </div>
     {/each}
   </div>
diff --git a/src/components/StructuredList/StructuredList.Story.svelte b/src/components/StructuredList/StructuredList.Story.svelte
index 593bf2e5..9ee6a699 100644
--- a/src/components/StructuredList/StructuredList.Story.svelte
+++ b/src/components/StructuredList/StructuredList.Story.svelte
@@ -1,18 +1,17 @@
 <script>
   export let story = undefined;
 
-  import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
-  import Layout from '../../internal/ui/Layout.svelte';
-  import { cx } from '../../lib';
-  import StructuredListBody from './StructuredListBody.svelte';
-  import StructuredListCell from './StructuredListCell.svelte';
-  import StructuredListHead from './StructuredListHead.svelte';
-  import StructuredListInput from './StructuredListInput.svelte';
-  import StructuredListRow from './StructuredListRow.svelte';
-  import StructuredListSkeleton from './StructuredList.Skeleton.svelte';
-  import StructuredList from './StructuredList.svelte';
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import Layout from "../../internal/ui/Layout.svelte";
+  import StructuredListBody from "./StructuredListBody.svelte";
+  import StructuredListCell from "./StructuredListCell.svelte";
+  import StructuredListHead from "./StructuredListHead.svelte";
+  import StructuredListInput from "./StructuredListInput.svelte";
+  import StructuredListRow from "./StructuredListRow.svelte";
+  import StructuredListSkeleton from "./StructuredList.Skeleton.svelte";
+  import StructuredList from "./StructuredList.svelte";
 
-  let selected = 'row-1-value';
+  $: selected = "row-1-value";
 </script>
 
 <Layout>
@@ -33,22 +32,23 @@
         </StructuredListHead>
         <StructuredListBody>
           {#each [0, 1, 2, 3] as item, i (item)}
-            <StructuredListRow label for={`row-${i}`}>
+            <StructuredListRow label for="row-{i}">
               <StructuredListCell>Row {i}</StructuredListCell>
               <StructuredListCell>Row {i}</StructuredListCell>
               <StructuredListCell>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id
-                tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla
-                ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+                Pellentesque vulputate nisl a porttitor interdum.
               </StructuredListCell>
               <StructuredListInput
-                id={`row-${i}`}
-                value={`row-${i}-value`}
-                title={`row-${i}-title`}
-                name={`row-${i}-name`} />
+                id="row-{i}"
+                value="row-{i}-value"
+                title="row-{i}-title"
+                name="row-{i}-name" />
               <StructuredListCell>
                 <CheckmarkFilled16
-                  class={cx('--structured-list-svg')}
+                  class="bx--structured-list-svg"
                   aria-label="select an option"
                   title="select an option" />
               </StructuredListCell>
@@ -70,18 +70,20 @@
             <StructuredListCell noWrap>Row 1</StructuredListCell>
             <StructuredListCell>Row 1</StructuredListCell>
             <StructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id
-              tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut
-              cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+              Pellentesque vulputate nisl a porttitor interdum.
             </StructuredListCell>
           </StructuredListRow>
           <StructuredListRow>
             <StructuredListCell noWrap>Row 2</StructuredListCell>
             <StructuredListCell>Row 2</StructuredListCell>
             <StructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id
-              tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut
-              cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+              Pellentesque vulputate nisl a porttitor interdum.
             </StructuredListCell>
           </StructuredListRow>
         </StructuredListBody>
diff --git a/src/components/StructuredList/StructuredList.stories.js b/src/components/StructuredList/StructuredList.stories.js
index aaa0cb79..e56d3130 100644
--- a/src/components/StructuredList/StructuredList.stories.js
+++ b/src/components/StructuredList/StructuredList.stories.js
@@ -1,10 +1,10 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import Component from './StructuredList.Story.svelte';
+import { withKnobs } from "@storybook/addon-knobs";
+import Component from "./StructuredList.Story.svelte";
 
-export default { title: 'StructuredList', decorators: [withKnobs] };
+export default { title: "StructuredList", decorators: [withKnobs] };
 
 export const Default = () => ({ Component });
 
-export const Selection = () => ({ Component, props: { story: 'selection' } });
+export const Selection = () => ({ Component, props: { story: "selection" } });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/StructuredList/StructuredList.svelte b/src/components/StructuredList/StructuredList.svelte
index 41d2629e..8652d0d6 100644
--- a/src/components/StructuredList/StructuredList.svelte
+++ b/src/components/StructuredList/StructuredList.svelte
@@ -1,20 +1,15 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let selected = undefined;
   export let border = false;
   export let selection = false;
-  export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
 
-  let selectedValue = writable(selected);
-
-  setContext('StructuredListWrapper', {
+  setContext("StructuredListWrapper", {
     selectedValue,
     update: value => {
       selectedValue.set(value);
@@ -22,18 +17,18 @@
   });
 
   $: selected = $selectedValue;
-  $: {
-    dispatch('change', $selectedValue);
-  }
+  $: dispatch("change", $selectedValue);
 </script>
 
 <section
+  aria-label="Structured list section"
+  class:bx--structured-list={true}
+  class:bx--structured-list--border={border}
+  class:bx--structured-list--selection={selection}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  aria-label={$$props['aria-label'] || 'Structured list section'}
-  class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </section>
diff --git a/src/components/StructuredList/StructuredListBody.svelte b/src/components/StructuredList/StructuredListBody.svelte
index f2be4c29..2cfddbaf 100644
--- a/src/components/StructuredList/StructuredListBody.svelte
+++ b/src/components/StructuredList/StructuredListBody.svelte
@@ -1,17 +1,9 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <div
+  class:bx--structured-list-tbody={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--structured-list-tbody', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </div>
diff --git a/src/components/StructuredList/StructuredListCell.svelte b/src/components/StructuredList/StructuredListCell.svelte
index a167c2af..b9547616 100644
--- a/src/components/StructuredList/StructuredListCell.svelte
+++ b/src/components/StructuredList/StructuredListCell.svelte
@@ -1,19 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let head = false;
   export let noWrap = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <div
+  class:bx--structured-list-th={head}
+  class:bx--structured-list-td={!head}
+  class:bx--structured-list-content--nowrap={noWrap}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx(head && '--structured-list-th', !head && '--structured-list-td', noWrap && '--structured-list-content--nowrap', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </div>
diff --git a/src/components/StructuredList/StructuredListHead.svelte b/src/components/StructuredList/StructuredListHead.svelte
index d2d63418..3fd77c40 100644
--- a/src/components/StructuredList/StructuredListHead.svelte
+++ b/src/components/StructuredList/StructuredListHead.svelte
@@ -1,17 +1,9 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <div
+  class:bx--structured-list-thead={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--structured-list-thead', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </div>
diff --git a/src/components/StructuredList/StructuredListInput.svelte b/src/components/StructuredList/StructuredListInput.svelte
index bcf433c8..dc9b2912 100644
--- a/src/components/StructuredList/StructuredListInput.svelte
+++ b/src/components/StructuredList/StructuredListInput.svelte
@@ -1,17 +1,14 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let checked = false;
-  export let id = Math.random();
-  export let name = '';
-  export let style = undefined;
-  export let title = 'title';
-  export let value = 'value';
+  export let title = "title";
+  export let value = "value";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let ref = null;
 
-  import { getContext } from 'svelte';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
 
-  const { selectedValue, update } = getContext('StructuredListWrapper');
+  const { selectedValue, update } = getContext("StructuredListWrapper");
 
   if (checked) {
     update(value);
@@ -21,15 +18,16 @@
 </script>
 
 <input
+  bind:this={ref}
   type="radio"
   tabindex="-1"
-  class={cx('--structured-list-input', className)}
-  on:change={() => {
-    update(value);
-  }}
   {checked}
   {id}
   {name}
-  {style}
   {title}
-  {value} />
+  {value}
+  class:bx--structured-list-input={true}
+  {...$$restProps}
+  on:change={() => {
+    update(value);
+  }} />
diff --git a/src/components/StructuredList/StructuredListRow.svelte b/src/components/StructuredList/StructuredListRow.svelte
index 71e79dc8..0c70ccd4 100644
--- a/src/components/StructuredList/StructuredListRow.svelte
+++ b/src/components/StructuredList/StructuredListRow.svelte
@@ -1,36 +1,32 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let head = false;
   export let label = false;
-  export let style = undefined;
-  export let tabindex = '0';
-
-  import { cx } from '../../lib';
+  export let tabindex = "0";
 </script>
 
 {#if label}
   <label
     role="presentation"
+    {tabindex}
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
-    on:keydown
-    class={cx('--structured-list-row', head && '--structured-list-row--header-row', className)}
-    for={$$props.for}
-    {tabindex}
-    {style}>
+    on:keydown>
     <slot />
   </label>
 {:else}
   <div
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave
-    class={cx('--structured-list-row', head && '--structured-list-row--header-row', className)}
-    {style}>
+    on:mouseleave>
     <slot />
   </div>
 {/if}
diff --git a/src/components/StructuredList/index.js b/src/components/StructuredList/index.js
index b1580ea5..6b3bf38e 100644
--- a/src/components/StructuredList/index.js
+++ b/src/components/StructuredList/index.js
@@ -1,10 +1,7 @@
-import StructuredList from './StructuredList.svelte';
-
-export default StructuredList;
-
-export { default as StructuredListSkeleton } from './StructuredList.Skeleton.svelte';
-export { default as StructuredListBody } from './StructuredListBody.svelte';
-export { default as StructuredListHead } from './StructuredListHead.svelte';
-export { default as StructuredListCell } from './StructuredListCell.svelte';
-export { default as StructuredListRow } from './StructuredListRow.svelte';
-export { default as StructuredListInput } from './StructuredListInput.svelte';
+export { default as StructuredList } from "./StructuredList.svelte";
+export { default as StructuredListSkeleton } from "./StructuredList.Skeleton.svelte";
+export { default as StructuredListBody } from "./StructuredListBody.svelte";
+export { default as StructuredListHead } from "./StructuredListHead.svelte";
+export { default as StructuredListCell } from "./StructuredListCell.svelte";
+export { default as StructuredListRow } from "./StructuredListRow.svelte";
+export { default as StructuredListInput } from "./StructuredListInput.svelte";
diff --git a/src/components/Tabs/Tab.svelte b/src/components/Tabs/Tab.svelte
index f454fd95..39d71b43 100644
--- a/src/components/Tabs/Tab.svelte
+++ b/src/components/Tabs/Tab.svelte
@@ -1,32 +1,31 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let disabled = false;
-  export let href = '#';
-  export let label = '';
-  export let role = 'presentation';
-  export let style = undefined;
-  export let tabindex = '0';
+  export let href = "#";
+  export let label = "";
+  export let role = "presentation";
+  export let tabindex = "0";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { getContext } from 'svelte';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
 
-  const id = Math.random();
-  const { selectedTab, add, update, change } = getContext('Tabs');
-
-  let anchorRef = undefined;
+  const { selectedTab, add, update, change } = getContext("Tabs");
 
   add({ id, label, disabled });
 
   $: selected = $selectedTab === id;
-  $: if (selected && anchorRef) {
-    anchorRef.focus();
+  $: if (selected && ref) {
+    ref.focus();
   }
 </script>
 
 <li
   tabindex="-1"
-  class={cx('--tabs__nav-item', disabled && '--tabs__nav-item--disabled', selected && '--tabs__nav-item--selected', className)}
+  {role}
+  class:bx--tabs__nav-item={true}
+  class:bx--tabs__nav-item--disabled={disabled}
+  class:bx--tabs__nav-item--selected={selected}
+  {...$$restProps}
   on:click|preventDefault={() => {
     if (!disabled) {
       update(id);
@@ -45,17 +44,15 @@
         update(id);
       }
     }
-  }}
-  {role}
-  {style}>
+  }}>
   <a
-    bind:this={anchorRef}
+    bind:this={ref}
     role="tab"
     tabindex={disabled ? '-1' : tabindex}
     aria-selected={selected}
     aria-disabled={disabled}
-    class={cx('--tabs__nav-link')}
-    {href}>
+    {href}
+    class:bx--tabs__nav-link={true}>
     {label}
   </a>
 </li>
diff --git a/src/components/Tabs/TabContent.svelte b/src/components/Tabs/TabContent.svelte
index 045de6e7..c46e0b6d 100644
--- a/src/components/Tabs/TabContent.svelte
+++ b/src/components/Tabs/TabContent.svelte
@@ -1,19 +1,19 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
+  export let id = "ccs-" + Math.random().toString(36);
+  import { getContext } from "svelte";
 
-  import { getContext } from 'svelte';
-  import { cx } from '../../lib';
-
-  const id = Math.random();
-  const { selectedContent, addContent } = getContext('Tabs');
+  const { selectedContent, addContent } = getContext("Tabs");
 
   addContent({ id });
 
   $: selected = $selectedContent === id;
 </script>
 
-<div aria-hidden={!selected} hidden={!selected} class={cx('--tab-content', className)} {style}>
+<div
+  aria-hidden={!selected}
+  hidden={!selected}
+  class:bx--tab-content={true}
+  class={$$restProps.class}
+  style={$$restProps.style}>
   <slot />
 </div>
diff --git a/src/components/Tabs/Tabs.Story.svelte b/src/components/Tabs/Tabs.Story.svelte
index ba95fdd0..db37ccfc 100644
--- a/src/components/Tabs/Tabs.Story.svelte
+++ b/src/components/Tabs/Tabs.Story.svelte
@@ -1,15 +1,15 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Tab from './Tab.svelte';
-  import TabContent from './TabContent.svelte';
-  import Tabs from './Tabs.svelte';
-  import TabsSkeleton from './TabsSkeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Tab from "./Tab.svelte";
+  import TabContent from "./TabContent.svelte";
+  import Tabs from "./Tabs.svelte";
+  import TabsSkeleton from "./TabsSkeleton.svelte";
 
   const { tabProps, ...tabsProps } = $$props;
 
-  let selected = 0;
+  $: selected = 0;
 </script>
 
 <Layout>
diff --git a/src/components/Tabs/Tabs.stories.js b/src/components/Tabs/Tabs.stories.js
index f1e26189..bfd8e04c 100644
--- a/src/components/Tabs/Tabs.stories.js
+++ b/src/components/Tabs/Tabs.stories.js
@@ -1,45 +1,48 @@
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
-import Component from './Tabs.Story.svelte';
+import { withKnobs, boolean, number, text } from "@storybook/addon-knobs";
+import Component from "./Tabs.Story.svelte";
 
-export default { title: 'Tabs', decorators: [withKnobs] };
+export default { title: "Tabs", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
     tabProps: {
-      disabled: boolean('Disabled (disabled in <Tab>)', false),
-      href: text('The href for tab (href in <Tab>)', '#'),
-      role: text('ARIA role (role in <Tab>)', 'presentation'),
-      tabindex: text('Tab index (tabindex in <Tab>)', '0')
+      disabled: boolean("Disabled (disabled in <Tab>)", false),
+      href: text("The href for tab (href in <Tab>)", "#"),
+      role: text("ARIA role (role in <Tab>)", "presentation"),
+      tabindex: text("Tab index (tabindex in <Tab>)", "0"),
     },
     tabsProps: {
-      className: 'some-class',
-      selected: number('The index of the selected tab (selected in <Tabs>)', 1),
-      triggerHref: text('The href of trigger button for narrow mode (triggerHref in <Tabs>)', '#'),
-      role: text('ARIA role (role in <Tabs>)', 'navigation'),
+      className: "some-class",
+      selected: number("The index of the selected tab (selected in <Tabs>)", 1),
+      triggerHref: text(
+        "The href of trigger button for narrow mode (triggerHref in <Tabs>)",
+        "#"
+      ),
+      role: text("ARIA role (role in <Tabs>)", "navigation"),
       iconDescription: text(
-        'The description of the trigger icon for narrow mode (iconDescription in <Tabs>)',
-        'show menu options'
+        "The description of the trigger icon for narrow mode (iconDescription in <Tabs>)",
+        "show menu options"
       ),
       tabContentClassName: text(
-        'The className for the child `<TabContent>` components',
-        'tab-content'
-      )
-    }
-  }
+        "The className for the child `<TabContent>` components",
+        "tab-content"
+      ),
+    },
+  },
 });
 
 export const Container = () => ({
   Component,
   props: {
-    story: 'container',
+    story: "container",
     tabProps: {
-      disabled: boolean('Disabled (disabled in <Tab>)', false),
-      href: text('The href for tab (href in <Tab>)', '#'),
-      role: text('ARIA role (role in <Tab>)', 'presentation'),
-      tabindex: text('Tab index (tabindex in <Tab>)', '0')
-    }
-  }
+      disabled: boolean("Disabled (disabled in <Tab>)", false),
+      href: text("The href for tab (href in <Tab>)", "#"),
+      role: text("ARIA role (role in <Tab>)", "presentation"),
+      tabindex: text("Tab index (tabindex in <Tab>)", "0"),
+    },
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Tabs/Tabs.svelte b/src/components/Tabs/Tabs.svelte
index b012e2d7..0991c8dd 100644
--- a/src/components/Tabs/Tabs.svelte
+++ b/src/components/Tabs/Tabs.svelte
@@ -1,29 +1,27 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let iconDescription = 'Show menu options';
-  export let role = 'navigation';
+  export let iconDescription = "Show menu options";
+  export let role = "navigation";
   export let selected = 0;
-  export let style = undefined;
-  export let triggerHref = '#';
-  export let type = 'default';
+  export let triggerHref = "#";
+  export let type = "default";
 
-  import { createEventDispatcher, afterUpdate, setContext } from 'svelte';
-  import { writable, derived } from 'svelte/store';
-  import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
 
   const dispatch = createEventDispatcher();
 
   let dropdownHidden = true;
   let tabs = writable([]);
-  let tabsById = derived(tabs, _ => _.reduce((a, c) => ({ ...a, [c.id]: c }), {}));
+  let tabsById = derived(tabs, _ =>
+    _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
+  );
   let currentIndex = selected;
   let selectedTab = writable(undefined);
   let content = writable([]);
   let selectedContent = writable(undefined);
 
-  setContext('Tabs', {
+  setContext("Tabs", {
     selectedTab,
     selectedContent,
     add: data => {
@@ -70,7 +68,7 @@
   $: currentTab = $tabs[currentIndex] || undefined;
   $: currentContent = $content[currentIndex] || undefined;
   $: {
-    dispatch('change', currentIndex);
+    dispatch("change", currentIndex);
 
     if (currentTab) {
       selectedTab.set(currentTab.id);
@@ -85,11 +83,15 @@
   }
 </script>
 
-<div class={cx('--tabs', type === 'container' && '--tabs--container', className)} {style} {role}>
+<div
+  {role}
+  class:bx--tabs={true}
+  class:bx--tabs--container={type === 'container'}
+  {...$$restProps}>
   <div
     role="listbox"
     tabindex="0"
-    class={cx('--tabs-trigger')}
+    class:bx--tabs-trigger={true}
     aria-label={$$props['aria-label'] || 'listbox'}
     on:click={() => {
       dropdownHidden = !dropdownHidden;
@@ -100,7 +102,7 @@
     }}>
     <a
       tabindex="-1"
-      class={cx('--tabs-trigger-text')}
+      class:bx--tabs-trigger-text={true}
       href={triggerHref}
       on:click
       on:click={() => {
@@ -110,7 +112,10 @@
     </a>
     <ChevronDownGlyph aria-hidden="true" title={iconDescription} />
   </div>
-  <ul role="tablist" class={cx('--tabs__nav', dropdownHidden && '--tabs__nav--hidden')}>
+  <ul
+    role="tablist"
+    class:bx--tabs__nav={true}
+    class:bx--tabs__nav--hidden={dropdownHidden}>
     <slot />
   </ul>
 </div>
diff --git a/src/components/Tabs/TabsSkeleton.svelte b/src/components/Tabs/TabsSkeleton.svelte
index 434cbf5d..14489959 100644
--- a/src/components/Tabs/TabsSkeleton.svelte
+++ b/src/components/Tabs/TabsSkeleton.svelte
@@ -1,28 +1,21 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <div
+  class:bx--tabs={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--tabs', '--skeleton', className)}
-  {style}>
-  <div class={cx('--tabs-trigger')}>
-    <div class={cx('--tabs-trigger-text')}>&nbsp;</div>
+  on:mouseleave>
+  <div class:bx--tabs-trigger={true}>
+    <div class:bx--tabs-trigger-text={true}>&nbsp;</div>
     <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
       <path d="M10 0L5 5 0 0z" />
     </svg>
   </div>
-  <ul class={cx('--tabs__nav', '--tabs__nav--hidden')}>
+  <ul class:bx--tabs__nav={true} class:bx--tabs__nav--hidden={true}>
     {#each [0, 1, 2, 3] as item, i (item)}
-      <li class={cx('--tabs__nav-item')}>
-        <div class={cx('--tabs__nav-link')}>&nbsp;</div>
+      <li class:bx--tabs__nav-item={true}>
+        <div class:bx--tabs__nav-link={true}>&nbsp;</div>
       </li>
     {/each}
   </ul>
diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js
index 9ff5322a..34945487 100644
--- a/src/components/Tabs/index.js
+++ b/src/components/Tabs/index.js
@@ -1,6 +1,4 @@
-import Tabs from './Tabs.svelte';
-
-export default Tabs;
-export { default as Tab } from './Tab.svelte';
-export { default as TabContent } from './TabContent.svelte';
-export { default as TabsSkeleton } from './TabsSkeleton.svelte';
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Tab } from "./Tab.svelte";
+export { default as TabContent } from "./TabContent.svelte";
+export { default as TabsSkeleton } from "./TabsSkeleton.svelte";
diff --git a/src/components/Tag/Tag.svelte b/src/components/Tag/Tag.svelte
index 7fa869df..df023780 100644
--- a/src/components/Tag/Tag.svelte
+++ b/src/components/Tag/Tag.svelte
@@ -1,8 +1,8 @@
 <script>
-  export let type = undefined;
+  export let type = undefined; // "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"
   export let filter = false;
-  export let title = "Clear filter";
   export let disabled = false;
+  export let title = "Clear filter";
   export let id = "ccs-" + Math.random().toString(36);
 
   import Close16 from "carbon-icons-svelte/lib/Close16";
@@ -17,7 +17,7 @@
     class="bx--tag--{type}"
     {id}
     {...$$restProps}>
-    <slot class="bx--tag__label">
+    <slot props={{ class: 'bx--tag__label' }}>
       <span class:bx--tag__label={true}>{type}</span>
     </slot>
     <button
diff --git a/src/components/TextArea/TextArea.Skeleton.svelte b/src/components/TextArea/TextArea.Skeleton.svelte
index 5edd43b6..9f4e44d3 100644
--- a/src/components/TextArea/TextArea.Skeleton.svelte
+++ b/src/components/TextArea/TextArea.Skeleton.svelte
@@ -1,15 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let hideLabel = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   {#if !hideLabel}
-    <span class={cx('--label', '--skeleton')} />
+    <span class:bx--label={true} class:bx--skeleton={true} />
   {/if}
-  <div class={cx('--skeleton', '--text-area')} />
+  <div class:bx--skeleton={true} class:bx--text-area={true} />
 </div>
diff --git a/src/components/TextArea/TextArea.Story.svelte b/src/components/TextArea/TextArea.Story.svelte
index a5233aba..f03bc62d 100644
--- a/src/components/TextArea/TextArea.Story.svelte
+++ b/src/components/TextArea/TextArea.Story.svelte
@@ -1,17 +1,20 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import TextArea from './TextArea.svelte';
-  import TextAreaSkeleton from './TextArea.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import TextArea from "./TextArea.svelte";
+  import TextAreaSkeleton from "./TextArea.Skeleton.svelte";
 
-  let value = '';
+  $: ref = null;
+  $: console.log(ref);
+  $: value = "";
+  $: console.log("bound value:", value);
 </script>
 
 <Layout>
   {#if story === 'skeleton'}
     <TextAreaSkeleton {...$$props} />
   {:else}
-    <TextArea {...$$props} bind:value />
+    <TextArea {...$$props} bind:value bind:ref />
   {/if}
 </Layout>
diff --git a/src/components/TextArea/TextArea.stories.js b/src/components/TextArea/TextArea.stories.js
index 7243d8aa..d353bac5 100644
--- a/src/components/TextArea/TextArea.stories.js
+++ b/src/components/TextArea/TextArea.stories.js
@@ -1,24 +1,26 @@
-import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
-import Component from './TextArea.Story.svelte';
+import { withKnobs, boolean, text, number } from "@storybook/addon-knobs";
+import Component from "./TextArea.Story.svelte";
 
-export default { title: 'TextArea', decorators: [withKnobs] };
+export default { title: "TextArea", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    id: text('TextArea id', 'text-area-id'),
-    name: text('TextArea name', 'text-area-name'),
-    disabled: boolean('Disabled (disabled)', false),
-    light: boolean('Light variant (light)', false),
-    hideLabel: boolean('No label (hideLabel)', false),
-    labelText: text('Label text (labelText)', 'Text Area label'),
-    invalid: boolean('Show form validation UI (invalid)', false),
-    invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
-    helperText: text('Helper text (helperText)', 'Optional helper text.'),
-    placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
-    cols: number('Columns (columns)', 50),
-    rows: number('Rows (rows)', 4)
-  }
+    id: text("TextArea id", "text-area-id"),
+    name: text("TextArea name", "text-area-name"),
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    hideLabel: boolean("No label (hideLabel)", false),
+    labelText: text("Label text (labelText)", "Text Area label"),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Content of form validation UI (invalidText)",
+      "A valid value is required"
+    ),
+    placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
+    cols: number("Columns (columns)", 50),
+    rows: number("Rows (rows)", 4),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/TextArea/TextArea.svelte b/src/components/TextArea/TextArea.svelte
index fbdfe253..7c83d0ec 100644
--- a/src/components/TextArea/TextArea.svelte
+++ b/src/components/TextArea/TextArea.svelte
@@ -1,64 +1,74 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let value = "";
+  export let placeholder = "";
   export let cols = 50;
+  export let rows = 4;
+  export let light = false;
   export let disabled = false;
-  export let helperText = '';
-  export let hideLabel = false;
-  export let id = Math.random();
+  export let helperText = "";
+  export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;
-  export let invalidText = '';
-  export let labelText = '';
-  export let light = false;
-  export let placeholder = '';
-  export let rows = 4;
-  export let style = undefined;
-  export let value = '';
+  export let invalidText = "";
+  export let labelText = "";
+  export let hideLabel = false;
+  export let ref = null;
 
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
 
   $: errorId = `error-${id}`;
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class:bx--form-item={true}>
   {#if labelText && !hideLabel}
     <label
-      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
-      for={id}>
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}>
       {labelText}
     </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}
-  <div class={cx('--text-area__wrapper')} data-invalid={invalid || undefined}>
+  <div class:bx--text-area__wrapper={true} data-invalid={invalid || undefined}>
     {#if invalid}
-      <WarningFilled16 class={cx('--text-area__invalid-icon')} />
+      <WarningFilled16 class="bx--text-area__invalid-icon" />
     {/if}
     <textarea
+      bind:this={ref}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
-      class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
-      on:change
-      on:input
-      on:input={({ target }) => {
-        value = target.value;
-      }}
-      on:focus
-      on:blur
       {disabled}
       {id}
       {name}
       {cols}
       {rows}
       {value}
-      {placeholder} />
+      {placeholder}
+      class:bx--text-area={true}
+      class:bx--text-area--light={light}
+      class:bx--text-area--invalid={invalid}
+      {...$$restProps}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur />
   </div>
   {#if invalid}
-    <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+    <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
 </div>
diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js
index 26f29225..74782672 100644
--- a/src/components/TextArea/index.js
+++ b/src/components/TextArea/index.js
@@ -1,4 +1,2 @@
-import TextArea from './TextArea.svelte';
-
-export default TextArea;
-export { default as TextAreaSkeleton } from './TextArea.Skeleton.svelte';
+export { default as TextArea } from "./TextArea.svelte";
+export { default as TextAreaSkeleton } from "./TextArea.Skeleton.svelte";
diff --git a/src/components/TextInput/PasswordInput.svelte b/src/components/TextInput/PasswordInput.svelte
index 7abebb09..d05e8ba6 100644
--- a/src/components/TextInput/PasswordInput.svelte
+++ b/src/components/TextInput/PasswordInput.svelte
@@ -1,90 +1,104 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let type = "password";
+  export let value = "";
+  export let hidePasswordLabel = "Hide password";
+  export let showPasswordLabel = "Show password";
+  export let light = false;
   export let disabled = false;
-  export let helperText = '';
-  export let hideLabel = false;
-  export let hidePasswordLabel = 'Hide password';
-  export let id = Math.random();
+  export let placeholder = "";
+  export let helperText = "";
+  export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;
-  export let invalidText = '';
-  export let labelText = '';
-  export let light = false;
-  export let placeholder = '';
-  export let showPasswordLabel = 'Show password';
-  export let style = undefined;
-  export let tooltipAlignment = 'center';
-  export let tooltipPosition = 'bottom';
-  export let type = 'password';
-  export let value = '';
+  export let invalidText = "";
+  export let labelText = "";
+  export let hideLabel = false;
+  export let tooltipAlignment = "center";
+  export let tooltipPosition = "bottom";
+  export let ref = null;
 
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import View16 from 'carbon-icons-svelte/lib/View16';
-  import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16';
-  import { cx } from '../../lib';
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import View16 from "carbon-icons-svelte/lib/View16";
+  import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
 
   $: errorId = `error-${id}`;
 </script>
 
 <div
+  class:bx--form-item={true}
+  class:bx--text-input-wrapper={true}
+  class:bx--password-input-wrapper={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper', className)}
-  {style}>
+  on:mouseleave>
   {#if labelText}
     <label
-      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
-      for={id}>
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}>
       {labelText}
     </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}
-  <div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
+  <div
+    class:bx--text-input__field-wrapper={true}
+    data-invalid={invalid || undefined}>
     {#if invalid}
-      <WarningFilled16 class={cx('--text-input__invalid-icon')} />
+      <WarningFilled16 class="bx--text-input__invalid-icon" />
     {/if}
     <input
+      bind:this={ref}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
-      class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {value}
+      {disabled}
+      class:bx--text-input={true}
+      class:bx--password-input={true}
+      class:bx--text-input--light={light}
+      class:bx--text-input--invalid={invalid}
       on:change
       on:input
       on:input={({ target }) => {
         value = target.value;
       }}
       on:focus
-      on:blur
-      {id}
-      {name}
-      {placeholder}
-      {type}
-      {value}
-      {disabled} />
+      on:blur />
     <button
       type="button"
-      class={cx('--text-input--password__visibility__toggle', '--btn--icon-only', '--tooltip__trigger', '--tooltip--a11y', tooltipPosition && `--tooltip--${tooltipPosition}`, tooltipAlignment && `--tooltip--align-${tooltipAlignment}`)}
+      class:bx--text-input--password__visibility__toggle={true}
+      class:bx--btn--icon-only={true}
+      class:bx--tooltip__trigger={true}
+      class:bx--tooltip--a11y={true}
+      class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
+      {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
       on:click={() => {
         type = type === 'password' ? 'text' : 'password';
       }}>
-      <span class={cx('--assistive-text')}>
+      <span class:bx--assistive-text={true}>
         {#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
       </span>
       {#if type === 'text'}
-        <ViewOff16 class={cx('--icon-visibility-off')} />
+        <ViewOff16 class="bx--icon-visibility-off" />
       {:else}
-        <View16 class={cx('--icon-visibility-on')} />
+        <View16 class="bx--icon-visibility-on" />
       {/if}
     </button>
   </div>
   {#if invalid}
-    <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+    <div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
   {/if}
 </div>
diff --git a/src/components/TextInput/TextInput.Skeleton.svelte b/src/components/TextInput/TextInput.Skeleton.svelte
index 5edd43b6..9f4e44d3 100644
--- a/src/components/TextInput/TextInput.Skeleton.svelte
+++ b/src/components/TextInput/TextInput.Skeleton.svelte
@@ -1,15 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let hideLabel = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   {#if !hideLabel}
-    <span class={cx('--label', '--skeleton')} />
+    <span class:bx--label={true} class:bx--skeleton={true} />
   {/if}
-  <div class={cx('--skeleton', '--text-area')} />
+  <div class:bx--skeleton={true} class:bx--text-area={true} />
 </div>
diff --git a/src/components/TextInput/TextInput.Story.svelte b/src/components/TextInput/TextInput.Story.svelte
index 854ae006..60e190fd 100644
--- a/src/components/TextInput/TextInput.Story.svelte
+++ b/src/components/TextInput/TextInput.Story.svelte
@@ -1,18 +1,24 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import PasswordInput from './PasswordInput.svelte';
-  import TextInput from './TextInput.svelte';
-  import TextInputSkeleton from './TextInput.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import PasswordInput from "./PasswordInput.svelte";
+  import TextInput from "./TextInput.svelte";
+  import TextInputSkeleton from "./TextInput.Skeleton.svelte";
 
-  let value = '';
-  let type = 'password';
+  $: value = "";
+  $: type = "password";
+  $: ref = null;
+  $: console.log(ref);
 </script>
 
 <Layout>
   {#if story === 'skeleton'}
-    <div aria-label="loading text input" aria-live="assertive" role="status" tabindex="0">
+    <div
+      aria-label="loading text input"
+      aria-live="assertive"
+      role="status"
+      tabindex="0">
       <TextInputSkeleton />
       <br />
       <TextInputSkeleton hideLabel />
@@ -37,6 +43,7 @@
     </div>
   {:else}
     <TextInput
+      bind:ref
       {...$$props}
       bind:value
       on:change={() => {
diff --git a/src/components/TextInput/TextInput.stories.js b/src/components/TextInput/TextInput.stories.js
index ed21ceb6..c9adc07c 100644
--- a/src/components/TextInput/TextInput.stories.js
+++ b/src/components/TextInput/TextInput.stories.js
@@ -1,92 +1,98 @@
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
-import Component from './TextInput.Story.svelte';
+import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
+import Component from "./TextInput.Story.svelte";
 
-export default { title: 'TextInput', decorators: [withKnobs] };
+export default { title: "TextInput", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    disabled: boolean('Disabled (disabled)', false),
-    light: boolean('Light variant (light)', false),
-    hideLabel: boolean('No label (hideLabel)', false),
-    labelText: text('Label text (labelText)', 'Text Input label'),
-    invalid: boolean('Show form validation UI (invalid)', false),
-    invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
-    helperText: text('Helper text (helperText)', 'Optional helper text.'),
-    placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
-    id: text('TextInput id', 'text-input-id'),
-    name: text('TextInput name', 'text-input-name')
-  }
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    hideLabel: boolean("No label (hideLabel)", false),
+    labelText: text("Label text (labelText)", "Text Input label"),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Content of form validation UI (invalidText)",
+      "A valid value is required"
+    ),
+    placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
+    id: text("TextInput id", "text-input-id"),
+    name: text("TextInput name", "text-input-name"),
+  },
 });
 
 export const TogglePasswordVisibility = () => ({
   Component,
   props: {
-    story: 'password-visibility',
-    disabled: boolean('Disabled (disabled)', false),
-    light: boolean('Light variant (light)', false),
-    hideLabel: boolean('No label (hideLabel)', false),
-    labelText: text('Label text (labelText)', 'Text Input label'),
-    invalid: boolean('Show form validation UI (invalid)', false),
-    invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
-    helperText: text('Helper text (helperText)', 'Optional helper text.'),
-    placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
-    id: text('TextInput id', 'text-input-id'),
-    name: text('TextInput name', 'text-input-name'),
+    story: "password-visibility",
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    hideLabel: boolean("No label (hideLabel)", false),
+    labelText: text("Label text (labelText)", "Text Input label"),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Content of form validation UI (invalidText)",
+      "A valid value is required"
+    ),
+    placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
+    id: text("TextInput id", "text-input-id"),
+    name: text("TextInput name", "text-input-name"),
     tooltipPosition: select(
-      'Tooltip position (tooltipPosition)',
-      ['top', 'right', 'bottom', 'left'],
-      'bottom'
+      "Tooltip position (tooltipPosition)",
+      ["top", "right", "bottom", "left"],
+      "bottom"
     ),
     tooltipAlignment: select(
-      'Tooltip alignment (tooltipAlignment)',
-      ['start', 'center', 'end'],
-      'center'
+      "Tooltip alignment (tooltipAlignment)",
+      ["start", "center", "end"],
+      "center"
     ),
     hidePasswordLabel: text(
       '"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
-      'Hide password'
+      "Hide password"
     ),
     showPasswordLabel: text(
       '"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
-      'Show password'
-    )
-  }
+      "Show password"
+    ),
+  },
 });
 
 export const ControlledTogglePasswordVisibility = () => ({
   Component,
   props: {
-    story: 'controlled',
-    disabled: boolean('Disabled (disabled)', false),
-    light: boolean('Light variant (light)', false),
-    hideLabel: boolean('No label (hideLabel)', false),
-    labelText: text('Label text (labelText)', 'Text Input label'),
-    invalid: boolean('Show form validation UI (invalid)', false),
-    invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
-    helperText: text('Helper text (helperText)', 'Optional helper text.'),
-    placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
-    id: text('TextInput id', 'text-input-id'),
-    name: text('TextInput name', 'text-input-name'),
+    story: "controlled",
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    hideLabel: boolean("No label (hideLabel)", false),
+    labelText: text("Label text (labelText)", "Text Input label"),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Content of form validation UI (invalidText)",
+      "A valid value is required"
+    ),
+    placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
+    id: text("TextInput id", "text-input-id"),
+    name: text("TextInput name", "text-input-name"),
     tooltipPosition: select(
-      'Tooltip position (tooltipPosition)',
-      ['top', 'right', 'bottom', 'left'],
-      'bottom'
+      "Tooltip position (tooltipPosition)",
+      ["top", "right", "bottom", "left"],
+      "bottom"
     ),
     tooltipAlignment: select(
-      'Tooltip alignment (tooltipAlignment)',
-      ['start', 'center', 'end'],
-      'center'
+      "Tooltip alignment (tooltipAlignment)",
+      ["start", "center", "end"],
+      "center"
     ),
     hidePasswordLabel: text(
       '"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
-      'Hide password'
+      "Hide password"
     ),
     showPasswordLabel: text(
       '"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
-      'Show password'
-    )
-  }
+      "Show password"
+    ),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/TextInput/TextInput.svelte b/src/components/TextInput/TextInput.svelte
index 2da75a11..a94e3466 100644
--- a/src/components/TextInput/TextInput.svelte
+++ b/src/components/TextInput/TextInput.svelte
@@ -1,69 +1,76 @@
 <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 invalid = false;
-  export let invalidText = '';
-  export let labelText = '';
+  export let type = "";
+  export let value = "";
+  export let placeholder = "";
   export let light = false;
-  export let placeholder = '';
-  export let style = undefined;
-  export let type = '';
-  export let value = '';
+  export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let helperText = "";
+  export let labelText = "";
+  export let hideLabel = false;
+  export let invalid = false;
+  export let invalidText = "";
+  export let ref = null;
 
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
 
   $: errorId = `error-${id}`;
 </script>
 
 <div
+  class:bx--form-item={true}
+  class:bx--text-input-wrapper={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--form-item', '--text-input-wrapper', className)}
-  {style}>
+  on:mouseleave>
   {#if labelText}
     <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 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}
-  <div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
+  <div
+    data-invalid={invalid || undefined}
+    class:bx--text-input__field-wrapper={true}>
     {#if invalid}
-      <WarningFilled16 class={cx('--text-input__invalid-icon')} />
+      <WarningFilled16 class="bx--text-input__invalid-icon" />
     {/if}
     <input
+      bind:this={ref}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
-      class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+      {disabled}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {value}
+      class:bx--text-input={true}
+      class:bx--text-input--light={light}
+      class:bx--text-input--invalid={invalid}
       on:change
       on:input
       on:input={({ target }) => {
         value = target.value;
       }}
       on:focus
-      on:blur
-      {id}
-      {name}
-      {placeholder}
-      {type}
-      {value}
-      {disabled} />
+      on:blur />
   </div>
   {#if invalid}
-    <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+    <div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
   {/if}
 </div>
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index d9d66545..6a3d8273 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -1,5 +1,3 @@
-import TextInput from './TextInput.svelte';
-
-export default TextInput;
-export { default as TextInputSkeleton } from './TextInput.Skeleton.svelte';
-export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as TextInput } from "./TextInput.svelte";
+export { default as TextInputSkeleton } from "./TextInput.Skeleton.svelte";
+export { default as PasswordInput } from "./PasswordInput.svelte";
diff --git a/src/components/Tile/ClickableTile.svelte b/src/components/Tile/ClickableTile.svelte
index 4ada60c8..16e7c944 100644
--- a/src/components/Tile/ClickableTile.svelte
+++ b/src/components/Tile/ClickableTile.svelte
@@ -1,17 +1,15 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let clicked = false;
-  export let href = undefined;
   export let light = false;
-  export let rel = undefined;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
+<!-- svelte-ignore a11y-missing-attribute -->
 <a
-  class={cx('--link', '--tile', '--tile--clickable', clicked && '--tile--is-clicked', light && '--tile--light', className)}
+  class:bx--tile={true}
+  class:bx--tile--clickable={true}
+  class:bx--tile--is-clicked={clicked}
+  class:bx--tile--light={light}
+  {...$$restProps}
   on:click
   on:click={() => {
     clicked = !clicked;
@@ -24,9 +22,6 @@
   }}
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  {style}
-  {href}
-  {rel}>
+  on:mouseleave>
   <slot />
 </a>
diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte
index 1ffb9d4f..4a2fe454 100644
--- a/src/components/Tile/ExpandableTile.svelte
+++ b/src/components/Tile/ExpandableTile.svelte
@@ -1,81 +1,81 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let expanded = false;
-  export let id = Math.random();
   export let light = false;
-  export let style = undefined;
-  export let tabindex = '0';
-  export let tileCollapsedIconText = 'Interact to expand Tile';
-  export let tileExpandedIconText = 'Interact to collapse Tile';
   export let tileMaxHeight = 0;
   export let tilePadding = 0;
+  export let tileCollapsedIconText = "Interact to expand Tile";
+  export let tileExpandedIconText = "Interact to collapse Tile";
+  export let tabindex = "0";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { afterUpdate } from 'svelte';
-  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import { cx, css } from '../../lib';
+  import { afterUpdate } from "svelte";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
 
-  let tileRef = undefined;
-  let contentRef = undefined;
-  let aboveRef = undefined;
+  let refContent = null;
+  let refAbove = null;
 
   afterUpdate(() => {
     if (tileMaxHeight === 0) {
-      tileMaxHeight = aboveRef.getBoundingClientRect().height;
+      tileMaxHeight = refAbove.getBoundingClientRect().height;
     }
 
-    const style = window.getComputedStyle(tileRef);
-    
+    const style = getComputedStyle(ref);
+
     tilePadding =
-      parseInt(style.getPropertyValue('padding-top'), 10) +
-      parseInt(style.getPropertyValue('padding-bottom'), 10);
+      parseInt(style.getPropertyValue("padding-top"), 10) +
+      parseInt(style.getPropertyValue("padding-bottom"), 10);
   });
 </script>
 
 <div
-  bind:this={tileRef}
-  class={cx('--tile', '--tile--expandable', expanded && '--tile--is-expanded', light && '--tile--light', className)}
-  style={expanded ? undefined : css([style, `max-height: ${tileMaxHeight + tilePadding}px`])}
+  bind:this={ref}
+  {id}
+  {tabindex}
+  class:bx--tile={true}
+  class:bx--tile--expandable={true}
+  class:bx--tile--is-expanded={expanded}
+  class:bx--tile--light={light}
+  {...$$restProps}
+  style={expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}
   on:click
   on:click={() => {
     expanded = !expanded;
   }}
   on:keypress
-  on:keypress={event => {
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
+  on:keypress={e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
       expanded = !expanded;
     }
   }}
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  {tabindex}
-  {id}>
-  <div bind:this={contentRef}>
-    <div bind:this={aboveRef} class={cx('--tile-content')}>
+  on:mouseleave>
+  <div bind:this={refContent}>
+    <div bind:this={refAbove} class:bx--tile-content={true}>
       <span
+        class:bx--tile-content__above-the-fold={true}
         on:click
         on:mouseover
         on:mouseenter
-        on:mouseleave
-        class={cx('--tile-content__above-the-fold')}>
+        on:mouseleave>
         <slot name="above" />
       </span>
     </div>
     <button
       aria-expanded={expanded}
       aria-label={expanded ? tileExpandedIconText : tileCollapsedIconText}
-      class={cx('--tile__chevron')}>
+      class:bx--tile__chevron={true}>
       <ChevronDown16 />
     </button>
-    <div class={cx('--tile-content')}>
+    <div class:bx--tile-content={true}>
       <span
         on:click
         on:mouseover
         on:mouseenter
         on:mouseleave
-        class={cx('--tile-content__below-the-fold')}>
+        class:bx--tile-content__below-the-fold={true}>
         <slot name="below" />
       </span>
     </div>
diff --git a/src/components/Tile/RadioTile.svelte b/src/components/Tile/RadioTile.svelte
index fd4c2c2c..21374ec2 100644
--- a/src/components/Tile/RadioTile.svelte
+++ b/src/components/Tile/RadioTile.svelte
@@ -1,20 +1,16 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let checked = false;
-  export let iconDescription = 'Tile checkmark';
-  export let id = Math.random();
   export let light = false;
-  export let name = '';
-  export let style = undefined;
-  export let tabindex = '0';
-  export let value = '';
+  export let value = "";
+  export let tabindex = "0";
+  export let iconDescription = "Tile checkmark";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
 
-  import { getContext } from 'svelte';
-  import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const { add, update, selectedValue } = getContext('TileGroup');
+  const { add, update, selectedValue } = getContext("TileGroup");
 
   add({ value, checked });
 
@@ -23,35 +19,38 @@
 
 <input
   type="radio"
-  class={cx('--tile-input')}
-  on:change
-  on:change={() => {
-    update(value);
-  }}
   {id}
   {name}
   {value}
-  {checked} />
+  {checked}
+  class:bx--tile-input={true}
+  on:change
+  on:change={() => {
+    update(value);
+  }} />
 <label
   for={id}
-  class={cx('--tile', '--tile--selectable', checked && '--tile--is-selected', light && '--tile--light', className)}
+  {tabindex}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={checked}
+  class:bx--tile--light={light}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={event => {
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
+  on:keydown={e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
       update(value);
     }
-  }}
-  {tabindex}
-  {style}>
-  <span class={cx('--tile__checkmark')}>
+  }}>
+  <span class:bx--tile__checkmark={true}>
     <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
   </span>
-  <span class={cx('--tile-content')}>
+  <span class:bx--tile-content={true}>
     <slot />
   </span>
 </label>
diff --git a/src/components/Tile/SelectableTile.svelte b/src/components/Tile/SelectableTile.svelte
index 123d754c..5f72c9d7 100644
--- a/src/components/Tile/SelectableTile.svelte
+++ b/src/components/Tile/SelectableTile.svelte
@@ -1,29 +1,27 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let iconDescription = 'Tile checkmark';
-  export let id = Math.random();
-  export let light = false;
-  export let name = '';
   export let selected = false;
-  export let style = undefined;
-  export let tabindex = '0';
-  export let title = 'title';
-  export let value = 'value';
+  export let light = false;
+  export let title = "title";
+  export let value = "value";
+  export let tabindex = "0";
+  export let iconDescription = "Tile checkmark";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let ref = null;
 
-  import { createEventDispatcher } from 'svelte';
-  import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
-  import { cx } from '../../lib';
+  import { createEventDispatcher } from "svelte";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
   const dispatch = createEventDispatcher();
 
-  $: dispatch(selected ? 'select' : 'deselect', id);
+  $: dispatch(selected ? "select" : "deselect", id);
 </script>
 
 <input
+  bind:this={ref}
   type="checkbox"
   tabindex="-1"
-  class={cx('--tile-input')}
+  class:bx--tile-input={true}
   checked={selected}
   {id}
   {value}
@@ -31,7 +29,12 @@
   {title} />
 <label
   for={id}
-  class={cx('--tile', '--tile--selectable', selected && '--tile--is-selected', light && '--tile--light', className)}
+  {tabindex}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={selected}
+  class:bx--tile--light={light}
+  {...$$restProps}
   on:click
   on:click|preventDefault={() => {
     selected = !selected;
@@ -40,18 +43,16 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={event => {
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
+  on:keydown={e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
       selected = !selected;
     }
-  }}
-  {tabindex}
-  {style}>
-  <span class={cx('--tile__checkmark')}>
+  }}>
+  <span class:bx--tile__checkmark={true}>
     <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
   </span>
-  <span class={cx('--tile-content')}>
+  <span class:bx--tile-content={true}>
     <slot />
   </span>
 </label>
diff --git a/src/components/Tile/Tile.Story.svelte b/src/components/Tile/Tile.Story.svelte
index 7119c2db..75b5a62a 100644
--- a/src/components/Tile/Tile.Story.svelte
+++ b/src/components/Tile/Tile.Story.svelte
@@ -1,23 +1,22 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import ClickableTile from './ClickableTile.svelte';
-  import ExpandableTile from './ExpandableTile.svelte';
-  import RadioTile from './RadioTile.svelte';
-  import SelectableTile from './SelectableTile.svelte';
-  import Tile from './Tile.svelte';
-  import TileGroup from './TileGroup.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import ClickableTile from "./ClickableTile.svelte";
+  import ExpandableTile from "./ExpandableTile.svelte";
+  import RadioTile from "./RadioTile.svelte";
+  import SelectableTile from "./SelectableTile.svelte";
+  import Tile from "./Tile.svelte";
+  import TileGroup from "./TileGroup.svelte";
 
   const radioTiles = [
-    { value: 'standard', id: 'tile-1', labelText: 'Selectable Tile' },
-    { value: 'default-selected', id: 'tile-2', labelText: 'Selectable Tile' },
-    { value: 'selected', id: 'tile-3', labelText: 'Selectable Tile' }
+    { value: "standard", id: "tile-1", labelText: "Selectable Tile" },
+    { value: "default-selected", id: "tile-2", labelText: "Selectable Tile" },
+    { value: "selected", id: "tile-3", labelText: "Selectable Tile" }
   ];
 
-  let selected = radioTiles[1].value;
-
-  let selectedTile1 = false;
+  $: selected = radioTiles[1].value;
+  $: selectedTile1 = false;
 </script>
 
 <Layout>
@@ -41,19 +40,29 @@
           }}>
           Multi-select Tile
         </SelectableTile>
-        <SelectableTile {...$$props} id="tile-2" name="tiles">Multi-select Tile</SelectableTile>
-        <SelectableTile {...$$props} id="tile-3" name="tiles">Multi-select Tile</SelectableTile>
+        <SelectableTile {...$$props} id="tile-2" name="tiles">
+          Multi-select Tile
+        </SelectableTile>
+        <SelectableTile {...$$props} id="tile-3" name="tiles">
+          Multi-select Tile
+        </SelectableTile>
       </div>
     {:else if story === 'selectable'}
       <TileGroup legend="Selectable Tile Group" bind:selected>
         {#each radioTiles as { value, id, labelText }, i (id)}
-          <RadioTile {...$$props} {value} {id} {labelText}>Selectable Tile</RadioTile>
+          <RadioTile {...$$props} {value} {id} {labelText}>
+            Selectable Tile
+          </RadioTile>
         {/each}
       </TileGroup>
     {:else if story === 'expandable'}
       <ExpandableTile {...$$props}>
-        <div slot="above" style="height: 200px">Above the fold content here</div>
-        <div slot="below" style="height: 400px">Below the fold content here</div>
+        <div slot="above" style="height: 200px">
+          Above the fold content here
+        </div>
+        <div slot="below" style="height: 400px">
+          Below the fold content here
+        </div>
       </ExpandableTile>
     {:else}
       <Tile {...$$props}>Default Tile</Tile>
diff --git a/src/components/Tile/Tile.stories.js b/src/components/Tile/Tile.stories.js
index 3ff8e0a6..d111a986 100644
--- a/src/components/Tile/Tile.stories.js
+++ b/src/components/Tile/Tile.stories.js
@@ -1,57 +1,57 @@
-import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
-import Component from './Tile.Story.svelte';
+import { withKnobs, number, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Tile.Story.svelte";
 
-export default { title: 'Tile', decorators: [withKnobs] };
+export default { title: "Tile", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
-  props: { light: boolean('Light variant (light)', false) }
+  props: { light: boolean("Light variant (light)", false) },
 });
 
 export const Clickable = () => ({
   Component,
   props: {
-    story: 'clickable',
-    href: text('Href for clickable UI (href)', 'javascript:void(0)'),
-    light: boolean('Light variant (light)', false)
-  }
+    story: "clickable",
+    href: text("Href for clickable UI (href)", "javascript:void(0)"),
+    light: boolean("Light variant (light)", false),
+  },
 });
 
 export const MultiSelect = () => ({
   Component,
   props: {
-    story: 'multi-select',
-    selected: boolean('Selected (selected)', false),
-    light: boolean('Light variant (light)', false)
-  }
+    story: "multi-select",
+    selected: boolean("Selected (selected)", false),
+    light: boolean("Light variant (light)", false),
+  },
 });
 
-MultiSelect.story = { name: 'Multi-select' };
+MultiSelect.story = { name: "Multi-select" };
 
 export const Selectable = () => ({
   Component,
   props: {
-    story: 'selectable',
-    name: text('Form item name (name in <RadioTile>)', 'tiles'),
-    light: boolean('Light variant (light)', false)
-  }
+    story: "selectable",
+    name: text("Form item name (name in <RadioTile>)", "tiles"),
+    light: boolean("Light variant (light)", false),
+  },
 });
 
 export const Expandable = () => ({
   Component,
   props: {
-    story: 'expandable',
-    tabindex: text('Tab index (tabindex)', '0'),
-    expanded: boolean('Expanded (expanded)', false),
-    tileMaxHeight: number('Max height (tileMaxHeight)', 0),
+    story: "expandable",
+    tabindex: text("Tab index (tabindex)", "0"),
+    expanded: boolean("Expanded (expanded)", false),
+    tileMaxHeight: number("Max height (tileMaxHeight)", 0),
     tileCollapsedIconText: text(
-      'Collapsed icon text (tileCollapsedIconText)',
-      'Interact to Expand tile'
+      "Collapsed icon text (tileCollapsedIconText)",
+      "Interact to Expand tile"
     ),
     tileExpandedIconText: text(
-      'Collapsed icon text (tileExpandedIconText)',
-      'Interact to Collapse tile'
+      "Collapsed icon text (tileExpandedIconText)",
+      "Interact to Collapse tile"
     ),
-    light: boolean('Light variant (light)', false)
-  }
+    light: boolean("Light variant (light)", false),
+  },
 });
diff --git a/src/components/Tile/Tile.svelte b/src/components/Tile/Tile.svelte
index a38000d5..aaa6a91f 100644
--- a/src/components/Tile/Tile.svelte
+++ b/src/components/Tile/Tile.svelte
@@ -1,18 +1,14 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let light = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <div
+  class:bx--tile={true}
+  class:bx--tile--light={light}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--tile', light && '--tile--light', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </div>
diff --git a/src/components/Tile/TileGroup.svelte b/src/components/Tile/TileGroup.svelte
index 2492ddf3..1c06e3a2 100644
--- a/src/components/Tile/TileGroup.svelte
+++ b/src/components/Tile/TileGroup.svelte
@@ -1,20 +1,15 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let selected = undefined;
   export let disabled = false;
-  export let legend = '';
-  export let style = undefined;
+  export let legend = "";
 
-  import { createEventDispatcher, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { cx } from '../../lib';
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
 
-  let selectedValue = writable(selected);
-
-  setContext('TileGroup', {
+  setContext("TileGroup", {
     selectedValue,
     add: ({ checked, value }) => {
       if (checked) {
@@ -27,14 +22,12 @@
   });
 
   $: selected = $selectedValue;
-  $: {
-    dispatch('select', $selectedValue);
-  }
+  $: dispatch("select", $selectedValue);
 </script>
 
-<fieldset class={cx('--tile-group', className)} {disabled} {style}>
+<fieldset {disabled} class:bx--tile-group={true} {...$$restProps}>
   {#if legend}
-    <legend class={cx('--label')}>{legend}</legend>
+    <legend class:bx--label={true}>{legend}</legend>
   {/if}
   <div>
     <slot />
diff --git a/src/components/Tile/index.js b/src/components/Tile/index.js
index 750696ba..1f996d07 100644
--- a/src/components/Tile/index.js
+++ b/src/components/Tile/index.js
@@ -1,8 +1,6 @@
-import Tile from './Tile.svelte';
-
-export default Tile;
-export { default as ClickableTile } from './ClickableTile.svelte';
-export { default as ExpandableTile } from './ExpandableTile.svelte';
-export { default as SelectableTile } from './SelectableTile.svelte';
-export { default as RadioTile } from './RadioTile.svelte';
-export { default as TileGroup } from './TileGroup.svelte';
+export { default as Tile } from "./Tile.svelte";
+export { default as ClickableTile } from "./ClickableTile.svelte";
+export { default as ExpandableTile } from "./ExpandableTile.svelte";
+export { default as SelectableTile } from "./SelectableTile.svelte";
+export { default as RadioTile } from "./RadioTile.svelte";
+export { default as TileGroup } from "./TileGroup.svelte";
diff --git a/src/components/TimePicker/TimePicker.Story.svelte b/src/components/TimePicker/TimePicker.Story.svelte
index 29e9b507..484437fe 100644
--- a/src/components/TimePicker/TimePicker.Story.svelte
+++ b/src/components/TimePicker/TimePicker.Story.svelte
@@ -1,25 +1,28 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import { SelectItem } from '../Select';
-  import TimePicker from './TimePicker.svelte';
-  import TimePickerSelect from './TimePickerSelect.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { SelectItem } from "../Select";
+  import TimePicker from "./TimePicker.svelte";
+  import TimePickerSelect from "./TimePickerSelect.svelte";
 
-  let value = '';
-  let select1 = 'PM';
-  let select2 = 'Time zone 1';
-
-  $: {
-    console.log(value, select1, select2);
-  }
+  $: value = "";
+  $: select1 = "PM";
+  $: select2 = "Time zone 1";
+  $: console.log(value, select1, select2);
 </script>
 
 <Layout>
   <TimePicker id="time-picker" {...$$props.timepicker} bind:value>
-    <TimePickerSelect {...$$props.select} id="time-picker-select-1" bind:value={select1}>
+    <TimePickerSelect
+      {...$$props.select}
+      id="time-picker-select-1"
+      bind:value={select1}>
       <SelectItem value="AM" text="AM" />
       <SelectItem value="PM" text="PM" />
     </TimePickerSelect>
-    <TimePickerSelect {...$$props.select} id="time-picker-select-2" bind:value={select2}>
+    <TimePickerSelect
+      {...$$props.select}
+      id="time-picker-select-2"
+      bind:value={select2}>
       <SelectItem value="Time zone 1" text="Time zone 1" />
       <SelectItem value="Time zone 2" text="Time zone 2" />
     </TimePickerSelect>
diff --git a/src/components/TimePicker/TimePicker.stories.js b/src/components/TimePicker/TimePicker.stories.js
index a624b118..4f99ee7b 100644
--- a/src/components/TimePicker/TimePicker.stories.js
+++ b/src/components/TimePicker/TimePicker.stories.js
@@ -1,40 +1,52 @@
-import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
-import Component from './TimePicker.Story.svelte';
+import { withKnobs, number, boolean, text } from "@storybook/addon-knobs";
+import Component from "./TimePicker.Story.svelte";
 
-export default { title: 'TimePicker', decorators: [withKnobs] };
+export default { title: "TimePicker", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
     timepicker: {
       pattern: text(
-        'Regular expression for the value (pattern in <TimePicker>)',
-        '(1[012]|[1-9]):[0-5][0-9](\\s)?'
+        "Regular expression for the value (pattern in <TimePicker>)",
+        "(1[012]|[1-9]):[0-5][0-9](\\s)?"
+      ),
+      placeholder: text(
+        "Placeholder text (placeholder in <TimePicker>)",
+        "hh:mm"
+      ),
+      disabled: boolean("Disabled (disabled in <TimePicker>)", false),
+      light: boolean("Light variant (light in <TimePicker>)", false),
+      hideLabel: boolean("No label (hideLabel in <TimePicker>)", false),
+      labelText: text(
+        "Label text (labelText in <TimePicker>)",
+        "Select a time"
+      ),
+      invalid: boolean(
+        "Show form validation UI (invalid in <TimePicker>)",
+        false
       ),
-      placeholder: text('Placeholder text (placeholder in <TimePicker>)', 'hh:mm'),
-      disabled: boolean('Disabled (disabled in <TimePicker>)', false),
-      light: boolean('Light variant (light in <TimePicker>)', false),
-      hideLabel: boolean('No label (hideLabel in <TimePicker>)', false),
-      labelText: text('Label text (labelText in <TimePicker>)', 'Select a time'),
-      invalid: boolean('Show form validation UI (invalid in <TimePicker>)', false),
       invalidText: text(
-        'Form validation UI content (invalidText in <TimePicker>)',
-        'A valid value is required'
+        "Form validation UI content (invalidText in <TimePicker>)",
+        "A valid value is required"
       ),
-      maxlength: number('Maximum length (maxlength in <TimePicker>)', 5),
-      id: text('TimePicker id', 'time-picker-id'),
-      name: text('TimePicker name', 'time-picker-name'),
+      maxlength: number("Maximum length (maxlength in <TimePicker>)", 5),
+      id: text("TimePicker id", "time-picker-id"),
+      name: text("TimePicker name", "time-picker-name"),
     },
     select: {
-      disabled: boolean('Disabled (disabled in <TimePickerSelect>)', false),
-      hideLabel: boolean('No label (hideLabel in <TimePickerSelect>)', true),
-      labelText: text('Label text (labelText in <TimePickerSelect>)', 'Please select'),
-      iconDescription: text(
-        'Trigger icon description (iconDescription in <TimePickerSelect>)',
-        'open list of options'
+      disabled: boolean("Disabled (disabled in <TimePickerSelect>)", false),
+      hideLabel: boolean("No label (hideLabel in <TimePickerSelect>)", true),
+      labelText: text(
+        "Label text (labelText in <TimePickerSelect>)",
+        "Please select"
       ),
-      id: text('TimePickerSelect id', 'time-picker-select-id'),
-      name: text('TimePickerSelect name', 'time-picker-select-name'),
-    }
-  }
+      iconDescription: text(
+        "Trigger icon description (iconDescription in <TimePickerSelect>)",
+        "open list of options"
+      ),
+      id: text("TimePickerSelect id", "time-picker-select-id"),
+      name: text("TimePickerSelect name", "time-picker-select-name"),
+    },
+  },
 });
diff --git a/src/components/TimePicker/TimePicker.svelte b/src/components/TimePicker/TimePicker.svelte
index 962ff88a..e9d2eca8 100644
--- a/src/components/TimePicker/TimePicker.svelte
+++ b/src/components/TimePicker/TimePicker.svelte
@@ -1,37 +1,46 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let value = "";
+  export let type = "text";
+  export let placeholder = "hh=mm";
+  export let pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?";
+  export let maxlength = 5;
+  export let light = false;
   export let disabled = false;
-  export let hideLabel = false;
-  export let id = Math.random();
+  export let id = "ccs-" + Math.random().toString(36);
   export let name = undefined;
   export let invalid = false;
-  export let invalidText = 'Invalid time format.';
-  export let labelText = '';
-  export let light = false;
-  export let maxlength = 5;
-  export let pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?';
-  export let placeholder = 'hh=mm';
-  export let style = undefined;
-  export let type = 'text';
-  export let value = '';
-
-  import { cx } from '../../lib';
+  export let invalidText = "Invalid time format.";
+  export let labelText = "";
+  export let hideLabel = false;
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
-  <div class={cx('--time-picker', light && '--time-picker--light', light && '--select--light')}>
-    <div class={cx('--time-picker__input')}>
+<div
+  class:bx--form-item={true}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  {...$$restProps}>
+  <div
+    class:bx--time-picker={true}
+    class:bx--time-picker--light={light}
+    class:bx--select--light={light}>
+    <div class:bx--time-picker__input={true}>
       {#if labelText}
         <label
-          class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
-          for={id}>
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}
+          class:bx--label--disabled={disabled}>
           {labelText}
         </label>
       {/if}
       <input
         data-invalid={invalid || undefined}
-        class={cx('--time-picker__input-field', '--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+        class:bx--time-picker__input-field={true}
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
         on:change
         on:input
         on:input={({ target }) => {
@@ -51,6 +60,6 @@
     <slot />
   </div>
   {#if invalid}
-    <div class={cx('--form-requirement')}>{invalidText}</div>
+    <div class:bx--form-requirement={true}>{invalidText}</div>
   {/if}
 </div>
diff --git a/src/components/TimePicker/TimePickerSelect.svelte b/src/components/TimePicker/TimePickerSelect.svelte
index d3a82b5d..1f96c18a 100644
--- a/src/components/TimePicker/TimePickerSelect.svelte
+++ b/src/components/TimePicker/TimePickerSelect.svelte
@@ -1,41 +1,43 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let hideLabel = true;
-  export let iconDescription = 'Open list of options';
-  export let id = Math.random();
+  export let value = "";
   export let name = undefined;
-  export let labelText = '';
-  export let style = undefined;
-  export let value = '';
+  export let disabled = false;
+  export let iconDescription = "Open list of options";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelText = "";
+  export let hideLabel = true;
 
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
-  import { cx } from '../../lib';
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
 
-  let selectedValue = writable(value);
+  const selectedValue = writable(value);
 
-  setContext('TimePickerSelect', { selectedValue });
+  setContext("TimePickerSelect", { selectedValue });
 
   $: selectedValue.set(value);
   $: value = $selectedValue;
 </script>
 
 <div
+  class:bx--select={true}
+  class:bx--time-picker__select={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--select', '--time-picker__select', className)}
-  {style}>
+  on:mouseleave>
   {#if labelText}
-    <label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>{labelText}</label>
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}>
+      {labelText}
+    </label>
   {/if}
   <!-- svelte-ignore a11y-no-onchange -->
   <select
-    class={cx('--select-input')}
+    class:bx--select-input={true}
     on:change={({ target }) => {
       selectedValue.set(target.value);
     }}
@@ -48,5 +50,5 @@
   <ChevronDownGlyph
     aria-label={iconDescription}
     title={iconDescription}
-    class={cx('--select__arrow')} />
+    class="bx--select__arrow" />
 </div>
diff --git a/src/components/TimePicker/index.js b/src/components/TimePicker/index.js
index d791a4b0..0fb9f967 100644
--- a/src/components/TimePicker/index.js
+++ b/src/components/TimePicker/index.js
@@ -1,4 +1,2 @@
-import TimePicker from './TimePicker.svelte';
-
-export default TimePicker;
-export { default as TimePickerSelect } from './TimePickerSelect.svelte';
+export { default as TimePicker } from "./TimePicker.svelte";
+export { default as TimePickerSelect } from "./TimePickerSelect.svelte";
diff --git a/src/components/Toggle/Toggle.Skeleton.svelte b/src/components/Toggle/Toggle.Skeleton.svelte
index 79e57933..cf90045d 100644
--- a/src/components/Toggle/Toggle.Skeleton.svelte
+++ b/src/components/Toggle/Toggle.Skeleton.svelte
@@ -1,24 +1,30 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let id = Math.random();
-  export let labelText = '';
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelText = "";
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
-  <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <input
+    type="checkbox"
+    {id}
+    class:bx--toggle={true}
+    class:bx--skeleton={true} />
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
-    class={cx('--toggle__label', '--skeleton')}
-    for={id}>
+    for={id}
+    class:bx--toggle__label={true}
+    class:bx--skeleton={true}>
     {#if labelText}
-      <span class={cx('--toggle__label-text')}>{labelText}</span>
+      <span class:bx--toggle__label-text={true}>{labelText}</span>
     {/if}
-    <span class={cx('--toggle__text--left')} />
-    <span class={cx('--toggle__appearance')} />
-    <span class={cx('--toggle__text--right')} />
+    <span class:bx--toggle__text--left={true} />
+    <span class:bx--toggle__appearance={true} />
+    <span class:bx--toggle__text--right={true} />
   </label>
 </div>
diff --git a/src/components/Toggle/Toggle.Story.svelte b/src/components/Toggle/Toggle.Story.svelte
index 2a57b998..82f6b980 100644
--- a/src/components/Toggle/Toggle.Story.svelte
+++ b/src/components/Toggle/Toggle.Story.svelte
@@ -1,15 +1,12 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import Toggle from './Toggle.svelte';
-  import ToggleSkeleton from './Toggle.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import Toggle from "./Toggle.svelte";
+  import ToggleSkeleton from "./Toggle.Skeleton.svelte";
 
-  let toggled = true;
-
-  $: {
-    console.log('toggled', toggled);
-  }
+  $: toggled = true;
+  $: console.log("bind:toggled", toggled);
 </script>
 
 <Layout>
diff --git a/src/components/Toggle/Toggle.stories.js b/src/components/Toggle/Toggle.stories.js
index adfc908d..4a360080 100644
--- a/src/components/Toggle/Toggle.stories.js
+++ b/src/components/Toggle/Toggle.stories.js
@@ -1,35 +1,35 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import Component from './Toggle.Story.svelte';
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Toggle.Story.svelte";
 
-export default { title: 'Toggle', decorators: [withKnobs] };
+export default { title: "Toggle", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    labelText: text('Label toggle input control (labelText)', ''),
-    'aria-label': text('ARIA label of the toggle (aria-label)', ''),
-    labelA: text('Label for untoggled state (labelA)', 'Off'),
-    labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false),
-    id: text('Toggle id', 'toggle-id'),
-    name: text('Toggle name', 'toggle-name')
-  }
+    labelText: text("Label toggle input control (labelText)", ""),
+    "aria-label": text("ARIA label of the toggle (aria-label)", ""),
+    labelA: text("Label for untoggled state (labelA)", "Off"),
+    labelB: text("Label for toggled state (labelB)", "On"),
+    disabled: boolean("Disabled (disabled)", false),
+    id: text("Toggle id", "toggle-id"),
+    name: text("Toggle name", "toggle-name"),
+  },
 });
 
-Default.story = { name: 'Default (untoggled)' };
+Default.story = { name: "Default (untoggled)" };
 
 export const Toggled = () => ({
   Component,
   props: {
-    story: 'toggled',
-    labelText: text('Label toggle input control (labelText)', ''),
-    'aria-label': text('ARIA label of the toggle (aria-label)', ''),
-    labelA: text('Label for untoggled state (labelA)', 'Off'),
-    labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false),
-    id: text('Toggle id', 'toggle-id'),
-    name: text('Toggle name', 'toggle-name')
-  }
+    story: "toggled",
+    labelText: text("Label toggle input control (labelText)", ""),
+    "aria-label": text("ARIA label of the toggle (aria-label)", ""),
+    labelA: text("Label for untoggled state (labelA)", "Off"),
+    labelB: text("Label for toggled state (labelB)", "On"),
+    disabled: boolean("Disabled (disabled)", false),
+    id: text("Toggle id", "toggle-id"),
+    name: text("Toggle name", "toggle-name"),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/Toggle/Toggle.svelte b/src/components/Toggle/Toggle.svelte
index 446f7a54..88303ed0 100644
--- a/src/components/Toggle/Toggle.svelte
+++ b/src/components/Toggle/Toggle.svelte
@@ -1,31 +1,32 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let id = Math.random();
-  export let name = undefined;
-  export let labelA = 'Off';
-  export let labelB = 'On';
-  export let labelText = '';
-  export let style = undefined;
   export let toggled = false;
-
-  import { cx } from '../../lib';
+  export let disabled = false;
+  export let labelA = "Off";
+  export let labelB = "On";
+  export let labelText = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <input
     type="checkbox"
-    class={cx('--toggle-input')}
+    class:bx--toggle-input={true}
     checked={toggled}
     on:change
     on:change={() => {
       toggled = !toggled;
     }}
     on:keyup
-    on:keyup={event => {
-      if (event.key === ' ' || event.key === 'Enter') {
-        event.preventDefault();
+    on:keyup={e => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
         toggled = !toggled;
       }
     }}
@@ -33,16 +34,17 @@
     on:blur
     {disabled}
     {id}
-    {name}
-  />
+    {name} />
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
-    class={cx('--toggle-input__label')}
-    for={id}>
+    for={id}
+    class:bx--toggle-input__label={true}>
     {labelText}
-    <span class={cx('--toggle__switch')}>
-      <span aria-hidden="true" class={cx('--toggle__text--off')}>{labelA}</span>
-      <span aria-hidden="true" class={cx('--toggle__text--on')}>{labelB}</span>
+    <span class:bx--toggle__switch={true}>
+      <span aria-hidden="true" class:bx--toggle__text--off={true}>
+        {labelA}
+      </span>
+      <span aria-hidden="true" class:bx--toggle__text--on={true}>{labelB}</span>
     </span>
   </label>
 </div>
diff --git a/src/components/Toggle/index.js b/src/components/Toggle/index.js
index 97af7810..47df71f0 100644
--- a/src/components/Toggle/index.js
+++ b/src/components/Toggle/index.js
@@ -1,4 +1,2 @@
-import Toggle from './Toggle.svelte';
-
-export default Toggle;
-export { default as ToggleSkeleton } from './Toggle.Skeleton.svelte';
+export { default as Toggle } from "./Toggle.svelte";
+export { default as ToggleSkeleton } from "./Toggle.Skeleton.svelte";
diff --git a/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
index 85f93486..3c18f40d 100644
--- a/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
@@ -1,25 +1,37 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let id = Math.random();
-  export let labelText = '';
-  export let style = undefined;
-
-  import { cx } from '../../lib';
+  export let labelText = "";
+  export let id = "ccs-" + Math.random().toString(36);
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
-  <input type="checkbox" class={cx('--toggle', '--toggle--small', '--skeleton')} {id} />
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <input
+    type="checkbox"
+    {id}
+    class:bx--toggle={true}
+    class:bx--toggle--small={true}
+    class:bx--skeleton={true} />
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
-    class={cx('--toggle__label --skeleton')}
+    class:bx--toggle__label={true}
+    class:bx--skeleton={true}
     for={id}>
     {#if labelText}
-      <span class={cx('--toggle__label-text')}>{labelText}</span>
+      <span class:bx--toggle__label-text={true}>{labelText}</span>
     {/if}
-    <span class={cx('--toggle__appearance')}>
-      <svg class={cx('--toggle__check')} width="6" height="5" viewBox="0 0 6 5">
-        <path d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z" />
+    <span class:bx--toggle__appearance={true}>
+      <svg
+        class:bx--toggle__check={true}
+        width="6"
+        height="5"
+        viewBox="0 0 6 5">
+        <path
+          d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z" />
       </svg>
     </span>
   </label>
diff --git a/src/components/ToggleSmall/ToggleSmall.Story.svelte b/src/components/ToggleSmall/ToggleSmall.Story.svelte
index ebe1e7f3..e8f8b9e9 100644
--- a/src/components/ToggleSmall/ToggleSmall.Story.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.Story.svelte
@@ -1,20 +1,21 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import ToggleSmall from './ToggleSmall.svelte';
-  import ToggleSmallSkeleton from './ToggleSmall.Skeleton.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import ToggleSmall from "./ToggleSmall.svelte";
+  import ToggleSmallSkeleton from "./ToggleSmall.Skeleton.svelte";
 
-  let toggled = true;
-
-  $: {
-    console.log('toggled', toggled);
-  }
+  $: toggled = true;
+  $: console.log("bind:toggled", toggled);
 </script>
 
 <Layout>
   {#if story === 'toggled'}
-    <ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" bind:toggled />
+    <ToggleSmall
+      {...$$props}
+      id="toggle-small-id"
+      name="toggle-small-name"
+      bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSmallSkeleton />
   {:else}
diff --git a/src/components/ToggleSmall/ToggleSmall.stories.js b/src/components/ToggleSmall/ToggleSmall.stories.js
index e7518f05..d42c3426 100644
--- a/src/components/ToggleSmall/ToggleSmall.stories.js
+++ b/src/components/ToggleSmall/ToggleSmall.stories.js
@@ -1,35 +1,35 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import Component from './ToggleSmall.Story.svelte';
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./ToggleSmall.Story.svelte";
 
-export default { title: 'ToggleSmall', decorators: [withKnobs] };
+export default { title: "ToggleSmall", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
   props: {
-    labelText: text('Label toggle input control (labelText)', ''),
-    'aria-label': text('ARIA label of the toggle (aria-label)', ''),
-    labelA: text('Label for untoggled state (labelA)', 'Off'),
-    labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false),
-    id: text('ToggleSmall id', 'toggle-small-id'),
-    name: text('ToggleSmall name', 'toggle-small-name')
-  }
+    labelText: text("Label toggle input control (labelText)", ""),
+    "aria-label": text("ARIA label of the toggle (aria-label)", ""),
+    labelA: text("Label for untoggled state (labelA)", "Off"),
+    labelB: text("Label for toggled state (labelB)", "On"),
+    disabled: boolean("Disabled (disabled)", false),
+    id: text("ToggleSmall id", "toggle-small-id"),
+    name: text("ToggleSmall name", "toggle-small-name"),
+  },
 });
 
-Default.story = { name: 'Default (untoggled)' };
+Default.story = { name: "Default (untoggled)" };
 
 export const Toggled = () => ({
   Component,
   props: {
-    story: 'toggled',
-    labelText: text('Label toggle input control (labelText)', ''),
-    'aria-label': text('ARIA label of the toggle (aria-label)', ''),
-    labelA: text('Label for untoggled state (labelA)', 'Off'),
-    labelB: text('Label for toggled state (labelB)', 'On'),
-    disabled: boolean('Disabled (disabled)', false),
-    id: text('ToggleSmall id', 'toggle-small-id'),
-    name: text('ToggleSmall name', 'toggle-small-name')
-  }
+    story: "toggled",
+    labelText: text("Label toggle input control (labelText)", ""),
+    "aria-label": text("ARIA label of the toggle (aria-label)", ""),
+    labelA: text("Label for untoggled state (labelA)", "Off"),
+    labelB: text("Label for toggled state (labelB)", "On"),
+    disabled: boolean("Disabled (disabled)", false),
+    id: text("ToggleSmall id", "toggle-small-id"),
+    name: text("ToggleSmall name", "toggle-small-name"),
+  },
 });
 
-export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
diff --git a/src/components/ToggleSmall/ToggleSmall.svelte b/src/components/ToggleSmall/ToggleSmall.svelte
index e2386b15..96c29aff 100644
--- a/src/components/ToggleSmall/ToggleSmall.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.svelte
@@ -1,51 +1,58 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let id = Math.random();
-  export let name = undefined;
-  export let labelA = 'Off';
-  export let labelB = 'On';
-  export let labelText = '';
-  export let style = undefined;
   export let toggled = false;
-
-  import { cx } from '../../lib';
+  export let disabled = false;
+  export let labelA = "Off";
+  export let labelB = "On";
+  export let labelText = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
   <input
     type="checkbox"
-    class={cx('--toggle-input', '--toggle-input--small')}
     checked={toggled}
+    {disabled}
+    {id}
+    {name}
+    class:bx--toggle-input={true}
+    class:bx--toggle-input--small={true}
     on:change
     on:change={() => {
       toggled = !toggled;
     }}
     on:keyup
-    on:keyup={event => {
-      if (event.key === ' ' || event.key === 'Enter') {
-        event.preventDefault();
+    on:keyup={e => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
         toggled = !toggled;
       }
     }}
     on:focus
-    on:blur
-    {disabled}
-    {id}
-    {name}
-  />
+    on:blur />
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
-    class={cx('--toggle-input__label')}
-    for={id}>
+    for={id}
+    class:bx--toggle-input__label={true}>
     {labelText}
-    <span class={cx('--toggle__switch')}>
-      <svg width="6" height="5" viewBox="0 0 6 5" class={cx('--toggle__check')}>
+    <span class:bx--toggle__switch={true}>
+      <svg
+        width="6"
+        height="5"
+        viewBox="0 0 6 5"
+        class:bx--toggle__check={true}>
         <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
       </svg>
-      <span aria-hidden="true" class={cx('--toggle__text--off')}>{labelA}</span>
-      <span aria-hidden="true" class={cx('--toggle__text--on')}>{labelB}</span>
+      <span aria-hidden="true" class:bx--toggle__text--off={true}>
+        {labelA}
+      </span>
+      <span aria-hidden="true" class:bx--toggle__text--on={true}>{labelB}</span>
     </span>
   </label>
 </div>
diff --git a/src/components/ToggleSmall/index.js b/src/components/ToggleSmall/index.js
index 77430c51..48daac0b 100644
--- a/src/components/ToggleSmall/index.js
+++ b/src/components/ToggleSmall/index.js
@@ -1,4 +1,2 @@
-import ToggleSmall from './ToggleSmall.svelte';
-
-export default ToggleSmall;
-export { default as ToggleSmallSkeleton } from './ToggleSmall.Skeleton.svelte';
+export { default as ToggleSmall } from "./ToggleSmall.svelte";
+export { default as ToggleSmallSkeleton } from "./ToggleSmall.Skeleton.svelte";
diff --git a/src/components/Tooltip/Tooltip.Story.svelte b/src/components/Tooltip/Tooltip.Story.svelte
index a45e68d6..919495a7 100644
--- a/src/components/Tooltip/Tooltip.Story.svelte
+++ b/src/components/Tooltip/Tooltip.Story.svelte
@@ -1,14 +1,15 @@
 <script>
   export let story = undefined;
 
-  import OverflowMenuVertical16 from 'carbon-icons-svelte/lib/OverflowMenuVertical16';
-  import Layout from '../../internal/ui/Layout.svelte';
-  import { cx } from '../../lib';
-  import Link from '../Link';
-  import Button from '../Button';
-  import Tooltip from './Tooltip.svelte';
+  import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { Link } from "../Link";
+  import { Button } from "../Button";
+  import Tooltip from "./Tooltip.svelte";
 
-  let open = story === 'uncontrolled';
+  $: ref = null;
+  $: console.log(ref);
+  $: open = story === "uncontrolled";
 </script>
 
 <style>
@@ -25,6 +26,7 @@
     {#if story === 'custom icon'}
       <Tooltip
         {...$$props}
+        bind:ref
         bind:open
         on:open={() => {
           console.log('on:open');
@@ -34,10 +36,11 @@
         }}>
         <div slot="icon" class="custom-icon-class" />
         <p>
-          This is some tooltip text. This box shows the maximum amount of text that should appear
-          inside. If more room is needed please use a modal instead.
+          This is some tooltip text. This box shows the maximum amount of text
+          that should appear inside. If more room is needed please use a modal
+          instead.
         </p>
-        <div class={cx('--tooltip__footer')}>
+        <div class="bx--tooltip__footer">
           <Link href="/">Learn More</Link>
           <Button size="small">Create</Button>
         </div>
@@ -58,7 +61,7 @@
         Show
       </Button>
       <div style="padding: 15px 20px; margin: 4px 20px">
-        <Tooltip {...$$props} bind:open hideIcon>
+        <Tooltip {...$$props} bind:ref bind:open hideIcon>
           <div slot="triggerText">My text wrapped with tooltip</div>
           Tooltip content
         </Tooltip>
@@ -66,6 +69,7 @@
     {:else}
       <Tooltip
         {...$$props}
+        bind:ref
         bind:open
         on:open={() => {
           console.log('on:open');
@@ -75,10 +79,11 @@
         }}
         icon={story === 'custom icon only' ? OverflowMenuVertical16 : undefined}>
         <p>
-          This is some tooltip text. This box shows the maximum amount of text that should appear
-          inside. If more room is needed please use a modal instead.
+          This is some tooltip text. This box shows the maximum amount of text
+          that should appear inside. If more room is needed please use a modal
+          instead.
         </p>
-        <div class={cx('--tooltip__footer')}>
+        <div class="bx--tooltip__footer">
           <Link href="/">Learn More</Link>
           <Button size="small">Create</Button>
         </div>
diff --git a/src/components/Tooltip/Tooltip.stories.js b/src/components/Tooltip/Tooltip.stories.js
index 268d8f7b..c1d788b6 100644
--- a/src/components/Tooltip/Tooltip.stories.js
+++ b/src/components/Tooltip/Tooltip.stories.js
@@ -1,60 +1,60 @@
-import { withKnobs, select, text } from '@storybook/addon-knobs';
-import Component from './Tooltip.Story.svelte';
+import { withKnobs, select, text } from "@storybook/addon-knobs";
+import Component from "./Tooltip.Story.svelte";
 
-export default { title: 'Tooltip', decorators: [withKnobs] };
+export default { title: "Tooltip", decorators: [withKnobs] };
 
 const directions = {
-  'Top (top)': 'top',
-  'Right (right)': 'right',
-  'Bottom (bottom)': 'bottom',
-  'Left (left)': 'left'
+  "Top (top)": "top",
+  "Right (right)": "right",
+  "Bottom (bottom)": "bottom",
+  "Left (left)": "left",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    direction: select('Tooltip direction (direction)', directions, 'bottom'),
-    triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
-    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
-  }
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+    triggerText: text("Trigger text (triggerText)", "Tooltip label"),
+    tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
+  },
 });
 
 export const NoIcon = () => ({
   Component,
   props: {
-    story: 'no icon',
+    story: "no icon",
     hideIcon: true,
-    direction: select('Tooltip direction (direction)', directions, 'bottom'),
-    triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
-    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
-  }
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+    triggerText: text("Trigger text (triggerText)", "Tooltip label"),
+    tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
+  },
 });
 
 export const CustomIcon = () => ({
   Component,
   props: {
-    story: 'custom icon',
+    story: "custom icon",
     showIcon: true,
-    direction: select('Tooltip direction (direction)', directions, 'bottom'),
-    triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
-    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
-  }
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+    triggerText: text("Trigger text (triggerText)", "Tooltip label"),
+    tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
+  },
 });
 
 export const CustomIconOnly = () => ({
   Component,
   props: {
-    story: 'custom icon only',
-    direction: select('Tooltip direction (direction)', directions, 'bottom'),
-    iconDescription: 'Helpful Information',
-    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
-  }
+    story: "custom icon only",
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+    iconDescription: "Helpful Information",
+    tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
+  },
 });
 
 export const UncontrolledTooltip = () => ({
   Component,
   props: {
-    story: 'uncontrolled',
-    direction: select('Tooltip direction (direction)', directions, 'bottom')
-  }
+    story: "uncontrolled",
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+  },
 });
diff --git a/src/components/Tooltip/Tooltip.svelte b/src/components/Tooltip/Tooltip.svelte
index 0bc838c7..8a210613 100644
--- a/src/components/Tooltip/Tooltip.svelte
+++ b/src/components/Tooltip/Tooltip.svelte
@@ -1,42 +1,38 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let direction = 'bottom';
+  export let direction = "bottom";
   export let hideIcon = false;
   export let icon = Information16;
-  export let iconDescription = '';
-  export let iconName = '';
+  export let iconDescription = "";
+  export let iconName = "";
   export let open = false;
-  export let style = undefined;
-  export let tabindex = '0';
-  export let tooltipId = Math.random();
-  export let triggerId = Math.random();
-  export let triggerText = '';
+  export let tabindex = "0";
+  export let tooltipId = "ccs-" + Math.random().toString(36);
+  export let triggerId = "ccs-" + Math.random().toString(36);
+  export let triggerText = "";
+  export let ref = null;
+  export let refTooltip = null;
+  export let refIcon = null;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
-  import Information16 from 'carbon-icons-svelte/lib/Information16';
-  import { cx, css } from '../../lib';
+  import { createEventDispatcher, afterUpdate } from "svelte";
+  import Information16 from "carbon-icons-svelte/lib/Information16";
 
   const dispatch = createEventDispatcher();
 
-  let programmatic = true;
-  let buttonRef = undefined;
-  let tooltipRef = undefined;
-  let iconRef = undefined;
+  $: programmatic = true;
 
-  function onKeydown(event) {
-    if (event.key === 'Escape') {
-      event.stopPropagation();
+  function onKeydown(e) {
+    if (e.key === "Escape") {
+      e.stopPropagation();
       open = false;
-    } else if (event.key === ' ' || event.key === 'Enter') {
-      event.stopPropagation();
-      event.preventDefault();
+    } else if (e.key === " " || e.key === "Enter") {
+      e.stopPropagation();
+      e.preventDefault();
       open = true;
     }
   }
 
   function onBlur({ relatedTarget }) {
-    if (tooltipRef && !tooltipRef.contains(relatedTarget)) {
+    if (refTooltip && !refTooltip.contains(relatedTarget)) {
       open = false;
     }
   }
@@ -53,14 +49,14 @@
 
   afterUpdate(() => {
     if (open) {
-      const button = buttonRef.getBoundingClientRect();
-      const tooltip = tooltipRef.getBoundingClientRect();
+      const button = ref.getBoundingClientRect();
+      const tooltip = refTooltip.getBoundingClientRect();
 
       let iconWidth = 16;
       let iconHeight = 16;
 
-      if (iconRef) {
-        const icon = iconRef.getBoundingClientRect();
+      if (refIcon) {
+        const icon = refIcon.getBoundingClientRect();
         iconWidth = icon.width;
         iconHeight = icon.height;
       }
@@ -69,7 +65,7 @@
       let offsetY = 0;
 
       switch (direction) {
-        case 'bottom':
+        case "bottom":
           if (hideIcon) {
             offsetX = -1 * (tooltip.width / 2 - button.width / 2);
           } else {
@@ -77,11 +73,11 @@
           }
           offsetY = iconHeight / 2;
           break;
-        case 'right':
+        case "right":
           offsetX = button.width + 6;
           offsetY = -1 * (tooltip.height / 2 + iconWidth / 2 - 3);
           break;
-        case 'left':
+        case "left":
           if (hideIcon) {
             offsetX = -1 * (tooltip.width + 6 + 1);
           } else {
@@ -89,51 +85,50 @@
           }
           offsetY = -1 * (tooltip.height / 2 + button.height) - 2;
           break;
-        case 'top':
+        case "top":
           if (hideIcon) {
             offsetX = -1 * (tooltip.width / 2 - button.width / 2);
           } else {
-            offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
+            offsetX =
+              -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
           }
           offsetY = -1 * (tooltip.height + button.height + iconWidth / 2 - 1);
           break;
       }
 
-      tooltipRef.style.left = offsetX + 'px';
-      tooltipRef.style.marginTop = offsetY + 'px';
+      refTooltip.style.left = offsetX + "px";
+      refTooltip.style.marginTop = offsetY + "px";
     }
   });
 
-  $: {
-    dispatch(open ? 'open' : 'close');
-  }
+  $: dispatch(open ? "open" : "close");
   $: buttonProps = {
-    role: 'button',
-    'aria-haspopup': 'true',
+    role: "button",
+    "aria-haspopup": "true",
     id: hideIcon ? triggerId : undefined,
-    class: hideIcon ? cx('--tooltip__label') : cx('--tooltip__trigger'),
-    'aria-expanded': open,
-    'aria-describedby': open ? tooltipId : undefined,
-    'aria-labelledby': triggerText ? triggerId : undefined,
-    'aria-label': triggerText ? iconDescription : undefined,
+    class: hideIcon ? "bx--tooltip__label" : "bx--tooltip__trigger",
+    "aria-expanded": open,
+    "aria-describedby": open ? tooltipId : undefined,
+    "aria-labelledby": triggerText ? triggerId : undefined,
+    "aria-label": triggerText ? iconDescription : undefined,
     tabindex,
-    style: hideIcon ? style : undefined
+    style: hideIcon ? $$restProps.style : undefined
   };
 </script>
 
 <svelte:body
   on:click={({ target }) => {
-    if (!programmatic && open && tooltipRef && !tooltipRef.contains(target)) {
+    if (!programmatic && open && refTooltip && !refTooltip.contains(target)) {
       open = false;
     }
   }} />
 
-<div class={className} style={css([style, ['position', 'relative']])}>
+<div {...$$restProps} style="{$$restProps.style}; position: relative;">
   {#if !hideIcon}
-    <div bind:this={buttonRef} id={triggerId} class={cx('--tooltip__label')} {style}>
+    <div bind:this={ref} id={triggerId} class:bx--tooltip__label={true}>
       <slot name="triggerText">{triggerText}</slot>
       <div
-        bind:this={iconRef}
+        bind:this={refIcon}
         {...buttonProps}
         on:click|preventDefault|stopPropagation={openMenu}
         on:focus={openMenu}
@@ -146,7 +141,7 @@
     </div>
   {:else}
     <div
-      bind:this={buttonRef}
+      bind:this={ref}
       {...buttonProps}
       on:click|preventDefault|stopPropagation={openMenu}
       on:focus={openMenu}
@@ -157,14 +152,15 @@
   {/if}
   {#if open}
     <div
-      bind:this={tooltipRef}
+      bind:this={refTooltip}
       role="tooltip"
       tabindex="0"
       id={tooltipId}
       data-floating-menu-direction={direction}
-      class={cx('--tooltip', open && '--tooltip--shown')}
+      class:bx--tooltip={true}
+      class:bx--tooltip--shown={open}
       on:blur={closeMenu}>
-      <span class={cx('--tooltip__caret')} />
+      <span class:bx--tooltip__caret={true} />
       <slot />
     </div>
   {/if}
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 0c4a8871..ad513d4b 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -1,3 +1 @@
-import Tooltip from './Tooltip.svelte';
-
-export default Tooltip;
+export { default as Tooltip } from "./Tooltip.svelte";
diff --git a/src/components/TooltipDefinition/TooltipDefinition.Story.svelte b/src/components/TooltipDefinition/TooltipDefinition.Story.svelte
index dba89f2f..852872ad 100644
--- a/src/components/TooltipDefinition/TooltipDefinition.Story.svelte
+++ b/src/components/TooltipDefinition/TooltipDefinition.Story.svelte
@@ -1,8 +1,8 @@
 <script>
-  import Layout from '../../internal/ui/Layout.svelte';
-  import TooltipDefinition from './TooltipDefinition.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import TooltipDefinition from "./TooltipDefinition.svelte";
 </script>
 
 <Layout>
-  <TooltipDefinition {...$$props}>Defintion Tooltip</TooltipDefinition>
+  <TooltipDefinition {...$$props}>Definition Tooltip</TooltipDefinition>
 </Layout>
diff --git a/src/components/TooltipDefinition/TooltipDefinition.stories.js b/src/components/TooltipDefinition/TooltipDefinition.stories.js
index 50cd3b1c..c3605067 100644
--- a/src/components/TooltipDefinition/TooltipDefinition.stories.js
+++ b/src/components/TooltipDefinition/TooltipDefinition.stories.js
@@ -1,29 +1,31 @@
-import { withKnobs, select, text } from '@storybook/addon-knobs';
-import Component from './TooltipDefinition.Story.svelte';
+import { withKnobs, select, text } from "@storybook/addon-knobs";
+import Component from "./TooltipDefinition.Story.svelte";
 
-export default { title: 'TooltipDefinition', decorators: [withKnobs] };
+export default { title: "TooltipDefinition", decorators: [withKnobs] };
 
 const directions = {
-  'Top (top)': 'top',
-  'Right (right)': 'right',
-  'Bottom (bottom)': 'bottom',
-  'Left (left)': 'left'
+  "Top (top)": "top",
+  "Bottom (bottom)": "bottom",
 };
 
 const alignments = {
-  'Start (start)': 'start',
-  'Center (center)': 'center',
-  'End (end)': 'end'
+  "Start (start)": "start",
+  "Center (center)": "center",
+  "End (end)": "end",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    direction: select('Tooltip direction (direction)', directions, 'bottom'),
-    align: select('Tooltip alignment to trigger button (align)', alignments, 'start'),
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+    align: select(
+      "Tooltip alignment to trigger button (align)",
+      alignments,
+      "start"
+    ),
     tooltipText: text(
-      'Tooltip content (tooltipText)',
-      'Brief description of the dotted, underlined word above.'
-    )
-  }
+      "Tooltip content (tooltipText)",
+      "Brief description of the dotted, underlined words above."
+    ),
+  },
 });
diff --git a/src/components/TooltipDefinition/TooltipDefinition.svelte b/src/components/TooltipDefinition/TooltipDefinition.svelte
index 407d35a8..799d8d9c 100644
--- a/src/components/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/components/TooltipDefinition/TooltipDefinition.svelte
@@ -1,24 +1,51 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let align = 'center';
-  export let direction = 'bottom';
-  export let id = Math.random();
-  export let style = undefined;
-  export let tooltipText = '';
+  export let tooltipText = "";
+  export let align = "center"; // "start" | "center" | "end"
+  export let direction = "bottom"; // "top" | "bottom"
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { cx } from '../../lib';
+  $: hidden = false;
+  $: visible = false;
 </script>
 
-<div class={cx('--tooltip--definition', '--tooltip--a11y', className)} {style}>
+<svelte:body
+  on:keydown={e => {
+    if (e.key === 'Escape') {
+      hidden = true;
+    }
+  }} />
+
+<div
+  class:bx--tooltip--definition={true}
+  class:bx--tooltip--a11y={true}
+  {...$$restProps}
+  on:mouseenter={() => {
+    hidden = false;
+    visible = true;
+  }}
+  on:mouseleave={() => {
+    visible = false;
+  }}>
   <button
+    bind:this={ref}
+    aria-describedby={id}
+    class:bx--tooltip--a11y={true}
+    class:bx--tooltip__trigger={true}
+    class:bx--tooltip__trigger--definition={true}
+    class:bx--tooltip--hidden={hidden}
+    class:bx--tooltip--visible={visible}
+    class="{direction && `bx--tooltip--${direction}`}
+    {align && `bx--tooltip--align-${align}`}"
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
-    class={cx('--tooltip__trigger', '--tooltip--a11y', '--tooltip__trigger--definition', `--tooltip--${direction}`, `--tooltip--align-${align}`)}
-    aria-describedby={id}>
+    on:focus
+    on:focus={() => {
+      hidden = false;
+    }}>
     <slot />
   </button>
-  <div role="tooltip" class={cx('--assistive-text')} {id}>{tooltipText}</div>
+  <div role="tooltip" {id} class:bx--assistive-text={true}>{tooltipText}</div>
 </div>
diff --git a/src/components/TooltipDefinition/index.js b/src/components/TooltipDefinition/index.js
index dfefc5a4..c60f9ffb 100644
--- a/src/components/TooltipDefinition/index.js
+++ b/src/components/TooltipDefinition/index.js
@@ -1,3 +1 @@
-import TooltipDefinition from './TooltipDefinition.svelte';
-
-export default TooltipDefinition;
+export { default as TooltipDefinition } from "./TooltipDefinition.svelte";
diff --git a/src/components/TooltipIcon/TooltipIcon.Story.svelte b/src/components/TooltipIcon/TooltipIcon.Story.svelte
index 3feaa121..3aa31a67 100644
--- a/src/components/TooltipIcon/TooltipIcon.Story.svelte
+++ b/src/components/TooltipIcon/TooltipIcon.Story.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Filter16 from 'carbon-icons-svelte/lib/Filter16';
-  import Layout from '../../internal/ui/Layout.svelte';
-  import TooltipIcon from './TooltipIcon.svelte';
+  import Filter16 from "carbon-icons-svelte/lib/Filter16";
+  import Layout from "../../internal/ui/Layout.svelte";
+  import TooltipIcon from "./TooltipIcon.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/TooltipIcon/TooltipIcon.stories.js b/src/components/TooltipIcon/TooltipIcon.stories.js
index cdd97764..6496a0ed 100644
--- a/src/components/TooltipIcon/TooltipIcon.stories.js
+++ b/src/components/TooltipIcon/TooltipIcon.stories.js
@@ -1,26 +1,26 @@
-import { withKnobs, select, text } from '@storybook/addon-knobs';
-import Component from './TooltipIcon.Story.svelte';
+import { withKnobs, select, text } from "@storybook/addon-knobs";
+import Component from "./TooltipIcon.Story.svelte";
 
-export default { title: 'TooltipIcon', decorators: [withKnobs] };
+export default { title: "TooltipIcon", decorators: [withKnobs] };
 
 const directions = {
-  'Top (top)': 'top',
-  'Right (right)': 'right',
-  'Bottom (bottom)': 'bottom',
-  'Left (left)': 'left'
+  "Top (top)": "top",
+  "Right (right)": "right",
+  "Bottom (bottom)": "bottom",
+  "Left (left)": "left",
 };
 
 const alignments = {
-  'Start (start)': 'start',
-  'Center (center)': 'center',
-  'End (end)': 'end'
+  "Start (start)": "start",
+  "Center (center)": "center",
+  "End (end)": "end",
 };
 
 export const Default = () => ({
   Component,
   props: {
-    direction: select('Tooltip direction (direction)', directions, 'bottom'),
-    align: select('Tooltip alignment (align)', alignments, 'center'),
-    tooltipText: text('Tooltip content (tooltipText)', 'Filter')
-  }
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+    align: select("Tooltip alignment (align)", alignments, "center"),
+    tooltipText: text("Tooltip content (tooltipText)", "Filter"),
+  },
 });
diff --git a/src/components/TooltipIcon/TooltipIcon.svelte b/src/components/TooltipIcon/TooltipIcon.svelte
index c1c8f7d5..2f6df17b 100644
--- a/src/components/TooltipIcon/TooltipIcon.svelte
+++ b/src/components/TooltipIcon/TooltipIcon.svelte
@@ -1,23 +1,40 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let align = 'center';
-  export let direction = 'bottom';
-  export let id = Math.random();
-  export let style = undefined;
-  export let tooltipText = '';
+  export let tooltipText = "";
+  export let align = "center"; // "start" | "center" | "end"
+  export let direction = "bottom"; // "top" | "right" | "bottom" | "left"
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
 
-  import { cx } from '../../lib';
+  $: hidden = false;
 </script>
 
+<svelte:body
+  on:keydown={e => {
+    if (e.key === 'Escape') {
+      hidden = true;
+    }
+  }} />
+
 <button
+  bind:this={ref}
+  aria-describedby={id}
+  class:bx--tooltip__trigger={true}
+  class:bx--tooltip--a11y={true}
+  class:bx--tooltip--hidden={hidden}
+  class="{direction && `bx--tooltip--${direction}`}
+  {align && `bx--tooltip--align-${align}`}"
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
+  on:mouseenter={() => {
+    hidden = false;
+  }}
   on:mouseleave
-  aria-describedby={id}
-  class={cx('--tooltip__trigger', '--tooltip--a11y', `--tooltip--${direction}`, `--tooltip--align-${align}`, className)}
-  {style}>
-  <span class={cx('--assistive-text')} {id}>{tooltipText}</span>
+  on:focus
+  on:focus={() => {
+    hidden = false;
+  }}>
+  <span {id} class:bx--assistive-text={true}>{tooltipText}</span>
   <slot />
 </button>
diff --git a/src/components/TooltipIcon/index.js b/src/components/TooltipIcon/index.js
index db38975d..637ce809 100644
--- a/src/components/TooltipIcon/index.js
+++ b/src/components/TooltipIcon/index.js
@@ -1,3 +1 @@
-import TooltipIcon from './TooltipIcon.svelte';
-
-export default TooltipIcon;
+export { default as TooltipIcon } from "./TooltipIcon.svelte";
diff --git a/src/components/UIShell/FormTest.svelte b/src/components/UIShell/FormTest.svelte
index af97bdcc..b5b2e5c8 100644
--- a/src/components/UIShell/FormTest.svelte
+++ b/src/components/UIShell/FormTest.svelte
@@ -1,15 +1,16 @@
 <script>
-  import TextInput from '../TextInput/TextInput.svelte';
-  import Toggle from '../Toggle/Toggle.svelte';
-  import Button from '../Button/Button.svelte';
+  import TextInput from "../TextInput/TextInput.svelte";
+  import Toggle from "../Toggle/Toggle.svelte";
+  import { Button } from "../Button/Button.svelte";
 </script>
 
 <label>Test Field</label>
-<br><br>
+<br />
+<br />
 <TextInput />
-<br><br>
-<Toggle labelText='Test toggler' />
-<br><br>
-<Button>
-  Test Button
-</Button>
+<br />
+<br />
+<Toggle labelText="Test toggler" />
+<br />
+<br />
+<Button>Test Button</Button>
diff --git a/src/components/UIShell/SkipToContent.svelte b/src/components/UIShell/SkipToContent.svelte
index e1ca7642..ecf7b45c 100644
--- a/src/components/UIShell/SkipToContent.svelte
+++ b/src/components/UIShell/SkipToContent.svelte
@@ -3,6 +3,6 @@
   export let tabindex = "0";
 </script>
 
-<a {...$$props} class:bx--skip-to-content={true} {href} {tabindex} on:click>
+<a {href} {tabindex} class:bx--skip-to-content={true} {...$$restProps} on:click>
   <slot>Skip to main content</slot>
 </a>
diff --git a/src/components/UnorderedList/UnorderedList.Story.svelte b/src/components/UnorderedList/UnorderedList.Story.svelte
index 80f97fb9..eeeb4c7d 100644
--- a/src/components/UnorderedList/UnorderedList.Story.svelte
+++ b/src/components/UnorderedList/UnorderedList.Story.svelte
@@ -1,9 +1,9 @@
 <script>
   export let story = undefined;
 
-  import Layout from '../../internal/ui/Layout.svelte';
-  import ListItem from '../ListItem';
-  import UnorderedList from './UnorderedList.svelte';
+  import Layout from "../../internal/ui/Layout.svelte";
+  import { ListItem } from "../ListItem";
+  import UnorderedList from "./UnorderedList.svelte";
 </script>
 
 <Layout>
diff --git a/src/components/UnorderedList/UnorderedList.stories.js b/src/components/UnorderedList/UnorderedList.stories.js
index 115949b9..f7ef126f 100644
--- a/src/components/UnorderedList/UnorderedList.stories.js
+++ b/src/components/UnorderedList/UnorderedList.stories.js
@@ -1,8 +1,8 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import Component from './UnorderedList.Story.svelte';
+import { withKnobs } from "@storybook/addon-knobs";
+import Component from "./UnorderedList.Story.svelte";
 
-export default { title: 'UnorderedList', decorators: [withKnobs] };
+export default { title: "UnorderedList", decorators: [withKnobs] };
 
 export const Default = () => ({ Component });
 
-export const Nested = () => ({ Component, props: { story: 'nested' } });
+export const Nested = () => ({ Component, props: { story: "nested" } });
diff --git a/src/components/UnorderedList/UnorderedList.svelte b/src/components/UnorderedList/UnorderedList.svelte
index 7764b674..2ada618c 100644
--- a/src/components/UnorderedList/UnorderedList.svelte
+++ b/src/components/UnorderedList/UnorderedList.svelte
@@ -1,18 +1,14 @@
 <script>
-  let className = undefined;
-  export { className as class };
   export let nested = false;
-  export let style = undefined;
-
-  import { cx } from '../../lib';
 </script>
 
 <ul
+  class:bx--list-unordered={true}
+  class:bx--list--nested={nested}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--list--unordered', nested && '--list--nested', className)}
-  {style}>
+  on:mouseleave>
   <slot />
 </ul>
diff --git a/src/components/UnorderedList/index.js b/src/components/UnorderedList/index.js
index a9c46822..2d111aa8 100644
--- a/src/components/UnorderedList/index.js
+++ b/src/components/UnorderedList/index.js
@@ -1,3 +1 @@
-import UnorderedList from './UnorderedList.svelte';
-
-export default UnorderedList;
+export { default as UnorderedList } from "./UnorderedList.svelte";
diff --git a/src/index.js b/src/index.js
index 5a3c02b8..46a390c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,24 +1,28 @@
-import Accordion, {
+export {
+  Accordion,
   AccordionItem,
   AccordionSkeleton,
 } from "./components/Accordion";
-import Breadcrumb, {
+export {
+  Breadcrumb,
   BreadcrumbItem,
   BreadcrumbSkeleton,
 } from "./components/Breadcrumb";
-import Button, { ButtonSkeleton } from "./components/Button";
-import Checkbox, { CheckboxSkeleton } from "./components/Checkbox";
-import ContentSwitcher, { Switch } from "./components/ContentSwitcher";
-import Copy from "./components/Copy";
-import CopyButton from "./components/CopyButton";
-import ComboBox from "./components/ComboBox";
-import ComposedModal, {
+export { Button, ButtonSkeleton } from "./components/Button";
+export { Checkbox, CheckboxSkeleton } from "./components/Checkbox";
+export { ContentSwitcher, Switch } from "./components/ContentSwitcher";
+export { Copy } from "./components/Copy";
+export { CopyButton } from "./components/CopyButton";
+export { ComboBox } from "./components/ComboBox";
+export {
+  ComposedModal,
   ModalHeader,
   ModalBody,
   ModalFooter,
 } from "./components/ComposedModal";
-import CodeSnippet, { CodeSnippetSkeleton } from "./components/CodeSnippet";
-import DataTable, {
+export { CodeSnippet, CodeSnippetSkeleton } from "./components/CodeSnippet";
+export {
+  DataTable,
   Table,
   TableBody,
   TableCell,
@@ -27,34 +31,36 @@ import DataTable, {
   TableHeader,
   TableRow,
 } from "./components/DataTable";
-import DataTableSkeleton from "./components/DataTableSkeleton";
-import DatePicker, { DatePickerInput } from "./components/DatePicker";
-import Dropdown, { DropdownSkeleton } from "./components/Dropdown";
-import FileUploader, {
+export { DataTableSkeleton } from "./components/DataTableSkeleton";
+export { DatePicker, DatePickerInput } from "./components/DatePicker";
+export { Dropdown, DropdownSkeleton } from "./components/Dropdown";
+export {
+  FileUploader,
   FileUploaderButton,
   FileUploaderItem,
   FileUploaderDropContainer,
   Filename,
 } from "./components/FileUploader";
-import Form from "./components/Form";
-import FormGroup from "./components/FormGroup";
-import FormItem from "./components/FormItem";
-import FormLabel from "./components/FormLabel";
-import Icon, { IconSkeleton } from "./components/Icon";
-import InlineLoading from "./components/InlineLoading";
-import Link from "./components/Link";
-import ListBox, {
+export { Form } from "./components/Form";
+export { FormGroup } from "./components/FormGroup";
+export { FormItem } from "./components/FormItem";
+export { FormLabel } from "./components/FormLabel";
+export { Icon, IconSkeleton } from "./components/Icon";
+export { InlineLoading } from "./components/InlineLoading";
+export { Link } from "./components/Link";
+export {
+  ListBox,
   ListBoxField,
   ListBoxMenu,
   ListBoxMenuIcon,
   ListBoxMenuItem,
   ListBoxSelection,
 } from "./components/ListBox";
-import ListItem from "./components/ListItem";
-import Loading from "./components/Loading";
-import MultiSelect from "./components/MultiSelect";
-import Modal from "./components/Modal";
-import {
+export { ListItem } from "./components/ListItem";
+export { Loading } from "./components/Loading";
+export { MultiSelect } from "./components/MultiSelect";
+export { Modal } from "./components/Modal";
+export {
   ToastNotification,
   InlineNotification,
   NotificationActionButton,
@@ -62,26 +68,29 @@ import {
   NotificationIcon,
   NotificationTextDetails,
 } from "./components/Notification";
-import NumberInput, { NumberInputSkeleton } from "./components/NumberInput";
-import OrderedList from "./components/OrderedList";
-import OverflowMenu, { OverflowMenuItem } from "./components/OverflowMenu";
-import Pagination, { PaginationSkeleton } from "./components/Pagination";
-import ProgressIndicator, {
+export { NumberInput, NumberInputSkeleton } from "./components/NumberInput";
+export { OrderedList } from "./components/OrderedList";
+export { OverflowMenu, OverflowMenuItem } from "./components/OverflowMenu";
+export { Pagination, PaginationSkeleton } from "./components/Pagination";
+export {
+  ProgressIndicator,
   ProgressIndicatorSkeleton,
   ProgressStep,
 } from "./components/ProgressIndicator";
-import RadioButton, { RadioButtonSkeleton } from "./components/RadioButton";
-import RadioButtonGroup from "./components/RadioButtonGroup";
-import Search, { SearchSkeleton } from "./components/Search";
-import Select, {
+export { RadioButton, RadioButtonSkeleton } from "./components/RadioButton";
+export { RadioButtonGroup } from "./components/RadioButtonGroup";
+export { Search, SearchSkeleton } from "./components/Search";
+export {
+  Select,
   SelectSkeleton,
   SelectItem,
   SelectItemGroup,
 } from "./components/Select";
-import SkeletonPlaceholder from "./components/SkeletonPlaceholder";
-import SkeletonText from "./components/SkeletonText";
-import Slider, { SliderSkeleton } from "./components/Slider";
-import StructuredList, {
+export { SkeletonPlaceholder } from "./components/SkeletonPlaceholder";
+export { SkeletonText } from "./components/SkeletonText";
+export { Slider, SliderSkeleton } from "./components/Slider";
+export {
+  StructuredList,
   StructuredListSkeleton,
   StructuredListBody,
   StructuredListHead,
@@ -89,27 +98,29 @@ import StructuredList, {
   StructuredListRow,
   StructuredListInput,
 } from "./components/StructuredList";
-import Tabs, { Tab, TabContent, TabsSkeleton } from "./components/Tabs";
-import Tag, { TagSkeleton } from "./components/Tag";
-import TextArea, { TextAreaSkeleton } from "./components/TextArea";
-import TextInput, {
+export { Tabs, Tab, TabContent, TabsSkeleton } from "./components/Tabs";
+export { Tag, TagSkeleton } from "./components/Tag";
+export { TextArea, TextAreaSkeleton } from "./components/TextArea";
+export {
+  TextInput,
   TextInputSkeleton,
   PasswordInput,
 } from "./components/TextInput";
-import Tile, {
+export {
+  Tile,
   ClickableTile,
   ExpandableTile,
   SelectableTile,
   RadioTile,
   TileGroup,
 } from "./components/Tile";
-import TimePicker, { TimePickerSelect } from "./components/TimePicker";
-import Toggle, { ToggleSkeleton } from "./components/Toggle";
-import ToggleSmall, { ToggleSmallSkeleton } from "./components/ToggleSmall";
-import Tooltip from "./components/Tooltip";
-import TooltipDefinition from "./components/TooltipDefinition";
-import TooltipIcon from "./components/TooltipIcon";
-import {
+export { TimePicker, TimePickerSelect } from "./components/TimePicker";
+export { Toggle, ToggleSkeleton } from "./components/Toggle";
+export { ToggleSmall, ToggleSmallSkeleton } from "./components/ToggleSmall";
+export { Tooltip } from "./components/Tooltip";
+export { TooltipDefinition } from "./components/TooltipDefinition";
+export { TooltipIcon } from "./components/TooltipIcon";
+export {
   Header,
   HeaderAction,
   HeaderActionLink,
@@ -129,145 +140,4 @@ import {
   Content,
   SkipToContent,
 } from "./components/UIShell";
-import UnorderedList from "./components/UnorderedList";
-
-export {
-  Accordion,
-  AccordionItem,
-  AccordionSkeleton,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbSkeleton,
-  Button,
-  ButtonSkeleton,
-  Checkbox,
-  CheckboxSkeleton,
-  ClickableTile,
-  CodeSnippet,
-  CodeSnippetSkeleton,
-  ComboBox,
-  ComposedModal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ContentSwitcher,
-  Copy,
-  CopyButton,
-  DataTable,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-  DataTableSkeleton,
-  DatePicker,
-  DatePickerInput,
-  Dropdown,
-  DropdownSkeleton,
-  FileUploader,
-  FileUploaderButton,
-  FileUploaderItem,
-  FileUploaderDropContainer,
-  Filename,
-  Form,
-  FormGroup,
-  FormItem,
-  FormLabel,
-  ExpandableTile,
-  Icon,
-  IconSkeleton,
-  InlineLoading,
-  MultiSelect,
-  Modal,
-  InlineNotification,
-  Link,
-  ListBox,
-  ListBoxField,
-  ListBoxMenu,
-  ListBoxMenuIcon,
-  ListBoxMenuItem,
-  ListBoxSelection,
-  ListItem,
-  Loading,
-  NotificationActionButton,
-  NotificationButton,
-  NotificationIcon,
-  NotificationTextDetails,
-  NumberInput,
-  NumberInputSkeleton,
-  OrderedList,
-  OverflowMenu,
-  OverflowMenuItem,
-  Pagination,
-  PaginationSkeleton,
-  PasswordInput,
-  ProgressIndicator,
-  ProgressIndicatorSkeleton,
-  ProgressStep,
-  RadioButton,
-  RadioButtonSkeleton,
-  RadioButtonGroup,
-  RadioTile,
-  Search,
-  SearchSkeleton,
-  SelectableTile,
-  Select,
-  SelectSkeleton,
-  SelectItem,
-  SelectItemGroup,
-  SkeletonPlaceholder,
-  SkeletonText,
-  Switch,
-  Slider,
-  SliderSkeleton,
-  StructuredList,
-  StructuredListSkeleton,
-  StructuredListBody,
-  StructuredListHead,
-  StructuredListCell,
-  StructuredListRow,
-  StructuredListInput,
-  Tabs,
-  Tab,
-  TabContent,
-  TabsSkeleton,
-  Tag,
-  TagSkeleton,
-  TextArea,
-  TextAreaSkeleton,
-  TextInput,
-  TextInputSkeleton,
-  Tile,
-  TileGroup,
-  ToastNotification,
-  TimePicker,
-  TimePickerSelect,
-  Toggle,
-  ToggleSkeleton,
-  ToggleSmall,
-  ToggleSmallSkeleton,
-  Tooltip,
-  TooltipDefinition,
-  TooltipIcon,
-  Header,
-  HeaderAction,
-  HeaderActionLink,
-  HeaderActionSearch,
-  HeaderNav,
-  HeaderNavItem,
-  HeaderNavMenu,
-  HeaderPanelDivider,
-  HeaderPanelLink,
-  HeaderPanelLinks,
-  HeaderUtilities,
-  SideNav,
-  SideNavItems,
-  SideNavLink,
-  SideNavMenu,
-  SideNavMenuItem,
-  UnorderedList,
-  Content,
-  SkipToContent,
-};
+export { UnorderedList } from "./components/UnorderedList";
diff --git a/src/internal/ui/Layout.svelte b/src/internal/ui/Layout.svelte
index 12b640f2..4fa864ce 100644
--- a/src/internal/ui/Layout.svelte
+++ b/src/internal/ui/Layout.svelte
@@ -1,12 +1 @@
-<style>
-  .layout {
-    padding: 3em;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-  }
-</style>
-
-<div class="layout">
-  <slot />
-</div>
+<slot />
diff --git a/src/lib/__tests__/css.spec.js b/src/lib/__tests__/css.spec.js
deleted file mode 100644
index f29bd170..00000000
--- a/src/lib/__tests__/css.spec.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { css } from '../css';
-
-test('css', () => {
-  expect(css([])).toEqual('');
-  expect(css(['width: 20px; height: 20px;'])).toEqual('width: 20px; height: 20px');
-  expect(css(['width: 20px;', ['height', '20px']])).toEqual('width: 20px; height: 20px');
-  expect(css(['width: 20px', ['height', '20px']])).toEqual('width: 20px; height: 20px');
-  expect(css([undefined, null, 0, ['height', '20px']])).toEqual('height: 20px');
-});
diff --git a/src/lib/__tests__/fill-array.spec.js b/src/lib/__tests__/fill-array.spec.js
deleted file mode 100644
index 7a451735..00000000
--- a/src/lib/__tests__/fill-array.spec.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { fillArray } from '../fill-array';
-
-test('fillArray', () => {
-  expect(fillArray(0)).toEqual([]);
-  expect(fillArray(2)).toEqual([0, 1]);
-  expect(fillArray(3)).toEqual([0, 1, 2]);
-});
diff --git a/src/lib/css.js b/src/lib/css.js
deleted file mode 100644
index ad10614c..00000000
--- a/src/lib/css.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function css(array) {
-  return array
-    .map(item => {
-      if (!item) return false;
-
-      return Array.isArray(item)
-        ? item.join(': ')
-        : item.slice(-1) === ';'
-        ? item.slice(0, -1)
-        : item;
-    })
-    .filter(Boolean)
-    .join('; ');
-}
-
-export { css };
diff --git a/src/lib/fill-array.js b/src/lib/fill-array.js
deleted file mode 100644
index 5cd3a7f4..00000000
--- a/src/lib/fill-array.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function fillArray(length) {
-  return Array.from({ length }, (_, i) => i);
-}
-
-export { fillArray };
diff --git a/src/lib/index.js b/src/lib/index.js
index ef3d0b74..de6b6ff9 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,3 +1 @@
-export { cx } from './cx';
-export { css } from './css';
-export { fillArray } from './fill-array';
+export { cx } from "./cx";
diff --git a/yarn.lock b/yarn.lock
index 113360a0..f3286235 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3446,10 +3446,10 @@ capture-stack-trace@^1.0.0:
   resolved "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
   integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
-carbon-icons-svelte@10.9.3:
-  version "10.9.3"
-  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.9.3.tgz#bbd297c52b581884c5cb52727830045c517637bf"
-  integrity sha512-uyKxmeAotF77O+Nej8a+GHNIiwbCJVA6fS64Eg6h8pnXFIFJ4AlZRsKK9uSgA1rlVZ2y2bEHFsIkzxZ0yZjyCQ==
+carbon-icons-svelte@^10.13.0:
+  version "10.13.0"
+  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.13.0.tgz#fbb3d863901bee94418e8caf2959777655edfa78"
+  integrity sha512-WXEr+cE1IXtYQspp3cwE2l2qlYUeHWd46wyqYM2PJ3Qw5n4tPD7OCs+MZa6hmOaziv/fns+uYMeeisGvJp5Slg==
 
 case-sensitive-paths-webpack-plugin@^2.2.0:
   version "2.3.0"