From 42b8159b1cba33f8065f860f61336b6b0d23a688 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 4 Sep 2020 16:35:49 -0700
Subject: [PATCH] chore(prettier): use svelteStrictMode

---
 .prettierrc                                   |   1 +
 .../src/components/CopyableCodeSnippet.svelte |   6 +-
 docs/src/components/GlobalHeader.svelte       |   2 +-
 docs/src/components/Portfolio.svelte          |  69 ++++----
 docs/src/components/Theme.svelte              |   2 +-
 docs/src/components/TileCard.svelte           |   4 +-
 docs/src/routes/_layout.svelte                |  16 +-
 docs/src/routes/components/[slug].svelte      |  22 +--
 docs/src/routes/examples/Button.svelte        |  28 ++--
 docs/src/routes/getting-started/index.svelte  |   5 +-
 examples/rollup-typescript/src/App.svelte     |   4 +-
 src/Accordion/Accordion.Skeleton.svelte       |  10 +-
 src/Accordion/Accordion.Story.svelte          |   4 +-
 src/Accordion/Accordion.svelte                |   2 +-
 src/Accordion/AccordionItem.svelte            |  26 +--
 src/Breadcrumb/Breadcrumb.Skeleton.svelte     |  10 +-
 src/Breadcrumb/Breadcrumb.Story.svelte        |   4 +-
 src/Breadcrumb/Breadcrumb.svelte              |   4 +-
 src/Breadcrumb/BreadcrumbItem.svelte          |   8 +-
 src/Button/Button.Skeleton.svelte             |  16 +-
 src/Button/Button.svelte                      |  24 +--
 src/Button/ButtonSet.svelte                   |   2 +-
 src/Checkbox/Checkbox.Skeleton.svelte         |  10 +-
 src/Checkbox/Checkbox.Story.svelte            |   4 +-
 src/Checkbox/Checkbox.svelte                  |  30 ++--
 src/CodeSnippet/CodeSnippet.Skeleton.svelte   |  14 +-
 src/CodeSnippet/CodeSnippet.svelte            |  48 +++---
 src/ComboBox/ComboBox.Story.svelte            |  16 +-
 src/ComboBox/ComboBox.svelte                  | 117 +++++++-------
 src/ComposedModal/ComposedModal.Story.svelte  |  28 ++--
 src/ComposedModal/ComposedModal.svelte        |  24 +--
 src/ComposedModal/ModalBody.svelte            |  10 +-
 src/ComposedModal/ModalFooter.svelte          |  12 +-
 src/ComposedModal/ModalHeader.svelte          |  18 +--
 .../ContentSwitcher.Story.svelte              |  16 +-
 src/ContentSwitcher/ContentSwitcher.svelte    |   4 +-
 src/ContentSwitcher/Switch.svelte             |  24 +--
 src/Copy/Copy.svelte                          |  20 +--
 src/CopyButton/CopyButton.Story.svelte        |   8 +-
 src/CopyButton/CopyButton.svelte              |   4 +-
 src/DataTable/DataTable.Story.svelte          |  62 +++----
 src/DataTable/DataTable.svelte                |  22 +--
 src/DataTable/Table.svelte                    |  38 ++---
 src/DataTable/TableContainer.svelte           |  10 +-
 src/DataTable/TableHeader.svelte              |  24 +--
 src/DataTable/TableRow.svelte                 |   2 +-
 .../DataTableSkeleton.svelte                  |  12 +-
 src/DatePicker/DatePicker.Skeleton.svelte     |  20 +--
 src/DatePicker/DatePicker.Story.svelte        |  20 +--
 src/DatePicker/DatePicker.svelte              |  16 +-
 src/DatePicker/DatePickerInput.svelte         |  60 +++----
 src/Dropdown/Dropdown.Skeleton.svelte         |  14 +-
 src/Dropdown/Dropdown.Story.svelte            |   6 +-
 src/Dropdown/Dropdown.svelte                  |  85 +++++-----
 src/FileUploader/FileUploader.Skeleton.svelte |   2 +-
 src/FileUploader/FileUploader.Story.svelte    |  26 +--
 src/FileUploader/FileUploader.svelte          |  40 ++---
 src/FileUploader/FileUploaderButton.svelte    |  42 ++---
 .../FileUploaderDropContainer.svelte          |  54 +++----
 src/FileUploader/FileUploaderItem.svelte      |  30 ++--
 src/FileUploader/Filename.svelte              |  12 +-
 src/Form/Form.Story.svelte                    |  16 +-
 src/Form/Form.svelte                          |   2 +-
 src/FormGroup/FormGroup.svelte                |   8 +-
 src/FormItem/FormItem.svelte                  |   2 +-
 src/FormLabel/FormLabel.svelte                |   4 +-
 src/Grid/Column.svelte                        |   2 +-
 src/Grid/Grid.Story.svelte                    |  16 +-
 src/Grid/Grid.svelte                          |   2 +-
 src/Grid/Row.svelte                           |   2 +-
 src/Icon/Icon.Skeleton.svelte                 |   4 +-
 src/Icon/Icon.Story.svelte                    |   6 +-
 src/Icon/Icon.svelte                          |   4 +-
 src/InlineLoading/InlineLoading.Story.svelte  |  10 +-
 src/InlineLoading/InlineLoading.svelte        |  10 +-
 src/Link/Link.svelte                          |  16 +-
 src/ListBox/ListBox.svelte                    |  18 +--
 src/ListBox/ListBoxField.svelte               |  18 +--
 src/ListBox/ListBoxMenu.svelte                |   2 +-
 src/ListBox/ListBoxMenuIcon.svelte            |   6 +-
 src/ListBox/ListBoxMenuItem.svelte            |   8 +-
 src/ListBox/ListBoxSelection.svelte           |  20 +--
 src/ListItem/ListItem.svelte                  |   2 +-
 src/Loading/Loading.svelte                    |  48 +++---
 src/Modal/Modal.Story.svelte                  |  28 ++--
 src/Modal/Modal.svelte                        |  98 +++++------
 src/MultiSelect/MultiSelect.Story.svelte      |   4 +-
 src/MultiSelect/MultiSelect.svelte            | 153 +++++++++---------
 src/Notification/InlineNotification.svelte    |  30 ++--
 src/Notification/Notification.Story.svelte    |   8 +-
 src/Notification/NotificationButton.svelte    |  12 +-
 src/Notification/NotificationIcon.svelte      |   4 +-
 .../NotificationTextDetails.svelte            |  14 +-
 src/Notification/ToastNotification.svelte     |  27 ++--
 src/NumberInput/NumberInput.Skeleton.svelte   |   8 +-
 src/NumberInput/NumberInput.Story.svelte      |   4 +-
 src/NumberInput/NumberInput.svelte            | 152 ++++++++---------
 src/OrderedList/OrderedList.svelte            |   4 +-
 src/OverflowMenu/OverflowMenu.Story.svelte    |  12 +-
 src/OverflowMenu/OverflowMenu.svelte          |  46 +++---
 src/OverflowMenu/OverflowMenuItem.svelte      |  38 +++--
 src/Pagination/Pagination.Skeleton.svelte     |  10 +-
 src/Pagination/Pagination.svelte              |  48 +++---
 src/PaginationNav/PaginationItem.svelte       |  12 +-
 src/PaginationNav/PaginationNav.Story.svelte  |  16 +-
 src/PaginationNav/PaginationNav.svelte        |  61 +++----
 src/PaginationNav/PaginationOverflow.svelte   |  26 +--
 .../ProgressIndicator.Skeleton.svelte         |  20 +--
 .../ProgressIndicator.svelte                  |   4 +-
 src/ProgressIndicator/ProgressStep.svelte     |  42 ++---
 src/RadioButton/RadioButton.Skeleton.svelte   |   8 +-
 src/RadioButton/RadioButton.svelte            |  28 ++--
 src/RadioButtonGroup/RadioButtonGroup.svelte  |  10 +-
 src/Search/Search.Skeleton.svelte             |  10 +-
 src/Search/Search.svelte                      |  40 ++---
 src/Select/Select.Skeleton.svelte             |  10 +-
 src/Select/Select.svelte                      |  84 +++++-----
 src/Select/SelectItem.svelte                  |  14 +-
 src/Select/SelectItemGroup.svelte             |   6 +-
 .../SkeletonPlaceholder.svelte                |   4 +-
 src/SkeletonText/SkeletonText.svelte          |  12 +-
 src/Slider/Slider.Skeleton.svelte             |  20 +--
 src/Slider/Slider.Story.svelte                |   4 +-
 src/Slider/Slider.svelte                      |  95 +++++------
 .../StructuredList.Skeleton.svelte            |  28 ++--
 src/StructuredList/StructuredList.svelte      |   6 +-
 src/StructuredList/StructuredListBody.svelte  |   2 +-
 src/StructuredList/StructuredListCell.svelte  |   6 +-
 src/StructuredList/StructuredListHead.svelte  |   2 +-
 src/StructuredList/StructuredListInput.svelte |  18 +--
 src/StructuredList/StructuredListRow.svelte   |  10 +-
 src/Tabs/Tab.svelte                           |  28 ++--
 src/Tabs/TabContent.svelte                    |  10 +-
 src/Tabs/Tabs.svelte                          |  30 ++--
 src/Tabs/TabsSkeleton.svelte                  |  16 +-
 src/Tag/Tag.Skeleton.svelte                   |   6 +-
 src/Tag/Tag.Story.svelte                      |   4 +-
 src/Tag/Tag.svelte                            |  26 +--
 src/TextArea/TextArea.Skeleton.svelte         |   8 +-
 src/TextArea/TextArea.svelte                  |  52 +++---
 src/TextInput/PasswordInput.svelte            |  72 ++++-----
 src/TextInput/TextInput.Skeleton.svelte       |   8 +-
 src/TextInput/TextInput.Story.svelte          |  26 +--
 src/TextInput/TextInput.svelte                |  56 +++----
 src/Tile/ClickableTile.svelte                 |  16 +-
 src/Tile/ExpandableTile.svelte                |  40 ++---
 src/Tile/RadioTile.svelte                     |  38 ++---
 src/Tile/SelectableTile.svelte                |  42 ++---
 src/Tile/Tile.Story.svelte                    |  16 +-
 src/Tile/Tile.svelte                          |   4 +-
 src/Tile/TileGroup.svelte                     |   4 +-
 src/TimePicker/TimePicker.Story.svelte        |   4 +-
 src/TimePicker/TimePicker.svelte              |  52 +++---
 src/TimePicker/TimePickerSelect.svelte        |  30 ++--
 src/Toggle/Toggle.Skeleton.svelte             |  24 +--
 src/Toggle/Toggle.svelte                      |  34 ++--
 src/ToggleSmall/ToggleSmall.Skeleton.svelte   |  26 +--
 src/ToggleSmall/ToggleSmall.svelte            |  40 ++---
 src/Tooltip/Tooltip.Story.svelte              |  28 ++--
 src/Tooltip/Tooltip.svelte                    |  42 ++---
 .../TooltipDefinition.svelte                  |  38 ++---
 src/TooltipIcon/TooltipIcon.svelte            |  24 +--
 src/UIShell/Content.svelte                    |   2 +-
 src/UIShell/GlobalHeader/Header.svelte        |  10 +-
 src/UIShell/GlobalHeader/HeaderAction.svelte  |  24 +--
 .../GlobalHeader/HeaderActionLink.svelte      |   8 +-
 .../GlobalHeader/HeaderActionSearch.svelte    |  60 +++----
 src/UIShell/GlobalHeader/HeaderNav.svelte     |   7 +-
 src/UIShell/GlobalHeader/HeaderNavItem.svelte |   6 +-
 src/UIShell/GlobalHeader/HeaderNavMenu.svelte |  26 +--
 .../GlobalHeader/HeaderPanelLink.svelte       |   4 +-
 .../GlobalHeader/HeaderPanelLinks.svelte      |   2 +-
 .../GlobalHeader/HeaderUtilities.svelte       |   2 +-
 src/UIShell/SideNav/HamburgerMenu.svelte      |  16 +-
 src/UIShell/SideNav/SideNav.svelte            |  20 +--
 src/UIShell/SideNav/SideNavItems.svelte       |   2 +-
 src/UIShell/SideNav/SideNavLink.svelte        |  16 +-
 src/UIShell/SideNav/SideNavMenu.svelte        |  24 +--
 src/UIShell/SideNav/SideNavMenuItem.svelte    |  10 +-
 src/UIShell/SkipToContent.svelte              |   7 +-
 src/UIShell/UIShell.Story.svelte              |  41 ++---
 src/UnorderedList/UnorderedList.svelte        |   4 +-
 182 files changed, 2020 insertions(+), 1912 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..5821671a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{ "svelteStrictMode": true }
\ No newline at end of file
diff --git a/docs/src/components/CopyableCodeSnippet.svelte b/docs/src/components/CopyableCodeSnippet.svelte
index c8a753ea..09909b90 100644
--- a/docs/src/components/CopyableCodeSnippet.svelte
+++ b/docs/src/components/CopyableCodeSnippet.svelte
@@ -7,7 +7,7 @@
 
 <CodeSnippet
   {...$$restProps}
-  {code}
-  on:click={() => {
+  code="{code}"
+  on:click="{() => {
     copy(code);
-  }} />
+  }}" />
diff --git a/docs/src/components/GlobalHeader.svelte b/docs/src/components/GlobalHeader.svelte
index 9f296d01..e253e768 100644
--- a/docs/src/components/GlobalHeader.svelte
+++ b/docs/src/components/GlobalHeader.svelte
@@ -17,7 +17,7 @@
   platformName="Components Svelte"
   href="."
   rel="prefetch"
-  aria-current={segment === undefined ? 'page' : undefined}>
+  aria-current="{segment === undefined ? 'page' : undefined}">
   <SkipToContent />
   <!-- <HeaderNav>
     <HeaderNavItem
diff --git a/docs/src/components/Portfolio.svelte b/docs/src/components/Portfolio.svelte
index 4dbcf392..e4fe5f1e 100644
--- a/docs/src/components/Portfolio.svelte
+++ b/docs/src/components/Portfolio.svelte
@@ -28,7 +28,7 @@
 
 <Carbon.Row>
   <Carbon.Column>
-    <Carbon.ToggleSmall bind:toggled={skeleton} labelText="Skeleton state" />
+    <Carbon.ToggleSmall bind:toggled="{skeleton}" labelText="Skeleton state" />
   </Carbon.Column>
 </Carbon.Row>
 
@@ -36,8 +36,11 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Accordion">
-        <Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
-          <Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
+        <Carbon.Accordion
+          count="{3}"
+          skeleton="{skeleton}"
+          open="{accordionItemOpen}">
+          <Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
             Content 1
           </Carbon.AccordionItem>
           <Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
@@ -47,7 +50,7 @@
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Breadcrumb">
-        <Carbon.Breadcrumb {skeleton}>
+        <Carbon.Breadcrumb skeleton="{skeleton}">
           <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
           <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
           <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
@@ -59,27 +62,33 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Primary button">
-        <Carbon.Button {skeleton}>Primary</Carbon.Button>
+        <Carbon.Button skeleton="{skeleton}">Primary</Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Secondary button">
-        <Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
+        <Carbon.Button kind="secondary" skeleton="{skeleton}">
+          Secondary
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Tertiary button">
-        <Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
+        <Carbon.Button kind="tertiary" skeleton="{skeleton}">
+          Tertiary
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Ghost button">
-        <Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
+        <Carbon.Button kind="ghost" skeleton="{skeleton}">Ghost</Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Danger button">
-        <Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
+        <Carbon.Button kind="danger" skeleton="{skeleton}">
+          Danger
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
   </Carbon.Row>
@@ -87,50 +96,52 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Primary button with icon">
-        <Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
+        <Carbon.Button icon="{Add16}" skeleton="{skeleton}">
+          With icon
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Icon-only buttons">
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           iconDescription="Primary"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="secondary"
           iconDescription="Secondary"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="tertiary"
           iconDescription="Tertiary"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="ghost"
           iconDescription="Ghost"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="danger"
           iconDescription="Danger"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
       </TileCard>
     </Carbon.Column>
   </Carbon.Row>
@@ -140,9 +151,9 @@
       <TileCard title="Checkbox">
         <fieldset class="bx--fieldset">
           <legend class="bx--label">Checkbox heading</legend>
-          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
-          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
-          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
+          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
+          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
         </fieldset>
       </TileCard>
     </Carbon.Column>
@@ -152,11 +163,11 @@
           <legend class="bx--label">Checkbox heading</legend>
           <Carbon.Checkbox
             indeterminate
-            {skeleton}
+            skeleton="{skeleton}"
             labelText="Checkbox label" />
           <Carbon.Checkbox
             indeterminate
-            {skeleton}
+            skeleton="{skeleton}"
             labelText="Checkbox label" />
         </fieldset>
       </TileCard>
@@ -166,21 +177,21 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Inline Code Snippet">
-        <Carbon.CodeSnippet type="inline" light {skeleton}>
+        <Carbon.CodeSnippet type="inline" light skeleton="{skeleton}">
           {`node -v`}
         </Carbon.CodeSnippet>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Single-line Code Snippet">
-        <Carbon.CodeSnippet type="single" light {skeleton}>
+        <Carbon.CodeSnippet type="single" light skeleton="{skeleton}">
           {`tsc -c tsconfig.json`}
         </Carbon.CodeSnippet>
       </TileCard>
     </Carbon.Column>
-    <Carbon.Column lg={8} noGutter>
+    <Carbon.Column lg="{8}" noGutter>
       <TileCard title="Multi-line Code Snippet">
-        <Carbon.CodeSnippet type="multi" light {skeleton}>
+        <Carbon.CodeSnippet type="multi" light skeleton="{skeleton}">
           {`* {
 margin: 0;
 padding: 0;
diff --git a/docs/src/components/Theme.svelte b/docs/src/components/Theme.svelte
index 9a37f41d..1efadb56 100644
--- a/docs/src/components/Theme.svelte
+++ b/docs/src/components/Theme.svelte
@@ -21,7 +21,7 @@
   }
 </style>
 
-<Select inline labelText="Theme" bind:selected={theme}>
+<Select inline labelText="Theme" bind:selected="{theme}">
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
index e92e25e9..647c1ddc 100644
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@@ -44,7 +44,7 @@
         hasIconOnly
         kind="ghost"
         size="small"
-        icon={Code16}
+        icon="{Code16}"
         iconDescription="Usage"
         tooltipAlignment="center"
         tooltipPosition="top" />
@@ -52,7 +52,7 @@
         hasIconOnly
         kind="ghost"
         size="small"
-        icon={Code16}
+        icon="{Code16}"
         iconDescription="Usage"
         tooltipAlignment="center"
         tooltipPosition="top" />
diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte
index 33baa2c7..41e6bcbf 100644
--- a/docs/src/routes/_layout.svelte
+++ b/docs/src/routes/_layout.svelte
@@ -58,28 +58,28 @@
 </style>
 
 {#if segment !== 'examples'}
-  <GlobalHeader {segment} />
+  <GlobalHeader segment="{segment}" />
   <SideNav isOpen>
     <SideNavItems>
       <SideNavLink
         text="Getting Started"
         href="getting-started"
         rel="prefetch"
-        isSelected={segment === 'getting-started'} />
+        isSelected="{segment === 'getting-started'}" />
       <SideNavMenu
         text="Components"
-        expanded={segment === 'components'}
-        isSelected={segment === 'components' && !$tail}>
+        expanded="{segment === 'components'}"
+        isSelected="{segment === 'components' && !$tail}">
         <SideNavMenuItem
           text="Index"
           href="components"
           rel="prefetch"
-          isSelected={segment === 'components' && $tail && $tail.slug === 'index'} />
+          isSelected="{segment === 'components' && $tail && $tail.slug === 'index'}" />
         <SideNavMenuItem
           text="Button"
           href="components/button"
           rel="prefetch"
-          isSelected={segment === 'components' && $tail && $tail.slug === 'button'} />
+          isSelected="{segment === 'components' && $tail && $tail.slug === 'button'}" />
       </SideNavMenu>
     </SideNavItems>
   </SideNav>
@@ -90,11 +90,11 @@
           style="display: flex; align-items: center; justify-content:
           space-between;">
           <Breadcrumb>
-            <BreadcrumbItem href="." isCurrentPage={!$tail && !segment}>
+            <BreadcrumbItem href="." isCurrentPage="{!$tail && !segment}">
               Home
             </BreadcrumbItem>
             {#if segment && $tail}
-              <BreadcrumbItem href={segment} isCurrentPage={!$tail}>
+              <BreadcrumbItem href="{segment}" isCurrentPage="{!$tail}">
                 {urlIds[segment]}
               </BreadcrumbItem>
             {/if}
diff --git a/docs/src/routes/components/[slug].svelte b/docs/src/routes/components/[slug].svelte
index 2278c99e..6dc12823 100644
--- a/docs/src/routes/components/[slug].svelte
+++ b/docs/src/routes/components/[slug].svelte
@@ -96,35 +96,35 @@
 <Row noGutter>
   <div class="preview">
     {#if component}
-      <svelte:component this={component.default} {...defaultProps} />
+      <svelte:component this="{component.default}" {...defaultProps} />
     {/if}
   </div>
 </Row>
 
 <Row>
-  <Column md={3} lg={4}>
+  <Column md="{3}" lg="{4}">
     {#each Object.keys(props) as key}
       {#if Array.isArray(props[key].values)}
-        <FormGroup legendText={key}>
+        <FormGroup legendText="{key}">
           <RadioButtonGroup
-            selected={props[key].default}
-            on:change={({ detail }) => {
+            selected="{props[key].default}"
+            on:change="{({ detail }) => {
               defaultProps = { ...defaultProps, [key]: detail };
-            }}>
+            }}">
             {#each props[key].values as value}
-              <RadioButton {value} id={value} labelText={value} />
+              <RadioButton value="{value}" id="{value}" labelText="{value}" />
             {/each}
           </RadioButtonGroup>
         </FormGroup>
       {/if}
     {/each}
   </Column>
-  <Column md={5}>
+  <Column md="{5}">
     <CodeSnippet
       type="multi"
-      code={data.source}
-      on:click={() => {
+      code="{data.source}"
+      on:click="{() => {
         copy(data.source);
-      }} />
+      }}" />
   </Column>
 </Row>
diff --git a/docs/src/routes/examples/Button.svelte b/docs/src/routes/examples/Button.svelte
index db6bc8bf..7dd920fe 100644
--- a/docs/src/routes/examples/Button.svelte
+++ b/docs/src/routes/examples/Button.svelte
@@ -8,10 +8,10 @@
   <Button
     {...$$props}
     kind="primary"
-    on:click={() => console.log('click')}
-    on:mouseover={() => console.log('mouseover')}
-    on:mouseenter={() => console.log('mouseenter')}
-    on:mouseleave={() => console.log('mouseleave')}>
+    on:click="{() => console.log('click')}"
+    on:mouseover="{() => console.log('mouseover')}"
+    on:mouseenter="{() => console.log('mouseenter')}"
+    on:mouseleave="{() => console.log('mouseleave')}">
     Primary button
   </Button>
 
@@ -26,15 +26,15 @@
 
 <div>
   <h4>Buttons with Icons</h4>
-  <Button {...$$props} kind="primary" icon={Add16}>Primary</Button>
+  <Button {...$$props} kind="primary" icon="{Add16}">Primary</Button>
 
-  <Button {...$$props} kind="secondary" icon={Add16}>Secondary</Button>
+  <Button {...$$props} kind="secondary" icon="{Add16}">Secondary</Button>
 
-  <Button {...$$props} kind="tertiary" icon={Add16}>Tertiary</Button>
+  <Button {...$$props} kind="tertiary" icon="{Add16}">Tertiary</Button>
 
-  <Button {...$$props} kind="ghost" icon={Add16}>Ghost</Button>
+  <Button {...$$props} kind="ghost" icon="{Add16}">Ghost</Button>
 
-  <Button {...$$props} kind="danger" icon={Add16}>Danger</Button>
+  <Button {...$$props} kind="danger" icon="{Add16}">Danger</Button>
 </div>
 
 <div>
@@ -43,7 +43,7 @@
     {...$$props}
     kind="primary"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Primary"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -52,7 +52,7 @@
     {...$$props}
     kind="secondary"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Secondary"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -61,7 +61,7 @@
     {...$$props}
     kind="tertiary"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Tertiary"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -70,7 +70,7 @@
     {...$$props}
     kind="ghost"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Ghost"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -79,7 +79,7 @@
     {...$$props}
     kind="danger"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Danger"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
diff --git a/docs/src/routes/getting-started/index.svelte b/docs/src/routes/getting-started/index.svelte
index fecad248..476a04e4 100644
--- a/docs/src/routes/getting-started/index.svelte
+++ b/docs/src/routes/getting-started/index.svelte
@@ -27,10 +27,11 @@
         <div slot="content" class="content">
           <TabContent>
             <CopyableCodeSnippet
-              code={`yarn add -D carbon-components-svelte`} />
+              code="{`yarn add -D carbon-components-svelte`}" />
           </TabContent>
           <TabContent>
-            <CopyableCodeSnippet code={`npm -i -D carbon-components-svelte`} />
+            <CopyableCodeSnippet
+              code="{`npm -i -D carbon-components-svelte`}" />
           </TabContent>
         </div>
       </Tabs>
diff --git a/examples/rollup-typescript/src/App.svelte b/examples/rollup-typescript/src/App.svelte
index 566cb8ec..95edfa82 100644
--- a/examples/rollup-typescript/src/App.svelte
+++ b/examples/rollup-typescript/src/App.svelte
@@ -4,9 +4,9 @@
 
 <Button
   kind="primary"
-  on:click={() => {
+  on:click="{() => {
     console.log('click');
-  }}>
+  }}">
   Primary button
 </Button>
 
diff --git a/src/Accordion/Accordion.Skeleton.svelte b/src/Accordion/Accordion.Skeleton.svelte
index e9d94803..43a9f0e7 100644
--- a/src/Accordion/Accordion.Skeleton.svelte
+++ b/src/Accordion/Accordion.Skeleton.svelte
@@ -16,8 +16,8 @@
 </script>
 
 <ul
-  class:bx--accordion={true}
-  class:bx--skeleton={true}
+  class:bx--accordion="{true}"
+  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -25,9 +25,9 @@
   on:mouseleave>
   {#if open}
     <li
-      class:bx--accordion__item={true}
-      class:bx--accordion__item--active={true}>
-      <span class:bx--accordion__heading={true}>
+      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>
diff --git a/src/Accordion/Accordion.Story.svelte b/src/Accordion/Accordion.Story.svelte
index 85d4fb4c..fc1870f7 100644
--- a/src/Accordion/Accordion.Story.svelte
+++ b/src/Accordion/Accordion.Story.svelte
@@ -11,11 +11,11 @@
 
 {#if story === 'skeleton'}
   <div style="width: 500px">
-    <AccordionSkeleton {open} {count} />
+    <AccordionSkeleton open="{open}" count="{count}" />
   </div>
 {:else}
   <Accordion {...$$restProps}>
-    <AccordionItem {title} {open}>
+    <AccordionItem title="{title}" open="{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
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index d354f041..1e7e39a7 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -23,7 +23,7 @@
     on:mouseleave />
 {:else}
   <ul
-    class:bx--accordion={true}
+    class:bx--accordion="{true}"
     {...$$restProps}
     class="bx--accordion--{align} {$$restProps.class}"
     on:click
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index 14577f8e..6bf180b6 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -24,34 +24,36 @@
 </script>
 
 <li
-  class:bx--accordion__item={true}
-  class:bx--accordion__item--active={open}
+  class:bx--accordion__item="{true}"
+  class:bx--accordion__item--active="{open}"
   class="bx--accordion__item--${animation}"
   {...$$restProps}
   on:animationend
-  on:animationend={() => {
+  on:animationend="{() => {
     animation = undefined;
-  }}>
+  }}">
   <button
     type="button"
-    class:bx--accordion__heading={true}
-    title={iconDescription}
-    aria-expanded={open}
+    class:bx--accordion__heading="{true}"
+    title="{iconDescription}"
+    aria-expanded="{open}"
     on:click
-    on:click={() => {
+    on:click="{() => {
       open = !open;
       animation = open ? 'expanding' : 'collapsing';
-    }}
+    }}"
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown={({ key }) => {
+    on:keydown="{({ key }) => {
       if (open && key === 'Escape') {
         open = false;
       }
-    }}>
-    <ChevronRight16 class="bx--accordion__arrow" aria-label={iconDescription} />
+    }}">
+    <ChevronRight16
+      class="bx--accordion__arrow"
+      aria-label="{iconDescription}" />
     <div class="bx--accordion__title">
       <slot name="title">{title}</slot>
     </div>
diff --git a/src/Breadcrumb/Breadcrumb.Skeleton.svelte b/src/Breadcrumb/Breadcrumb.Skeleton.svelte
index a4ec13d7..635fa2a9 100644
--- a/src/Breadcrumb/Breadcrumb.Skeleton.svelte
+++ b/src/Breadcrumb/Breadcrumb.Skeleton.svelte
@@ -13,17 +13,17 @@
 </script>
 
 <div
-  class:bx--breadcrumb={true}
-  class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
-  class:bx--skeleton={true}
+  class:bx--breadcrumb="{true}"
+  class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
+  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
-    <div class:bx--breadcrumb-item={true}>
-      <span class:bx--link={true}>&nbsp;</span>
+    <div class:bx--breadcrumb-item="{true}">
+      <span class:bx--link="{true}">&nbsp;</span>
     </div>
   {/each}
 </div>
diff --git a/src/Breadcrumb/Breadcrumb.Story.svelte b/src/Breadcrumb/Breadcrumb.Story.svelte
index ae7ca3f2..732e63f5 100644
--- a/src/Breadcrumb/Breadcrumb.Story.svelte
+++ b/src/Breadcrumb/Breadcrumb.Story.svelte
@@ -24,9 +24,9 @@
     <BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
   </Breadcrumb>
 {:else if story === 'skeleton'}
-  <BreadcrumbSkeleton {noTrailingSlash} {...$$restProps} />
+  <BreadcrumbSkeleton noTrailingSlash="{noTrailingSlash}" {...$$restProps} />
 {:else}
-  <Breadcrumb {noTrailingSlash}>
+  <Breadcrumb noTrailingSlash="{noTrailingSlash}">
     <BreadcrumbItem let:props>
       <a {...props} href="/#">Breadcrumb 1</a>
     </BreadcrumbItem>
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index 0b052488..04cf3ccf 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -30,8 +30,8 @@
     on:mouseenter
     on:mouseleave>
     <ol
-      class:bx--breadcrumb={true}
-      class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
+      class:bx--breadcrumb="{true}"
+      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}">
       <slot />
     </ol>
   </nav>
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index ef97a78f..5cc1aece 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -15,19 +15,19 @@
 </script>
 
 <li
-  class:bx--breadcrumb-item={true}
-  class:bx--breadcrumb-item--current={isCurrentPage && $$restProps['aria-current'] !== 'page'}
+  class:bx--breadcrumb-item="{true}"
+  class:bx--breadcrumb-item--current="{isCurrentPage && $$restProps['aria-current'] !== 'page'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   {#if href}
-    <Link {href} aria-current={$$restProps['aria-current']}>
+    <Link href="{href}" aria-current="{$$restProps['aria-current']}">
       <slot />
     </Link>
   {:else}
     <slot
-      props={{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }} />
+      props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}" />
   {/if}
 </li>
diff --git a/src/Button/Button.Skeleton.svelte b/src/Button/Button.Skeleton.svelte
index 1192adcc..1e7656c0 100644
--- a/src/Button/Button.Skeleton.svelte
+++ b/src/Button/Button.Skeleton.svelte
@@ -14,11 +14,11 @@
 
 {#if href}
   <a
-    {href}
+    href="{href}"
     role="button"
-    class:bx--skeleton={true}
-    class:bx--btn={true}
-    class:bx--btn--sm={small}
+    class:bx--skeleton="{true}"
+    class:bx--btn="{true}"
+    class:bx--btn--sm="{small}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -28,12 +28,12 @@
   </a>
 {:else}
   <div
-    class:bx--skeleton={true}
-    class:bx--btn={true}
-    class:bx--btn--sm={small}
+    class:bx--skeleton="{true}"
+    class:bx--btn="{true}"
+    class:bx--btn--sm="{small}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave />
+    on:mouseleave></div>
 {/if}
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index a27dd12f..f6368fed 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -122,56 +122,56 @@
 
 {#if skeleton}
   <ButtonSkeleton
-    {href}
-    small={size === 'small'}
+    href="{href}"
+    small="{size === 'small'}"
     {...$$restProps}
-    style={hasIconOnly && 'width: 3rem;'}
+    style="{hasIconOnly && 'width: 3rem;'}"
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave />
 {:else}
   {#if as}
-    <slot props={buttonProps} />
+    <slot props="{buttonProps}" />
   {:else if href && !disabled}
     <!-- svelte-ignore a11y-missing-attribute -->
     <a
-      bind:this={ref}
+      bind:this="{ref}"
       {...buttonProps}
       on:click
       on:mouseover
       on:mouseenter
       on:mouseleave>
       {#if hasIconOnly}
-        <span class:bx--assistive-text={true}>{iconDescription}</span>
+        <span class:bx--assistive-text="{true}">{iconDescription}</span>
       {/if}
       <slot />
       {#if icon}
         <svelte:component
-          this={icon}
+          this="{icon}"
           aria-hidden="true"
           class="bx--btn__icon"
-          aria-label={iconDescription} />
+          aria-label="{iconDescription}" />
       {/if}
     </a>
   {:else}
     <button
-      bind:this={ref}
+      bind:this="{ref}"
       {...buttonProps}
       on:click
       on:mouseover
       on:mouseenter
       on:mouseleave>
       {#if hasIconOnly}
-        <span class:bx--assistive-text={true}>{iconDescription}</span>
+        <span class:bx--assistive-text="{true}">{iconDescription}</span>
       {/if}
       <slot />
       {#if icon}
         <svelte:component
-          this={icon}
+          this="{icon}"
           aria-hidden="true"
           class="bx--btn__icon"
-          aria-label={iconDescription} />
+          aria-label="{iconDescription}" />
       {/if}
     </button>
   {/if}
diff --git a/src/Button/ButtonSet.svelte b/src/Button/ButtonSet.svelte
index 0d605888..a529ea7b 100644
--- a/src/Button/ButtonSet.svelte
+++ b/src/Button/ButtonSet.svelte
@@ -1,3 +1,3 @@
-<div class:bx--btn-set={true} {...$$restProps}>
+<div class:bx--btn-set="{true}" {...$$restProps}>
   <slot />
 </div>
diff --git a/src/Checkbox/Checkbox.Skeleton.svelte b/src/Checkbox/Checkbox.Skeleton.svelte
index 02e85439..ca801d16 100644
--- a/src/Checkbox/Checkbox.Skeleton.svelte
+++ b/src/Checkbox/Checkbox.Skeleton.svelte
@@ -1,11 +1,13 @@
 <div
-  class:bx--form-item={true}
-  class:bx--checkbox-wrapper={true}
-  class:bx--checkbox-label={true}
+  class:bx--form-item="{true}"
+  class:bx--checkbox-wrapper="{true}"
+  class:bx--checkbox-label="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <span class:bx--checkbox-label-text={true} class:bx--skeleton={true} />
+  <span
+    class:bx--checkbox-label-text="{true}"
+    class:bx--skeleton="{true}"></span>
 </div>
diff --git a/src/Checkbox/Checkbox.Story.svelte b/src/Checkbox/Checkbox.Story.svelte
index aa24e490..0ce60ce9 100644
--- a/src/Checkbox/Checkbox.Story.svelte
+++ b/src/Checkbox/Checkbox.Story.svelte
@@ -39,9 +39,9 @@
       {...checkboxProps}
       id="checkbox-label-1"
       bind:checked
-      on:check={({ detail }) => {
+      on:check="{({ detail }) => {
         console.log('on:check', detail);
-      }} />
+      }}" />
     <Checkbox {...checkboxProps} id="checkbox-label-2" checked />
   </fieldset>
 {/if}
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index af1bb324..9dd46679 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -82,31 +82,31 @@
     on:mouseleave />
 {:else}
   <div
-    class:bx--form-item={true}
-    class:bx--checkbox-wrapper={true}
+    class:bx--form-item="{true}"
+    class:bx--checkbox-wrapper="{true}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave>
     <input
-      bind:this={ref}
+      bind:this="{ref}"
       type="checkbox"
-      {checked}
-      {disabled}
-      {id}
-      {indeterminate}
-      {name}
-      {readonly}
-      class:bx--checkbox={true}
+      checked="{checked}"
+      disabled="{disabled}"
+      id="{id}"
+      indeterminate="{indeterminate}"
+      name="{name}"
+      readonly="{readonly}"
+      class:bx--checkbox="{true}"
       on:change
-      on:change={() => {
+      on:change="{() => {
         checked = !checked;
-      }} />
-    <label for={id} {title} class:bx--checkbox-label={true}>
+      }}" />
+    <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
       <span
-        class:bx--checkbox-label-text={true}
-        class:bx--visually-hidden={hideLabel}>
+        class:bx--checkbox-label-text="{true}"
+        class:bx--visually-hidden="{hideLabel}">
         {labelText}
       </span>
     </label>
diff --git a/src/CodeSnippet/CodeSnippet.Skeleton.svelte b/src/CodeSnippet/CodeSnippet.Skeleton.svelte
index bcf30cec..f59f0690 100644
--- a/src/CodeSnippet/CodeSnippet.Skeleton.svelte
+++ b/src/CodeSnippet/CodeSnippet.Skeleton.svelte
@@ -7,18 +7,18 @@
 </script>
 
 <div
-  class:bx--snippet={true}
-  class:bx--skeleton={true}
-  class:bx--snippet--single={type === 'single'}
-  class:bx--snippet--multi={type === 'multi'}
+  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>
-  <div class:bx--snippet-container={true}>
+  <div class:bx--snippet-container="{true}">
     {#if type === 'single'}
-      <span />
-    {:else if type === 'multi'}<span /> <span /> <span />{/if}
+      <span></span>
+    {:else if type === 'multi'}<span></span> <span></span> <span></span>{/if}
   </div>
 </div>
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index ba49bbf4..92d40411 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -106,7 +106,7 @@
 
 {#if skeleton}
   <CodeSnippetSkeleton
-    {type}
+    type="{type}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -122,16 +122,16 @@
           {light && 'bx--snippet--light'}
           {hideCopyButton && 'bx--snippet--no-copy'}"
         {...$$restProps}>
-        <code {id}>
+        <code id="{id}">
           <slot>{code}</slot>
         </code>
       </span>
     {:else}
       <Copy
-        aria-label={copyLabel}
-        aria-describedby={id}
-        {feedback}
-        {feedbackTimeout}
+        aria-label="{copyLabel}"
+        aria-describedby="{id}"
+        feedback="{feedback}"
+        feedbackTimeout="{feedbackTimeout}"
         class="bx--snippet {type && `bx--snippet--${type}`}
           {type === 'inline' && 'bx--btn--copy'}
           {expanded && 'bx--snippet--expand'}
@@ -142,39 +142,39 @@
         on:mouseover
         on:mouseenter
         on:mouseleave>
-        <code {id}>
+        <code id="{id}">
           <slot>{code}</slot>
         </code>
       </Copy>
     {/if}
   {:else}
     <div
-      class:bx--snippet={true}
-      class:bx--btn--copy={type === 'inline'}
-      class:bx--snippet--expand={expanded}
-      class:bx--snippet--light={light}
-      class:bx--snippet--no-copy={hideCopyButton}
+      class:bx--snippet="{true}"
+      class:bx--btn--copy="{type === 'inline'}"
+      class:bx--snippet--expand="{expanded}"
+      class:bx--snippet--light="{light}"
+      class:bx--snippet--no-copy="{hideCopyButton}"
       {...$$restProps}
       class="{type && `bx--snippet--${type}`} {$$restProps.class}"
       on:mouseover
       on:mouseenter
       on:mouseleave>
       <div
-        role={type === 'single' ? 'textbox' : undefined}
-        tabindex={type === 'single' ? '0' : undefined}
-        class:bx--snippet-container={true}
-        aria-label={$$restProps['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={ref}>
+          <pre bind:this="{ref}">
             <slot>{code}</slot>
           </pre>
         </code>
       </div>
       {#if !hideCopyButton}
         <CopyButton
-          {feedback}
-          {feedbackTimeout}
-          iconDescription={copyButtonDescription}
+          feedback="{feedback}"
+          feedbackTimeout="{feedbackTimeout}"
+          iconDescription="{copyButtonDescription}"
           on:click
           on:animationend />
       {/if}
@@ -183,13 +183,13 @@
           kind="ghost"
           size="small"
           class="bx--snippet-btn--expand"
-          on:click={() => {
+          on:click="{() => {
             expanded = !expanded;
-          }}>
-          <span class:bx--snippet-btn--text={true}>{expandText}</span>
+          }}">
+          <span class:bx--snippet-btn--text="{true}">{expandText}</span>
           <ChevronDown16
             class="bx--icon-chevron--down bx--snippet__icon"
-            aria-label={expandText} />
+            aria-label="{expandText}" />
         </Button>
       {/if}
     </div>
diff --git a/src/ComboBox/ComboBox.Story.svelte b/src/ComboBox/ComboBox.Story.svelte
index a8027af3..4fe7056c 100644
--- a/src/ComboBox/ComboBox.Story.svelte
+++ b/src/ComboBox/ComboBox.Story.svelte
@@ -44,9 +44,9 @@
     style="margin-top: 1rem;" />
   <Button
     size="small"
-    on:click={() => {
+    on:click="{() => {
       selectedIndex = 1;
-    }}
+    }}"
     style="margin-top: 1rem;">
     Set item to "Option 2"
   </Button>
@@ -58,12 +58,12 @@
     bind:ref
     bind:value
     bind:selectedIndex
-    on:select={({ detail }) => {
+    on:select="{({ detail }) => {
       console.log('on:select', detail);
-    }}
-    on:clear={() => {
+    }}"
+    on:clear="{() => {
       console.log('on:clear');
-    }}
-    {items}
-    {shouldFilterItem} />
+    }}"
+    items="{items}"
+    shouldFilterItem="{shouldFilterItem}" />
 </div>
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 9f92fe21..dfb7bec3 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -172,63 +172,66 @@
 </script>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (open && ref && !ref.contains(target)) {
       open = false;
     }
-  }} />
+  }}" />
 
-<div class:bx--list-box__wrapper={true} {...$$restProps}>
+<div class:bx--list-box__wrapper="{true}" {...$$restProps}>
   {#if titleText}
-    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+    <label
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--label--disabled="{disabled}">
       {titleText}
     </label>
   {/if}
   {#if helperText}
     <div
-      class:bx--form__helper-text={true}
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <ListBox
     class="bx--combo-box"
-    id={comboId}
-    aria-label={ariaLabel}
-    {disabled}
-    {invalid}
-    {invalidText}
-    {open}
-    {light}
-    {size}>
+    id="{comboId}"
+    aria-label="{ariaLabel}"
+    disabled="{disabled}"
+    invalid="{invalid}"
+    invalidText="{invalidText}"
+    open="{open}"
+    light="{light}"
+    size="{size}">
     <ListBoxField
       role="button"
-      aria-expanded={open}
-      on:click={() => {
+      aria-expanded="{open}"
+      on:click="{() => {
         open = true;
-      }}
-      {id}
-      {name}
-      {disabled}
-      {translateWithId}>
+      }}"
+      id="{id}"
+      name="{name}"
+      disabled="{disabled}"
+      translateWithId="{translateWithId}">
       <input
-        bind:this={ref}
+        bind:this="{ref}"
         tabindex="0"
         autocomplete="off"
         aria-autocomplete="list"
-        aria-expanded={open}
-        aria-activedescendant={highlightedId}
-        aria-labelledby={comboId}
-        aria-disabled={disabled}
-        aria-controls={open ? menuId : undefined}
-        aria-owns={open ? menuId : undefined}
-        class:bx--text-input={true}
-        class:bx--text-input--empty={inputValue === ''}
-        on:input={({ target }) => {
+        aria-expanded="{open}"
+        aria-activedescendant="{highlightedId}"
+        aria-labelledby="{comboId}"
+        aria-disabled="{disabled}"
+        aria-controls="{open ? menuId : undefined}"
+        aria-owns="{open ? menuId : undefined}"
+        class:bx--text-input="{true}"
+        class:bx--text-input--empty="{inputValue === ''}"
+        on:input="{({ target }) => {
           inputValue = target.value;
-        }}
+        }}"
         on:keydown
-        on:keydown|stopPropagation={({ key }) => {
+        on:keydown|stopPropagation="{({ key }) => {
           if (key === 'Enter') {
             open = !open;
             if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
@@ -244,56 +247,56 @@
           } else if (key === 'Escape') {
             open = false;
           }
-        }}
+        }}"
         on:focus
         on:blur
-        on:blur={({ relatedTarget }) => {
+        on:blur="{({ relatedTarget }) => {
           if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
             ref.focus();
           }
-        }}
-        {disabled}
-        {placeholder}
-        {id}
-        value={inputValue} />
+        }}"
+        disabled="{disabled}"
+        placeholder="{placeholder}"
+        id="{id}"
+        value="{inputValue}" />
       {#if invalid}
         <WarningFilled16 class="bx--list-box__invalid-icon" />
       {/if}
       {#if inputValue}
         <ListBoxSelection
           on:clear
-          on:clear={() => {
+          on:clear="{() => {
             selectedIndex = -1;
             open = false;
             ref.focus();
-          }}
-          {translateWithId}
-          {disabled}
-          {open} />
+          }}"
+          translateWithId="{translateWithId}"
+          disabled="{disabled}"
+          open="{open}" />
       {/if}
       <ListBoxMenuIcon
-        on:click={() => {
+        on:click="{() => {
           open = !open;
-        }}
-        {translateWithId}
-        {open} />
+        }}"
+        translateWithId="{translateWithId}"
+        open="{open}" />
     </ListBoxField>
     {#if open}
-      <ListBoxMenu aria-label={ariaLabel} {id}>
+      <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
         {#each filteredItems as item, i (item.id || i)}
           <ListBoxMenuItem
-            id={item.id}
-            active={selectedIndex === i || selectedId === item.id}
-            highlighted={highlightedIndex === i || selectedIndex === i}
-            on:click={() => {
+            id="{item.id}"
+            active="{selectedIndex === i || selectedId === item.id}"
+            highlighted="{highlightedIndex === i || selectedIndex === i}"
+            on:click="{() => {
               selectedIndex = items
                 .map(({ id }) => id)
                 .indexOf(filteredItems[i].id);
               open = false;
-            }}
-            on:mouseenter={() => {
+            }}"
+            on:mouseenter="{() => {
               highlightedIndex = i;
-            }}>
+            }}">
             {itemToString(item)}
           </ListBoxMenuItem>
         {/each}
diff --git a/src/ComposedModal/ComposedModal.Story.svelte b/src/ComposedModal/ComposedModal.Story.svelte
index cd1a9ae1..7969b288 100644
--- a/src/ComposedModal/ComposedModal.Story.svelte
+++ b/src/ComposedModal/ComposedModal.Story.svelte
@@ -16,21 +16,21 @@
 {#if story === undefined}
   <ComposedModal
     {...$$props.composedModal}
-    on:click={(e) => {
+    on:click="{(e) => {
       console.log(e.target);
-    }}>
+    }}">
     <ModalHeader {...$$props.modalHeader} />
     <ModalBody
       {...$$props.modalBody}
-      aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
+      aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
       <div>
         <PasswordInput bind:type placeholder="Password Input" aria-level="" />
         <Button
           kind="ghost"
           size="field"
-          on:click={() => {
+          on:click="{() => {
             type = type === 'password' ? 'text' : 'password';
-          }}>
+          }}">
           Programmatically toggle password
         </Button>
       </div>
@@ -58,7 +58,7 @@
     </ModalHeader>
     <ModalBody
       {...$$props.modalBody}
-      aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
+      aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
       <p>
         Please see ModalWrapper for more examples and demo of the functionality.
       </p>
@@ -74,7 +74,7 @@
     </ModalBody>
     <ModalFooter>
       <Button kind="secondary">Cancel</Button>
-      <Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
+      <Button kind="{$$props.composedModal.danger ? 'danger' : 'primary'}">
         Primary
       </Button>
     </ModalFooter>
@@ -85,8 +85,8 @@
   <ComposedModal
     {...$$props.composedModal}
     open
-    on:close={() => {}}
-    on:submit={() => {}}>
+    on:close="{() => {}}"
+    on:submit="{() => {}}">
     <ModalHeader
       {...$$props.modalHeader}
       title="Passive modal title as the message. Should be direct and 3 lines or
@@ -99,20 +99,20 @@
 {#if story === 'trigger'}
   <div>
     <Button
-      on:click={() => {
+      on:click="{() => {
         open = true;
-      }}>
+      }}">
       Launch composed modal
     </Button>
   </div>
   <ComposedModal
     {...$$props.composedModal}
-    {open}
-    on:close={() => (open = false)}>
+    open="{open}"
+    on:close="{() => (open = false)}">
     <ModalHeader {...$$props.modalHeader} />
     <ModalBody
       {...$$props.modalBody}
-      aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
+      aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
       <p>
         Please see ModalWrapper for more examples and demo of the functionality.
       </p>
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index d5bd551f..c9f24b27 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -95,35 +95,35 @@
 </script>
 
 <div
-  bind:this={ref}
+  bind:this="{ref}"
   role="presentation"
   tabindex="-1"
-  class:bx--modal={true}
-  class:is-visible={open}
-  class:bx--modal--danger={danger}
+  class:bx--modal="{true}"
+  class:is-visible="{open}"
+  class:bx--modal--danger="{danger}"
   {...$$restProps}
   on:click
-  on:click={() => {
+  on:click="{() => {
     if (!didClickInnerModal) open = false;
     didClickInnerModal = false;
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:transitionend
-  on:transitionend={({ currentTarget }) => {
+  on:transitionend="{({ currentTarget }) => {
     if (didOpen) {
       focus(currentTarget);
       didOpen = false;
     }
-  }}>
+  }}">
   <div
-    bind:this={innerModal}
-    class:bx--modal-container={true}
+    bind:this="{innerModal}"
+    class:bx--modal-container="{true}"
     class="{size && `bx--modal-container--${size}`} {containerClass}"
-    on:click={() => {
+    on:click="{() => {
       didClickInnerModal = true;
-    }}>
+    }}">
     <slot />
   </div>
 </div>
diff --git a/src/ComposedModal/ModalBody.svelte b/src/ComposedModal/ModalBody.svelte
index 76af8328..41d1ee47 100644
--- a/src/ComposedModal/ModalBody.svelte
+++ b/src/ComposedModal/ModalBody.svelte
@@ -13,13 +13,13 @@
 </script>
 
 <div
-  tabindex={hasScrollingContent ? '0' : undefined}
-  role={hasScrollingContent ? 'region' : undefined}
-  class:bx--modal-content={true}
-  class:bx--modal-content--with-form={hasForm}
+  tabindex="{hasScrollingContent ? '0' : undefined}"
+  role="{hasScrollingContent ? 'region' : undefined}"
+  class:bx--modal-content="{true}"
+  class:bx--modal-content--with-form="{hasForm}"
   {...$$restProps}>
   <slot />
 </div>
 {#if hasScrollingContent}
-  <div class:bx--modal-content--overflow-indicator={true} />
+  <div class:bx--modal-content--overflow-indicator="{true}"></div>
 {/if}
diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
index d59b74ac..275b6282 100644
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@@ -41,18 +41,18 @@
   const { closeModal, submit } = getContext("ComposedModal");
 </script>
 
-<div class:bx--modal-footer={true} {...$$restProps}>
+<div class:bx--modal-footer="{true}" {...$$restProps}>
   {#if secondaryButtonText}
-    <Button kind="secondary" class={secondaryClass} on:click={closeModal}>
+    <Button kind="secondary" class="{secondaryClass}" on:click="{closeModal}">
       {secondaryButtonText}
     </Button>
   {/if}
   {#if primaryButtonText}
     <Button
-      kind={danger ? 'danger' : 'primary'}
-      disabled={primaryButtonDisabled}
-      class={primaryClass}
-      on:click={submit}>
+      kind="{danger ? 'danger' : 'primary'}"
+      disabled="{primaryButtonDisabled}"
+      class="{primaryClass}"
+      on:click="{submit}">
       {primaryButtonText}
     </Button>
   {/if}
diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index 7cef779e..c14a5b7f 100644
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@@ -47,19 +47,19 @@
   const { closeModal } = getContext("ComposedModal");
 </script>
 
-<div class:bx--modal-header={true} {...$$restProps}>
+<div class:bx--modal-header="{true}" {...$$restProps}>
   {#if label}
     <p
-      class:bx--modal-header__label={true}
-      class:bx--type-delta={true}
+      class:bx--modal-header__label="{true}"
+      class:bx--type-delta="{true}"
       class:labelClass>
       {label}
     </p>
   {/if}
   {#if title}
     <p
-      class:bx--modal-header__heading={true}
-      class:bx--type-beta={true}
+      class:bx--modal-header__heading="{true}"
+      class:bx--type-beta="{true}"
       class:titleClass>
       {title}
     </p>
@@ -67,12 +67,12 @@
   <slot />
   <button
     type="button"
-    title={iconDescription}
-    aria-label={iconDescription}
-    class:bx--modal-close={true}
+    title="{iconDescription}"
+    aria-label="{iconDescription}"
+    class:bx--modal-close="{true}"
     class:closeClass
     on:click
-    on:click={closeModal}>
+    on:click="{closeModal}">
     <Close20 class="bx--modal-close__icon {closeIconClass}" />
   </button>
 </div>
diff --git a/src/ContentSwitcher/ContentSwitcher.Story.svelte b/src/ContentSwitcher/ContentSwitcher.Story.svelte
index 59451021..e12b06b5 100644
--- a/src/ContentSwitcher/ContentSwitcher.Story.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.Story.svelte
@@ -16,21 +16,21 @@
 
 {#if story === 'selected'}
   <ContentSwitcher
-    {light}
-    on:change={({ detail }) => {
+    light="{light}"
+    on:change="{({ detail }) => {
       console.log('on:change', detail);
-    }}>
+    }}">
     <Switch {...$$props} text="First section" />
     <Switch {...$$props} text="Second section" selected />
     <Switch {...$$props} text="Third section" />
   </ContentSwitcher>
 {:else}
   <ContentSwitcher
-    {light}
+    light="{light}"
     bind:selectedIndex
-    on:change={({ detail }) => {
+    on:change="{({ detail }) => {
       console.log('on:change', detail);
-    }}>
+    }}">
     <Switch {...$$props} text="First section" />
     <Switch {...$$props} text="Second section" />
     <Switch {...$$props}>
@@ -42,9 +42,9 @@
   </ContentSwitcher>
   <div
     style="margin-top: 1.5rem"
-    on:click={() => {
+    on:click="{() => {
       selectedIndex = 1;
-    }}>
+    }}">
     Programmatically set to second index
   </div>
 {/if}
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 2059f92b..4c5d9974 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -58,8 +58,8 @@
 
 <div
   role="tablist"
-  class:bx--content-switcher={true}
-  class:bx--content-switcher--light={light}
+  class:bx--content-switcher="{true}"
+  class:bx--content-switcher--light="{light}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte
index 62893c88..bd486719 100644
--- a/src/ContentSwitcher/Switch.svelte
+++ b/src/ContentSwitcher/Switch.svelte
@@ -52,31 +52,31 @@
 </script>
 
 <button
-  bind:this={ref}
+  bind:this="{ref}"
   role="tab"
-  tabindex={selected ? '0' : '-1'}
-  aria-selected={selected}
-  {disabled}
-  {id}
-  class:bx--content-switcher-btn={true}
-  class:bx--content-switcher--selected={selected}
+  tabindex="{selected ? '0' : '-1'}"
+  aria-selected="{selected}"
+  disabled="{disabled}"
+  id="{id}"
+  class:bx--content-switcher-btn="{true}"
+  class:bx--content-switcher--selected="{selected}"
   {...$$restProps}
   on:click
-  on:click|preventDefault={() => {
+  on:click|preventDefault="{() => {
     ctx.update(id);
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={({ key }) => {
+  on:keydown="{({ key }) => {
     if (key === 'ArrowRight') {
       ctx.change(1);
     } else if (key === 'ArrowLeft') {
       ctx.change(-1);
     }
-  }}>
-  <span class:bx--content-switcher__label={true}>
+  }}">
+  <span class:bx--content-switcher__label="{true}">
     <slot>{text}</slot>
   </span>
 </button>
diff --git a/src/Copy/Copy.svelte b/src/Copy/Copy.svelte
index 53d33214..57d52b0b 100644
--- a/src/Copy/Copy.svelte
+++ b/src/Copy/Copy.svelte
@@ -30,35 +30,35 @@
 </script>
 
 <button
-  bind:this={ref}
+  bind:this="{ref}"
   type="button"
   aria-live="polite"
-  class:bx--copy={true}
-  class:bx--copy-btn--animating={animation}
-  aria-label={animation ? feedback : undefined}
+  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={() => {
+  on:click="{() => {
     if (animation === 'fade-in') return;
     animation = 'fade-in';
     timeout = setTimeout(() => {
       animation = 'fade-out';
     }, feedbackTimeout);
-  }}
+  }}"
   on:animationend
-  on:animationend={({ animationName }) => {
+  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}>
+    class:bx--assistive-text="{true}"
+    class:bx--copy-btn__feedback="{true}">
     {feedback}
   </span>
 </button>
diff --git a/src/CopyButton/CopyButton.Story.svelte b/src/CopyButton/CopyButton.Story.svelte
index d8035251..fbb9af76 100644
--- a/src/CopyButton/CopyButton.Story.svelte
+++ b/src/CopyButton/CopyButton.Story.svelte
@@ -4,9 +4,9 @@
 
 <CopyButton
   {...$$props}
-  on:click={() => {
+  on:click="{() => {
     console.log('click');
-  }}
-  on:animationend={(e) => {
+  }}"
+  on:animationend="{(e) => {
     console.log('animation end', e.animationName);
-  }} />
+  }}" />
diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte
index 7b830787..b7c61473 100644
--- a/src/CopyButton/CopyButton.svelte
+++ b/src/CopyButton/CopyButton.svelte
@@ -11,8 +11,8 @@
 
 <Copy
   class="bx--copy-btn"
-  aria-label={iconDescription}
-  title={iconDescription}
+  aria-label="{iconDescription}"
+  title="{iconDescription}"
   {...$$restProps}
   on:click
   on:animationend>
diff --git a/src/DataTable/DataTable.Story.svelte b/src/DataTable/DataTable.Story.svelte
index 3427a9a1..5b5c478d 100644
--- a/src/DataTable/DataTable.Story.svelte
+++ b/src/DataTable/DataTable.Story.svelte
@@ -78,7 +78,7 @@
 </script>
 
 {#if story === 'composed'}
-  <DataTable {...$$props} {rows} {headers} let:props>
+  <DataTable {...$$props} rows="{rows}" headers="{headers}" let:props>
     <TableContainer
       title="DataTable"
       description="With default options"
@@ -108,44 +108,44 @@
 {:else if story === 'sortable'}
   <DataTable
     bind:sortable
-    title={$$props.title}
-    description={$$props.description}
-    zebra={$$props.zebra}
-    size={$$props.size}
-    stickyHeader={$$props.stickyHeader}
-    on:click={({ detail }) => {
+    title="{$$props.title}"
+    description="{$$props.description}"
+    zebra="{$$props.zebra}"
+    size="{$$props.size}"
+    stickyHeader="{$$props.stickyHeader}"
+    on:click="{({ detail }) => {
       console.log('on:click', detail);
-    }}
-    on:click:header={({ detail }) => {
+    }}"
+    on:click:header="{({ detail }) => {
       console.log('on:click:header', detail);
-    }}
-    on:click:row={({ detail }) => {
+    }}"
+    on:click:row="{({ detail }) => {
       console.log('on:click:row', detail);
-    }}
-    on:click:cell={({ detail }) => {
+    }}"
+    on:click:cell="{({ detail }) => {
       console.log('on:click:cell', detail);
-    }}
-    {rows}
-    {headers} />
+    }}"
+    rows="{rows}"
+    headers="{headers}" />
 {:else}
   <DataTable
-    title={$$props.title}
-    description={$$props.description}
-    zebra={$$props.zebra}
-    size={$$props.size}
-    stickyHeader={$$props.stickyHeader}
-    on:click={({ detail }) => {
+    title="{$$props.title}"
+    description="{$$props.description}"
+    zebra="{$$props.zebra}"
+    size="{$$props.size}"
+    stickyHeader="{$$props.stickyHeader}"
+    on:click="{({ detail }) => {
       console.log('on:click', detail);
-    }}
-    on:click:header={({ detail }) => {
+    }}"
+    on:click:header="{({ detail }) => {
       console.log('on:click:header', detail);
-    }}
-    on:click:row={({ detail }) => {
+    }}"
+    on:click:row="{({ detail }) => {
       console.log('on:click:row', detail);
-    }}
-    on:click:cell={({ detail }) => {
+    }}"
+    on:click:cell="{({ detail }) => {
       console.log('on:click:cell', detail);
-    }}
-    {rows}
-    {headers} />
+    }}"
+    rows="{rows}"
+    headers="{headers}" />
 {/if}
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 31147902..7f414650 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -115,14 +115,18 @@
   };
 </script>
 
-<slot {props}>
-  <TableContainer {title} {description} {...$$restProps}>
-    <Table {zebra} {size} {stickyHeader} {sortable}>
+<slot props="{props}">
+  <TableContainer title="{title}" description="{description}" {...$$restProps}>
+    <Table
+      zebra="{zebra}"
+      size="{size}"
+      stickyHeader="{stickyHeader}"
+      sortable="{sortable}">
       <TableHead>
         <TableRow>
           {#each headers as header, i (header.key)}
             <TableHeader
-              on:click={() => {
+              on:click="{() => {
                 dispatch('click', { header });
                 let active = header.key === $sortHeader.key;
                 let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
@@ -133,7 +137,7 @@
                   key: header.key,
                   sortDirection,
                 });
-              }}>
+              }}">
               {header.value}
             </TableHeader>
           {/each}
@@ -142,16 +146,16 @@
       <TableBody>
         {#each sorting ? sortedRows : rows as row, i (row.id)}
           <TableRow
-            on:click={() => {
+            on:click="{() => {
               dispatch('click', { row });
               dispatch('click:row', row);
-            }}>
+            }}">
             {#each row.cells as cell, j (cell.key)}
               <TableCell
-                on:click={() => {
+                on:click="{() => {
                   dispatch('click', { row, cell });
                   dispatch('click:cell', cell);
-                }}>
+                }}">
                 {cell.value}
               </TableCell>
             {/each}
diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte
index 37bd41cb..be472baa 100644
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@@ -37,31 +37,31 @@
 </script>
 
 {#if stickyHeader}
-  <section class:bx--data-table_inner-container={true} {...$$restProps}>
+  <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
     <table
-      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}>
+      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: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}
+    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>
diff --git a/src/DataTable/TableContainer.svelte b/src/DataTable/TableContainer.svelte
index 0eb474ec..665e27cd 100644
--- a/src/DataTable/TableContainer.svelte
+++ b/src/DataTable/TableContainer.svelte
@@ -19,13 +19,13 @@
 </script>
 
 <div
-  class:bx--data-table-container={true}
-  class:bx--data-table--max-width={stickyHeader}
+  class:bx--data-table-container="{true}"
+  class:bx--data-table--max-width="{stickyHeader}"
   {...$$restProps}>
   {#if title}
-    <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 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/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index 0c52e1e9..80e5b925 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -32,37 +32,37 @@
 
 {#if $tableSortable}
   <th
-    aria-sort={active ? $sortHeader.sortDirection : 'none'}
-    {scope}
-    {id}
+    aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
+    scope="{scope}"
+    id="{id}"
     {...$$restProps}
     on:mouseover
     on:mouseenter
     on:mouseleave>
     <button
-      class:bx--table-sort={true}
-      class:bx--table-sort--active={active}
-      class:bx--table-sort--ascending={active && $sortHeader.sortDirection === 'descending'}
+      class:bx--table-sort="{true}"
+      class:bx--table-sort--active="{active}"
+      class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
       on:click>
-      <span class:bx--table-header-label={true}>
+      <span class:bx--table-header-label="{true}">
         <slot />
       </span>
-      <ArrowUp20 aria-label={ariaLabel} class="bx--table-sort__icon" />
+      <ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
       <ArrowsVertical20
-        aria-label={ariaLabel}
+        aria-label="{ariaLabel}"
         class="bx--table-sort__icon-unsorted" />
     </button>
   </th>
 {:else}
   <th
-    {scope}
-    {id}
+    scope="{scope}"
+    id="{id}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave>
-    <span class:bx--table-header-label={true}>
+    <span class:bx--table-header-label="{true}">
       <slot />
     </span>
   </th>
diff --git a/src/DataTable/TableRow.svelte b/src/DataTable/TableRow.svelte
index bad9aebd..67d7e3e0 100644
--- a/src/DataTable/TableRow.svelte
+++ b/src/DataTable/TableRow.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <tr
-  class:bx--data-table--selected={isSelected}
+  class:bx--data-table--selected="{isSelected}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/DataTableSkeleton/DataTableSkeleton.svelte b/src/DataTableSkeleton/DataTableSkeleton.svelte
index 7f4d1e4d..c91152a6 100644
--- a/src/DataTableSkeleton/DataTableSkeleton.svelte
+++ b/src/DataTableSkeleton/DataTableSkeleton.svelte
@@ -37,10 +37,10 @@
 </script>
 
 <table
-  class:bx--skeleton={true}
-  class:bx--data-table={true}
-  class:bx--data-table--zebra={zebra}
-  class:bx--data-table--compact={compact}
+  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
@@ -56,13 +56,13 @@
   <tbody>
     <tr>
       {#each cols as col, i (col)}
-        <td><span /></td>
+        <td><span></span></td>
       {/each}
     </tr>
     {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
       <tr>
         {#each cols as col, j (col)}
-          <td />
+          <td></td>
         {/each}
       </tr>
     {/each}
diff --git a/src/DatePicker/DatePicker.Skeleton.svelte b/src/DatePicker/DatePicker.Skeleton.svelte
index b360b12c..2d1734da 100644
--- a/src/DatePicker/DatePicker.Skeleton.svelte
+++ b/src/DatePicker/DatePicker.Skeleton.svelte
@@ -13,22 +13,24 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <div
-    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}>
+    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 class:bx--date-picker-container="{true}">
+        <label for="{id}" class:bx--label="{true}"></label>
+        <div
+          class:bx--date-picker__input="{true}"
+          class:bx--skeleton="{true}"></div>
       </div>
     {/each}
   </div>
diff --git a/src/DatePicker/DatePicker.Story.svelte b/src/DatePicker/DatePicker.Story.svelte
index 64f89958..2650102c 100644
--- a/src/DatePicker/DatePicker.Story.svelte
+++ b/src/DatePicker/DatePicker.Story.svelte
@@ -17,22 +17,22 @@
       {...$$props.datePicker}
       bind:value
       datePickerType="single"
-      on:change={({ detail }) => {
+      on:change="{({ detail }) => {
         console.log('change', detail);
-      }}>
+      }}">
       <DatePickerInput
         {...$$props.datePickerInput}
-        on:close={() => {
+        on:close="{() => {
           console.log('on:close');
-        }}
-        on:input={() => {
+        }}"
+        on:input="{() => {
           console.log('on:input');
-        }} />
+        }}" />
     </DatePicker>
     <button
-      on:click|preventDefault={() => {
+      on:click|preventDefault="{() => {
         value = '12/12/2020';
-      }}
+      }}"
       style="margin-top: 1rem">
       Set date to 12/12/2020
     </button>
@@ -53,9 +53,9 @@
     {...$$props.datePicker}
     bind:datePickerType
     bind:value
-    on:change={({ detail }) => {
+    on:change="{({ detail }) => {
       console.log('on:change', detail);
-    }}>
+    }}">
     <DatePickerInput {...$$props.datePickerInput} />
   </DatePicker>
 {/if}
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index 16750266..f4b8e1ea 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -173,7 +173,7 @@
 </script>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (!calendar || !calendar.isOpen) {
       return;
     }
@@ -183,21 +183,21 @@
     if (!calendar.calendarContainer.contains(target)) {
       calendar.close();
     }
-  }} />
+  }}" />
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <div
-    bind:this={datePickerRef}
-    {id}
-    class:bx--date-picker={true}
-    class:bx--date-picker--short={short}
-    class:bx--date-picker--light={light}
+    bind:this="{datePickerRef}"
+    id="{id}"
+    class:bx--date-picker="{true}"
+    class:bx--date-picker--short="{short}"
+    class:bx--date-picker--light="{light}"
     class="{datePickerType && `bx--date-picker--${datePickerType}`}
       {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
     <slot />
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 47708ef4..97b4537e 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -100,58 +100,58 @@
 </script>
 
 <div
-  class:bx--date-picker-container={true}
-  class:bx--date-picker--nolabel={!labelText}
+  class:bx--date-picker-container="{true}"
+  class:bx--date-picker--nolabel="{!labelText}"
   {...$$restProps}>
   {#if labelText}
     <label
-      for={id}
-      class:bx--label={true}
-      class:bx--visually-hidden={hideLabel}
-      class:bx--label--disabled={disabled}>
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+      class:bx--label--disabled="{disabled}">
       {labelText}
     </label>
   {/if}
-  <div class:bx--date-picker-input__wrapper={true}>
+  <div class:bx--date-picker-input__wrapper="{true}">
     <input
-      bind:this={ref}
-      data-invalid={invalid || undefined}
-      value={!$range ? $inputValue : undefined}
-      {id}
-      {name}
-      {placeholder}
-      {type}
-      {pattern}
-      {disabled}
-      class:bx--date-picker__input={true}
-      class={size && `bx--date-picker__input--${size}`}
+      bind:this="{ref}"
+      data-invalid="{invalid || undefined}"
+      value="{!$range ? $inputValue : undefined}"
+      id="{id}"
+      name="{name}"
+      placeholder="{placeholder}"
+      type="{type}"
+      pattern="{pattern}"
+      disabled="{disabled}"
+      class:bx--date-picker__input="{true}"
+      class="{size && `bx--date-picker__input--${size}`}"
       on:input
-      on:input={({ target }) => {
+      on:input="{({ target }) => {
         updateValue({ type: 'input', value: target.value });
-      }}
-      on:change={({ target }) => {
+      }}"
+      on:change="{({ target }) => {
         updateValue({ type: 'change', value: target.value });
-      }}
+      }}"
       on:keydown
-      on:keydown={({ key }) => {
+      on:keydown="{({ key }) => {
         if (key === 'ArrowDown') {
           focusCalendar();
         }
-      }}
+      }}"
       on:blur
-      on:blur={({ relatedTarget }) => {
+      on:blur="{({ relatedTarget }) => {
         blurInput(relatedTarget);
-      }} />
+      }}" />
     {#if $hasCalendar}
       <Calendar16
         role="img"
         class="bx--date-picker__icon"
-        aria-label={iconDescription}
-        title={iconDescription}
-        on:click={openCalendar} />
+        aria-label="{iconDescription}"
+        title="{iconDescription}"
+        on:click="{openCalendar}" />
     {/if}
   </div>
   {#if invalid}
-    <div class:bx--form-requirement={true}>{invalidText}</div>
+    <div class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}
 </div>
diff --git a/src/Dropdown/Dropdown.Skeleton.svelte b/src/Dropdown/Dropdown.Skeleton.svelte
index b7bd439a..96a51d7c 100644
--- a/src/Dropdown/Dropdown.Skeleton.svelte
+++ b/src/Dropdown/Dropdown.Skeleton.svelte
@@ -7,17 +7,17 @@
 </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}
+  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>
-  <div role="button" class:bx--list-box__field={true}>
-    <span class:bx--list-box__label={true} />
+  <div role="button" class:bx--list-box__field="{true}">
+    <span class:bx--list-box__label="{true}"></span>
   </div>
 </div>
diff --git a/src/Dropdown/Dropdown.Story.svelte b/src/Dropdown/Dropdown.Story.svelte
index 9157024d..608392df 100644
--- a/src/Dropdown/Dropdown.Story.svelte
+++ b/src/Dropdown/Dropdown.Story.svelte
@@ -32,13 +32,13 @@
   <div style="margin-top: 2rem; margin-bottom: 2rem;">
     <Button
       size="small"
-      on:click={() => {
+      on:click="{() => {
         selectedIndex = selectedIndex > -1 ? -1 : 1;
-      }}>
+      }}">
       {selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
     </Button>
   </div>
   <div style="width: 300px">
-    <Dropdown {...$$props} bind:selectedIndex {items} />
+    <Dropdown {...$$props} bind:selectedIndex items="{items}" />
   </div>
 {/if}
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 5bcb62a0..7fdb84f7 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -145,60 +145,63 @@
 </script>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (open && ref && !ref.contains(target)) {
       open = false;
     }
-  }} />
+  }}" />
 
 <div
-  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}
+  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:bx--label={true} class:bx--label--disabled={disabled}>
+    <label
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--label--disabled="{disabled}">
       {titleText}
     </label>
   {/if}
   {#if !inline && helperText}
     <div
-      class:bx--form__helper-text={true}
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <ListBox
-    {type}
-    {size}
-    {id}
-    {name}
-    aria-label={$$props['aria-label']}
+    type="{type}"
+    size="{size}"
+    id="{id}"
+    name="{name}"
+    aria-label="{$$props['aria-label']}"
     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 }) => {
+    on:click="{({ target }) => {
       open = ref.contains(target) ? !open : false;
-    }}
-    {disabled}
-    {open}
-    {invalid}
-    {invalidText}
-    {light}>
+    }}"
+    disabled="{disabled}"
+    open="{open}"
+    invalid="{invalid}"
+    invalidText="{invalidText}"
+    light="{light}">
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}
     <button
-      bind:this={ref}
-      class:bx--list-box__field={true}
+      bind:this="{ref}"
+      class:bx--list-box__field="{true}"
       tabindex="0"
       role="button"
-      aria-expanded={open}
-      on:keydown={({ key }) => {
+      aria-expanded="{open}"
+      on:keydown="{({ key }) => {
         if (key === 'Enter') {
           open = !open;
           if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
@@ -213,34 +216,34 @@
         } else if (key === 'ArrowUp') {
           change(-1);
         }
-      }}
-      on:blur={({ relatedTarget }) => {
+      }}"
+      on:blur="{({ relatedTarget }) => {
         if (relatedTarget) {
           ref.focus();
         }
-      }}
-      {disabled}
-      {translateWithId}
-      {id}>
+      }}"
+      disabled="{disabled}"
+      translateWithId="{translateWithId}"
+      id="{id}">
       <span class="bx--list-box__label">
         {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
       </span>
-      <ListBoxMenuIcon {open} {translateWithId} />
+      <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
     </button>
     {#if open}
-      <ListBoxMenu aria-labelledby={id} {id}>
+      <ListBoxMenu aria-labelledby="{id}" id="{id}">
         {#each items as item, i (item.id || i)}
           <ListBoxMenuItem
-            id={item.id}
-            active={selectedIndex === i || selectedId === item.id}
-            highlighted={highlightedIndex === i || selectedIndex === i}
-            on:click={() => {
+            id="{item.id}"
+            active="{selectedIndex === i || selectedId === item.id}"
+            highlighted="{highlightedIndex === i || selectedIndex === i}"
+            on:click="{() => {
               selectedId = item.id;
               selectedIndex = i;
-            }}
-            on:mouseenter={() => {
+            }}"
+            on:mouseenter="{() => {
               highlightedIndex = i;
-            }}>
+            }}">
             {itemToString(item)}
           </ListBoxMenuItem>
         {/each}
diff --git a/src/FileUploader/FileUploader.Skeleton.svelte b/src/FileUploader/FileUploader.Skeleton.svelte
index 9c4da2e4..63280060 100644
--- a/src/FileUploader/FileUploader.Skeleton.svelte
+++ b/src/FileUploader/FileUploader.Skeleton.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/FileUploader/FileUploader.Story.svelte b/src/FileUploader/FileUploader.Story.svelte
index e8fb68cd..8b5ec53c 100644
--- a/src/FileUploader/FileUploader.Story.svelte
+++ b/src/FileUploader/FileUploader.Story.svelte
@@ -19,36 +19,36 @@
   {:else if story === 'drop container'}
     <FileUploaderDropContainer
       {...$$props}
-      on:add={({ detail }) => {
+      on:add="{({ detail }) => {
         console.log(detail);
-      }} />
+      }}" />
   {:else if story === 'item'}
     <FileUploaderItem
       {...$$props}
-      on:delete={({ detail }) => {
+      on:delete="{({ detail }) => {
         console.log(detail);
-      }}
-      on:click={() => {
+      }}"
+      on:click="{() => {
         console.log('click');
-      }} />
+      }}" />
   {:else if story === 'uploader'}
     <div class="bx--file__container">
       <FileUploader
-        bind:this={fileUploader}
+        bind:this="{fileUploader}"
         {...$$props}
         bind:files
-        on:add={({ detail }) => {
+        on:add="{({ detail }) => {
           console.log('add', detail);
-        }}
-        on:remove={({ detail }) => {
+        }}"
+        on:remove="{({ detail }) => {
           console.log('remove', detail);
-        }} />
+        }}" />
       <Button
         kind="secondary"
         size="small"
         style="margin-top: 1rem"
-        {disabled}
-        on:click={fileUploader.clearFiles}>
+        disabled="{disabled}"
+        on:click="{fileUploader.clearFiles}">
         Clear File{files.length === 1 ? '' : 's'}
       </Button>
     </div>
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index f9e67a2a..4900a6ef 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -90,43 +90,43 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  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>
+  <strong class:bx--file--label="{true}">{labelTitle}</strong>
+  <p class:bx--label-description="{true}">{labelDescription}</p>
   <FileUploaderButton
     disableLabelChanges
-    labelText={buttonLabel}
-    {accept}
-    {name}
-    {multiple}
-    {kind}
+    labelText="{buttonLabel}"
+    accept="{accept}"
+    name="{name}"
+    multiple="{multiple}"
+    kind="{kind}"
     on:change
-    on:change={({ target }) => {
+    on:change="{({ target }) => {
       files = [...target.files].map(({ name }) => name);
-    }} />
-  <div class:bx--file-container={true}>
+    }}" />
+  <div class:bx--file-container="{true}">
     {#each files as name, i (name)}
-      <span class:bx--file__selected-file={true}>
-        <p class:bx--file-filename={true}>{name}</p>
-        <span class:bx--file__state-container={true}>
+      <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}
+            iconDescription="{iconDescription}"
+            status="{status}"
             on:keydown
-            on:keydown={({ key }) => {
+            on:keydown="{({ key }) => {
               if (key === ' ' || key === 'Enter') {
                 files = files.filter((_, index) => index !== i);
               }
-            }}
+            }}"
             on:click
-            on:click={() => {
+            on:click="{() => {
               files = files.filter((_, index) => index !== i);
-            }} />
+            }}" />
         </span>
       </span>
     {/each}
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index da0db62f..efcbb50d 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -67,41 +67,41 @@
 </script>
 
 <label
-  aria-disabled={disabled}
-  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}`}
+  aria-disabled="{disabled}"
+  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 }) => {
+  on:keydown="{({ key }) => {
     if (key === ' ' || key === 'Enter') {
       ref.click();
     }
-  }}>
-  <span {role}>{labelText}</span>
+  }}">
+  <span role="{role}">{labelText}</span>
 </label>
 <input
-  bind:this={ref}
+  bind:this="{ref}"
   type="file"
   tabindex="-1"
-  {accept}
-  {disabled}
-  {id}
-  {multiple}
-  {name}
-  class:bx--visually-hidden={true}
+  accept="{accept}"
+  disabled="{disabled}"
+  id="{id}"
+  multiple="{multiple}"
+  name="{name}"
+  class:bx--visually-hidden="{true}"
   {...$$restProps}
   on:change|stopPropagation
-  on:change|stopPropagation={({ target }) => {
+  on:change|stopPropagation="{({ target }) => {
     const files = target.files;
     const length = files.length;
     if (files && !disableLabelChanges) {
       labelText = length > 1 ? `${length} files` : files[0].name;
     }
-  }}
+  }}"
   on:click
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     target.value = null;
-  }} />
+  }}" />
diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte
index e81d833d..9e7cbbaf 100644
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@@ -72,63 +72,63 @@
 </script>
 
 <div
-  class:bx--file={true}
+  class:bx--file="{true}"
   {...$$restProps}
   on:dragover
-  on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => {
+  on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
     if (!disabled) {
       over = true;
       dataTransfer.dropEffect = 'copy';
     }
-  }}
+  }}"
   on:dragleave
-  on:dragleave|preventDefault|stopPropagation={({ dataTransfer }) => {
+  on:dragleave|preventDefault|stopPropagation="{({ dataTransfer }) => {
     if (!disabled) {
       over = false;
       dataTransfer.dropEffect = 'move';
     }
-  }}
+  }}"
   on:drop
-  on:drop|preventDefault|stopPropagation={({ dataTransfer }) => {
+  on:drop|preventDefault|stopPropagation="{({ dataTransfer }) => {
     if (!disabled) {
       over = false;
       dispatch('add', validateFiles(dataTransfer.files));
     }
-  }}>
+  }}">
   <label
-    for={id}
-    {tabindex}
-    class:bx--file-browse-btn={true}
-    class:bx--file-browse-btn--disabled={disabled}
+    for="{id}"
+    tabindex="{tabindex}"
+    class:bx--file-browse-btn="{true}"
+    class:bx--file-browse-btn--disabled="{disabled}"
     on:keydown
-    on:keydown={({ key }) => {
+    on:keydown="{({ key }) => {
       if (key === ' ' || key === 'Enter') {
         ref.click();
       }
-    }}>
+    }}">
     <div
-      {role}
-      class:bx--file__drop-container={true}
-      class:bx--file__drop-container--drag-over={over}>
+      role="{role}"
+      class:bx--file__drop-container="{true}"
+      class:bx--file__drop-container--drag-over="{over}">
       {labelText}
       <input
-        bind:this={ref}
+        bind:this="{ref}"
         type="file"
         tabindex="-1"
-        {id}
-        {disabled}
-        {accept}
-        {name}
-        {multiple}
-        class:bx--file-input={true}
+        id="{id}"
+        disabled="{disabled}"
+        accept="{accept}"
+        name="{name}"
+        multiple="{multiple}"
+        class:bx--file-input="{true}"
         on:change
-        on:change={({ target }) => {
+        on:change="{({ target }) => {
           dispatch('add', validateFiles(target.files));
-        }}
+        }}"
         on:click
-        on:click={({ target }) => {
+        on:click="{({ target }) => {
           target.value = null;
-        }} />
+        }}" />
     </div>
   </label>
 </div>
diff --git a/src/FileUploader/FileUploaderItem.svelte b/src/FileUploader/FileUploaderItem.svelte
index fbb9294e..f24f4262 100644
--- a/src/FileUploader/FileUploaderItem.svelte
+++ b/src/FileUploader/FileUploaderItem.svelte
@@ -48,33 +48,33 @@
 </script>
 
 <span
-  {id}
-  class:bx--file__selected-file={true}
-  class:bx--file__selected-file--invalid={invalid}
+  id="{id}"
+  class:bx--file__selected-file="{true}"
+  class:bx--file__selected-file--invalid="{invalid}"
   {...$$restProps}
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <p class:bx--file-filename={true}>{name}</p>
-  <span class:bx--file__state-container={true}>
+  <p class:bx--file-filename="{true}">{name}</p>
+  <span class:bx--file__state-container="{true}">
     <Filename
-      on:keydown={({ key }) => {
+      on:keydown="{({ key }) => {
         if (key === ' ' || key === 'Enter') {
           dispatch('delete', id);
         }
-      }}
-      on:click={() => {
+      }}"
+      on:click="{() => {
         dispatch('delete', id);
-      }}
-      {iconDescription}
-      {status}
-      {invalid} />
+      }}"
+      iconDescription="{iconDescription}"
+      status="{status}"
+      invalid="{invalid}" />
   </span>
   {#if invalid && errorSubject}
-    <div class:bx--form-requirement={true}>
-      <div class:bx--form-requirement__title={true}>{errorSubject}</div>
+    <div class:bx--form-requirement="{true}">
+      <div class:bx--form-requirement__title="{true}">{errorSubject}</div>
       {#if errorBody}
-        <p class:bx--form-requirement__supplement={true}>{errorBody}</p>
+        <p class:bx--form-requirement__supplement="{true}">{errorBody}</p>
       {/if}
     </div>
   {/if}
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index c1f8f41a..b5bccab8 100644
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@@ -25,10 +25,10 @@
 
 {#if status === 'uploading'}
   <Loading
-    description={iconDescription}
+    description="{iconDescription}"
     {...$$restProps}
     small
-    withOverlay={false} />
+    withOverlay="{false}" />
 {/if}
 
 {#if status === 'edit'}
@@ -36,8 +36,8 @@
     <WarningFilled16 class="bx--file-invalid" />
   {/if}
   <Close16
-    aria-label={iconDescription}
-    title={iconDescription}
+    aria-label="{iconDescription}"
+    title="{iconDescription}"
     class="bx--file-close"
     {...$$restProps}
     on:click
@@ -46,8 +46,8 @@
 
 {#if status === 'complete'}
   <CheckmarkFilled16
-    aria-label={iconDescription}
-    title={iconDescription}
+    aria-label="{iconDescription}"
+    title="{iconDescription}"
     class="bx--file-complete"
     {...$$restProps} />
 {/if}
diff --git a/src/Form/Form.Story.svelte b/src/Form/Form.Story.svelte
index 80617730..44c7c2ec 100644
--- a/src/Form/Form.Story.svelte
+++ b/src/Form/Form.Story.svelte
@@ -15,9 +15,9 @@
 </script>
 
 <Form
-  on:submit={(event) => {
+  on:submit="{(event) => {
     console.log('on:submit', event);
-  }}>
+  }}">
   <FormGroup {...$$props}>
     <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
     <Checkbox id="checkbox-1" labelText="Checkbox Label" />
@@ -26,10 +26,10 @@
   <NumberInput
     id="number-input-1"
     label="Number Input"
-    min={0}
-    max={100}
-    value={50}
-    step={10} />
+    min="{0}"
+    max="{100}"
+    value="{50}"
+    step="{10}" />
   <FormGroup legendText="Toggle heading">
     <Toggle id="toggle-1" />
     <Toggle id="toggle-2" disabled />
@@ -93,7 +93,7 @@
     id="text-area"
     labelText="Text Area label"
     placeholder="Placeholder text"
-    rows={4}
-    cols={50} />
+    rows="{4}"
+    cols="{50}" />
   <Button type="submit">Submit</Button>
 </Form>
diff --git a/src/Form/Form.svelte b/src/Form/Form.svelte
index 1a205088..ef62f477 100644
--- a/src/Form/Form.svelte
+++ b/src/Form/Form.svelte
@@ -1,5 +1,5 @@
 <form
-  class:bx--form={true}
+  class:bx--form="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte
index 92ee84dc..6b9dc6fd 100644
--- a/src/FormGroup/FormGroup.svelte
+++ b/src/FormGroup/FormGroup.svelte
@@ -25,16 +25,16 @@
 </script>
 
 <fieldset
-  data-invalid={invalid || undefined}
-  class:bx--fieldset={true}
+  data-invalid="{invalid || undefined}"
+  class:bx--fieldset="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <legend class:bx--label={true}>{legendText}</legend>
+  <legend class:bx--label="{true}">{legendText}</legend>
   <slot />
   {#if message}
-    <div class:bx--form__requirement={true}>{messageText}</div>
+    <div class:bx--form__requirement="{true}">{messageText}</div>
   {/if}
 </fieldset>
diff --git a/src/FormItem/FormItem.svelte b/src/FormItem/FormItem.svelte
index 560aa86a..e0f6b009 100644
--- a/src/FormItem/FormItem.svelte
+++ b/src/FormItem/FormItem.svelte
@@ -1,5 +1,5 @@
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte
index 81ce3e08..70278b4d 100644
--- a/src/FormLabel/FormLabel.svelte
+++ b/src/FormLabel/FormLabel.svelte
@@ -7,8 +7,8 @@
 </script>
 
 <label
-  class:bx--label={true}
-  for={id}
+  class:bx--label="{true}"
+  for="{id}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index 23851c22..7734f509 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -116,7 +116,7 @@
 </script>
 
 {#if as}
-  <slot {props} />
+  <slot props="{props}" />
 {:else}
   <div {...props}>
     <slot />
diff --git a/src/Grid/Grid.Story.svelte b/src/Grid/Grid.Story.svelte
index 3657d9e8..c8a5b9ca 100644
--- a/src/Grid/Grid.Story.svelte
+++ b/src/Grid/Grid.Story.svelte
@@ -76,22 +76,22 @@
   <h6>Responsive Grid</h6>
   <Grid>
     <Row>
-      <Column sm={1} md={4} lg={8}>
+      <Column sm="{1}" md="{4}" lg="{8}">
         <div class="outside">
           <div class="inside">sm: 1/4, md: 1/2, lg: 2/3</div>
         </div>
       </Column>
-      <Column sm={1} md={2} lg={2}>
+      <Column sm="{1}" md="{2}" lg="{2}">
         <div class="outside">
           <div class="inside">sm: 1/4, md: 1/4, lg: 1/6</div>
         </div>
       </Column>
-      <Column sm={1} md={1} lg={1}>
+      <Column sm="{1}" md="{1}" lg="{1}">
         <div class="outside">
           <div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
         </div>
       </Column>
-      <Column sm={1} md={1} lg={1}>
+      <Column sm="{1}" md="{1}" lg="{1}">
         <div class="outside">
           <div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
         </div>
@@ -102,22 +102,22 @@
   <h6>Columns with Offset</h6>
   <Grid>
     <Row>
-      <Column sm={{ span: 1, offset: 3 }}>
+      <Column sm="{{ span: 1, offset: 3 }}">
         <div class="outside">
           <div class="inside">Small Screen Offset 3</div>
         </div>
       </Column>
-      <Column sm={{ span: 2, offset: 2 }}>
+      <Column sm="{{ span: 2, offset: 2 }}">
         <div class="outside">
           <div class="inside">Small Screen Offset 2</div>
         </div>
       </Column>
-      <Column sm={{ span: 3, offset: 1 }}>
+      <Column sm="{{ span: 3, offset: 1 }}">
         <div class="outside">
           <div class="inside">Small Screen Offset 1</div>
         </div>
       </Column>
-      <Column sm={{ span: 4, offset: 0 }}>
+      <Column sm="{{ span: 4, offset: 0 }}">
         <div class="outside">
           <div class="inside">Small Screen Offset 0</div>
         </div>
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index fbc33d20..a97b0e0e 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -60,7 +60,7 @@
 </script>
 
 {#if as}
-  <slot {props} />
+  <slot props="{props}" />
 {:else}
   <div {...props}>
     <slot />
diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte
index d38cce38..e5159d1d 100644
--- a/src/Grid/Row.svelte
+++ b/src/Grid/Row.svelte
@@ -53,7 +53,7 @@
 </script>
 
 {#if as}
-  <slot {props} />
+  <slot props="{props}" />
 {:else}
   <div {...props}>
     <slot />
diff --git a/src/Icon/Icon.Skeleton.svelte b/src/Icon/Icon.Skeleton.svelte
index 00ba20c8..1e276d40 100644
--- a/src/Icon/Icon.Skeleton.svelte
+++ b/src/Icon/Icon.Skeleton.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <div
-  class:bx--icon--skeleton={true}
+  class:bx--icon--skeleton="{true}"
   {...$$restProps}
   style="{$$restProps.style}; width: {size}px; height: {size}px"
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave />
+  on:mouseleave></div>
diff --git a/src/Icon/Icon.Story.svelte b/src/Icon/Icon.Story.svelte
index 7a2e94d9..c4a00919 100644
--- a/src/Icon/Icon.Story.svelte
+++ b/src/Icon/Icon.Story.svelte
@@ -13,9 +13,9 @@
 
 {#if story === 'skeleton'}
   <div>
-    <IconSkeleton size={16} style="margin: 2rem;" />
-    <IconSkeleton size={32} style="margin: 2rem" />
+    <IconSkeleton size="{16}" style="margin: 2rem;" />
+    <IconSkeleton size="{32}" style="margin: 2rem" />
   </div>
 {:else}
-  <Icon {...$$props} render={icons[$$props.icon]} />
+  <Icon {...$$props} render="{icons[$$props.icon]}" />
 {/if}
diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte
index 23058e6c..67ceac9f 100644
--- a/src/Icon/Icon.svelte
+++ b/src/Icon/Icon.svelte
@@ -20,7 +20,7 @@
 
 {#if skeleton}
   <IconSkeleton
-    {size}
+    size="{size}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -28,7 +28,7 @@
     on:mouseleave />
 {:else}
   <svelte:component
-    this={render}
+    this="{render}"
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/InlineLoading/InlineLoading.Story.svelte b/src/InlineLoading/InlineLoading.Story.svelte
index 6c0805c9..356eb916 100644
--- a/src/InlineLoading/InlineLoading.Story.svelte
+++ b/src/InlineLoading/InlineLoading.Story.svelte
@@ -37,15 +37,15 @@
 
 {#if story === 'ux-example'}
   <div style="display: flex; width: 300px">
-    <Button kind="secondary" {disabled}>Cancel</Button>
+    <Button kind="secondary" disabled="{disabled}">Cancel</Button>
     {#if disabled}
       <InlineLoading
         style="margin-left: 1rem;"
-        description={loadingDescription}
-        status={success ? 'finished' : 'active'}
-        aria-live={ariaLive} />
+        description="{loadingDescription}"
+        status="{success ? 'finished' : 'active'}"
+        aria-live="{ariaLive}" />
     {:else}
-      <Button on:click={handleSubmit}>Submit</Button>
+      <Button on:click="{handleSubmit}">Submit</Button>
     {/if}
   </div>
 {:else}
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index 4a390439..f122e059 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -54,7 +54,7 @@
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div class:bx--inline-loading__animation={true}>
+  <div class:bx--inline-loading__animation="{true}">
     {#if status === 'error'}
       <Error20 class="bx--inline-loading--error" />
     {:else if status === 'finished'}
@@ -62,12 +62,12 @@
     {:else if status === 'inactive' || status === 'active'}
       <Loading
         small
-        description={iconDescription}
-        withOverlay={false}
-        active={status === 'active'} />
+        description="{iconDescription}"
+        withOverlay="{false}"
+        active="{status === 'active'}" />
     {/if}
   </div>
   {#if description}
-    <div class:bx--inline-loading__text={true}>{description}</div>
+    <div class:bx--inline-loading__text="{true}">{description}</div>
   {/if}
 </div>
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index ea75822e..3035fcc1 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -20,10 +20,10 @@
 
 {#if disabled}
   <p
-    bind:this={ref}
-    class:bx--link={true}
-    class:bx--link--disabled={disabled}
-    class:bx--link--inline={inline}
+    bind:this="{ref}"
+    class:bx--link="{true}"
+    class:bx--link--disabled="{disabled}"
+    class:bx--link--inline="{inline}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -34,10 +34,10 @@
 {:else}
   <!-- svelte-ignore a11y-missing-attribute -->
   <a
-    bind:this={ref}
-    class:bx--link={true}
-    class:bx--link--disabled={disabled}
-    class:bx--link--inline={inline}
+    bind:this="{ref}"
+    class:bx--link="{true}"
+    class:bx--link--disabled="{disabled}"
+    class:bx--link--inline="{inline}"
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index 352ecba6..f63a5987 100644
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@@ -45,23 +45,23 @@
 <div
   role="listbox"
   tabindex="-1"
-  data-invalid={invalid || undefined}
-  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}
+  data-invalid="{invalid || undefined}"
+  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}"
   {...$$restProps}
   class="{size && `bx--list-box--${size}`} {$$restProps.class}"
   on:keydown
-  on:keydown={(e) => {
+  on:keydown="{(e) => {
     if (e.key === 'Escape') {
       e.stopPropagation();
     }
-  }}
+  }}"
   on:click|preventDefault|stopPropagation>
   <slot />
 </div>
 {#if invalid}
-  <div class:bx--form-requirement={true}>{invalidText}</div>
+  <div class:bx--form-requirement="{true}">{invalidText}</div>
 {/if}
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index 56a6c6d8..0c2b32fc 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -63,15 +63,15 @@
 </script>
 
 <div
-  bind:this={ref}
-  role={ariaExpanded ? 'combobox' : role}
-  aria-expanded={ariaExpanded}
-  aria-owns={(ariaExpanded && menuId) || undefined}
-  aria-controls={(ariaExpanded && menuId) || undefined}
-  aria-disabled={disabled}
-  aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
-  tabindex={disabled ? '-1' : tabindex}
-  class:bx--list-box__field={true}
+  bind:this="{ref}"
+  role="{ariaExpanded ? 'combobox' : role}"
+  aria-expanded="{ariaExpanded}"
+  aria-owns="{(ariaExpanded && menuId) || undefined}"
+  aria-controls="{(ariaExpanded && menuId) || undefined}"
+  aria-disabled="{disabled}"
+  aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}"
+  tabindex="{disabled ? '-1' : tabindex}"
+  class:bx--list-box__field="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ListBox/ListBoxMenu.svelte b/src/ListBox/ListBoxMenu.svelte
index 8c0e01fd..5eadac19 100644
--- a/src/ListBox/ListBoxMenu.svelte
+++ b/src/ListBox/ListBoxMenu.svelte
@@ -9,7 +9,7 @@
 <div
   role="listbox"
   id="menu-{id}"
-  class:bx--list-box__menu={true}
+  class:bx--list-box__menu="{true}"
   {...$$restProps}>
   <slot />
 </div>
diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index 59fbc521..8081e687 100644
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@@ -33,9 +33,9 @@
 </script>
 
 <div
-  class:bx--list-box__menu-icon={true}
-  class:bx--list-box__menu-icon--open={open}
+  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} />
+  <ChevronDown16 aria-label="{description}" title="{description}" />
 </div>
diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index da734016..c26904f5 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -13,14 +13,14 @@
 </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}
+  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>
-  <div class:bx--list-box__menu-item__option={true}>
+  <div class:bx--list-box__menu-item__option="{true}">
     <slot />
   </div>
 </div>
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index ed1c2295..b1269609 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -57,25 +57,25 @@
 </script>
 
 <div
-  bind:this={ref}
+  bind:this="{ref}"
   role="button"
   aria-label="Clear Selection"
-  tabindex={disabled ? '-1' : '0'}
-  title={description}
-  class:bx--list-box__selection={true}
-  class:bx--tag--filter={selectionCount}
-  class:bx--list-box__selection--multi={selectionCount}
+  tabindex="{disabled ? '-1' : '0'}"
+  title="{description}"
+  class:bx--list-box__selection="{true}"
+  class:bx--tag--filter="{selectionCount}"
+  class:bx--list-box__selection--multi="{selectionCount}"
   {...$$restProps}
-  on:click|preventDefault|stopPropagation={(e) => {
+  on:click|preventDefault|stopPropagation="{(e) => {
     if (!disabled) {
       dispatch('clear', e);
     }
-  }}
-  on:keydown|stopPropagation={(e) => {
+  }}"
+  on:keydown|stopPropagation="{(e) => {
     if (!disabled && e.key === 'Enter') {
       dispatch('clear', e);
     }
-  }}>
+  }}">
   {#if selectionCount}{selectionCount}{/if}
   <Close16 />
 </div>
diff --git a/src/ListItem/ListItem.svelte b/src/ListItem/ListItem.svelte
index 0037171c..2a8a1e90 100644
--- a/src/ListItem/ListItem.svelte
+++ b/src/ListItem/ListItem.svelte
@@ -1,5 +1,5 @@
 <li
-  class:bx--list__item={true}
+  class:bx--list__item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte
index 71be7d54..d94d7099 100644
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@@ -34,60 +34,60 @@
 
 {#if withOverlay}
   <div
-    class:bx--loading-overlay={true}
-    class:bx--loading-overlay--stop={!active}
+    class:bx--loading-overlay="{true}"
+    class:bx--loading-overlay--stop="{!active}"
     {...$$restProps}>
     <div
       aria-atomic="true"
-      aria-labelledby={id}
-      aria-live={active ? 'assertive' : 'off'}
-      class:bx--loading={true}
-      class:bx--loading--small={small}
-      class:bx--loading--stop={!active}>
+      aria-labelledby="{id}"
+      aria-live="{active ? 'assertive' : 'off'}"
+      class:bx--loading="{true}"
+      class:bx--loading--small="{small}"
+      class:bx--loading--stop="{!active}">
       <!-- svelte-ignore a11y-label-has-associated-control -->
-      <label class:bx--visually-hidden={true} {id}>{description}</label>
-      <svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
+      <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
+      <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
         <title>{description}</title>
         {#if small}
           <circle
-            class:bx--loading__background={true}
+            class:bx--loading__background="{true}"
             cx="0"
             cy="0"
-            r={spinnerRadius} />
+            r="{spinnerRadius}"></circle>
         {/if}
         <circle
-          class:bx--loading__stroke={true}
+          class:bx--loading__stroke="{true}"
           cx="0"
           cy="0"
-          r={spinnerRadius} />
+          r="{spinnerRadius}"></circle>
       </svg>
     </div>
   </div>
 {:else}
   <div
     aria-atomic="true"
-    aria-labelledby={id}
-    aria-live={active ? 'assertive' : 'off'}
-    class:bx--loading={true}
-    class:bx--loading--small={small}
-    class:bx--loading--stop={!active}
+    aria-labelledby="{id}"
+    aria-live="{active ? 'assertive' : 'off'}"
+    class:bx--loading="{true}"
+    class:bx--loading--small="{small}"
+    class:bx--loading--stop="{!active}"
     {...$$restProps}>
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class:bx--visually-hidden={true} {id}>{description}</label>
-    <svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
+    <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
+    <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
       <title>{description}</title>
       {#if small}
         <circle
-          class:bx--loading__background={true}
+          class:bx--loading__background="{true}"
           cx="0"
           cy="0"
-          r={spinnerRadius} />
+          r="{spinnerRadius}"></circle>
       {/if}
       <circle
-        class:bx--loading__stroke={true}
+        class:bx--loading__stroke="{true}"
         cx="0"
         cy="0"
-        r={spinnerRadius} />
+        r="{spinnerRadius}"></circle>
     </svg>
   </div>
 {/if}
diff --git a/src/Modal/Modal.Story.svelte b/src/Modal/Modal.Story.svelte
index b04ff89f..ecb6acb3 100644
--- a/src/Modal/Modal.Story.svelte
+++ b/src/Modal/Modal.Story.svelte
@@ -9,39 +9,39 @@
 
 <div>
   <Button
-    on:click={() => {
+    on:click="{() => {
       open = true;
-    }}>
+    }}">
     Launch modal
   </Button>
 </div>
 <Modal
   {...$$props}
   bind:open
-  on:click={(e) => {
+  on:click="{(e) => {
     console.log(e.target);
-  }}
-  on:click:button--secondary={() => {
+  }}"
+  on:click:button--secondary="{() => {
     console.log('click button secondary');
     open = false;
-  }}
-  on:open={() => {
+  }}"
+  on:open="{() => {
     console.log('open');
-  }}
-  on:close={() => {
+  }}"
+  on:close="{() => {
     console.log('close');
-  }}
-  on:submit={() => {
+  }}"
+  on:submit="{() => {
     console.log('submit');
-  }}>
+  }}">
   <div>
     <PasswordInput bind:type placeholder="Password Input" aria-level="" />
     <Button
       kind="ghost"
       size="field"
-      on:click={() => {
+      on:click="{() => {
         type = type === 'password' ? 'text' : 'password';
-      }}>
+      }}">
       Programmatically toggle password
     </Button>
   </div>
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index d42e27e7..6fb5873b 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -146,17 +146,17 @@
 </script>
 
 <div
-  bind:this={ref}
+  bind:this="{ref}"
   role="presentation"
   tabindex="-1"
-  {id}
-  class:bx--modal={true}
-  class:bx--modal-tall={!passiveModal}
-  class:is-visible={open}
-  class:bx--modal--danger={danger}
+  id="{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 }) => {
+  on:keydown="{({ key }) => {
     if (open) {
       if (key === 'Escape') {
         open = false;
@@ -164,89 +164,93 @@
         dispatch('submit');
       }
     }
-  }}
+  }}"
   on:click
-  on:click={() => {
+  on:click="{() => {
     if (!didClickInnerModal) open = false;
     didClickInnerModal = false;
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <div
-    bind:this={innerModal}
+    bind:this="{innerModal}"
     role="dialog"
     aria-modal="true"
-    aria-label={ariaLabel}
-    class:bx--modal-container={true}
-    class={size && `bx--modal-container--${size}`}
-    on:click={() => {
+    aria-label="{ariaLabel}"
+    class:bx--modal-container="{true}"
+    class="{size && `bx--modal-container--${size}`}"
+    on:click="{() => {
       didClickInnerModal = true;
-    }}>
-    <div class:bx--modal-header={true}>
+    }}">
+    <div class:bx--modal-header="{true}">
       {#if passiveModal}
         <button
-          bind:this={buttonRef}
+          bind:this="{buttonRef}"
           type="button"
-          aria-label={iconDescription}
-          title={iconDescription}
+          aria-label="{iconDescription}"
+          title="{iconDescription}"
           class="bx--modal-close"
-          on:click={() => {
+          on:click="{() => {
             open = false;
-          }}>
-          <Close20 aria-label={iconDescription} class="bx--modal-close__icon" />
+          }}">
+          <Close20
+            aria-label="{iconDescription}"
+            class="bx--modal-close__icon" />
         </button>
       {/if}
       {#if modalLabel}
-        <h2 id={modalLabelId} class:bx--modal-header__label={true}>
+        <h2 id="{modalLabelId}" class:bx--modal-header__label="{true}">
           <slot name="label">{modalLabel}</slot>
         </h2>
       {/if}
-      <h3 id={modalHeadingId} class:bx--modal-header__heading={true}>
+      <h3 id="{modalHeadingId}" class:bx--modal-header__heading="{true}">
         <slot name="heading">{modalHeading}</slot>
       </h3>
       {#if !passiveModal}
         <button
-          bind:this={buttonRef}
+          bind:this="{buttonRef}"
           type="button"
-          aria-label={iconDescription}
-          title={iconDescription}
-          class:bx--modal-close={true}
-          on:click={() => {
+          aria-label="{iconDescription}"
+          title="{iconDescription}"
+          class:bx--modal-close="{true}"
+          on:click="{() => {
             open = false;
-          }}>
-          <Close20 aria-label={iconDescription} class="bx--modal-close__icon" />
+          }}">
+          <Close20
+            aria-label="{iconDescription}"
+            class="bx--modal-close__icon" />
         </button>
       {/if}
     </div>
     <div
-      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}
-      aria-labelledby={modalLabel ? modalLabelId : modalHeadingId}>
+      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}"
+      aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}">
       <slot />
     </div>
     {#if hasScrollingContent}
-      <div class:bx--modal-content--overflow-indicator={true} />
+      <div class:bx--modal-content--overflow-indicator="{true}"></div>
     {/if}
     {#if !passiveModal}
-      <div class:bx--modal-footer={true}>
+      <div class:bx--modal-footer="{true}">
         <Button
           kind="secondary"
-          on:click={() => {
+          on:click="{() => {
             dispatch('click:button--secondary');
-          }}>
+          }}">
           {secondaryButtonText}
         </Button>
         <Button
-          kind={danger ? 'danger' : 'primary'}
-          disabled={primaryButtonDisabled}
-          on:click={() => {
+          kind="{danger ? 'danger' : 'primary'}"
+          disabled="{primaryButtonDisabled}"
+          on:click="{() => {
             dispatch('submit');
-          }}>
+          }}">
           {primaryButtonText}
         </Button>
       </div>
diff --git a/src/MultiSelect/MultiSelect.Story.svelte b/src/MultiSelect/MultiSelect.Story.svelte
index bd3d7448..ee179c63 100644
--- a/src/MultiSelect/MultiSelect.Story.svelte
+++ b/src/MultiSelect/MultiSelect.Story.svelte
@@ -20,9 +20,9 @@
 <div>
   <Button
     size="small"
-    on:click={() => {
+    on:click="{() => {
       selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
-    }}>
+    }}">
     {selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
   </Button>
 </div>
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 29e1344f..d6737036 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -246,41 +246,44 @@
 </script>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (open && multiSelectRef && !multiSelectRef.contains(target)) {
       open = false;
     }
-  }} />
+  }}" />
 
 <div
-  bind:this={multiSelectRef}
-  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}
+  bind:this="{multiSelectRef}"
+  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 for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+    <label
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--label--disabled="{disabled}">
       {titleText}
     </label>
   {/if}
   {#if !inline && helperText}
     <div
-      class:bx--form__helper-text={true}
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <ListBox
-    aria-label={ariaLabel}
-    {id}
-    {disabled}
-    {invalid}
-    {invalidText}
-    {open}
-    {light}
-    {size}
+    aria-label="{ariaLabel}"
+    id="{id}"
+    disabled="{disabled}"
+    invalid="{invalid}"
+    invalidText="{invalidText}"
+    open="{open}"
+    light="{light}"
+    size="{size}"
     class="bx--multi-select {filterable && 'bx--combo-box'}
       {filterable && 'bx--multi-select--filterable'}
       {invalid && 'bx--multi-select--invalid'}
@@ -292,16 +295,16 @@
     <ListBoxField
       role="button"
       tabindex="0"
-      aria-expanded={open}
-      on:click={() => {
+      aria-expanded="{open}"
+      on:click="{() => {
         if (filterable) {
           open = true;
           inputRef.focus();
         } else {
           open = !open;
         }
-      }}
-      on:keydown={({ key }) => {
+      }}"
+      on:keydown="{({ key }) => {
         if (filterable) {
           return;
         }
@@ -323,46 +326,46 @@
             sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
           }
         }
-      }}
-      on:blur={({ relatedTarget }) => {
+      }}"
+      on:blur="{({ relatedTarget }) => {
         if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
           fieldRef.focus();
         }
-      }}
-      {id}
-      {disabled}
-      {translateWithId}>
+      }}"
+      id="{id}"
+      disabled="{disabled}"
+      translateWithId="{translateWithId}">
       {#if checked.length > 0}
         <ListBoxSelection
-          selectionCount={checked.length}
-          on:clear={() => {
+          selectionCount="{checked.length}"
+          on:clear="{() => {
             sortedItems = sortedItems.map((item) => ({
               ...item,
               checked: false,
             }));
             fieldRef.blur();
-          }}
-          {translateWithId}
-          {disabled} />
+          }}"
+          translateWithId="{translateWithId}"
+          disabled="{disabled}" />
       {/if}
       {#if filterable}
         <input
-          bind:this={inputRef}
+          bind:this="{inputRef}"
           role="combobox"
           tabindex="0"
           autocomplete="off"
           aria-autocomplete="list"
-          aria-expanded={open}
-          aria-activedescendant={highlightedId}
-          aria-disabled={disabled}
-          aria-controls={menuId}
-          class:bx--text-input={true}
-          class:bx--text-input--empty={inputValue === ''}
-          on:input={({ target }) => {
+          aria-expanded="{open}"
+          aria-activedescendant="{highlightedId}"
+          aria-disabled="{disabled}"
+          aria-controls="{menuId}"
+          class:bx--text-input="{true}"
+          class:bx--text-input--empty="{inputValue === ''}"
+          on:input="{({ target }) => {
             inputValue = target.value;
-          }}
+          }}"
           on:keydown
-          on:keydown|stopPropagation={({ key }) => {
+          on:keydown|stopPropagation="{({ key }) => {
             if (key === 'Enter') {
               if (highlightedIndex > -1) {
                 sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
@@ -374,69 +377,69 @@
             } else if (key === 'ArrowUp') {
               change(-1);
             }
-          }}
+          }}"
           on:focus
           on:blur
-          on:blur={({ relatedTarget }) => {
+          on:blur="{({ relatedTarget }) => {
             if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
               inputRef.focus();
             }
-          }}
-          {disabled}
-          {placeholder}
-          {id}
-          {name}
-          value={inputValue} />
+          }}"
+          disabled="{disabled}"
+          placeholder="{placeholder}"
+          id="{id}"
+          name="{name}"
+          value="{inputValue}" />
         {#if invalid}
           <WarningFilled16 class="bx--list-box__invalid-icon" />
         {/if}
         {#if inputValue}
           <ListBoxSelection
-            on:clear={() => {
+            on:clear="{() => {
               inputValue = '';
               open = false;
-            }}
-            {translateWithId}
-            {disabled}
-            {open} />
+            }}"
+            translateWithId="{translateWithId}"
+            disabled="{disabled}"
+            open="{open}" />
         {/if}
         <ListBoxMenuIcon
-          on:click={() => {
+          on:click="{() => {
             open = !open;
-          }}
-          {translateWithId}
-          {open} />
+          }}"
+          translateWithId="{translateWithId}"
+          open="{open}" />
       {/if}
       {#if !filterable}
         <span class="bx--list-box__label">{label}</span>
-        <ListBoxMenuIcon {open} {translateWithId} />
+        <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
       {/if}
     </ListBoxField>
     {#if open}
-      <ListBoxMenu aria-label={ariaLabel} {id}>
+      <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
         {#each filterable ? filteredItems : sortedItems as item, i (item.id || i)}
           <ListBoxMenuItem
-            id={item.id}
-            active={item.checked}
-            highlighted={highlightedIndex === i}
-            on:click={() => {
+            id="{item.id}"
+            active="{item.checked}"
+            highlighted="{highlightedIndex === i}"
+            on:click="{() => {
               sortedItems = sortedItems.map((_) =>
                 _.id === item.id ? { ..._, checked: !_.checked } : _
               );
               fieldRef.focus();
-            }}
-            on:mouseenter={() => {
+            }}"
+            on:mouseenter="{() => {
               highlightedIndex = i;
-            }}>
+            }}">
             <Checkbox
               readonly
               tabindex="-1"
               id="checkbox-{item.id}"
-              title={useTitleInItem ? itemToString(item) : undefined}
-              name={itemToString(item)}
-              labelText={itemToString(item)}
-              checked={item.checked}
-              {disabled} />
+              title="{useTitleInItem ? itemToString(item) : undefined}"
+              name="{itemToString(item)}"
+              labelText="{itemToString(item)}"
+              checked="{item.checked}"
+              disabled="{disabled}" />
           </ListBoxMenuItem>
         {/each}
       </ListBoxMenu>
diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte
index 92e54267..284c054f 100644
--- a/src/Notification/InlineNotification.svelte
+++ b/src/Notification/InlineNotification.svelte
@@ -81,29 +81,35 @@
 
 {#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}`}
+    role="{role}"
+    kind="{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>
-    <div class:bx--inline-notification__details={true}>
-      <NotificationIcon {notificationType} {kind} {iconDescription} />
-      <NotificationTextDetails {title} {subtitle} {notificationType}>
+    <div class:bx--inline-notification__details="{true}">
+      <NotificationIcon
+        notificationType="{notificationType}"
+        kind="{kind}"
+        iconDescription="{iconDescription}" />
+      <NotificationTextDetails
+        title="{title}"
+        subtitle="{subtitle}"
+        notificationType="{notificationType}">
         <slot />
       </NotificationTextDetails>
     </div>
     <slot name="actions" />
     {#if !hideCloseButton}
       <NotificationButton
-        {iconDescription}
-        {notificationType}
-        on:click={close} />
+        iconDescription="{iconDescription}"
+        notificationType="{notificationType}"
+        on:click="{close}" />
     {/if}
   </div>
 {/if}
diff --git a/src/Notification/Notification.Story.svelte b/src/Notification/Notification.Story.svelte
index 85f05ff8..25d459e4 100644
--- a/src/Notification/Notification.Story.svelte
+++ b/src/Notification/Notification.Story.svelte
@@ -9,9 +9,9 @@
 {#if story === 'inline'}
   <InlineNotification
     {...$$props}
-    on:close={() => {
+    on:close="{() => {
       console.log('on:close');
-    }}>
+    }}">
     <div slot="actions">
       <NotificationActionButton>{$$props.action}</NotificationActionButton>
     </div>
@@ -19,8 +19,8 @@
 {:else if story === 'toast'}
   <ToastNotification
     {...$$props}
-    on:close={() => {
+    on:close="{() => {
       console.log('on:close');
-    }}
+    }}"
     style="min-width: 30rem; margin-bottom: .5rem" />
 {/if}
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index 3533bca8..811e25df 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -28,18 +28,18 @@
 
 <button
   type="button"
-  aria-label={iconDescription}
-  title={iconDescription}
-  class:bx--toast-notification__close-button={notificationType === 'toast'}
-  class:bx--inline-notification__close-button={notificationType === 'inline'}
+  aria-label="{iconDescription}"
+  title="{iconDescription}"
+  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>
   <svelte:component
-    this={renderIcon}
-    {title}
+    this="{renderIcon}"
+    title="{title}"
     class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
       {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
 </button>
diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte
index 0fe208c2..e22fecb2 100644
--- a/src/Notification/NotificationIcon.svelte
+++ b/src/Notification/NotificationIcon.svelte
@@ -35,6 +35,6 @@
 </script>
 
 <svelte:component
-  this={icons[kind]}
-  title={iconDescription}
+  this="{icons[kind]}"
+  title="{iconDescription}"
   class="bx--{notificationType}-notification__icon" />
diff --git a/src/Notification/NotificationTextDetails.svelte b/src/Notification/NotificationTextDetails.svelte
index afd4ff00..cd9428be 100644
--- a/src/Notification/NotificationTextDetails.svelte
+++ b/src/Notification/NotificationTextDetails.svelte
@@ -25,18 +25,18 @@
 </script>
 
 {#if notificationType === 'toast'}
-  <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>
+  <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:bx--inline-notification__text-wrapper={true}>
-    <p class:bx--inline-notification__title={true}>{title}</p>
-    <div class:bx--inline-notification__subtitle={true}>{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/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index 13910d90..b7cc9200 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -87,25 +87,32 @@
 
 {#if open}
   <div
-    {role}
-    {kind}
-    class:bx--toast-notification={true}
-    class:bx--toast-notification--low-contrast={lowContrast}
-    class={kind && `bx--toast-notification--${kind}`}
+    role="{role}"
+    kind="{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>
-    <NotificationIcon {notificationType} {kind} {iconDescription} />
-    <NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
+    <NotificationIcon
+      notificationType="{notificationType}"
+      kind="{kind}"
+      iconDescription="{iconDescription}" />
+    <NotificationTextDetails
+      title="{title}"
+      subtitle="{subtitle}"
+      caption="{caption}"
+      notificationType="{notificationType}">
       <slot />
     </NotificationTextDetails>
     {#if !hideCloseButton}
       <NotificationButton
-        {iconDescription}
-        {notificationType}
-        on:click={close} />
+        iconDescription="{iconDescription}"
+        notificationType="{notificationType}"
+        on:click="{close}" />
     {/if}
   </div>
 {/if}
diff --git a/src/NumberInput/NumberInput.Skeleton.svelte b/src/NumberInput/NumberInput.Skeleton.svelte
index 03ff9473..1060676a 100644
--- a/src/NumberInput/NumberInput.Skeleton.svelte
+++ b/src/NumberInput/NumberInput.Skeleton.svelte
@@ -7,12 +7,14 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-  <div class:bx--number={true} class:bx--skeleton={true} />
+  {#if !hideLabel}
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
 </div>
diff --git a/src/NumberInput/NumberInput.Story.svelte b/src/NumberInput/NumberInput.Story.svelte
index 39360bbf..a7f6fee2 100644
--- a/src/NumberInput/NumberInput.Story.svelte
+++ b/src/NumberInput/NumberInput.Story.svelte
@@ -15,7 +15,7 @@
     id="number-input-id"
     name="number-input-id"
     bind:value
-    on:change={({ detail }) => {
+    on:change="{({ detail }) => {
       console.log('on:change', detail);
-    }} />
+    }}" />
 {/if}
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 5138535e..c56570b0 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -173,149 +173,151 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <div
-    data-invalid={error || undefined}
-    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}
-    class={size && `bx--number--${size}`}>
+    data-invalid="{error || undefined}"
+    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}"
+    class="{size && `bx--number--${size}`}">
     {#if mobile}
       {#if label}
         <label
-          for={id}
-          class:bx--label={true}
-          class:bx--visually-hidden={hideLabel}>
+          for="{id}"
+          class:bx--label="{true}"
+          class:bx--visually-hidden="{hideLabel}">
           <slot name="label">{label}</slot>
         </label>
       {/if}
       {#if helperText}
-        <div class:bx--form__helper-text={true}>{helperText}</div>
+        <div class:bx--form__helper-text="{true}">{helperText}</div>
       {/if}
-      <div class:bx--number__input-wrapper={true}>
+      <div class:bx--number__input-wrapper="{true}">
         <button
           type="button"
           aria-live="polite"
           aria-atomic="true"
-          title={decrementLabel}
-          aria-label={decrementLabel || iconDescription}
-          class:bx--number__control-btn={true}
-          class:down-icon={true}
-          on:click={() => {
+          title="{decrementLabel}"
+          aria-label="{decrementLabel || iconDescription}"
+          class:bx--number__control-btn="{true}"
+          class:down-icon="{true}"
+          on:click="{() => {
             updateValue(-1);
-          }}
-          {disabled}>
+          }}"
+          disabled="{disabled}">
           <CaretDownGlyph class="down-icon" />
         </button>
         <input
-          bind:this={ref}
+          bind:this="{ref}"
           type="number"
           pattern="[0-9]*"
-          aria-label={label ? undefined : ariaLabel}
+          aria-label="{label ? undefined : ariaLabel}"
           on:input
-          on:input={({ target }) => {
+          on:input="{({ target }) => {
             value = target.value;
-          }}
-          {disabled}
-          {id}
-          {name}
-          {max}
-          {min}
-          {step}
-          {value}
-          {readonly} />
+          }}"
+          disabled="{disabled}"
+          id="{id}"
+          name="{name}"
+          max="{max}"
+          min="{min}"
+          step="{step}"
+          value="{value}"
+          readonly="{readonly}" />
         <button
           type="button"
           aria-live="polite"
           aria-atomic="true"
-          title={incrementLabel}
-          aria-label={incrementLabel || iconDescription}
-          class:bx--number__control-btn={true}
-          class:up-icon={true}
-          on:click={() => {
+          title="{incrementLabel}"
+          aria-label="{incrementLabel || iconDescription}"
+          class:bx--number__control-btn="{true}"
+          class:up-icon="{true}"
+          on:click="{() => {
             updateValue(1);
-          }}
-          {disabled}>
+          }}"
+          disabled="{disabled}">
           <CaretUpGlyph class="up-icon" />
         </button>
       </div>
     {:else}
       {#if label}
         <label
-          for={id}
-          class:bx--label={true}
-          class:bx--visually-hidden={hideLabel}>
+          for="{id}"
+          class:bx--label="{true}"
+          class:bx--visually-hidden="{hideLabel}">
           <slot name="label">{label}</slot>
         </label>
       {/if}
       {#if helperText}
-        <div class:bx--form__helper-text={true}>{helperText}</div>
+        <div class:bx--form__helper-text="{true}">{helperText}</div>
       {/if}
-      <div class:bx--number__input-wrapper={true}>
+      <div class:bx--number__input-wrapper="{true}">
         <input
-          bind:this={ref}
+          bind:this="{ref}"
           type="number"
           pattern="[0-9]*"
-          aria-describedby={errorId}
-          data-invalid={invalid || undefined}
-          aria-invalid={invalid || undefined}
-          aria-label={label ? undefined : ariaLabel}
+          aria-describedby="{errorId}"
+          data-invalid="{invalid || undefined}"
+          aria-invalid="{invalid || undefined}"
+          aria-label="{label ? undefined : ariaLabel}"
           on:input
-          on:input={({ target }) => {
+          on:input="{({ target }) => {
             value = target.value;
-          }}
-          {disabled}
-          {id}
-          {max}
-          {min}
-          {step}
-          {value}
-          {readonly} />
+          }}"
+          disabled="{disabled}"
+          id="{id}"
+          max="{max}"
+          min="{min}"
+          step="{step}"
+          value="{value}"
+          readonly="{readonly}" />
         {#if invalid}
           <WarningFilled16 class="bx--number__invalid" />
         {/if}
-        <div class:bx--number__controls={true}>
+        <div class:bx--number__controls="{true}">
           <button
             type="button"
             aria-live="polite"
             aria-atomic="true"
-            title={incrementLabel || iconDescription}
-            aria-label={incrementLabel || iconDescription}
-            class:bx--number__control-btn={true}
-            class:up-icon={true}
-            on:click={() => {
+            title="{incrementLabel || iconDescription}"
+            aria-label="{incrementLabel || iconDescription}"
+            class:bx--number__control-btn="{true}"
+            class:up-icon="{true}"
+            on:click="{() => {
               updateValue(1);
-            }}
-            {disabled}>
+            }}"
+            disabled="{disabled}">
             <CaretUpGlyph class="up-icon" />
           </button>
           <button
             type="button"
             aria-live="polite"
             aria-atomic="true"
-            title={decrementLabel || iconDescription}
-            aria-label={decrementLabel || iconDescription}
-            class:bx--number__control-btn={true}
-            class:down-icon={true}
-            on:click={() => {
+            title="{decrementLabel || iconDescription}"
+            aria-label="{decrementLabel || iconDescription}"
+            class:bx--number__control-btn="{true}"
+            class:down-icon="{true}"
+            on:click="{() => {
               updateValue(-1);
-            }}
-            {disabled}>
+            }}"
+            disabled="{disabled}">
             <CaretDownGlyph class="down-icon" />
           </button>
         </div>
       </div>
     {/if}
     {#if error}
-      <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
+      <div id="{errorId}" class:bx--form-requirement="{true}">
+        {invalidText}
+      </div>
     {/if}
   </div>
 </div>
diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte
index f4472260..95dc1bf4 100644
--- a/src/OrderedList/OrderedList.svelte
+++ b/src/OrderedList/OrderedList.svelte
@@ -7,8 +7,8 @@
 </script>
 
 <ol
-  class:bx--list--ordered={true}
-  class:bx--list--nested={nested}
+  class:bx--list--ordered="{true}"
+  class:bx--list--nested="{nested}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/OverflowMenu/OverflowMenu.Story.svelte b/src/OverflowMenu/OverflowMenu.Story.svelte
index f4730b9a..361a8cb2 100644
--- a/src/OverflowMenu/OverflowMenu.Story.svelte
+++ b/src/OverflowMenu/OverflowMenu.Story.svelte
@@ -11,9 +11,9 @@
   {#if story === 'links'}
     <OverflowMenu
       {...$$props.menu}
-      on:close={({ detail }) => {
+      on:close="{({ detail }) => {
         console.log('close', detail);
-      }}>
+      }}">
       <OverflowMenuItem
         {...$$props.menuItem}
         href="https://ibm.com"
@@ -43,9 +43,9 @@
   {:else if story === 'trigger'}
     <OverflowMenu
       {...$$props.menu}
-      on:close={({ detail }) => {
+      on:close="{({ detail }) => {
         console.log('close', detail);
-      }}
+      }}"
       style="width: auto">
       <div slot="menu" style="padding: 0 1rem">Menu</div>
       <OverflowMenuItem
@@ -64,9 +64,9 @@
   {:else}
     <OverflowMenu
       {...$$props.menu}
-      on:close={({ detail }) => {
+      on:close="{({ detail }) => {
         console.log('close', detail);
-      }}>
+      }}">
       <OverflowMenuItem
         {...$$props.menuItem}
         text="Option 1"
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index f1631530..c7df81fd 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -151,35 +151,35 @@
 </svelte:head>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (buttonRef && buttonRef.contains(target)) return;
     if (menuRef && !menuRef.contains(target)) {
       open = false;
     }
-  }} />
+  }}" />
 
 <button
-  bind:this={buttonRef}
+  bind:this="{buttonRef}"
   tabindex="0"
   aria-haspopup
-  aria-expanded={open}
-  aria-label={ariaLabel}
-  {id}
-  class:bx--overflow-menu={true}
-  class:bx--overflow-menu--open={open}
-  class:bx--overflow-menu--light={light}
+  aria-expanded="{open}"
+  aria-label="{ariaLabel}"
+  id="{id}"
+  class:bx--overflow-menu="{true}"
+  class:bx--overflow-menu--open="{open}"
+  class:bx--overflow-menu--light="{light}"
   {...$$restProps}
   on:click
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (!(menuRef && menuRef.contains(target))) {
       open = !open;
     }
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={(e) => {
+  on:keydown="{(e) => {
     if (open) {
       if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) {
         e.preventDefault();
@@ -188,25 +188,25 @@
         open = false;
       }
     }
-  }}>
+  }}">
   <slot name="menu">
     <svelte:component
-      this={icon}
-      aria-label={iconDescription}
-      title={iconDescription}
+      this="{icon}"
+      aria-label="{iconDescription}"
+      title="{iconDescription}"
       class="bx--overflow-menu__icon {iconClass}" />
   </slot>
   {#if open}
     <ul
-      bind:this={menuRef}
+      bind:this="{menuRef}"
       role="menu"
       tabindex="-1"
-      aria-label={ariaLabel}
-      data-floating-menu-direction={direction}
-      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}
+      aria-label="{ariaLabel}"
+      data-floating-menu-direction="{direction}"
+      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>
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 84eb6d85..e5b5d001 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -78,51 +78,55 @@
 
 <li
   role="menuitem"
-  {id}
-  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}
+  id="{id}"
+  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={ref}
+      bind:this="{ref}"
       {...buttonProps}
       on:click
-      on:click={() => {
+      on:click="{() => {
         update(id);
-      }}
+      }}"
       on:keydown
-      on:keydown={({ key }) => {
+      on:keydown="{({ key }) => {
         if (key === 'ArrowDown') {
           change(1);
         } else if (key === 'ArrowUp') {
           change(-1);
         }
-      }}>
+      }}">
       <slot>
-        <div class:bx--overflow-menu-options__option-content={true}>{text}</div>
+        <div class:bx--overflow-menu-options__option-content="{true}">
+          {text}
+        </div>
       </slot>
     </a>
   {:else}
     <button
-      bind:this={ref}
+      bind:this="{ref}"
       {...buttonProps}
       on:click
-      on:click={() => {
+      on:click="{() => {
         update(id);
-      }}
+      }}"
       on:keydown
-      on:keydown={({ key }) => {
+      on:keydown="{({ key }) => {
         if (key === 'ArrowDown') {
           change(1);
         } else if (key === 'ArrowUp') {
           change(-1);
         }
-      }}>
+      }}">
       <slot>
-        <div class:bx--overflow-menu-options__option-content={true}>{text}</div>
+        <div class:bx--overflow-menu-options__option-content="{true}">
+          {text}
+        </div>
       </slot>
     </button>
   {/if}
diff --git a/src/Pagination/Pagination.Skeleton.svelte b/src/Pagination/Pagination.Skeleton.svelte
index 7ae3030d..d6d26418 100644
--- a/src/Pagination/Pagination.Skeleton.svelte
+++ b/src/Pagination/Pagination.Skeleton.svelte
@@ -3,19 +3,21 @@
 </script>
 
 <div
-  class:bx--pagination={true}
-  class:bx--skeleton={true}
+  class:bx--pagination="{true}"
+  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div class:bx--pagination__left={true}>
+  <div class:bx--pagination__left="{true}">
     <SkeletonText width="70px" />
     <SkeletonText width="35px" />
     <SkeletonText width="105px" />
   </div>
-  <div class:bx--pagination__right={true} class:bx--pagination--inline={true}>
+  <div
+    class:bx--pagination__right="{true}"
+    class:bx--pagination--inline="{true}">
     <SkeletonText width="70px" />
   </div>
 </div>
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index 2c5222dc..9776867a 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -107,12 +107,12 @@
   $: forwardButtonDisabled = disabled || page === totalPages;
 </script>
 
-<div {id} class:bx--pagination={true} {...$$restProps}>
-  <div class:bx--pagination__left={true}>
+<div id="{id}" class:bx--pagination="{true}" {...$$restProps}>
+  <div class:bx--pagination__left="{true}">
     <label
       id="bx--pagination-select-{id}-count-label"
       for="bx--pagination-select-{id}"
-      class:bx--pagination__text={true}>
+      class:bx--pagination__text="{true}">
       {itemsPerPageText}
     </label>
     <Select
@@ -121,12 +121,12 @@
       hideLabel
       noLabel
       inline
-      bind:selected={pageSize}>
+      bind:selected="{pageSize}">
       {#each pageSizes as size, i (size)}
-        <SelectItem value={size} text={size.toString()} />
+        <SelectItem value="{size}" text="{size.toString()}" />
       {/each}
     </Select>
-    <span class:bx--pagination__text={true}>
+    <span class:bx--pagination__text="{true}">
       {#if pagesUnknown}
         {itemText(pageSize * (page - 1) + 1, page * pageSize)}
       {:else}
@@ -134,7 +134,7 @@
       {/if}
     </span>
   </div>
-  <div class:bx--pagination__right={true}>
+  <div class:bx--pagination__right="{true}">
     {#if !pageInputDisabled}
       <Select
         id="bx--pagination-select-{id + 2}"
@@ -142,12 +142,12 @@
         labelText="Page number, of {totalPages} pages"
         inline
         hideLabel
-        bind:selected={page}>
+        bind:selected="{page}">
         {#each selectItems as size, i (size)}
-          <SelectItem value={size + 1} text={(size + 1).toString()} />
+          <SelectItem value="{size + 1}" text="{(size + 1).toString()}" />
         {/each}
       </Select>
-      <span class:bx--pagination__text={true}>
+      <span class:bx--pagination__text="{true}">
         {#if pagesUnknown}
           {pageText(page)}
         {:else}{pageRangeText(page, totalPages)}{/if}
@@ -155,26 +155,26 @@
     {/if}
     <button
       type="button"
-      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={() => {
+      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--;
-      }}>
+      }}">
       <CaretLeft24 />
     </button>
     <button
       type="button"
-      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={() => {
+      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++;
-      }}>
+      }}">
       <CaretRight24 />
     </button>
   </div>
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index 1d05f36f..d672cd45 100644
--- a/src/PaginationNav/PaginationItem.svelte
+++ b/src/PaginationNav/PaginationItem.svelte
@@ -12,14 +12,14 @@
   export let active = false;
 </script>
 
-<li class:bx--pagination-nav__list-item={true}>
+<li class:bx--pagination-nav__list-item="{true}">
   <button
-    data-page={page}
-    aria-current={active ? 'page' : undefined}
-    class:bx--pagination-nav__page={true}
-    class:bx--pagination-nav__page--active={active}
+    data-page="{page}"
+    aria-current="{active ? 'page' : undefined}"
+    class:bx--pagination-nav__page="{true}"
+    class:bx--pagination-nav__page--active="{active}"
     on:click>
-    <span class:bx--pagination-nav__accessibility-label={true}>
+    <span class:bx--pagination-nav__accessibility-label="{true}">
       <slot />
     </span>
     {page}
diff --git a/src/PaginationNav/PaginationNav.Story.svelte b/src/PaginationNav/PaginationNav.Story.svelte
index e5a034a4..e9606c4f 100644
--- a/src/PaginationNav/PaginationNav.Story.svelte
+++ b/src/PaginationNav/PaginationNav.Story.svelte
@@ -9,23 +9,23 @@
   <PaginationNav
     {...$$props}
     bind:page
-    on:change={({ detail }) => {
+    on:change="{({ detail }) => {
       console.log('on:change', detail);
-    }}
-    on:click:button--previous={({ detail }) => {
+    }}"
+    on:click:button--previous="{({ detail }) => {
       console.log('button--previous', detail);
-    }}
-    on:click:button--next={({ detail }) => {
+    }}"
+    on:click:button--next="{({ detail }) => {
       console.log('button--next', detail);
-    }} />
+    }}" />
   <div style="margin-top: 1.5rem">Bound page index: {page}</div>
   <Button
     kind="tertiary"
     size="small"
     style="margin-top: 1rem;"
-    on:click={() => {
+    on:click="{() => {
       page = 3;
-    }}>
+    }}">
     Set page to index 3
   </Button>
 </div>
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index b9f99b8c..309236a5 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -85,80 +85,83 @@
     .slice(startOffset + front, (back + 1) * -1);
 </script>
 
-<nav aria-label="pagination" class:bx--pagination-nav={true} {...$$restProps}>
-  <ul class:bx--pagination-nav__list={true}>
-    <li class:bx--pagination-nav__list-item={true}>
+<nav aria-label="pagination" class:bx--pagination-nav="{true}" {...$$restProps}>
+  <ul class:bx--pagination-nav__list="{true}">
+    <li class:bx--pagination-nav__list-item="{true}">
       <Button
         hasIconOnly
         kind="ghost"
         tooltipAlignment="center"
         tooltipPosition="bottom"
-        iconDescription={backwardText}
-        disabled={!loop && page === 0}
-        icon={CaretLeft16}
-        on:click={() => {
+        iconDescription="{backwardText}"
+        disabled="{!loop && page === 0}"
+        icon="{CaretLeft16}"
+        on:click="{() => {
           if (page - 1 < 0) {
             if (loop) page = total - 1;
           } else {
             page--;
           }
           dispatch('click:button--previous', { page });
-        }} />
+        }}" />
     </li>
     {#if fit > MIN || (fit <= MIN && page <= 1)}
-      <PaginationItem page={1} active={page === 0} on:click={() => (page = 0)}>
+      <PaginationItem
+        page="{1}"
+        active="{page === 0}"
+        on:click="{() => (page = 0)}">
         {page === 0 ? 'Active, Page' : 'Page'}
       </PaginationItem>
     {/if}
     <PaginationOverflow
-      fromIndex={startOffset}
-      count={front}
-      on:select={({ detail }) => (page = detail.index)} />
+      fromIndex="{startOffset}"
+      count="{front}"
+      on:select="{({ detail }) => (page = detail.index)}" />
     {#each items as item}
       <PaginationItem
-        page={item + 1}
-        active={page === item}
-        on:click={() => (page = item)}>
+        page="{item + 1}"
+        active="{page === item}"
+        on:click="{() => (page = item)}">
         {page === item ? 'Active, Page' : 'Page'}
       </PaginationItem>
     {/each}
     <PaginationOverflow
-      fromIndex={total - back - 1}
-      count={back}
-      on:select={({ detail }) => {
+      fromIndex="{total - back - 1}"
+      count="{back}"
+      on:select="{({ detail }) => {
         page = detail.index;
-      }} />
+      }}" />
     {#if total > 1}
       <PaginationItem
-        page={total}
-        active={page === total - 1}
-        on:click={() => (page = total - 1)}>
+        page="{total}"
+        active="{page === total - 1}"
+        on:click="{() => (page = total - 1)}">
         {page === total - 1 ? 'Active, Page' : 'Page'}
       </PaginationItem>
     {/if}
-    <li class:bx--pagination-nav__list-item={true}>
+    <li class:bx--pagination-nav__list-item="{true}">
       <Button
         hasIconOnly
         kind="ghost"
         tooltipAlignment="center"
         tooltipPosition="bottom"
-        iconDescription={forwardText}
-        disabled={!loop && page === total - 1}
-        icon={CaretRight16}
-        on:click={() => {
+        iconDescription="{forwardText}"
+        disabled="{!loop && page === total - 1}"
+        icon="{CaretRight16}"
+        on:click="{() => {
           if (page + 1 >= total) {
             if (loop) page = 0;
           } else {
             page++;
           }
           dispatch('click:button--next', { page });
-        }} />
+        }}" />
     </li>
   </ul>
   <div
     aria-live="polite"
     aria-atomic="true"
-    class:bx--pagination-nav__accessibility-label={true}>
+    class:bx--pagination-nav__accessibility-label="{true}">
     Page {page + 1} of {total}
   </div>
 </nav>
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index 18d1b893..4e368e93 100644
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@@ -21,36 +21,36 @@
 </script>
 
 {#if count > 1}
-  <li class:bx--pagination-nav__list-item={true}>
-    <div class:bx--pagination-nav__select={true}>
+  <li class:bx--pagination-nav__list-item="{true}">
+    <div class:bx--pagination-nav__select="{true}">
       <!-- svelte-ignore a11y-no-onchange -->
       <select
         aria-label="Select Page number"
-        {value}
-        class:bx--pagination-nav__page={true}
-        class:bx--pagination-nav__page--select={true}
-        on:change={({ target }) => {
+        value="{value}"
+        class:bx--pagination-nav__page="{true}"
+        class:bx--pagination-nav__page--select="{true}"
+        on:change="{({ target }) => {
           value = '';
           dispatch('select', { index: Number(target.value) });
-        }}>
-        <option value="" hidden />
+        }}">
+        <option value="" hidden></option>
         {#each Array.from({ length: count }, (_, i) => i) as i}
-          <option value={fromIndex + i} data-page={fromIndex + i + 1}>
+          <option value="{fromIndex + i}" data-page="{fromIndex + i + 1}">
             {fromIndex + i + 1}
           </option>
         {/each}
       </select>
-      <div class:bx--pagination-nav__select-icon-wrapper={true}>
+      <div class:bx--pagination-nav__select-icon-wrapper="{true}">
         <OverflowMenuHorizontal16 class="bx--pagination-nav__select-icon" />
       </div>
     </div>
   </li>
 {:else if count === 1}
   <PaginationItem
-    page={fromIndex + 1}
-    on:click={() => {
+    page="{fromIndex + 1}"
+    on:click="{() => {
       dispatch('select', { index: fromIndex });
-    }}>
+    }}">
     Page
   </PaginationItem>
 {/if}
diff --git a/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte b/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
index 72ca6a6c..949b749e 100644
--- a/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
@@ -7,9 +7,9 @@
 </script>
 
 <ul
-  class:bx--progress={true}
-  class:bx--progress--vertical={vertical}
-  class:bx--skeleton={true}
+  class:bx--progress="{true}"
+  class:bx--progress--vertical="{vertical}"
+  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -17,16 +17,16 @@
   on:mouseleave>
   {#each [0, 1, 2, 3] as item, i (item)}
     <li
-      class:bx--progress-step={true}
-      class:bx--progress-step--incomplete={true}>
+      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}>
+        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" />
+          <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
         </svg>
-        <p class:bx--progress-label={true} />
-        <span class:bx--progress-line={true} />
+        <p class:bx--progress-label="{true}"></p>
+        <span class:bx--progress-line="{true}"></span>
       </div>
     </li>
   {/each}
diff --git a/src/ProgressIndicator/ProgressIndicator.svelte b/src/ProgressIndicator/ProgressIndicator.svelte
index f61bb38b..b02489c1 100644
--- a/src/ProgressIndicator/ProgressIndicator.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.svelte
@@ -41,8 +41,8 @@
 </script>
 
 <ul
-  class:bx--progress={true}
-  class:bx--progress--vertical={vertical}
+  class:bx--progress="{true}"
+  class:bx--progress--vertical="{vertical}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index bf2fec01..94620731 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -63,54 +63,54 @@
 </script>
 
 <li
-  aria-disabled={disabled}
-  {id}
-  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}
+  aria-disabled="{disabled}"
+  id="{id}"
+  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:bx--progress-step-button={true}
-    class:bx--progress-step-button--unclickable={current}
-    on:click={() => {
+    tabindex="{current ? '-1' : '0'}"
+    class:bx--progress-step-button="{true}"
+    class:bx--progress-step-button--unclickable="{current}"
+    on:click="{() => {
       change(step.index);
-    }}
+    }}"
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown={(e) => {
+    on:keydown="{(e) => {
       if (e.key === ' ' || e.key === 'Enter') {
         change(step.index);
       }
-    }}>
+    }}">
     {#if invalid}
       <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" />
+        <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
         <title>{description}</title>
       </svg>
     {:else if complete}
-      <CheckmarkOutline16 title={description} />
+      <CheckmarkOutline16 title="{description}" />
     {:else}
       <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" />
+          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
       </svg>
     {/if}
-    <slot props={{ class: 'bx--progress-label' }}>
-      <p class:bx--progress-label={true}>{label}</p>
+    <slot props="{{ class: 'bx--progress-label' }}">
+      <p class:bx--progress-label="{true}">{label}</p>
     </slot>
     {#if secondaryLabel}
-      <p class:bx--progress-optional={true}>{secondaryLabel}</p>
+      <p class:bx--progress-optional="{true}">{secondaryLabel}</p>
     {/if}
-    <span class:bx--progress-line={true} />
+    <span class:bx--progress-line="{true}"></span>
   </div>
 </li>
diff --git a/src/RadioButton/RadioButton.Skeleton.svelte b/src/RadioButton/RadioButton.Skeleton.svelte
index a39368b3..3879bbcf 100644
--- a/src/RadioButton/RadioButton.Skeleton.svelte
+++ b/src/RadioButton/RadioButton.Skeleton.svelte
@@ -1,10 +1,12 @@
 <div
-  class:bx--radio-button-wrapper={true}
+  class:bx--radio-button-wrapper="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div class:bx--radio-button={true} class:bx--skeleton={true} />
-  <span class:bx--radio-button__label={true} class:bx--skeleton={true} />
+  <div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
+  <span
+    class:bx--radio-button__label="{true}"
+    class:bx--skeleton="{true}"></span>
 </div>
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index bffcdaca..5c928854 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -69,26 +69,26 @@
 </script>
 
 <div
-  class:bx--radio-button-wrapper={true}
-  class:bx--radio-button-wrapper--label-left={labelPosition === 'left'}
+  class:bx--radio-button-wrapper="{true}"
+  class:bx--radio-button-wrapper--label-left="{labelPosition === 'left'}"
   {...$$restProps}>
   <input
-    bind:this={ref}
+    bind:this="{ref}"
     type="radio"
-    {id}
-    {name}
-    {checked}
-    {disabled}
-    {value}
-    class:bx--radio-button={true}
+    id="{id}"
+    name="{name}"
+    checked="{checked}"
+    disabled="{disabled}"
+    value="{value}"
+    class:bx--radio-button="{true}"
     on:change
-    on:change={() => {
+    on:change="{() => {
       if (ctx) {
         ctx.update(value);
       }
-    }} />
-  <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 class:bx--radio-button__label="{true}" for="{id}">
+    <span class:bx--radio-button__appearance="{true}"></span>
+    <span class:bx--visually-hidden="{hideLabel}">{labelText}</span>
   </label>
 </div>
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 655ee164..0ffb91bf 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -46,17 +46,17 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <div
-    class:bx--radio-button-group={true}
-    class:bx--radio-button-group--vertical={orientation === 'vertical'}
-    class={labelPosition && `bx--radio-button-group--label-${labelPosition}`}
-    {disabled}>
+    class:bx--radio-button-group="{true}"
+    class:bx--radio-button-group--vertical="{orientation === 'vertical'}"
+    class="{labelPosition && `bx--radio-button-group--label-${labelPosition}`}"
+    disabled="{disabled}">
     <slot />
   </div>
 </div>
diff --git a/src/Search/Search.Skeleton.svelte b/src/Search/Search.Skeleton.svelte
index 06cdd6fb..e8641ea8 100644
--- a/src/Search/Search.Skeleton.svelte
+++ b/src/Search/Search.Skeleton.svelte
@@ -7,14 +7,14 @@
 </script>
 
 <div
-  class:bx--skeleton={true}
-  class:bx--search--xl={!small}
-  class:bx--search--sm={small}
+  class:bx--skeleton="{true}"
+  class:bx--search--xl="{!small}"
+  class:bx--search--sm="{small}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <span class:bx--label={true} />
-  <div class:bx--search-input={true} />
+  <span class:bx--label="{true}"></span>
+  <div class:bx--search-input="{true}"></div>
 </div>
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 6a3ff9a2..1704475c 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -85,7 +85,7 @@
 
 {#if skeleton}
   <SearchSkeleton
-    {small}
+    small="{small}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -93,39 +93,39 @@
     on:mouseleave />
 {:else}
   <div
-    class:bx--search={true}
-    class:bx--search--light={light}
+    class:bx--search="{true}"
+    class:bx--search--light="{light}"
     {...$$restProps}
     class="bx--search--{size} {$$restProps.class}">
     <Search16 class="bx--search-magnifier" />
-    <label for={id} class:bx--label={true}>{labelText}</label>
+    <label for="{id}" class:bx--label="{true}">{labelText}</label>
     <!-- svelte-ignore a11y-autofocus -->
     <input
-      bind:this={ref}
+      bind:this="{ref}"
       role="searchbox"
-      class:bx--search-input={true}
-      {autofocus}
-      {autocomplete}
-      {id}
-      {placeholder}
-      {type}
-      {value}
+      class:bx--search-input="{true}"
+      autofocus="{autofocus}"
+      autocomplete="{autocomplete}"
+      id="{id}"
+      placeholder="{placeholder}"
+      type="{type}"
+      value="{value}"
       on:change
       on:input
-      on:input={({ target }) => {
+      on:input="{({ target }) => {
         value = target.value;
-      }} />
+      }}" />
     <button
       type="button"
-      aria-label={closeButtonLabelText}
-      class:bx--search-close={true}
-      class:bx--search-close--hidden={value === ''}
+      aria-label="{closeButtonLabelText}"
+      class:bx--search-close="{true}"
+      class:bx--search-close--hidden="{value === ''}"
       on:click
-      on:click={() => {
+      on:click="{() => {
         value = '';
         ref.focus();
-      }}>
-      <svelte:component this={size === 'xl' ? Close20 : Close16} />
+      }}">
+      <svelte:component this="{size === 'xl' ? Close20 : Close16}" />
     </button>
   </div>
 {/if}
diff --git a/src/Select/Select.Skeleton.svelte b/src/Select/Select.Skeleton.svelte
index 8d7c0a14..77a0b4a9 100644
--- a/src/Select/Select.Skeleton.svelte
+++ b/src/Select/Select.Skeleton.svelte
@@ -7,14 +7,16 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-  <div class:bx--select={true} class:bx--skeleton={true}>
-    <div class:bx--select-input={true} />
+  {#if !hideLabel}
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--select="{true}" class:bx--skeleton="{true}">
+    <div class:bx--select-input="{true}"></div>
   </div>
 </div>
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index 52d6f4f1..d560684b 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -102,46 +102,46 @@
   $: selectedValue.set(selected);
 </script>
 
-<div class:bx--form-item={true} {...$$restProps}>
+<div class:bx--form-item="{true}" {...$$restProps}>
   <div
-    class:bx--select={true}
-    class:bx--select--inline={inline}
-    class:bx--select--light={light}
-    class:bx--select--invalid={invalid}
-    class:bx--select--disabled={disabled}>
+    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:bx--label={true}
-        class:bx--visually-hidden={hideLabel}
-        class:bx--label--disabled={disabled}>
+        for="{id}"
+        class:bx--label="{true}"
+        class:bx--visually-hidden="{hideLabel}"
+        class:bx--label--disabled="{disabled}">
         {labelText}
       </label>
     {/if}
     {#if !inline && helperText}
       <div
-        class:bx--form__helper-text={true}
-        class:bx--form__helper-text--disabled={disabled}>
+        class:bx--form__helper-text="{true}"
+        class:bx--form__helper-text--disabled="{disabled}">
         {helperText}
       </div>
     {/if}
     {#if inline}
-      <div class:bx--select-input--inline__wrapper={true}>
+      <div class:bx--select-input--inline__wrapper="{true}">
         <div
-          class:bx--select-input__wrapper={true}
-          data-invalid={invalid || undefined}>
+          class:bx--select-input__wrapper="{true}"
+          data-invalid="{invalid || undefined}">
           <select
-            bind:this={ref}
-            aria-describedby={invalid ? errorId : undefined}
-            aria-invalid={invalid || undefined}
-            disabled={disabled || undefined}
-            {id}
-            {name}
-            class:bx--select-input={true}
-            class={size && `bx--select-input--${size}`}
-            on:change={({ target }) => {
+            bind:this="{ref}"
+            aria-describedby="{invalid ? errorId : undefined}"
+            aria-invalid="{invalid || undefined}"
+            disabled="{disabled || undefined}"
+            id="{id}"
+            name="{name}"
+            class:bx--select-input="{true}"
+            class="{size && `bx--select-input--${size}`}"
+            on:change="{({ target }) => {
               selectedValue.set(target.value);
-            }}
+            }}"
             on:blur>
             <slot />
           </select>
@@ -151,35 +151,35 @@
           {/if}
         </div>
         {#if invalid}
-          <div class:bx--form-requirement={true} id={errorId}>
+          <div class:bx--form-requirement="{true}" id="{errorId}">
             {invalidText}
           </div>
         {/if}
       </div>
       {#if helperText}
         <div
-          class:bx--form__helper-text={true}
-          class:bx--form__helper-text--disabled={disabled}>
+          class:bx--form__helper-text="{true}"
+          class:bx--form__helper-text--disabled="{disabled}">
           {helperText}
         </div>
       {/if}
     {/if}
     {#if !inline}
       <div
-        class:bx--select-input__wrapper={true}
-        data-invalid={invalid || undefined}>
+        class:bx--select-input__wrapper="{true}"
+        data-invalid="{invalid || undefined}">
         <select
-          bind:this={ref}
-          {id}
-          {name}
-          aria-describedby={invalid ? errorId : undefined}
-          disabled={disabled || undefined}
-          aria-invalid={invalid || undefined}
-          class:bx--select-input={true}
-          class={size && `bx--select-input--${size}`}
-          on:change={({ target }) => {
+          bind:this="{ref}"
+          id="{id}"
+          name="{name}"
+          aria-describedby="{invalid ? errorId : undefined}"
+          disabled="{disabled || undefined}"
+          aria-invalid="{invalid || undefined}"
+          class:bx--select-input="{true}"
+          class="{size && `bx--select-input--${size}`}"
+          on:change="{({ target }) => {
             selectedValue.set(target.value);
-          }}
+          }}"
           on:blur>
           <slot />
         </select>
@@ -189,7 +189,9 @@
         {/if}
       </div>
       {#if invalid}
-        <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
+        <div id="{errorId}" class:bx--form-requirement="{true}">
+          {invalidText}
+        </div>
       {/if}
     {/if}
   </div>
diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte
index 60a3df55..65f90108 100644
--- a/src/Select/SelectItem.svelte
+++ b/src/Select/SelectItem.svelte
@@ -39,12 +39,12 @@
 </script>
 
 <option
-  {value}
-  {disabled}
-  {hidden}
-  {selected}
-  class:bx--select-option={true}
-  class={$$restProps.class}
-  style={$$restProps.style}>
+  value="{value}"
+  disabled="{disabled}"
+  hidden="{hidden}"
+  selected="{selected}"
+  class:bx--select-option="{true}"
+  class="{$$restProps.class}"
+  style="{$$restProps.style}">
   {text || value}
 </option>
diff --git a/src/Select/SelectItemGroup.svelte b/src/Select/SelectItemGroup.svelte
index debe8803..4265e220 100644
--- a/src/Select/SelectItemGroup.svelte
+++ b/src/Select/SelectItemGroup.svelte
@@ -12,6 +12,10 @@
   export let label = "Provide label";
 </script>
 
-<optgroup {label} {disabled} class:bx--select-optgroup={true} {...$$restProps}>
+<optgroup
+  label="{label}"
+  disabled="{disabled}"
+  class:bx--select-optgroup="{true}"
+  {...$$restProps}>
   <slot />
 </optgroup>
diff --git a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
index c875b900..689360d4 100644
--- a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
+++ b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
@@ -1,7 +1,7 @@
 <div
-  class:bx--skeleton__placeholder={true}
+  class:bx--skeleton__placeholder="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave />
+  on:mouseleave></div>
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index aff5fbf5..d349049e 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -47,19 +47,19 @@
   <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
     {#each rows as { width }, i (width)}
       <p
-        class:bx--skeleton__text={true}
-        class:bx--skeleton__heading={heading}
-        style="width: {width}" />
+        class:bx--skeleton__text="{true}"
+        class:bx--skeleton__heading="{heading}"
+        style="width: {width}"></p>
     {/each}
   </div>
 {:else}
   <p
-    class:bx--skeleton__text={true}
-    class:bx--skeleton__heading={heading}
+    class:bx--skeleton__text="{true}"
+    class:bx--skeleton__heading="{heading}"
     {...$$restProps}
     style="width: {width};{$$restProps.style}"
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave />
+    on:mouseleave></p>
 {/if}
diff --git a/src/Slider/Slider.Skeleton.svelte b/src/Slider/Slider.Skeleton.svelte
index fa4665ac..5ff5c4f0 100644
--- a/src/Slider/Slider.Skeleton.svelte
+++ b/src/Slider/Slider.Skeleton.svelte
@@ -7,20 +7,22 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-  <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} />
+  {#if !hideLabel}
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--slider-container="{true}" class:bx--skeleton="{true}">
+    <span class:bx--slider__range-label="{true}"></span>
+    <div class:bx--slider="{true}">
+      <div class:bx--slider__track="{true}"></div>
+      <div class:bx--slider__filled-track="{true}"></div>
+      <div class:bx--slider__thumb="{true}"></div>
     </div>
-    <span class:bx--slider__range-label={true} />
+    <span class:bx--slider__range-label="{true}"></span>
   </div>
 </div>
diff --git a/src/Slider/Slider.Story.svelte b/src/Slider/Slider.Story.svelte
index 195ece01..3558c23b 100644
--- a/src/Slider/Slider.Story.svelte
+++ b/src/Slider/Slider.Story.svelte
@@ -14,7 +14,7 @@
     {...$$props}
     id="slider-id"
     bind:value
-    on:change={({ detail }) => {
+    on:change="{({ detail }) => {
       console.log('on:change', detail);
-    }} />
+    }}" />
 {/if}
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 45316ac6..b5df4678 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -160,84 +160,87 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  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}>
+  <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 class:bx--slider-container="{true}">
+    <span class:bx--slider__range-label="{true}">{minLabel || min}</span>
     <div
-      bind:this={ref}
+      bind:this="{ref}"
       role="presentation"
       tabindex="-1"
-      class:bx--slider={true}
-      class:bx--slider--disabled={disabled}
-      on:click={startDragging}
-      on:mousemove={() => {
+      class:bx--slider="{true}"
+      class:bx--slider--disabled="{disabled}"
+      on:click="{startDragging}"
+      on:mousemove="{() => {
         if (holding) {
           startDragging();
         }
-      }}
-      on:touchmove={() => {
+      }}"
+      on:touchmove="{() => {
         if (holding) {
           startDragging();
         }
-      }}
-      on:mouseup={stopHolding}
-      on:touchup={stopHolding}
-      on:touchend={stopHolding}
-      on:touchcancel={stopHolding}>
+      }}"
+      on:mouseup="{stopHolding}"
+      on:touchup="{stopHolding}"
+      on:touchend="{stopHolding}"
+      on:touchcancel="{stopHolding}">
       <div
         role="slider"
         tabindex="0"
-        class:bx--slider__thumb={true}
+        class:bx--slider__thumb="{true}"
         style="left: {left}%"
-        aria-valuemax={max}
-        aria-valuemin={min}
-        aria-valuenow={value}
-        on:mousedown={startHolding}
-        on:touchstart={startHolding}
-        on:keydown={({ shiftKey, key }) => {
+        aria-valuemax="{max}"
+        aria-valuemin="{min}"
+        aria-valuenow="{value}"
+        on:mousedown="{startHolding}"
+        on:touchstart="{startHolding}"
+        on:keydown="{({ shiftKey, key }) => {
           const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
           if (keys[key]) {
             value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
           }
-        }}
-        {id} />
-      <div bind:this={trackRef} class:bx--slider__track={true} />
+        }}"
+        id="{id}"></div>
+      <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>
       <div
-        class:bx--slider__filled-track={true}
-        style="transform: translate(0, -50%) scaleX({left / 100})" />
+        class:bx--slider__filled-track="{true}"
+        style="transform: translate(0, -50%) scaleX({left / 100})"></div>
       <input
         type="hidden"
-        class:bx--slider__input={true}
-        {name}
-        {value}
-        {required}
-        {min}
-        {max}
-        {step} />
+        class:bx--slider__input="{true}"
+        name="{name}"
+        value="{value}"
+        required="{required}"
+        min="{min}"
+        max="{max}"
+        step="{step}" />
     </div>
-    <span class:bx--slider__range-label={true}>{maxLabel || max}</span>
+    <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
     {#if !hideTextInput}
       <input
-        type={inputType}
+        type="{inputType}"
         id="input-{id}"
-        aria-label={$$props['aria-label'] || 'Slider number input'}
-        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 }) => {
+        aria-label="{$$props['aria-label'] || 'Slider number input'}"
+        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);
-        }}
-        {disabled}
-        {value} />
+        }}"
+        disabled="{disabled}"
+        value="{value}" />
     {/if}
   </div>
 </div>
diff --git a/src/StructuredList/StructuredList.Skeleton.svelte b/src/StructuredList/StructuredList.Skeleton.svelte
index 55df2210..b5ebeb8a 100644
--- a/src/StructuredList/StructuredList.Skeleton.svelte
+++ b/src/StructuredList/StructuredList.Skeleton.svelte
@@ -13,29 +13,29 @@
 </script>
 
 <section
-  class:bx--skeleton={true}
-  class:bx--structured-list={true}
-  class:bx--structured-list--border={border}
+  class:bx--skeleton="{true}"
+  class:bx--structured-list="{true}"
+  class:bx--structured-list--border="{border}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div class:bx--structured-list-thead={true}>
+  <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:bx--structured-list-th={true}><span /></div>
-      <div class:bx--structured-list-th={true}><span /></div>
+      class:bx--structured-list-row="{true}"
+      class:bx--structured-list-row--header-row="{true}">
+      <div class:bx--structured-list-th="{true}"><span></span></div>
+      <div class:bx--structured-list-th="{true}"><span></span></div>
+      <div class:bx--structured-list-th="{true}"><span></span></div>
     </div>
   </div>
-  <div class:bx--structured-list-tbody={true}>
+  <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 class:bx--structured-list-row="{true}">
+        <div class:bx--structured-list-td="{true}"></div>
+        <div class:bx--structured-list-td="{true}"></div>
+        <div class:bx--structured-list-td="{true}"></div>
       </div>
     {/each}
   </div>
diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
index 02eba48c..dd59fa1b 100644
--- a/src/StructuredList/StructuredList.svelte
+++ b/src/StructuredList/StructuredList.svelte
@@ -36,9 +36,9 @@
 
 <section
   aria-label="Structured list section"
-  class:bx--structured-list={true}
-  class:bx--structured-list--border={border}
-  class:bx--structured-list--selection={selection}
+  class:bx--structured-list="{true}"
+  class:bx--structured-list--border="{border}"
+  class:bx--structured-list--selection="{selection}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListBody.svelte b/src/StructuredList/StructuredListBody.svelte
index 2cfddbaf..ddaf09f7 100644
--- a/src/StructuredList/StructuredListBody.svelte
+++ b/src/StructuredList/StructuredListBody.svelte
@@ -1,5 +1,5 @@
 <div
-  class:bx--structured-list-tbody={true}
+  class:bx--structured-list-tbody="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListCell.svelte b/src/StructuredList/StructuredListCell.svelte
index d9a2a6c0..20624f10 100644
--- a/src/StructuredList/StructuredListCell.svelte
+++ b/src/StructuredList/StructuredListCell.svelte
@@ -13,9 +13,9 @@
 </script>
 
 <div
-  class:bx--structured-list-th={head}
-  class:bx--structured-list-td={!head}
-  class:bx--structured-list-content--nowrap={noWrap}
+  class:bx--structured-list-th="{head}"
+  class:bx--structured-list-td="{!head}"
+  class:bx--structured-list-content--nowrap="{noWrap}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListHead.svelte b/src/StructuredList/StructuredListHead.svelte
index 3fd77c40..a5386a08 100644
--- a/src/StructuredList/StructuredListHead.svelte
+++ b/src/StructuredList/StructuredListHead.svelte
@@ -1,5 +1,5 @@
 <div
-  class:bx--structured-list-thead={true}
+  class:bx--structured-list-thead="{true}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/StructuredList/StructuredListInput.svelte b/src/StructuredList/StructuredListInput.svelte
index 49b70a34..f3ea067d 100644
--- a/src/StructuredList/StructuredListInput.svelte
+++ b/src/StructuredList/StructuredListInput.svelte
@@ -47,16 +47,16 @@
 </script>
 
 <input
-  bind:this={ref}
+  bind:this="{ref}"
   type="radio"
   tabindex="-1"
-  {checked}
-  {id}
-  {name}
-  {title}
-  {value}
-  class:bx--structured-list-input={true}
+  checked="{checked}"
+  id="{id}"
+  name="{name}"
+  title="{title}"
+  value="{value}"
+  class:bx--structured-list-input="{true}"
   {...$$restProps}
-  on:change={() => {
+  on:change="{() => {
     update(value);
-  }} />
+  }}" />
diff --git a/src/StructuredList/StructuredListRow.svelte b/src/StructuredList/StructuredListRow.svelte
index 9fa87ed7..63e94b6e 100644
--- a/src/StructuredList/StructuredListRow.svelte
+++ b/src/StructuredList/StructuredListRow.svelte
@@ -22,9 +22,9 @@
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label
     role="presentation"
-    {tabindex}
-    class:bx--structured-list-row={true}
-    class:bx--structured-list-row--header-row={head}
+    tabindex="{tabindex}"
+    class:bx--structured-list-row="{true}"
+    class:bx--structured-list-row--header-row="{head}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -35,8 +35,8 @@
   </label>
 {:else}
   <div
-    class:bx--structured-list-row={true}
-    class:bx--structured-list-row--header-row={head}
+    class:bx--structured-list-row="{true}"
+    class:bx--structured-list-row--header-row="{head}"
     {...$$restProps}
     on:click
     on:mouseover
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 6b710c9a..6adc25cf 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -51,19 +51,19 @@
 <li
   tabindex="-1"
   role="presentation"
-  class:bx--tabs__nav-item={true}
-  class:bx--tabs__nav-item--disabled={disabled}
-  class:bx--tabs__nav-item--selected={selected}
+  class:bx--tabs__nav-item="{true}"
+  class:bx--tabs__nav-item--disabled="{disabled}"
+  class:bx--tabs__nav-item--selected="{selected}"
   {...$$restProps}
-  on:click|preventDefault={() => {
+  on:click|preventDefault="{() => {
     if (!disabled) {
       update(id);
     }
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:keydown={({ key }) => {
+  on:keydown="{({ key }) => {
     if (!disabled) {
       if (key === 'ArrowRight') {
         change(1);
@@ -73,16 +73,16 @@
         update(id);
       }
     }
-  }}>
+  }}">
   <a
-    bind:this={ref}
+    bind:this="{ref}"
     role="tab"
-    tabindex={disabled ? '-1' : tabindex}
-    aria-selected={selected}
-    aria-disabled={disabled}
-    {id}
-    {href}
-    class:bx--tabs__nav-link={true}>
+    tabindex="{disabled ? '-1' : tabindex}"
+    aria-selected="{selected}"
+    aria-disabled="{disabled}"
+    id="{id}"
+    href="{href}"
+    class:bx--tabs__nav-link="{true}">
     <slot>{label}</slot>
   </a>
 </li>
diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte
index adeefd4b..89bbc54e 100644
--- a/src/Tabs/TabContent.svelte
+++ b/src/Tabs/TabContent.svelte
@@ -18,11 +18,11 @@
 
 <div
   role="tabpanel"
-  aria-labelledby={tabId}
-  aria-hidden={!selected}
-  hidden={selected ? undefined : ''}
-  {id}
-  class:bx--tab-content={true}
+  aria-labelledby="{tabId}"
+  aria-hidden="{!selected}"
+  hidden="{selected ? undefined : ''}"
+  id="{id}"
+  class:bx--tab-content="{true}"
   {...$$restProps}>
   <slot />
 </div>
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index 98059272..df257669 100644
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@@ -109,37 +109,37 @@
 
 <div
   role="navigation"
-  class:bx--tabs={true}
-  class:bx--tabs--container={type === 'container'}
+  class:bx--tabs="{true}"
+  class:bx--tabs--container="{type === 'container'}"
   {...$$restProps}>
   <div
     role="listbox"
     tabindex="0"
-    class:bx--tabs-trigger={true}
-    aria-label={$$props['aria-label'] || 'listbox'}
-    on:click={() => {
+    class:bx--tabs-trigger="{true}"
+    aria-label="{$$props['aria-label'] || 'listbox'}"
+    on:click="{() => {
       dropdownHidden = !dropdownHidden;
-    }}
+    }}"
     on:keypress
-    on:keypress={() => {
+    on:keypress="{() => {
       dropdownHidden = !dropdownHidden;
-    }}>
+    }}">
     <a
       tabindex="-1"
-      class:bx--tabs-trigger-text={true}
-      href={triggerHref}
+      class:bx--tabs-trigger-text="{true}"
+      href="{triggerHref}"
       on:click
-      on:click={() => {
+      on:click="{() => {
         dropdownHidden = !dropdownHidden;
-      }}>
+      }}">
       {#if currentTab}{currentTab.label}{/if}
     </a>
-    <ChevronDownGlyph aria-hidden="true" title={iconDescription} />
+    <ChevronDownGlyph aria-hidden="true" title="{iconDescription}" />
   </div>
   <ul
     role="tablist"
-    class:bx--tabs__nav={true}
-    class:bx--tabs__nav--hidden={dropdownHidden}>
+    class:bx--tabs__nav="{true}"
+    class:bx--tabs__nav--hidden="{dropdownHidden}">
     <slot />
   </ul>
 </div>
diff --git a/src/Tabs/TabsSkeleton.svelte b/src/Tabs/TabsSkeleton.svelte
index 1f71ec9d..763660a3 100644
--- a/src/Tabs/TabsSkeleton.svelte
+++ b/src/Tabs/TabsSkeleton.svelte
@@ -7,23 +7,23 @@
 </script>
 
 <div
-  class:bx--tabs={true}
-  class:bx--skeleton={true}
+  class:bx--tabs="{true}"
+  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div class:bx--tabs-trigger={true}>
-    <div class:bx--tabs-trigger-text={true}>&nbsp;</div>
+  <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" />
+      <path d="M10 0L5 5 0 0z"></path>
     </svg>
   </div>
-  <ul class:bx--tabs__nav={true} class:bx--tabs__nav--hidden={true}>
+  <ul class:bx--tabs__nav="{true}" class:bx--tabs__nav--hidden="{true}">
     {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
-      <li class:bx--tabs__nav-item={true}>
-        <div class:bx--tabs__nav-link={true}>&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/Tag/Tag.Skeleton.svelte b/src/Tag/Tag.Skeleton.svelte
index 30924cd1..8071cd53 100644
--- a/src/Tag/Tag.Skeleton.svelte
+++ b/src/Tag/Tag.Skeleton.svelte
@@ -1,8 +1,8 @@
 <span
-  class:bx--tag={true}
-  class:bx--skeleton={true}
+  class:bx--tag="{true}"
+  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave />
+  on:mouseleave></span>
diff --git a/src/Tag/Tag.Story.svelte b/src/Tag/Tag.Story.svelte
index 8ed4998f..16070174 100644
--- a/src/Tag/Tag.Story.svelte
+++ b/src/Tag/Tag.Story.svelte
@@ -10,9 +10,9 @@
   {#if story === 'filter'}
     <Tag
       {...$$restProps}
-      on:click={() => {
+      on:click="{() => {
         console.log('click');
-      }}>
+      }}">
       {slot}
     </Tag>
   {:else if story === 'skeleton'}
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 148425e9..7cb2bc69 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -49,21 +49,21 @@
 {:else}
   {#if filter}
     <div
-      aria-label={title}
-      {id}
-      class:bx--tag={true}
-      class:bx--tag--disabled={disabled}
-      class:bx--tag--filter={filter}
+      aria-label="{title}"
+      id="{id}"
+      class:bx--tag="{true}"
+      class:bx--tag--disabled="{disabled}"
+      class:bx--tag--filter="{filter}"
       {...$$restProps}
       class="{type && `bx--tag--${type}`} {$$restProps.class}">
-      <slot props={{ class: 'bx--tag__label' }}>
-        <span class:bx--tag__label={true}>{type}</span>
+      <slot props="{{ class: 'bx--tag__label' }}">
+        <span class:bx--tag__label="{true}">{type}</span>
       </slot>
       <button
-        aria-labelledby={id}
-        class:bx--tag__close-icon={true}
-        {disabled}
-        {title}
+        aria-labelledby="{id}"
+        class:bx--tag__close-icon="{true}"
+        disabled="{disabled}"
+        title="{title}"
         on:click|stopPropagation
         on:mouseover
         on:mouseenter
@@ -73,8 +73,8 @@
     </div>
   {:else}
     <span
-      class:bx--tag={true}
-      class:bx--tag--disabled={disabled}
+      class:bx--tag="{true}"
+      class:bx--tag--disabled="{disabled}"
       {...$$restProps}
       class="{type && `bx--tag--${type}`} {$$restProps.class}"
       on:click
diff --git a/src/TextArea/TextArea.Skeleton.svelte b/src/TextArea/TextArea.Skeleton.svelte
index e2b265d8..bc18e9a6 100644
--- a/src/TextArea/TextArea.Skeleton.svelte
+++ b/src/TextArea/TextArea.Skeleton.svelte
@@ -7,12 +7,14 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-  <div class:bx--skeleton={true} class:bx--text-area={true} />
+  {#if !hideLabel}
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--skeleton="{true}" class:bx--text-area="{true}"></div>
 </div>
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index b2364799..75043a3e 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -93,51 +93,53 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class:bx--form-item={true}>
+  class:bx--form-item="{true}">
   {#if labelText && !hideLabel}
     <label
-      for={id}
-      class:bx--label={true}
-      class:bx--visually-hidden={hideLabel}
-      class:bx--label--disabled={disabled}>
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+      class:bx--label--disabled="{disabled}">
       {labelText}
     </label>
   {/if}
   {#if helperText}
     <div
-      class:bx--form__helper-text={true}
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
-  <div class:bx--text-area__wrapper={true} data-invalid={invalid || undefined}>
+  <div
+    class:bx--text-area__wrapper="{true}"
+    data-invalid="{invalid || undefined}">
     {#if invalid}
       <WarningFilled16 class="bx--text-area__invalid-icon" />
     {/if}
     <textarea
-      bind:this={ref}
-      aria-invalid={invalid || undefined}
-      aria-describedby={invalid ? errorId : undefined}
-      {disabled}
-      {id}
-      {name}
-      {cols}
-      {rows}
-      {value}
-      {placeholder}
-      class:bx--text-area={true}
-      class:bx--text-area--light={light}
-      class:bx--text-area--invalid={invalid}
+      bind:this="{ref}"
+      aria-invalid="{invalid || undefined}"
+      aria-describedby="{invalid ? errorId : undefined}"
+      disabled="{disabled}"
+      id="{id}"
+      name="{name}"
+      cols="{cols}"
+      rows="{rows}"
+      value="{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 }) => {
+      on:input="{({ target }) => {
         value = target.value;
-      }}
+      }}"
       on:focus
-      on:blur />
+      on:blur></textarea>
   </div>
   {#if invalid}
-    <div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
+    <div id="{errorId}" class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}
 </div>
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index d67b1825..bd595ed6 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -115,9 +115,9 @@
 </script>
 
 <div
-  class:bx--form-item={true}
-  class:bx--text-input-wrapper={true}
-  class:bx--password-input-wrapper={true}
+  class:bx--form-item="{true}"
+  class:bx--text-input-wrapper="{true}"
+  class:bx--password-input-wrapper="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -125,62 +125,62 @@
   on:mouseleave>
   {#if labelText}
     <label
-      for={id}
-      class:bx--label={true}
-      class:bx--visually-hidden={hideLabel}
-      class:bx--label--disabled={disabled}>
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+      class:bx--label--disabled="{disabled}">
       {labelText}
     </label>
   {/if}
   {#if helperText}
     <div
-      class:bx--form__helper-text={true}
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <div
-    class:bx--text-input__field-wrapper={true}
-    data-invalid={invalid || undefined}>
+    class:bx--text-input__field-wrapper="{true}"
+    data-invalid="{invalid || undefined}">
     {#if invalid}
       <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}
-      {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}
-      class={size && `bx--text-input--${size}`}
+      bind:this="{ref}"
+      data-invalid="{invalid || undefined}"
+      aria-invalid="{invalid || undefined}"
+      aria-describedby="{invalid ? errorId : undefined}"
+      id="{id}"
+      name="{name}"
+      placeholder="{placeholder}"
+      type="{type}"
+      value="{value}"
+      disabled="{disabled}"
+      class:bx--text-input="{true}"
+      class:bx--password-input="{true}"
+      class:bx--text-input--light="{light}"
+      class:bx--text-input--invalid="{invalid}"
+      class="{size && `bx--text-input--${size}`}"
       on:change
       on:input
-      on:input={({ target }) => {
+      on:input="{({ target }) => {
         value = target.value;
-      }}
+      }}"
       on:keydown
       on:focus
       on:blur />
     <button
       type="button"
-      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: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={() => {
+      on:click="{() => {
         type = type === 'password' ? 'text' : 'password';
-      }}>
-      <span class:bx--assistive-text={true}>
+      }}">
+      <span class:bx--assistive-text="{true}">
         {#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
       </span>
       {#if type === 'text'}
@@ -191,6 +191,6 @@
     </button>
   </div>
   {#if invalid}
-    <div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
+    <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
   {/if}
 </div>
diff --git a/src/TextInput/TextInput.Skeleton.svelte b/src/TextInput/TextInput.Skeleton.svelte
index 85cb90ff..8952d773 100644
--- a/src/TextInput/TextInput.Skeleton.svelte
+++ b/src/TextInput/TextInput.Skeleton.svelte
@@ -7,12 +7,14 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  {#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
-  <div class:bx--skeleton={true} class:bx--text-area={true} />
+  {#if !hideLabel}
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--skeleton="{true}" class:bx--text-area="{true}"></div>
 </div>
diff --git a/src/TextInput/TextInput.Story.svelte b/src/TextInput/TextInput.Story.svelte
index f5809d5b..291c7a3f 100644
--- a/src/TextInput/TextInput.Story.svelte
+++ b/src/TextInput/TextInput.Story.svelte
@@ -25,27 +25,27 @@
   <PasswordInput
     {...$$props}
     aria-level=""
-    on:keydown={(e) => {
+    on:keydown="{(e) => {
       console.log('on:keydown', e);
-    }} />
+    }}" />
 {:else if story === 'controlled'}
   <PasswordInput
     {...$$props}
-    {type}
-    on:keydown={(e) => {
+    type="{type}"
+    on:keydown="{(e) => {
       console.log('on:keydown', e);
-    }} />
+    }}" />
   <div>
     <button
-      on:click={() => {
+      on:click="{() => {
         type = 'text';
-      }}>
+      }}">
       Show password
     </button>
     <button
-      on:click={() => {
+      on:click="{() => {
         type = 'password';
-      }}>
+      }}">
       Hide password
     </button>
   </div>
@@ -54,10 +54,10 @@
     bind:ref
     {...$$props}
     bind:value
-    on:keydown={(e) => {
+    on:keydown="{(e) => {
       console.log('on:keydown', e);
-    }}
-    on:change={() => {
+    }}"
+    on:change="{() => {
       console.log('change');
-    }} />
+    }}" />
 {/if}
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index e321c9d8..3880e9f8 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -95,8 +95,8 @@
 </script>
 
 <div
-  class:bx--form-item={true}
-  class:bx--text-input-wrapper={true}
+  class:bx--form-item="{true}"
+  class:bx--text-input-wrapper="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -104,52 +104,52 @@
   on:mouseleave>
   {#if labelText}
     <label
-      for={id}
-      class:bx--label={true}
-      class:bx--visually-hidden={hideLabel}
-      class:bx--label--disabled={disabled}>
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+      class:bx--label--disabled="{disabled}">
       {labelText}
     </label>
   {/if}
   {#if helperText}
     <div
-      class:bx--form__helper-text={true}
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <div
-    data-invalid={invalid || undefined}
-    class:bx--text-input__field-wrapper={true}>
+    data-invalid="{invalid || undefined}"
+    class:bx--text-input__field-wrapper="{true}">
     {#if invalid}
       <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}
-      {disabled}
-      {id}
-      {name}
-      {placeholder}
-      {type}
-      {value}
-      {required}
-      class:bx--text-input={true}
-      class:bx--text-input--light={light}
-      class:bx--text-input--invalid={invalid}
-      class={size && `bx--text-input--${size}`}
+      bind:this="{ref}"
+      data-invalid="{invalid || undefined}"
+      aria-invalid="{invalid || undefined}"
+      aria-describedby="{invalid ? errorId : undefined}"
+      disabled="{disabled}"
+      id="{id}"
+      name="{name}"
+      placeholder="{placeholder}"
+      type="{type}"
+      value="{value}"
+      required="{required}"
+      class:bx--text-input="{true}"
+      class:bx--text-input--light="{light}"
+      class:bx--text-input--invalid="{invalid}"
+      class="{size && `bx--text-input--${size}`}"
       on:change
       on:input
-      on:input={({ target }) => {
+      on:input="{({ target }) => {
         value = target.value;
-      }}
+      }}"
       on:keydown
       on:focus
       on:blur />
   </div>
   {#if invalid}
-    <div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
+    <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
   {/if}
 </div>
diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte
index 87d08327..3ce1997a 100644
--- a/src/Tile/ClickableTile.svelte
+++ b/src/Tile/ClickableTile.svelte
@@ -14,21 +14,21 @@
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <a
-  class:bx--tile={true}
-  class:bx--tile--clickable={true}
-  class:bx--tile--is-clicked={clicked}
-  class:bx--tile--light={light}
+  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={() => {
+  on:click="{() => {
     clicked = !clicked;
-  }}
+  }}"
   on:keydown
-  on:keydown={({ key }) => {
+  on:keydown="{({ key }) => {
     if (key === ' ' || key === 'Enter') {
       clicked = !clicked;
     }
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave>
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index e708683a..53df6ac2 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -73,33 +73,33 @@
 </script>
 
 <div
-  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}
+  bind:this="{ref}"
+  id="{id}"
+  tabindex="{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`}
+  style="{expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
   on:click
-  on:click={() => {
+  on:click="{() => {
     expanded = !expanded;
-  }}
+  }}"
   on:keypress
-  on:keypress={(e) => {
+  on:keypress="{(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       expanded = !expanded;
     }
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div bind:this={refContent}>
-    <div bind:this={refAbove} class:bx--tile-content={true}>
+  <div bind:this="{refContent}">
+    <div bind:this="{refAbove}" class:bx--tile-content="{true}">
       <span
-        class:bx--tile-content__above-the-fold={true}
+        class:bx--tile-content__above-the-fold="{true}"
         on:click
         on:mouseover
         on:mouseenter
@@ -108,18 +108,18 @@
       </span>
     </div>
     <button
-      aria-expanded={expanded}
-      aria-label={expanded ? tileExpandedIconText : tileCollapsedIconText}
-      class:bx--tile__chevron={true}>
+      aria-expanded="{expanded}"
+      aria-label="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
+      class:bx--tile__chevron="{true}">
       <ChevronDown16 />
     </button>
-    <div class:bx--tile-content={true}>
+    <div class:bx--tile-content="{true}">
       <span
         on:click
         on:mouseover
         on:mouseenter
         on:mouseleave
-        class:bx--tile-content__below-the-fold={true}>
+        class:bx--tile-content__below-the-fold="{true}">
         <slot name="below" />
       </span>
     </div>
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 42f03cd5..8f09c51d 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -53,38 +53,40 @@
 
 <input
   type="radio"
-  {id}
-  {name}
-  {value}
-  {checked}
-  class:bx--tile-input={true}
+  id="{id}"
+  name="{name}"
+  value="{value}"
+  checked="{checked}"
+  class:bx--tile-input="{true}"
   on:change
-  on:change={() => {
+  on:change="{() => {
     update(value);
-  }} />
+  }}" />
 <label
-  for={id}
-  {tabindex}
-  class:bx--tile={true}
-  class:bx--tile--selectable={true}
-  class:bx--tile--is-selected={checked}
-  class:bx--tile--light={light}
+  for="{id}"
+  tabindex="{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={(e) => {
+  on:keydown="{(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       update(value);
     }
-  }}>
-  <span class:bx--tile__checkmark={true}>
-    <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
+  }}">
+  <span class:bx--tile__checkmark="{true}">
+    <CheckmarkFilled16
+      aria-label="{iconDescription}"
+      title="{iconDescription}" />
   </span>
-  <span class:bx--tile-content={true}>
+  <span class:bx--tile-content="{true}">
     <slot />
   </span>
 </label>
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index 13483a77..7c2d9a2b 100644
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@@ -62,41 +62,43 @@
 </script>
 
 <input
-  bind:this={ref}
+  bind:this="{ref}"
   type="checkbox"
   tabindex="-1"
-  class:bx--tile-input={true}
-  checked={selected}
-  {id}
-  {value}
-  {name}
-  {title} />
+  class:bx--tile-input="{true}"
+  checked="{selected}"
+  id="{id}"
+  value="{value}"
+  name="{name}"
+  title="{title}" />
 <label
-  for={id}
-  {tabindex}
-  class:bx--tile={true}
-  class:bx--tile--selectable={true}
-  class:bx--tile--is-selected={selected}
-  class:bx--tile--light={light}
+  for="{id}"
+  tabindex="{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={() => {
+  on:click|preventDefault="{() => {
     selected = !selected;
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={(e) => {
+  on:keydown="{(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       selected = !selected;
     }
-  }}>
-  <span class:bx--tile__checkmark={true}>
-    <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
+  }}">
+  <span class:bx--tile__checkmark="{true}">
+    <CheckmarkFilled16
+      aria-label="{iconDescription}"
+      title="{iconDescription}" />
   </span>
-  <span class:bx--tile-content={true}>
+  <span class:bx--tile-content="{true}">
     <slot />
   </span>
 </label>
diff --git a/src/Tile/Tile.Story.svelte b/src/Tile/Tile.Story.svelte
index 8230fbca..dc236fe7 100644
--- a/src/Tile/Tile.Story.svelte
+++ b/src/Tile/Tile.Story.svelte
@@ -29,13 +29,13 @@
         {...$$props}
         id="tile-1"
         name="tiles"
-        bind:selected={selectedTile1}
-        on:select={({ detail }) => {
+        bind:selected="{selectedTile1}"
+        on:select="{({ detail }) => {
           console.log('on:select', detail);
-        }}
-        on:deselect={({ detail }) => {
+        }}"
+        on:deselect="{({ detail }) => {
           console.log('on:deselect', detail);
-        }}>
+        }}">
         Multi-select Tile
       </SelectableTile>
       <SelectableTile {...$$props} id="tile-2" name="tiles">
@@ -48,7 +48,11 @@
   {:else if story === 'selectable'}
     <TileGroup legend="Selectable Tile Group" bind:selected>
       {#each radioTiles as { value, id, labelText }, i (id)}
-        <RadioTile {...$$props} {value} {id} {labelText}>
+        <RadioTile
+          {...$$props}
+          value="{value}"
+          id="{id}"
+          labelText="{labelText}">
           Selectable Tile
         </RadioTile>
       {/each}
diff --git a/src/Tile/Tile.svelte b/src/Tile/Tile.svelte
index 5135447f..e655c250 100644
--- a/src/Tile/Tile.svelte
+++ b/src/Tile/Tile.svelte
@@ -7,8 +7,8 @@
 </script>
 
 <div
-  class:bx--tile={true}
-  class:bx--tile--light={light}
+  class:bx--tile="{true}"
+  class:bx--tile--light="{light}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index 023c5633..eda7a7c9 100644
--- a/src/Tile/TileGroup.svelte
+++ b/src/Tile/TileGroup.svelte
@@ -39,9 +39,9 @@
   $: dispatch("select", $selectedValue);
 </script>
 
-<fieldset {disabled} class:bx--tile-group={true} {...$$restProps}>
+<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
   {#if legend}
-    <legend class:bx--label={true}>{legend}</legend>
+    <legend class:bx--label="{true}">{legend}</legend>
   {/if}
   <div>
     <slot />
diff --git a/src/TimePicker/TimePicker.Story.svelte b/src/TimePicker/TimePicker.Story.svelte
index e640a870..6fdb3e3f 100644
--- a/src/TimePicker/TimePicker.Story.svelte
+++ b/src/TimePicker/TimePicker.Story.svelte
@@ -13,14 +13,14 @@
   <TimePickerSelect
     {...$$props.select}
     id="time-picker-select-1"
-    bind:value={select1}>
+    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}>
+    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/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index c2f6c35f..bcc33ec3 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/src/TimePicker/TimePicker.svelte
@@ -85,52 +85,52 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <div
-    class:bx--time-picker={true}
-    class:bx--time-picker--light={light}
-    class:bx--select--light={light}>
-    <div class:bx--time-picker__input={true}>
+    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
-          for={id}
-          class:bx--label={true}
-          class:bx--visually-hidden={hideLabel}
-          class:bx--label--disabled={disabled}>
+          for="{id}"
+          class:bx--label="{true}"
+          class:bx--visually-hidden="{hideLabel}"
+          class:bx--label--disabled="{disabled}">
           {labelText}
         </label>
       {/if}
       <input
-        bind:this={ref}
-        data-invalid={invalid || undefined}
-        {pattern}
-        {placeholder}
-        {maxlength}
-        {id}
-        {name}
-        {type}
-        {value}
-        {disabled}
-        class:bx--time-picker__input-field={true}
-        class:bx--text-input={true}
-        class:bx--text-input--light={light}
-        class:bx--text-input--invalid={invalid}
+        bind:this="{ref}"
+        data-invalid="{invalid || undefined}"
+        pattern="{pattern}"
+        placeholder="{placeholder}"
+        maxlength="{maxlength}"
+        id="{id}"
+        name="{name}"
+        type="{type}"
+        value="{value}"
+        disabled="{disabled}"
+        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 }) => {
+        on:input="{({ target }) => {
           value = target.value;
-        }}
+        }}"
         on:focus
         on:blur />
     </div>
     <slot />
   </div>
   {#if invalid}
-    <div class:bx--form-requirement={true}>{invalidText}</div>
+    <div class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}
 </div>
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 525b7591..0cbb36fd 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@@ -60,8 +60,8 @@
 </script>
 
 <div
-  class:bx--select={true}
-  class:bx--time-picker__select={true}
+  class:bx--select="{true}"
+  class:bx--time-picker__select="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -69,27 +69,27 @@
   on:mouseleave>
   {#if labelText}
     <label
-      for={id}
-      class:bx--label={true}
-      class:bx--visually-hidden={hideLabel}>
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}">
       {labelText}
     </label>
   {/if}
   <!-- svelte-ignore a11y-no-onchange -->
   <select
-    bind:this={ref}
-    {id}
-    {name}
-    {disabled}
-    {value}
-    class:bx--select-input={true}
-    on:change={({ target }) => {
+    bind:this="{ref}"
+    id="{id}"
+    name="{name}"
+    disabled="{disabled}"
+    value="{value}"
+    class:bx--select-input="{true}"
+    on:change="{({ target }) => {
       selectedValue.set(target.value);
-    }}>
+    }}">
     <slot />
   </select>
   <ChevronDownGlyph
-    aria-label={iconDescription}
-    title={iconDescription}
+    aria-label="{iconDescription}"
+    title="{iconDescription}"
     class="bx--select__arrow" />
 </div>
diff --git a/src/Toggle/Toggle.Skeleton.svelte b/src/Toggle/Toggle.Skeleton.svelte
index 7a9537b2..0a60f2b5 100644
--- a/src/Toggle/Toggle.Skeleton.svelte
+++ b/src/Toggle/Toggle.Skeleton.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -21,19 +21,19 @@
   on:mouseleave>
   <input
     type="checkbox"
-    {id}
-    class:bx--toggle={true}
-    class:bx--skeleton={true} />
+    id="{id}"
+    class:bx--toggle="{true}"
+    class:bx--skeleton="{true}" />
   <label
-    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
-    for={id}
-    class:bx--toggle__label={true}
-    class:bx--skeleton={true}>
+    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
+    for="{id}"
+    class:bx--toggle__label="{true}"
+    class:bx--skeleton="{true}">
     {#if labelText}
-      <span class:bx--toggle__label-text={true}>{labelText}</span>
+      <span class:bx--toggle__label-text="{true}">{labelText}</span>
     {/if}
-    <span class:bx--toggle__text--left={true} />
-    <span class:bx--toggle__appearance={true} />
-    <span class:bx--toggle__text--right={true} />
+    <span class:bx--toggle__text--left="{true}"></span>
+    <span class:bx--toggle__appearance="{true}"></span>
+    <span class:bx--toggle__text--right="{true}"></span>
   </label>
 </div>
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 4fbb4655..612a5e9b 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -51,34 +51,36 @@
   on:mouseleave>
   <input
     type="checkbox"
-    class:bx--toggle-input={true}
-    checked={toggled}
+    class:bx--toggle-input="{true}"
+    checked="{toggled}"
     on:change
-    on:change={() => {
+    on:change="{() => {
       toggled = !toggled;
-    }}
+    }}"
     on:keyup
-    on:keyup={(e) => {
+    on:keyup="{(e) => {
       if (e.key === ' ' || e.key === 'Enter') {
         e.preventDefault();
         toggled = !toggled;
       }
-    }}
+    }}"
     on:focus
     on:blur
-    {disabled}
-    {id}
-    {name} />
+    disabled="{disabled}"
+    id="{id}"
+    name="{name}" />
   <label
-    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
-    for={id}
-    class:bx--toggle-input__label={true}>
+    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
+    for="{id}"
+    class:bx--toggle-input__label="{true}">
     {labelText}
-    <span class:bx--toggle__switch={true}>
-      <span aria-hidden="true" class:bx--toggle__text--off={true}>
+    <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
+        aria-hidden="true"
+        class:bx--toggle__text--on="{true}">{labelB}</span>
     </span>
   </label>
 </div>
diff --git a/src/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/ToggleSmall/ToggleSmall.Skeleton.svelte
index fe66cc53..cdfa7041 100644
--- a/src/ToggleSmall/ToggleSmall.Skeleton.svelte
+++ b/src/ToggleSmall/ToggleSmall.Skeleton.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -21,26 +21,26 @@
   on:mouseleave>
   <input
     type="checkbox"
-    {id}
-    class:bx--toggle={true}
-    class:bx--toggle--small={true}
-    class:bx--skeleton={true} />
+    id="{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:bx--toggle__label={true}
-    class:bx--skeleton={true}
-    for={id}>
+    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
+    class:bx--toggle__label="{true}"
+    class:bx--skeleton="{true}"
+    for="{id}">
     {#if labelText}
-      <span class:bx--toggle__label-text={true}>{labelText}</span>
+      <span class:bx--toggle__label-text="{true}">{labelText}</span>
     {/if}
-    <span class:bx--toggle__appearance={true}>
+    <span class:bx--toggle__appearance="{true}">
       <svg
-        class:bx--toggle__check={true}
+        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" />
+          d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"></path>
       </svg>
     </span>
   </label>
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte
index 1a3de00a..d4e82654 100644
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ b/src/ToggleSmall/ToggleSmall.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -51,42 +51,44 @@
   on:mouseleave>
   <input
     type="checkbox"
-    checked={toggled}
-    {disabled}
-    {id}
-    {name}
-    class:bx--toggle-input={true}
-    class:bx--toggle-input--small={true}
+    checked="{toggled}"
+    disabled="{disabled}"
+    id="{id}"
+    name="{name}"
+    class:bx--toggle-input="{true}"
+    class:bx--toggle-input--small="{true}"
     on:change
-    on:change={() => {
+    on:change="{() => {
       toggled = !toggled;
-    }}
+    }}"
     on:keyup
-    on:keyup={(e) => {
+    on:keyup="{(e) => {
       if (e.key === ' ' || e.key === 'Enter') {
         e.preventDefault();
         toggled = !toggled;
       }
-    }}
+    }}"
     on:focus
     on:blur />
   <label
-    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
-    for={id}
-    class:bx--toggle-input__label={true}>
+    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
+    for="{id}"
+    class:bx--toggle-input__label="{true}">
     {labelText}
-    <span class:bx--toggle__switch={true}>
+    <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" />
+        class:bx--toggle__check="{true}">
+        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
       </svg>
-      <span aria-hidden="true" class:bx--toggle__text--off={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
+        aria-hidden="true"
+        class:bx--toggle__text--on="{true}">{labelB}</span>
     </span>
   </label>
 </div>
diff --git a/src/Tooltip/Tooltip.Story.svelte b/src/Tooltip/Tooltip.Story.svelte
index 785384b7..2c9b1dce 100644
--- a/src/Tooltip/Tooltip.Story.svelte
+++ b/src/Tooltip/Tooltip.Story.svelte
@@ -27,13 +27,13 @@
       {...$$props}
       bind:ref
       bind:open
-      on:open={() => {
+      on:open="{() => {
         console.log('on:open');
-      }}
-      on:close={() => {
+      }}"
+      on:close="{() => {
         console.log('on:close');
-      }}>
-      <div slot="icon" class="custom-icon-class" />
+      }}">
+      <div slot="icon" class="custom-icon-class"></div>
       <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
@@ -47,16 +47,16 @@
   {:else if story === 'uncontrolled'}
     <Button
       style="padding: 15px 20px; margin: 4px 20px"
-      on:click={() => {
+      on:click="{() => {
         open = false;
-      }}>
+      }}">
       Hide
     </Button>
     <Button
       style="padding: 15px 20px; margin: 4px 20px"
-      on:click={() => {
+      on:click="{() => {
         open = true;
-      }}>
+      }}">
       Show
     </Button>
     <div style="padding: 15px 20px; margin: 4px 20px">
@@ -70,13 +70,13 @@
       {...$$props}
       bind:ref
       bind:open
-      on:open={() => {
+      on:open="{() => {
         console.log('on:open');
-      }}
-      on:close={() => {
+      }}"
+      on:close="{() => {
         console.log('on:close');
-      }}
-      icon={story === 'custom icon only' ? OverflowMenuVertical16 : undefined}>
+      }}"
+      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
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 86261e99..763023c9 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -182,50 +182,50 @@
 </script>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (!programmatic && open && refTooltip && !refTooltip.contains(target)) {
       open = false;
     }
-  }} />
+  }}" />
 
 <div {...$$restProps} style="{$$restProps.style}; position: relative;">
   {#if !hideIcon}
-    <div bind:this={ref} id={triggerId} class:bx--tooltip__label={true}>
+    <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
       <slot name="triggerText">{triggerText}</slot>
       <div
-        bind:this={refIcon}
+        bind:this="{refIcon}"
         {...buttonProps}
-        on:click|preventDefault|stopPropagation={openMenu}
-        on:focus={openMenu}
-        on:blur={onBlur}
-        on:keydown={onKeydown}>
+        on:click|preventDefault|stopPropagation="{openMenu}"
+        on:focus="{openMenu}"
+        on:blur="{onBlur}"
+        on:keydown="{onKeydown}">
         <slot name="icon">
-          <svelte:component this={icon} name={iconName} />
+          <svelte:component this="{icon}" name="{iconName}" />
         </slot>
       </div>
     </div>
   {:else}
     <div
-      bind:this={ref}
+      bind:this="{ref}"
       {...buttonProps}
-      on:click|preventDefault|stopPropagation={openMenu}
-      on:focus={openMenu}
-      on:blur={onBlur}
-      on:keydown={onKeydown}>
+      on:click|preventDefault|stopPropagation="{openMenu}"
+      on:focus="{openMenu}"
+      on:blur="{onBlur}"
+      on:keydown="{onKeydown}">
       <slot name="triggerText">{triggerText}</slot>
     </div>
   {/if}
   {#if open}
     <div
-      bind:this={refTooltip}
+      bind:this="{refTooltip}"
       role="tooltip"
       tabindex="0"
-      id={tooltipId}
-      data-floating-menu-direction={direction}
-      class:bx--tooltip={true}
-      class:bx--tooltip--shown={open}
-      on:blur={closeMenu}>
-      <span class:bx--tooltip__caret={true} />
+      id="{tooltipId}"
+      data-floating-menu-direction="{direction}"
+      class:bx--tooltip="{true}"
+      class:bx--tooltip--shown="{open}"
+      on:blur="{closeMenu}">
+      <span class:bx--tooltip__caret="{true}"></span>
       <slot />
     </div>
   {/if}
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
index 7ac9c5a2..99f06c60 100644
--- a/src/TooltipDefinition/TooltipDefinition.svelte
+++ b/src/TooltipDefinition/TooltipDefinition.svelte
@@ -34,31 +34,31 @@
 </script>
 
 <svelte:body
-  on:keydown={({ key }) => {
+  on:keydown="{({ key }) => {
     if (key === 'Escape') {
       hidden = true;
     }
-  }} />
+  }}" />
 
 <div
-  class:bx--tooltip--definition={true}
-  class:bx--tooltip--a11y={true}
+  class:bx--tooltip--definition="{true}"
+  class:bx--tooltip--a11y="{true}"
   {...$$restProps}
-  on:mouseenter={() => {
+  on:mouseenter="{() => {
     hidden = false;
     visible = true;
-  }}
-  on:mouseleave={() => {
+  }}"
+  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}
+    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
@@ -66,10 +66,12 @@
     on:mouseenter
     on:mouseleave
     on:focus
-    on:focus={() => {
+    on:focus="{() => {
       hidden = false;
-    }}>
+    }}">
     <slot />
   </button>
-  <div role="tooltip" {id} class:bx--assistive-text={true}>{tooltipText}</div>
+  <div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
+    {tooltipText}
+  </div>
 </div>
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index 9a238e87..ae80f8ac 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -33,18 +33,18 @@
 </script>
 
 <svelte:body
-  on:keydown={({ key }) => {
+  on:keydown="{({ key }) => {
     if (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}
+  bind:this="{ref}"
+  aria-describedby="{id}"
+  class:bx--tooltip__trigger="{true}"
+  class:bx--tooltip--a11y="{true}"
+  class:bx--tooltip--hidden="{hidden}"
   {...$$restProps}
   class="{direction && `bx--tooltip--${direction}`}
     {align && `bx--tooltip--align-${align}`}
@@ -52,14 +52,14 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseenter={() => {
+  on:mouseenter="{() => {
     hidden = false;
-  }}
+  }}"
   on:mouseleave
   on:focus
-  on:focus={() => {
+  on:focus="{() => {
     hidden = false;
-  }}>
-  <span {id} class:bx--assistive-text={true}>{tooltipText}</span>
+  }}">
+  <span id="{id}" class:bx--assistive-text="{true}">{tooltipText}</span>
   <slot />
 </button>
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index d21cb300..59e560e7 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -6,6 +6,6 @@
   export let id = "main-content";
 </script>
 
-<main {id} class:bx--content={true} {...$$restProps}>
+<main id="{id}" class:bx--content="{true}" {...$$restProps}>
   <slot />
 </main>
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index c3d82d37..89d47400 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -46,16 +46,16 @@
     : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
 </script>
 
-<svelte:window bind:innerWidth={winWidth} />
+<svelte:window bind:innerWidth="{winWidth}" />
 
-<header role="banner" aria-label={ariaLabel} class:bx--header={true}>
+<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
   {#if winWidth < 1056}
-    <HamburgerMenu bind:isOpen={isSideNavOpen} />
+    <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
   {/if}
-  <a {href} class:bx--header__name={true} {...$$restProps} on:click>
+  <a href="{href}" class:bx--header__name="{true}" {...$$restProps} on:click>
     {#if company}
-      <span class:bx--header__name--prefix={true}>{company}&nbsp;</span>
+      <span class:bx--header__name--prefix="{true}">{company}&nbsp;</span>
     {/if}
     <slot name="platform">{platformName}</slot>
   </a>
diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index fc7394bb..50b0b50b 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -50,26 +50,26 @@
 </style>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
       isOpen = false;
       dispatch('close');
     }
-  }} />
+  }}" />
 
 <div>
   <button
-    bind:this={ref}
+    bind:this="{ref}"
     type="button"
-    class:bx--header__action={true}
-    class:bx--header__action--active={isOpen}
-    class:action-text={text}
+    class:bx--header__action="{true}"
+    class:bx--header__action--active="{isOpen}"
+    class:action-text="{text}"
     {...$$restProps}
     on:click
-    on:click|stopPropagation={() => {
+    on:click|stopPropagation="{() => {
       isOpen = !isOpen;
       dispatch(isOpen ? 'open' : 'close');
-    }}>
+    }}">
     <Icon {...icon} />
     <slot name="text">
       {#if text}<span>{text}</span>{/if}
@@ -77,10 +77,10 @@
   </button>
   {#if isOpen}
     <div
-      bind:this={refPanel}
-      class:bx--header-panel={true}
-      class:bx--header-panel--expanded={true}
-      transition:slide={{ duration: 200 }}>
+      bind:this="{refPanel}"
+      class:bx--header-panel="{true}"
+      class:bx--header-panel--expanded="{true}"
+      transition:slide="{{ duration: 200 }}">
       <slot />
     </div>
   {/if}
diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
index 29813315..d6a8b582 100644
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -31,10 +31,10 @@
 </style>
 
 <a
-  class:bx--header__action={true}
-  class:bx--header__action--active={linkIsActive}
-  class:action-link={true}
+  class:bx--header__action="{true}"
+  class:bx--header__action--active="{linkIsActive}"
+  class:action-link="{true}"
   {...$$restProps}
-  {href}>
+  href="{href}">
   <Icon {...icon} />
 </a>
diff --git a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
index fc743a95..d1baa2b3 100644
--- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
@@ -134,76 +134,76 @@
 </style>
 
 <svelte:window
-  on:mouseup={({ target }) => {
+  on:mouseup="{({ target }) => {
     if (target && elTypeSearch) {
       if (!elTypeSearch.contains(target)) {
         searchIsActive = false;
         isSearchFocus = false;
       }
     }
-  }} />
+  }}" />
 
 <div
-  bind:this={elTypeSearch}
+  bind:this="{elTypeSearch}"
   role="search"
   class="search-wrapper"
-  class:search-wrapper-hidden={!searchIsActive}
-  class:search-focus={isSearchFocus || searchIsActive}>
+  class:search-wrapper-hidden="{!searchIsActive}"
+  class:search-focus="{isSearchFocus || searchIsActive}">
   <div
     id="right-panel-action-search"
     class="search-wrapper-2"
     role="combobox"
-    aria-expanded={searchIsActive}>
+    aria-expanded="{searchIsActive}">
     <button
-      tabindex={searchTabIndex}
+      tabindex="{searchTabIndex}"
       aria-label="Search"
-      class:bx--header__action={true}
-      class:btn-search={true}
-      class:btn-search-disabled={searchIsActive}
-      on:click={() => {
+      class:bx--header__action="{true}"
+      class:btn-search="{true}"
+      class:btn-search-disabled="{searchIsActive}"
+      on:click="{() => {
         isSearchFocus = true;
         searchIsActive = true;
         dispatch('focusInputSearch');
-      }}
+      }}"
       type="button"
-      on:keydown={({ key }) => {
+      on:keydown="{({ key }) => {
         if (key === 'Enter') {
           searchIsActive = !searchIsActive;
         }
-      }}>
-      <Icon title="Search" tabindex="0" render={Search20} />
+      }}">
+      <Icon title="Search" tabindex="0" render="{Search20}" />
     </button>
     <input
-      bind:this={elInput}
+      bind:this="{elInput}"
       id="input-search-field"
       type="text"
       autocomplete="off"
-      tabindex={closeTabIndex}
+      tabindex="{closeTabIndex}"
       class="input-search"
-      class:input-hidden={!searchIsActive}
+      class:input-hidden="{!searchIsActive}"
       placeholder="Search"
-      on:focus={() => dispatch('focusInputSearch')}
-      on:focusout={() => dispatch('focusOutInputSearch')}
-      on:input={dispatchInputs} />
+      on:focus="{() => dispatch('focusInputSearch')}"
+      on:focusout="{() => dispatch('focusOutInputSearch')}"
+      on:input="{dispatchInputs}" />
     <button
       id="right-panel-close-search"
-      tabindex={closeTabIndex}
-      class:bx--header__action={true}
-      class:btn-clear={true}
-      class:btn-clear-hidden={!searchIsActive}
+      tabindex="{closeTabIndex}"
+      class:bx--header__action="{true}"
+      class:btn-clear="{true}"
+      class:btn-clear-hidden="{!searchIsActive}"
       type="button"
       aria-label="Clear search"
-      on:click={() => {
+      on:click="{() => {
         isSearchFocus = false;
         searchIsActive = false;
         searchStore.clear();
-      }}
-      on:keydown={({ key }) => {
+      }}"
+      on:keydown="{({ key }) => {
         if (key === 'Enter') {
           searchIsActive = !searchIsActive;
         }
-      }}>
-      <Icon title="Close" tabindex="0" render={Close20} />
+      }}">
+      <Icon title="Close" tabindex="0" render="{Close20}" />
     </button>
   </div>
 </div>
diff --git a/src/UIShell/GlobalHeader/HeaderNav.svelte b/src/UIShell/GlobalHeader/HeaderNav.svelte
index 09a1fe3f..1a492822 100644
--- a/src/UIShell/GlobalHeader/HeaderNav.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNav.svelte
@@ -6,8 +6,11 @@
   export let ariaLabel = undefined;
 </script>
 
-<nav aria-label={ariaLabel} class:bx--header__nav={true} {...$$restProps}>
-  <ul role="menubar" aria-label={ariaLabel} class:bx--header__menu-bar={true}>
+<nav aria-label="{ariaLabel}" class:bx--header__nav="{true}" {...$$restProps}>
+  <ul
+    role="menubar"
+    aria-label="{ariaLabel}"
+    class:bx--header__menu-bar="{true}">
     <slot />
   </ul>
 </nav>
diff --git a/src/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
index a2cf6f9f..de86f1e2 100644
--- a/src/UIShell/GlobalHeader/HeaderNavItem.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
@@ -16,8 +16,8 @@
   <a
     role="menuitem"
     tabindex="0"
-    {href}
-    class:bx--header__menu-item={true}
+    href="{href}"
+    class:bx--header__menu-item="{true}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -27,6 +27,6 @@
     on:keydown
     on:focus
     on:blur>
-    <span class:bx--text-truncate--end={true}>{text}</span>
+    <span class:bx--text-truncate--end="{true}">{text}</span>
   </a>
 </li>
diff --git a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
index c1dea89f..441d8b1c 100644
--- a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
@@ -29,7 +29,7 @@
 </script>
 
 <svelte:window
-  on:mouseup={({ target }) => {
+  on:mouseup="{({ target }) => {
     if (ref.contains(target) || target === ref) {
       expanded = !expanded;
     } else {
@@ -37,26 +37,26 @@
         expanded = false;
       }
     }
-  }} />
+  }}" />
 
-<li class:bx--header__submenu={true} title={iconDescription}>
+<li class:bx--header__submenu="{true}" title="{iconDescription}">
   <a
-    bind:this={ref}
+    bind:this="{ref}"
     role="menuitem"
     tabindex="0"
     aria-haspopup="menu"
-    aria-expanded={expanded}
-    aria-label={text}
-    {href}
-    class:bx--header__menu-item={true}
-    class:bx--header__menu-title={true}
+    aria-expanded="{expanded}"
+    aria-label="{text}"
+    href="{href}"
+    class:bx--header__menu-item="{true}"
+    class:bx--header__menu-title="{true}"
     {...$$restProps}
     on:keydown
-    on:keydown={({ key }) => {
+    on:keydown="{({ key }) => {
       if (key === 'Enter') {
         expanded = !expanded;
       }
-    }}
+    }}"
     on:click|preventDefault
     on:mouseover
     on:mouseenter
@@ -66,10 +66,10 @@
     on:blur>
     {text}
     <ChevronDown16
-      aria-label={iconDescription}
+      aria-label="{iconDescription}"
       class="bx--header__menu-arrow" />
   </a>
-  <ul role="menu" aria-label={text} class:bx--header__menu={true}>
+  <ul role="menu" aria-label="{text}" class:bx--header__menu="{true}">
     <slot />
   </ul>
 </li>
diff --git a/src/UIShell/GlobalHeader/HeaderPanelLink.svelte b/src/UIShell/GlobalHeader/HeaderPanelLink.svelte
index 1c85d50d..bfd880e2 100644
--- a/src/UIShell/GlobalHeader/HeaderPanelLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderPanelLink.svelte
@@ -6,8 +6,8 @@
   export let href = undefined;
 </script>
 
-<li class:bx--switcher__item={true}>
-  <a {href} class:bx--switcher__item-link={true} {...$$restProps}>
+<li class:bx--switcher__item="{true}">
+  <a href="{href}" class:bx--switcher__item-link="{true}" {...$$restProps}>
     <slot />
   </a>
 </li>
diff --git a/src/UIShell/GlobalHeader/HeaderPanelLinks.svelte b/src/UIShell/GlobalHeader/HeaderPanelLinks.svelte
index 1f10ab39..59859153 100644
--- a/src/UIShell/GlobalHeader/HeaderPanelLinks.svelte
+++ b/src/UIShell/GlobalHeader/HeaderPanelLinks.svelte
@@ -1,3 +1,3 @@
-<ul class:bx--switcher__item={true}>
+<ul class:bx--switcher__item="{true}">
   <slot />
 </ul>
diff --git a/src/UIShell/GlobalHeader/HeaderUtilities.svelte b/src/UIShell/GlobalHeader/HeaderUtilities.svelte
index 460c8c70..c9942f4e 100644
--- a/src/UIShell/GlobalHeader/HeaderUtilities.svelte
+++ b/src/UIShell/GlobalHeader/HeaderUtilities.svelte
@@ -1,3 +1,3 @@
-<div class:bx--header__global={true}>
+<div class:bx--header__global="{true}">
   <slot />
 </div>
diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte
index 53dcb38b..78c803bc 100644
--- a/src/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/UIShell/SideNav/HamburgerMenu.svelte
@@ -20,15 +20,15 @@
 <button
   type="button"
   title="Open menu"
-  aria-label={ariaLabel}
-  class:bx--header__action={true}
-  class:bx--header__menu-trigger={true}
-  class:bx--header__menu-toggle={true}
+  aria-label="{ariaLabel}"
+  class:bx--header__action="{true}"
+  class:bx--header__menu-trigger="{true}"
+  class:bx--header__menu-toggle="{true}"
   {...$$restProps}
-  transition:fly={{ x: -200, delay: 50, duration: 250 }}
+  transition:fly="{{ x: -200, delay: 50, duration: 250 }}"
   on:click
-  on:click={() => (isOpen = !isOpen)}>
+  on:click="{() => (isOpen = !isOpen)}">
   <Icon
-    title={isOpen ? 'Close' : 'Open Menu'}
-    render={isOpen ? Close20 : Menu20} />
+    title="{isOpen ? 'Close' : 'Open Menu'}"
+    render="{isOpen ? Close20 : Menu20}" />
 </button>
diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte
index d60130b1..f6cb5cd0 100644
--- a/src/UIShell/SideNav/SideNav.svelte
+++ b/src/UIShell/SideNav/SideNav.svelte
@@ -20,19 +20,19 @@
 
 {#if fixed}
   <div
-    on:click={() => {
+    on:click="{() => {
       isOpen = false;
-    }}
-    class:bx--side-nav__overlay={true}
-    class:bx--side-nav__overlay-active={isOpen} />
+    }}"
+    class:bx--side-nav__overlay="{true}"
+    class:bx--side-nav__overlay-active="{isOpen}"></div>
 {/if}
 <nav
-  aria-label={ariaLabel}
-  class:bx--side-nav__navigation={true}
-  class:bx--side-nav={true}
-  class:bx--side-nav--ux={true}
-  class:bx--side-nav--expanded={isOpen}
-  class:bx--side-nav--collapsed={!isOpen && fixed}
+  aria-label="{ariaLabel}"
+  class:bx--side-nav__navigation="{true}"
+  class:bx--side-nav="{true}"
+  class:bx--side-nav--ux="{true}"
+  class:bx--side-nav--expanded="{isOpen}"
+  class:bx--side-nav--collapsed="{!isOpen && fixed}"
   {...$$restProps}>
   <slot />
 </nav>
diff --git a/src/UIShell/SideNav/SideNavItems.svelte b/src/UIShell/SideNav/SideNavItems.svelte
index ca3804ff..886b66d4 100644
--- a/src/UIShell/SideNav/SideNavItems.svelte
+++ b/src/UIShell/SideNav/SideNavItems.svelte
@@ -1,3 +1,3 @@
-<ul class:bx--side-nav__items={true}>
+<ul class:bx--side-nav__items="{true}">
   <slot />
 </ul>
diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte
index f655a211..41ef7409 100644
--- a/src/UIShell/SideNav/SideNavLink.svelte
+++ b/src/UIShell/SideNav/SideNavLink.svelte
@@ -26,21 +26,21 @@
   import { Icon } from "../../Icon";
 </script>
 
-<li class:bx--side-nav__item={true}>
+<li class:bx--side-nav__item="{true}">
   <a
-    aria-current={isSelected ? 'page' : undefined}
-    {href}
-    class:bx--side-nav__link={true}
-    class:bx--side-nav__link--current={isSelected}
+    aria-current="{isSelected ? 'page' : undefined}"
+    href="{href}"
+    class:bx--side-nav__link="{true}"
+    class:bx--side-nav__link--current="{isSelected}"
     {...$$restProps}
     on:click>
     {#if icon}
       <div
-        class:bx--side-nav__icon={true}
-        class:bx--side-nav__icon--small={true}>
+        class:bx--side-nav__icon="{true}"
+        class:bx--side-nav__icon--small="{true}">
         <Icon {...icon} />
       </div>
     {/if}
-    <span class:bx--side-nav__link-text={true}>{text}</span>
+    <span class:bx--side-nav__link-text="{true}">{text}</span>
   </a>
 </li>
diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte
index ca58b09b..de3cbe23 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/UIShell/SideNav/SideNavMenu.svelte
@@ -21,31 +21,31 @@
   import { Icon } from "../../Icon";
 </script>
 
-<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={icon}>
+<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
   <button
     type="button"
     aria-haspopup="true"
-    aria-expanded={expanded}
-    class:bx--side-nav__submenu={true}
+    aria-expanded="{expanded}"
+    class:bx--side-nav__submenu="{true}"
     {...$$restProps}
     on:click
-    on:click={() => {
+    on:click="{() => {
       expanded = !expanded;
-    }}>
+    }}">
     {#if icon}
-      <div class:bx--side-nav__icon={true}>
+      <div class:bx--side-nav__icon="{true}">
         <Icon {...icon} />
       </div>
     {/if}
-    <span class:bx--side-nav__submenu-title={true}>{text}</span>
+    <span class:bx--side-nav__submenu-title="{true}">{text}</span>
     <div
-      class:bx--side-nav__icon={true}
-      class:bx--side-nav__icon--small={true}
-      class:bx--side-nav__submenu-chevron={true}>
-      <Icon title="Open Menu" tabindex="0" render={ChevronDown16} />
+      class:bx--side-nav__icon="{true}"
+      class:bx--side-nav__icon--small="{true}"
+      class:bx--side-nav__submenu-chevron="{true}">
+      <Icon title="Open Menu" tabindex="0" render="{ChevronDown16}" />
     </div>
   </button>
-  <ul role="menu" class:bx--side-nav__menu={true}>
+  <ul role="menu" class:bx--side-nav__menu="{true}">
     <slot />
   </ul>
 </li>
diff --git a/src/UIShell/SideNav/SideNavMenuItem.svelte b/src/UIShell/SideNav/SideNavMenuItem.svelte
index b3f18193..9c38fbfc 100644
--- a/src/UIShell/SideNav/SideNavMenuItem.svelte
+++ b/src/UIShell/SideNav/SideNavMenuItem.svelte
@@ -18,14 +18,14 @@
   export let text = undefined;
 </script>
 
-<li role="none" class:bx--side-nav__menu-item={true}>
+<li role="none" class:bx--side-nav__menu-item="{true}">
   <a
     role="menuitem"
-    aria-current={isSelected ? 'page' : undefined}
-    {href}
-    class:bx--side-nav__link={true}
+    aria-current="{isSelected ? 'page' : undefined}"
+    href="{href}"
+    class:bx--side-nav__link="{true}"
     {...$$restProps}
     on:click>
-    <span class:bx--side-nav__link-text={true}>{text}</span>
+    <span class:bx--side-nav__link-text="{true}">{text}</span>
   </a>
 </li>
diff --git a/src/UIShell/SkipToContent.svelte b/src/UIShell/SkipToContent.svelte
index 57c07c78..0702000c 100644
--- a/src/UIShell/SkipToContent.svelte
+++ b/src/UIShell/SkipToContent.svelte
@@ -12,6 +12,11 @@
   export let tabindex = "0";
 </script>
 
-<a {href} {tabindex} class:bx--skip-to-content={true} {...$$restProps} on:click>
+<a
+  href="{href}"
+  tabindex="{tabindex}"
+  class:bx--skip-to-content="{true}"
+  {...$$restProps}
+  on:click>
   <slot>Skip to main content</slot>
 </a>
diff --git a/src/UIShell/UIShell.Story.svelte b/src/UIShell/UIShell.Story.svelte
index 63b1e9d4..253135c2 100644
--- a/src/UIShell/UIShell.Story.svelte
+++ b/src/UIShell/UIShell.Story.svelte
@@ -128,7 +128,7 @@
 </style>
 
 {#if story === 'header'}
-  <Header {...$$props} company={undefined}>
+  <Header {...$$props} company="{undefined}">
     <div slot="skip-to-content">
       <SkipToContent />
     </div>
@@ -137,21 +137,21 @@
     </span>
   </Header>
 {:else if story === 'sidenav'}
-  <SideNav isOpen={true}>
+  <SideNav isOpen="{true}">
     <SideNavItems>
-      <SideNavMenu text="Menu 01" icon={iCatalog}>
+      <SideNavMenu text="Menu 01" icon="{iCatalog}">
         <SideNavMenuItem text="Sub 01" href="/" />
         <SideNavMenuItem text="Sub 02" href="/" />
         <SideNavMenuItem text="Sub 03" href="/" />
         <SideNavMenuItem text="Sub 04" href="/" />
       </SideNavMenu>
-      <SideNavMenu text="Menu 02" icon={iAdjust}>
+      <SideNavMenu text="Menu 02" icon="{iAdjust}">
         <SideNavMenuItem text="Sub 01" href="/" />
         <SideNavMenuItem text="Sub 02" href="/" />
         <SideNavMenuItem text="Sub 03" href="/" />
         <SideNavMenuItem text="Sub 04" href="/" />
       </SideNavMenu>
-      <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+      <SideNavLink text="Menu 03" href="/" icon="{iProtection}" />
     </SideNavItems>
   </SideNav>
 {:else if story === 'header-with-nav'}
@@ -171,18 +171,21 @@
   <Header {...$$props}>
     <HeaderUtilities>
       <HeaderActionSearch />
-      <HeaderAction type="Settings" icon={iSettings}>
+      <HeaderAction type="Settings" icon="{iSettings}">
         <HeaderPanelLinks>
           <HeaderPanelDivider>Settings</HeaderPanelDivider>
         </HeaderPanelLinks>
       </HeaderAction>
-      <HeaderActionLink type="Help" icon={iHelp} />
-      <HeaderAction type="Notifications" icon={iNotifications} isOpen={true}>
+      <HeaderActionLink type="Help" icon="{iHelp}" />
+      <HeaderAction
+        type="Notifications"
+        icon="{iNotifications}"
+        isOpen="{true}">
         <HeaderPanelLinks>
           <HeaderPanelDivider>Notifications</HeaderPanelDivider>
         </HeaderPanelLinks>
       </HeaderAction>
-      <HeaderActionLink type="Account" icon={iAccount} />
+      <HeaderActionLink type="Account" icon="{iAccount}" />
     </HeaderUtilities>
   </Header>
 {:else if story === 'header-with-switcher'}
@@ -190,14 +193,14 @@
     <HeaderUtilities>
       <HeaderAction
         type="Switcher"
-        icon={isOpen ? iAccount : iSwitcher}
+        icon="{isOpen ? iAccount : iSwitcher}"
         bind:isOpen
-        on:open={() => {
+        on:open="{() => {
           console.log('on:open');
-        }}
-        on:close={() => {
+        }}"
+        on:close="{() => {
           console.log('on:close');
-        }}>
+        }}">
         <HeaderPanelLinks>
           <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
           <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -212,22 +215,22 @@
     </HeaderUtilities>
   </Header>
 {:else if story === 'header-and-sidenav'}
-  <Header expandedByDefault={false} bind:isSideNavOpen {...$$props}>
-    <SideNav fixed bind:isOpen={isSideNavOpen}>
+  <Header expandedByDefault="{false}" bind:isSideNavOpen {...$$props}>
+    <SideNav fixed bind:isOpen="{isSideNavOpen}">
       <SideNavItems>
-        <SideNavMenu text="Menu 01" icon={iCatalog}>
+        <SideNavMenu text="Menu 01" icon="{iCatalog}">
           <SideNavMenuItem text="Sub 01" href="/" />
           <SideNavMenuItem text="Sub 02" href="/" />
           <SideNavMenuItem text="Sub 03" href="/" />
           <SideNavMenuItem text="Sub 04" href="/" />
         </SideNavMenu>
-        <SideNavMenu text="Menu 02" icon={iAdjust}>
+        <SideNavMenu text="Menu 02" icon="{iAdjust}">
           <SideNavMenuItem text="Sub 01" href="/" />
           <SideNavMenuItem text="Sub 02" href="/" />
           <SideNavMenuItem text="Sub 03" href="/" />
           <SideNavMenuItem text="Sub 04" href="/" />
         </SideNavMenu>
-        <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+        <SideNavLink text="Menu 03" href="/" icon="{iProtection}" />
       </SideNavItems>
     </SideNav>
   </Header>
diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte
index 984545f4..9ed9b2bc 100644
--- a/src/UnorderedList/UnorderedList.svelte
+++ b/src/UnorderedList/UnorderedList.svelte
@@ -7,8 +7,8 @@
 </script>
 
 <ul
-  class:bx--list--unordered={true}
-  class:bx--list--nested={nested}
+  class:bx--list--unordered="{true}"
+  class:bx--list--nested="{nested}"
   {...$$restProps}
   on:click
   on:mouseover