chore(prettier): use svelteStrictMode

.prettierrc

@@ -0,0 +1 @@
+{ "svelteStrictMode": true }

docs/src/components/CopyableCodeSnippet.svelte

@@ -7,7 +7,7 @@
 
 <CodeSnippet
   {...$$restProps}
-  {code}
+  code="{code}"
-  on:click={() => {
+  on:click="{() => {
     copy(code);
-  }} />
+  }}" />

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

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.Accordion
-          <Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
+          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="{skeleton}" labelText="Checkbox label" />
-          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
-          <Carbon.Checkbox {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;

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" />

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" />

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'}
+        expanded="{segment === 'components'}"
-        isSelected={segment === 'components' && !$tail}>
+        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}

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}
+            selected="{props[key].default}"
-            on:change={({ detail }) => {
+            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}
+      code="{data.source}"
-      on:click={() => {
+      on:click="{() => {
         copy(data.source);
-      }} />
+      }}" />
   </Column>
 </Row>

docs/src/routes/examples/Button.svelte

@@ -8,10 +8,10 @@
   <Button
     {...$$props}
     kind="primary"
-    on:click={() => console.log('click')}
+    on:click="{() => console.log('click')}"
-    on:mouseover={() => console.log('mouseover')}
+    on:mouseover="{() => console.log('mouseover')}"
-    on:mouseenter={() => console.log('mouseenter')}
+    on:mouseenter="{() => console.log('mouseenter')}"
-    on:mouseleave={() => console.log('mouseleave')}>
+    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" />

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>

examples/rollup-typescript/src/App.svelte

@@ -4,9 +4,9 @@
 
 <Button
   kind="primary"
-  on:click={() => {
+  on:click="{() => {
     console.log('click');
-  }}>
+  }}">
   Primary button
 </Button>
 

src/Accordion/Accordion.Skeleton.svelte

@@ -16,8 +16,8 @@
 </script>
 
 <ul
-  class:bx--accordion={true}
+  class:bx--accordion="{true}"
-  class:bx--skeleton={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="{true}"
-      class:bx--accordion__item--active={true}>
+      class:bx--accordion__item--active="{true}">
-      <span class:bx--accordion__heading={true}>
+      <span class:bx--accordion__heading="{true}">
         <ChevronRight16 class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>

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

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

src/Accordion/AccordionItem.svelte

@@ -24,34 +24,36 @@
 </script>
 
 <li
-  class:bx--accordion__item={true}
+  class:bx--accordion__item="{true}"
-  class:bx--accordion__item--active={open}
+  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}
+    class:bx--accordion__heading="{true}"
-    title={iconDescription}
+    title="{iconDescription}"
-    aria-expanded={open}
+    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>

src/Breadcrumb/Breadcrumb.Skeleton.svelte

@@ -13,17 +13,17 @@
 </script>
 
 <div
-  class:bx--breadcrumb={true}
+  class:bx--breadcrumb="{true}"
-  class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
+  class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
-  class:bx--skeleton={true}
+  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}>
+    <div class:bx--breadcrumb-item="{true}">
-      <span class:bx--link={true}>&nbsp;</span>
+      <span class:bx--link="{true}">&nbsp;</span>
     </div>
   {/each}
 </div>

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>

src/Breadcrumb/Breadcrumb.svelte

@@ -30,8 +30,8 @@
     on:mouseenter
     on:mouseleave>
     <ol
-      class:bx--breadcrumb={true}
+      class:bx--breadcrumb="{true}"
-      class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
+      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}">
       <slot />
     </ol>
   </nav>

src/Breadcrumb/BreadcrumbItem.svelte

@@ -15,19 +15,19 @@
 </script>
 
 <li
-  class:bx--breadcrumb-item={true}
+  class:bx--breadcrumb-item="{true}"
-  class:bx--breadcrumb-item--current={isCurrentPage && $$restProps['aria-current'] !== 'page'}
+  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>

src/Button/Button.Skeleton.svelte

@@ -14,11 +14,11 @@
 
 {#if href}
   <a
-    {href}
+    href="{href}"
     role="button"
-    class:bx--skeleton={true}
+    class:bx--skeleton="{true}"
-    class:bx--btn={true}
+    class:bx--btn="{true}"
-    class:bx--btn--sm={small}
+    class:bx--btn--sm="{small}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -28,12 +28,12 @@
   </a>
 {:else}
   <div
-    class:bx--skeleton={true}
+    class:bx--skeleton="{true}"
-    class:bx--btn={true}
+    class:bx--btn="{true}"
-    class:bx--btn--sm={small}
+    class:bx--btn--sm="{small}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave />
+    on:mouseleave></div>
 {/if}

src/Button/Button.svelte

@@ -122,56 +122,56 @@
 
 {#if skeleton}
   <ButtonSkeleton
-    {href}
+    href="{href}"
-    small={size === 'small'}
+    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}

src/Button/ButtonSet.svelte

@@ -1,3 +1,3 @@
-<div class:bx--btn-set={true} {...$$restProps}>
+<div class:bx--btn-set="{true}" {...$$restProps}>
   <slot />
 </div>

src/Checkbox/Checkbox.Skeleton.svelte

@@ -1,11 +1,13 @@
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
-  class:bx--checkbox-wrapper={true}
+  class:bx--checkbox-wrapper="{true}"
-  class:bx--checkbox-label={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>

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}

src/Checkbox/Checkbox.svelte

@@ -82,31 +82,31 @@
     on:mouseleave />
 {:else}
   <div
-    class:bx--form-item={true}
+    class:bx--form-item="{true}"
-    class:bx--checkbox-wrapper={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}
+      checked="{checked}"
-      {disabled}
+      disabled="{disabled}"
-      {id}
+      id="{id}"
-      {indeterminate}
+      indeterminate="{indeterminate}"
-      {name}
+      name="{name}"
-      {readonly}
+      readonly="{readonly}"
-      class:bx--checkbox={true}
+      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--checkbox-label-text="{true}"
-        class:bx--visually-hidden={hideLabel}>
+        class:bx--visually-hidden="{hideLabel}">
         {labelText}
       </span>
     </label>

src/CodeSnippet/CodeSnippet.Skeleton.svelte

@@ -7,18 +7,18 @@
 </script>
 
 <div
-  class:bx--snippet={true}
+  class:bx--snippet="{true}"
-  class:bx--skeleton={true}
+  class:bx--skeleton="{true}"
-  class:bx--snippet--single={type === 'single'}
+  class:bx--snippet--single="{type === 'single'}"
-  class:bx--snippet--multi={type === 'multi'}
+  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 />
+      <span></span>
-    {:else if type === 'multi'}<span /> <span /> <span />{/if}
+    {:else if type === 'multi'}<span></span> <span></span> <span></span>{/if}
   </div>
 </div>

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-label="{copyLabel}"
-        aria-describedby={id}
+        aria-describedby="{id}"
-        {feedback}
+        feedback="{feedback}"
-        {feedbackTimeout}
+        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--snippet="{true}"
-      class:bx--btn--copy={type === 'inline'}
+      class:bx--btn--copy="{type === 'inline'}"
-      class:bx--snippet--expand={expanded}
+      class:bx--snippet--expand="{expanded}"
-      class:bx--snippet--light={light}
+      class:bx--snippet--light="{light}"
-      class:bx--snippet--no-copy={hideCopyButton}
+      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}
+        role="{type === 'single' ? 'textbox' : undefined}"
-        tabindex={type === 'single' ? '0' : undefined}
+        tabindex="{type === 'single' ? '0' : undefined}"
-        class:bx--snippet-container={true}
+        class:bx--snippet-container="{true}"
-        aria-label={$$restProps['aria-label'] || copyLabel || 'code-snippet'}>
+        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}
+          feedback="{feedback}"
-          {feedbackTimeout}
+          feedbackTimeout="{feedbackTimeout}"
-          iconDescription={copyButtonDescription}
+          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>

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}
+    items="{items}"
-    {shouldFilterItem} />
+    shouldFilterItem="{shouldFilterItem}" />
 </div>

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="{true}"
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <ListBox
     class="bx--combo-box"
-    id={comboId}
+    id="{comboId}"
-    aria-label={ariaLabel}
+    aria-label="{ariaLabel}"
-    {disabled}
+    disabled="{disabled}"
-    {invalid}
+    invalid="{invalid}"
-    {invalidText}
+    invalidText="{invalidText}"
-    {open}
+    open="{open}"
-    {light}
+    light="{light}"
-    {size}>
+    size="{size}">
     <ListBoxField
       role="button"
-      aria-expanded={open}
+      aria-expanded="{open}"
-      on:click={() => {
+      on:click="{() => {
         open = true;
-      }}
+      }}"
-      {id}
+      id="{id}"
-      {name}
+      name="{name}"
-      {disabled}
+      disabled="{disabled}"
-      {translateWithId}>
+      translateWithId="{translateWithId}">
       <input
-        bind:this={ref}
+        bind:this="{ref}"
         tabindex="0"
         autocomplete="off"
         aria-autocomplete="list"
-        aria-expanded={open}
+        aria-expanded="{open}"
-        aria-activedescendant={highlightedId}
+        aria-activedescendant="{highlightedId}"
-        aria-labelledby={comboId}
+        aria-labelledby="{comboId}"
-        aria-disabled={disabled}
+        aria-disabled="{disabled}"
-        aria-controls={open ? menuId : undefined}
+        aria-controls="{open ? menuId : undefined}"
-        aria-owns={open ? menuId : undefined}
+        aria-owns="{open ? menuId : undefined}"
-        class:bx--text-input={true}
+        class:bx--text-input="{true}"
-        class:bx--text-input--empty={inputValue === ''}
+        class:bx--text-input--empty="{inputValue === ''}"
-        on:input={({ target }) => {
+        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}
+        disabled="{disabled}"
-        {placeholder}
+        placeholder="{placeholder}"
-        {id}
+        id="{id}"
-        value={inputValue} />
+        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}
+          translateWithId="{translateWithId}"
-          {disabled}
+          disabled="{disabled}"
-          {open} />
+          open="{open}" />
       {/if}
       <ListBoxMenuIcon
-        on:click={() => {
+        on:click="{() => {
           open = !open;
-        }}
+        }}"
-        {translateWithId}
+        translateWithId="{translateWithId}"
-        {open} />
+        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}
+            id="{item.id}"
-            active={selectedIndex === i || selectedId === item.id}
+            active="{selectedIndex === i || selectedId === item.id}"
-            highlighted={highlightedIndex === i || selectedIndex === i}
+            highlighted="{highlightedIndex === i || selectedIndex === i}"
-            on:click={() => {
+            on:click="{() => {
               selectedIndex = items
                 .map(({ id }) => id)
                 .indexOf(filteredItems[i].id);
               open = false;
-            }}
+            }}"
-            on:mouseenter={() => {
+            on:mouseenter="{() => {
               highlightedIndex = i;
-            }}>
+            }}">
             {itemToString(item)}
           </ListBoxMenuItem>
         {/each}

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:close="{() => {}}"
-    on:submit={() => {}}>
+    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}
+    open="{open}"
-    on:close={() => (open = false)}>
+    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>

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:bx--modal="{true}"
-  class:is-visible={open}
+  class:is-visible="{open}"
-  class:bx--modal--danger={danger}
+  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}
+    bind:this="{innerModal}"
-    class:bx--modal-container={true}
+    class:bx--modal-container="{true}"
     class="{size && `bx--modal-container--${size}`} {containerClass}"
-    on:click={() => {
+    on:click="{() => {
       didClickInnerModal = true;
-    }}>
+    }}">
     <slot />
   </div>
 </div>

src/ComposedModal/ModalBody.svelte

@@ -13,13 +13,13 @@
 </script>
 
 <div
-  tabindex={hasScrollingContent ? '0' : undefined}
+  tabindex="{hasScrollingContent ? '0' : undefined}"
-  role={hasScrollingContent ? 'region' : undefined}
+  role="{hasScrollingContent ? 'region' : undefined}"
-  class:bx--modal-content={true}
+  class:bx--modal-content="{true}"
-  class:bx--modal-content--with-form={hasForm}
+  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}

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'}
+      kind="{danger ? 'danger' : 'primary'}"
-      disabled={primaryButtonDisabled}
+      disabled="{primaryButtonDisabled}"
-      class={primaryClass}
+      class="{primaryClass}"
-      on:click={submit}>
+      on:click="{submit}">
       {primaryButtonText}
     </Button>
   {/if}

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--modal-header__label="{true}"
-      class:bx--type-delta={true}
+      class:bx--type-delta="{true}"
       class:labelClass>
       {label}
     </p>
   {/if}
   {#if title}
     <p
-      class:bx--modal-header__heading={true}
+      class:bx--modal-header__heading="{true}"
-      class:bx--type-beta={true}
+      class:bx--type-beta="{true}"
       class:titleClass>
       {title}
     </p>
@@ -67,12 +67,12 @@
   <slot />
   <button
     type="button"
-    title={iconDescription}
+    title="{iconDescription}"
-    aria-label={iconDescription}
+    aria-label="{iconDescription}"
-    class:bx--modal-close={true}
+    class:bx--modal-close="{true}"
     class:closeClass
     on:click
-    on:click={closeModal}>
+    on:click="{closeModal}">
     <Close20 class="bx--modal-close__icon {closeIconClass}" />
   </button>
 </div>

src/ContentSwitcher/ContentSwitcher.Story.svelte

@@ -16,21 +16,21 @@
 
 {#if story === 'selected'}
   <ContentSwitcher
-    {light}
+    light="{light}"
-    on:change={({ detail }) => {
+    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}

src/ContentSwitcher/ContentSwitcher.svelte

@@ -58,8 +58,8 @@
 
 <div
   role="tablist"
-  class:bx--content-switcher={true}
+  class:bx--content-switcher="{true}"
-  class:bx--content-switcher--light={light}
+  class:bx--content-switcher--light="{light}"
   {...$$restProps}
   on:click
   on:mouseover

src/ContentSwitcher/Switch.svelte

@@ -52,31 +52,31 @@
 </script>
 
 <button
-  bind:this={ref}
+  bind:this="{ref}"
   role="tab"
-  tabindex={selected ? '0' : '-1'}
+  tabindex="{selected ? '0' : '-1'}"
-  aria-selected={selected}
+  aria-selected="{selected}"
-  {disabled}
+  disabled="{disabled}"
-  {id}
+  id="{id}"
-  class:bx--content-switcher-btn={true}
+  class:bx--content-switcher-btn="{true}"
-  class:bx--content-switcher--selected={selected}
+  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>

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="{true}"
-  class:bx--copy-btn--animating={animation}
+  class:bx--copy-btn--animating="{animation}"
-  aria-label={animation ? feedback : undefined}
+  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--assistive-text="{true}"
-    class:bx--copy-btn__feedback={true}>
+    class:bx--copy-btn__feedback="{true}">
     {feedback}
   </span>
 </button>

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);
-  }} />
+  }}" />

src/CopyButton/CopyButton.svelte

@@ -11,8 +11,8 @@
 
 <Copy
   class="bx--copy-btn"
-  aria-label={iconDescription}
+  aria-label="{iconDescription}"
-  title={iconDescription}
+  title="{iconDescription}"
   {...$$restProps}
   on:click
   on:animationend>

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}
+    title="{$$props.title}"
-    description={$$props.description}
+    description="{$$props.description}"
-    zebra={$$props.zebra}
+    zebra="{$$props.zebra}"
-    size={$$props.size}
+    size="{$$props.size}"
-    stickyHeader={$$props.stickyHeader}
+    stickyHeader="{$$props.stickyHeader}"
-    on:click={({ detail }) => {
+    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}
+    rows="{rows}"
-    {headers} />
+    headers="{headers}" />
 {:else}
   <DataTable
-    title={$$props.title}
+    title="{$$props.title}"
-    description={$$props.description}
+    description="{$$props.description}"
-    zebra={$$props.zebra}
+    zebra="{$$props.zebra}"
-    size={$$props.size}
+    size="{$$props.size}"
-    stickyHeader={$$props.stickyHeader}
+    stickyHeader="{$$props.stickyHeader}"
-    on:click={({ detail }) => {
+    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}
+    rows="{rows}"
-    {headers} />
+    headers="{headers}" />
 {/if}

src/DataTable/DataTable.svelte

@@ -115,14 +115,18 @@
   };
 </script>
 
-<slot {props}>
+<slot props="{props}">
-  <TableContainer {title} {description} {...$$restProps}>
+  <TableContainer title="{title}" description="{description}" {...$$restProps}>
-    <Table {zebra} {size} {stickyHeader} {sortable}>
+    <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}

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="{true}"
-      class:bx--data-table--compact={size === 'compact'}
+      class:bx--data-table--compact="{size === 'compact'}"
-      class:bx--data-table--short={size === 'short'}
+      class:bx--data-table--short="{size === 'short'}"
-      class:bx--data-table--tall={size === 'tall'}
+      class:bx--data-table--tall="{size === 'tall'}"
-      class:bx--data-table--sort={sortable}
+      class:bx--data-table--sort="{sortable}"
-      class:bx--data-table--zebra={zebra}
+      class:bx--data-table--zebra="{zebra}"
-      class:bx--data-table--static={useStaticWidth}
+      class:bx--data-table--static="{useStaticWidth}"
-      class:bx--data-table--no-border={!shouldShowBorder}
+      class:bx--data-table--no-border="{!shouldShowBorder}"
-      class:bx--data-table--sticky-header={stickyHeader}>
+      class:bx--data-table--sticky-header="{stickyHeader}">
       <slot />
     </table>
   </section>
 {:else}
   <table
-    class:bx--data-table={true}
+    class:bx--data-table="{true}"
-    class:bx--data-table--compact={size === 'compact'}
+    class:bx--data-table--compact="{size === 'compact'}"
-    class:bx--data-table--short={size === 'short'}
+    class:bx--data-table--short="{size === 'short'}"
-    class:bx--data-table--tall={size === 'tall'}
+    class:bx--data-table--tall="{size === 'tall'}"
-    class:bx--data-table--sort={sortable}
+    class:bx--data-table--sort="{sortable}"
-    class:bx--data-table--zebra={zebra}
+    class:bx--data-table--zebra="{zebra}"
-    class:bx--data-table--static={useStaticWidth}
+    class:bx--data-table--static="{useStaticWidth}"
-    class:bx--data-table--no-border={!shouldShowBorder}
+    class:bx--data-table--no-border="{!shouldShowBorder}"
-    class:bx--data-table--sticky-header={stickyHeader}
+    class:bx--data-table--sticky-header="{stickyHeader}"
     {...$$restProps}>
     <slot />
   </table>

src/DataTable/TableContainer.svelte

@@ -19,13 +19,13 @@
 </script>
 
 <div
-  class:bx--data-table-container={true}
+  class:bx--data-table-container="{true}"
-  class:bx--data-table--max-width={stickyHeader}
+  class:bx--data-table--max-width="{stickyHeader}"
   {...$$restProps}>
   {#if title}
-    <div class:bx--data-table-header={true}>
+    <div class:bx--data-table-header="{true}">
-      <h4 class:bx--data-table-header__title={true}>{title}</h4>
+      <h4 class:bx--data-table-header__title="{true}">{title}</h4>
-      <p class:bx--data-table-header__description={true}>{description}</p>
+      <p class:bx--data-table-header__description="{true}">{description}</p>
     </div>
   {/if}
   <slot />

src/DataTable/TableHeader.svelte

@@ -32,37 +32,37 @@
 
 {#if $tableSortable}
   <th
-    aria-sort={active ? $sortHeader.sortDirection : 'none'}
+    aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
-    {scope}
+    scope="{scope}"
-    {id}
+    id="{id}"
     {...$$restProps}
     on:mouseover
     on:mouseenter
     on:mouseleave>
     <button
-      class:bx--table-sort={true}
+      class:bx--table-sort="{true}"
-      class:bx--table-sort--active={active}
+      class:bx--table-sort--active="{active}"
-      class:bx--table-sort--ascending={active && $sortHeader.sortDirection === 'descending'}
+      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}
+    scope="{scope}"
-    {id}
+    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>

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

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -37,10 +37,10 @@
 </script>
 
 <table
-  class:bx--skeleton={true}
+  class:bx--skeleton="{true}"
-  class:bx--data-table={true}
+  class:bx--data-table="{true}"
-  class:bx--data-table--zebra={zebra}
+  class:bx--data-table--zebra="{zebra}"
-  class:bx--data-table--compact={compact}
+  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}

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--date-picker="{true}"
-    class:bx--skeleton={true}
+    class:bx--skeleton="{true}"
-    class:bx--date-picker--range={true}
+    class:bx--date-picker--range="{true}"
-    class:bx--date-picker--short={!range}
+    class:bx--date-picker--short="{!range}"
-    class:bx--date-picker--simple={!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}>
+      <div class:bx--date-picker-container="{true}">
-        <label for={id} class:bx--label={true} />
+        <label for="{id}" class:bx--label="{true}"></label>
-        <div class:bx--date-picker__input={true} class:bx--skeleton={true} />
+        <div
+          class:bx--date-picker__input="{true}"
+          class:bx--skeleton="{true}"></div>
       </div>
     {/each}
   </div>

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}

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}
+    bind:this="{datePickerRef}"
-    {id}
+    id="{id}"
-    class:bx--date-picker={true}
+    class:bx--date-picker="{true}"
-    class:bx--date-picker--short={short}
+    class:bx--date-picker--short="{short}"
-    class:bx--date-picker--light={light}
+    class:bx--date-picker--light="{light}"
     class="{datePickerType && `bx--date-picker--${datePickerType}`}
       {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
     <slot />

src/DatePicker/DatePickerInput.svelte

@@ -100,58 +100,58 @@
 </script>
 
 <div
-  class:bx--date-picker-container={true}
+  class:bx--date-picker-container="{true}"
-  class:bx--date-picker--nolabel={!labelText}
+  class:bx--date-picker--nolabel="{!labelText}"
   {...$$restProps}>
   {#if labelText}
     <label
-      for={id}
+      for="{id}"
-      class:bx--label={true}
+      class:bx--label="{true}"
-      class:bx--visually-hidden={hideLabel}
+      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled={disabled}>
+      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}
+      bind:this="{ref}"
-      data-invalid={invalid || undefined}
+      data-invalid="{invalid || undefined}"
-      value={!$range ? $inputValue : undefined}
+      value="{!$range ? $inputValue : undefined}"
-      {id}
+      id="{id}"
-      {name}
+      name="{name}"
-      {placeholder}
+      placeholder="{placeholder}"
-      {type}
+      type="{type}"
-      {pattern}
+      pattern="{pattern}"
-      {disabled}
+      disabled="{disabled}"
-      class:bx--date-picker__input={true}
+      class:bx--date-picker__input="{true}"
-      class={size && `bx--date-picker__input--${size}`}
+      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}
+        aria-label="{iconDescription}"
-        title={iconDescription}
+        title="{iconDescription}"
-        on:click={openCalendar} />
+        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>

src/Dropdown/Dropdown.Skeleton.svelte

@@ -7,17 +7,17 @@
 </script>
 
 <div
-  class:bx--skeleton={true}
+  class:bx--skeleton="{true}"
-  class:bx--dropdown-v2={true}
+  class:bx--dropdown-v2="{true}"
-  class:bx--list-box={true}
+  class:bx--list-box="{true}"
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
-  class:bx--list-box--inline={inline}
+  class:bx--list-box--inline="{inline}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div role="button" class:bx--list-box__field={true}>
+  <div role="button" class:bx--list-box__field="{true}">
-    <span class:bx--list-box__label={true} />
+    <span class:bx--list-box__label="{true}"></span>
   </div>
 </div>

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}

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--dropdown__wrapper="{true}"
-  class:bx--list-box__wrapper={true}
+  class:bx--list-box__wrapper="{true}"
-  class:bx--dropdown__wrapper--inline={inline}
+  class:bx--dropdown__wrapper--inline="{inline}"
-  class:bx--list-box__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline="{inline}"
-  class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
+  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="{true}"
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <ListBox
-    {type}
+    type="{type}"
-    {size}
+    size="{size}"
-    {id}
+    id="{id}"
-    {name}
+    name="{name}"
-    aria-label={$$props['aria-label']}
+    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}
+    disabled="{disabled}"
-    {open}
+    open="{open}"
-    {invalid}
+    invalid="{invalid}"
-    {invalidText}
+    invalidText="{invalidText}"
-    {light}>
+    light="{light}">
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
     {/if}
     <button
-      bind:this={ref}
+      bind:this="{ref}"
-      class:bx--list-box__field={true}
+      class:bx--list-box__field="{true}"
       tabindex="0"
       role="button"
-      aria-expanded={open}
+      aria-expanded="{open}"
-      on:keydown={({ key }) => {
+      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}
+      disabled="{disabled}"
-      {translateWithId}
+      translateWithId="{translateWithId}"
-      {id}>
+      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}
+            id="{item.id}"
-            active={selectedIndex === i || selectedId === item.id}
+            active="{selectedIndex === i || selectedId === item.id}"
-            highlighted={highlightedIndex === i || selectedIndex === i}
+            highlighted="{highlightedIndex === i || selectedIndex === i}"
-            on:click={() => {
+            on:click="{() => {
               selectedId = item.id;
               selectedIndex = i;
-            }}
+            }}"
-            on:mouseenter={() => {
+            on:mouseenter="{() => {
               highlightedIndex = i;
-            }}>
+            }}">
             {itemToString(item)}
           </ListBoxMenuItem>
         {/each}

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

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}
+        disabled="{disabled}"
-        on:click={fileUploader.clearFiles}>
+        on:click="{fileUploader.clearFiles}">
         Clear File{files.length === 1 ? '' : 's'}
       </Button>
     </div>

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>
+  <strong class:bx--file--label="{true}">{labelTitle}</strong>
-  <p class:bx--label-description={true}>{labelDescription}</p>
+  <p class:bx--label-description="{true}">{labelDescription}</p>
   <FileUploaderButton
     disableLabelChanges
-    labelText={buttonLabel}
+    labelText="{buttonLabel}"
-    {accept}
+    accept="{accept}"
-    {name}
+    name="{name}"
-    {multiple}
+    multiple="{multiple}"
-    {kind}
+    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}>
+      <span class:bx--file__selected-file="{true}">
-        <p class:bx--file-filename={true}>{name}</p>
+        <p class:bx--file-filename="{true}">{name}</p>
-        <span class:bx--file__state-container={true}>
+        <span class:bx--file__state-container="{true}">
           <Filename
-            {iconDescription}
+            iconDescription="{iconDescription}"
-            {status}
+            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}

src/FileUploader/FileUploaderButton.svelte

@@ -67,41 +67,41 @@
 </script>
 
 <label
-  aria-disabled={disabled}
+  aria-disabled="{disabled}"
-  for={id}
+  for="{id}"
-  tabindex={disabled ? '-1' : tabindex}
+  tabindex="{disabled ? '-1' : tabindex}"
-  class:bx--btn={true}
+  class:bx--btn="{true}"
-  class:bx--btn--sm={true}
+  class:bx--btn--sm="{true}"
-  class:bx--btn--disabled={disabled}
+  class:bx--btn--disabled="{disabled}"
-  class={kind && `bx--btn--${kind}`}
+  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}
+  accept="{accept}"
-  {disabled}
+  disabled="{disabled}"
-  {id}
+  id="{id}"
-  {multiple}
+  multiple="{multiple}"
-  {name}
+  name="{name}"
-  class:bx--visually-hidden={true}
+  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;
-  }} />
+  }}" />

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}
+    for="{id}"
-    {tabindex}
+    tabindex="{tabindex}"
-    class:bx--file-browse-btn={true}
+    class:bx--file-browse-btn="{true}"
-    class:bx--file-browse-btn--disabled={disabled}
+    class:bx--file-browse-btn--disabled="{disabled}"
     on:keydown
-    on:keydown={({ key }) => {
+    on:keydown="{({ key }) => {
       if (key === ' ' || key === 'Enter') {
         ref.click();
       }
-    }}>
+    }}">
     <div
-      {role}
+      role="{role}"
-      class:bx--file__drop-container={true}
+      class:bx--file__drop-container="{true}"
-      class:bx--file__drop-container--drag-over={over}>
+      class:bx--file__drop-container--drag-over="{over}">
       {labelText}
       <input
-        bind:this={ref}
+        bind:this="{ref}"
         type="file"
         tabindex="-1"
-        {id}
+        id="{id}"
-        {disabled}
+        disabled="{disabled}"
-        {accept}
+        accept="{accept}"
-        {name}
+        name="{name}"
-        {multiple}
+        multiple="{multiple}"
-        class:bx--file-input={true}
+        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>

src/FileUploader/FileUploaderItem.svelte

@@ -48,33 +48,33 @@
 </script>
 
 <span
-  {id}
+  id="{id}"
-  class:bx--file__selected-file={true}
+  class:bx--file__selected-file="{true}"
-  class:bx--file__selected-file--invalid={invalid}
+  class:bx--file__selected-file--invalid="{invalid}"
   {...$$restProps}
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <p class:bx--file-filename={true}>{name}</p>
+  <p class:bx--file-filename="{true}">{name}</p>
-  <span class:bx--file__state-container={true}>
+  <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}
+      iconDescription="{iconDescription}"
-      {status}
+      status="{status}"
-      {invalid} />
+      invalid="{invalid}" />
   </span>
   {#if invalid && errorSubject}
-    <div class:bx--form-requirement={true}>
+    <div class:bx--form-requirement="{true}">
-      <div class:bx--form-requirement__title={true}>{errorSubject}</div>
+      <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}

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}
+    aria-label="{iconDescription}"
-    title={iconDescription}
+    title="{iconDescription}"
     class="bx--file-close"
     {...$$restProps}
     on:click
@@ -46,8 +46,8 @@
 
 {#if status === 'complete'}
   <CheckmarkFilled16
-    aria-label={iconDescription}
+    aria-label="{iconDescription}"
-    title={iconDescription}
+    title="{iconDescription}"
     class="bx--file-complete"
     {...$$restProps} />
 {/if}

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}
+    min="{0}"
-    max={100}
+    max="{100}"
-    value={50}
+    value="{50}"
-    step={10} />
+    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}
+    rows="{4}"
-    cols={50} />
+    cols="{50}" />
   <Button type="submit">Submit</Button>
 </Form>

src/Form/Form.svelte

@@ -1,5 +1,5 @@
 <form
-  class:bx--form={true}
+  class:bx--form="{true}"
   {...$$restProps}
   on:click
   on:mouseover

src/FormGroup/FormGroup.svelte

@@ -25,16 +25,16 @@
 </script>
 
 <fieldset
-  data-invalid={invalid || undefined}
+  data-invalid="{invalid || undefined}"
-  class:bx--fieldset={true}
+  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>

src/FormItem/FormItem.svelte

@@ -1,5 +1,5 @@
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover

src/FormLabel/FormLabel.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <label
-  class:bx--label={true}
+  class:bx--label="{true}"
-  for={id}
+  for="{id}"
   {...$$restProps}
   on:click
   on:mouseover

src/Grid/Column.svelte

@@ -116,7 +116,7 @@
 </script>
 
 {#if as}
-  <slot {props} />
+  <slot props="{props}" />
 {:else}
   <div {...props}>
     <slot />

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>

src/Grid/Grid.svelte

@@ -60,7 +60,7 @@
 </script>
 
 {#if as}
-  <slot {props} />
+  <slot props="{props}" />
 {:else}
   <div {...props}>
     <slot />

src/Grid/Row.svelte

@@ -53,7 +53,7 @@
 </script>
 
 {#if as}
-  <slot {props} />
+  <slot props="{props}" />
 {:else}
   <div {...props}>
     <slot />

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>

src/Icon/Icon.Story.svelte

@@ -13,9 +13,9 @@
 
 {#if story === 'skeleton'}
   <div>
-    <IconSkeleton size={16} style="margin: 2rem;" />
+    <IconSkeleton size="{16}" style="margin: 2rem;" />
-    <IconSkeleton size={32} style="margin: 2rem" />
+    <IconSkeleton size="{32}" style="margin: 2rem" />
   </div>
 {:else}
-  <Icon {...$$props} render={icons[$$props.icon]} />
+  <Icon {...$$props} render="{icons[$$props.icon]}" />
 {/if}

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

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}
+        description="{loadingDescription}"
-        status={success ? 'finished' : 'active'}
+        status="{success ? 'finished' : 'active'}"
-        aria-live={ariaLive} />
+        aria-live="{ariaLive}" />
     {:else}
-      <Button on:click={handleSubmit}>Submit</Button>
+      <Button on:click="{handleSubmit}">Submit</Button>
     {/if}
   </div>
 {:else}

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}
+        description="{iconDescription}"
-        withOverlay={false}
+        withOverlay="{false}"
-        active={status === 'active'} />
+        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>

src/Link/Link.svelte

@@ -20,10 +20,10 @@
 
 {#if disabled}
   <p
-    bind:this={ref}
+    bind:this="{ref}"
-    class:bx--link={true}
+    class:bx--link="{true}"
-    class:bx--link--disabled={disabled}
+    class:bx--link--disabled="{disabled}"
-    class:bx--link--inline={inline}
+    class:bx--link--inline="{inline}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -34,10 +34,10 @@
 {:else}
   <!-- svelte-ignore a11y-missing-attribute -->
   <a
-    bind:this={ref}
+    bind:this="{ref}"
-    class:bx--link={true}
+    class:bx--link="{true}"
-    class:bx--link--disabled={disabled}
+    class:bx--link--disabled="{disabled}"
-    class:bx--link--inline={inline}
+    class:bx--link--inline="{inline}"
     {...$$restProps}
     on:click
     on:mouseover

src/ListBox/ListBox.svelte

@@ -45,23 +45,23 @@
 <div
   role="listbox"
   tabindex="-1"
-  data-invalid={invalid || undefined}
+  data-invalid="{invalid || undefined}"
-  class:bx--list-box={true}
+  class:bx--list-box="{true}"
-  class:bx--list-box--inline={type === 'inline'}
+  class:bx--list-box--inline="{type === 'inline'}"
-  class:bx--list-box--disabled={disabled}
+  class:bx--list-box--disabled="{disabled}"
-  class:bx--list-box--expanded={open}
+  class:bx--list-box--expanded="{open}"
-  class:bx--list-box--light={light}
+  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}

src/ListBox/ListBoxField.svelte

@@ -63,15 +63,15 @@
 </script>
 
 <div
-  bind:this={ref}
+  bind:this="{ref}"
-  role={ariaExpanded ? 'combobox' : role}
+  role="{ariaExpanded ? 'combobox' : role}"
-  aria-expanded={ariaExpanded}
+  aria-expanded="{ariaExpanded}"
-  aria-owns={(ariaExpanded && menuId) || undefined}
+  aria-owns="{(ariaExpanded && menuId) || undefined}"
-  aria-controls={(ariaExpanded && menuId) || undefined}
+  aria-controls="{(ariaExpanded && menuId) || undefined}"
-  aria-disabled={disabled}
+  aria-disabled="{disabled}"
-  aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
+  aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}"
-  tabindex={disabled ? '-1' : tabindex}
+  tabindex="{disabled ? '-1' : tabindex}"
-  class:bx--list-box__field={true}
+  class:bx--list-box__field="{true}"
   {...$$restProps}
   on:click
   on:mouseover

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>

src/ListBox/ListBoxMenuIcon.svelte

@@ -33,9 +33,9 @@
 </script>
 
 <div
-  class:bx--list-box__menu-icon={true}
+  class:bx--list-box__menu-icon="{true}"
-  class:bx--list-box__menu-icon--open={open}
+  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>

src/ListBox/ListBoxMenuItem.svelte

@@ -13,14 +13,14 @@
 </script>
 
 <div
-  class:bx--list-box__menu-item={true}
+  class:bx--list-box__menu-item="{true}"
-  class:bx--list-box__menu-item--active={active}
+  class:bx--list-box__menu-item--active="{active}"
-  class:bx--list-box__menu-item--highlighted={highlighted}
+  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>

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'}
+  tabindex="{disabled ? '-1' : '0'}"
-  title={description}
+  title="{description}"
-  class:bx--list-box__selection={true}
+  class:bx--list-box__selection="{true}"
-  class:bx--tag--filter={selectionCount}
+  class:bx--tag--filter="{selectionCount}"
-  class:bx--list-box__selection--multi={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>

src/ListItem/ListItem.svelte

@@ -1,5 +1,5 @@
 <li
-  class:bx--list__item={true}
+  class:bx--list__item="{true}"
   {...$$restProps}
   on:click
   on:mouseover

src/Loading/Loading.svelte

@@ -34,60 +34,60 @@
 
 {#if withOverlay}
   <div
-    class:bx--loading-overlay={true}
+    class:bx--loading-overlay="{true}"
-    class:bx--loading-overlay--stop={!active}
+    class:bx--loading-overlay--stop="{!active}"
     {...$$restProps}>
     <div
       aria-atomic="true"
-      aria-labelledby={id}
+      aria-labelledby="{id}"
-      aria-live={active ? 'assertive' : 'off'}
+      aria-live="{active ? 'assertive' : 'off'}"
-      class:bx--loading={true}
+      class:bx--loading="{true}"
-      class:bx--loading--small={small}
+      class:bx--loading--small="{small}"
-      class:bx--loading--stop={!active}>
+      class:bx--loading--stop="{!active}">
       <!-- svelte-ignore a11y-label-has-associated-control -->
-      <label class:bx--visually-hidden={true} {id}>{description}</label>
+      <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
-      <svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
+      <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-labelledby="{id}"
-    aria-live={active ? 'assertive' : 'off'}
+    aria-live="{active ? 'assertive' : 'off'}"
-    class:bx--loading={true}
+    class:bx--loading="{true}"
-    class:bx--loading--small={small}
+    class:bx--loading--small="{small}"
-    class:bx--loading--stop={!active}
+    class:bx--loading--stop="{!active}"
     {...$$restProps}>
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class:bx--visually-hidden={true} {id}>{description}</label>
+    <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
-    <svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
+    <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}

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>

src/Modal/Modal.svelte

@@ -146,17 +146,17 @@
 </script>
 
 <div
-  bind:this={ref}
+  bind:this="{ref}"
   role="presentation"
   tabindex="-1"
-  {id}
+  id="{id}"
-  class:bx--modal={true}
+  class:bx--modal="{true}"
-  class:bx--modal-tall={!passiveModal}
+  class:bx--modal-tall="{!passiveModal}"
-  class:is-visible={open}
+  class:is-visible="{open}"
-  class:bx--modal--danger={danger}
+  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}
+    aria-label="{ariaLabel}"
-    class:bx--modal-container={true}
+    class:bx--modal-container="{true}"
-    class={size && `bx--modal-container--${size}`}
+    class="{size && `bx--modal-container--${size}`}"
-    on:click={() => {
+    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}
+          aria-label="{iconDescription}"
-          title={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}
+          aria-label="{iconDescription}"
-          title={iconDescription}
+          title="{iconDescription}"
-          class:bx--modal-close={true}
+          class:bx--modal-close="{true}"
-          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}
     </div>
     <div
-      class:bx--modal-content={true}
+      class:bx--modal-content="{true}"
-      class:bx--modal-content--with-form={hasForm}
+      class:bx--modal-content--with-form="{hasForm}"
-      class:bx--modal-scroll-content={hasScrollingContent}
+      class:bx--modal-scroll-content="{hasScrollingContent}"
-      tabindex={hasScrollingContent ? '0' : undefined}
+      tabindex="{hasScrollingContent ? '0' : undefined}"
-      role={hasScrollingContent ? 'region' : undefined}
+      role="{hasScrollingContent ? 'region' : undefined}"
-      aria-label={hasScrollingContent ? ariaLabel : undefined}
+      aria-label="{hasScrollingContent ? ariaLabel : undefined}"
-      aria-labelledby={modalLabel ? modalLabelId : modalHeadingId}>
+      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'}
+          kind="{danger ? 'danger' : 'primary'}"
-          disabled={primaryButtonDisabled}
+          disabled="{primaryButtonDisabled}"
-          on:click={() => {
+          on:click="{() => {
             dispatch('submit');
-          }}>
+          }}">
           {primaryButtonText}
         </Button>
       </div>

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>

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}
+  bind:this="{multiSelectRef}"
-  class:bx--multi-select__wrapper={true}
+  class:bx--multi-select__wrapper="{true}"
-  class:bx--list-box__wrapper={true}
+  class:bx--list-box__wrapper="{true}"
-  class:bx--multi-select__wrapper--inline={inline}
+  class:bx--multi-select__wrapper--inline="{inline}"
-  class:bx--list-box__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline="{inline}"
-  class:bx--multi-select__wrapper--inline--invalid={inline && invalid}
+  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="{true}"
-      class:bx--form__helper-text--disabled={disabled}>
+      class:bx--form__helper-text--disabled="{disabled}">
       {helperText}
     </div>
   {/if}
   <ListBox
-    aria-label={ariaLabel}
+    aria-label="{ariaLabel}"
-    {id}
+    id="{id}"
-    {disabled}
+    disabled="{disabled}"
-    {invalid}
+    invalid="{invalid}"
-    {invalidText}
+    invalidText="{invalidText}"
-    {open}
+    open="{open}"
-    {light}
+    light="{light}"
-    {size}
+    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}
+      aria-expanded="{open}"
-      on:click={() => {
+      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}
+      id="{id}"
-      {disabled}
+      disabled="{disabled}"
-      {translateWithId}>
+      translateWithId="{translateWithId}">
       {#if checked.length > 0}
         <ListBoxSelection
-          selectionCount={checked.length}
+          selectionCount="{checked.length}"
-          on:clear={() => {
+          on:clear="{() => {
             sortedItems = sortedItems.map((item) => ({
               ...item,
               checked: false,
             }));
             fieldRef.blur();
-          }}
+          }}"
-          {translateWithId}
+          translateWithId="{translateWithId}"
-          {disabled} />
+          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-expanded="{open}"
-          aria-activedescendant={highlightedId}
+          aria-activedescendant="{highlightedId}"
-          aria-disabled={disabled}
+          aria-disabled="{disabled}"
-          aria-controls={menuId}
+          aria-controls="{menuId}"
-          class:bx--text-input={true}
+          class:bx--text-input="{true}"
-          class:bx--text-input--empty={inputValue === ''}
+          class:bx--text-input--empty="{inputValue === ''}"
-          on:input={({ target }) => {
+          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}
+          disabled="{disabled}"
-          {placeholder}
+          placeholder="{placeholder}"
-          {id}
+          id="{id}"
-          {name}
+          name="{name}"
-          value={inputValue} />
+          value="{inputValue}" />
         {#if invalid}
           <WarningFilled16 class="bx--list-box__invalid-icon" />
         {/if}
         {#if inputValue}
           <ListBoxSelection
-            on:clear={() => {
+            on:clear="{() => {
               inputValue = '';
               open = false;
-            }}
+            }}"
-            {translateWithId}
+            translateWithId="{translateWithId}"
-            {disabled}
+            disabled="{disabled}"
-            {open} />
+            open="{open}" />
         {/if}
         <ListBoxMenuIcon
-          on:click={() => {
+          on:click="{() => {
             open = !open;
-          }}
+          }}"
-          {translateWithId}
+          translateWithId="{translateWithId}"
-          {open} />
+          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}
+            id="{item.id}"
-            active={item.checked}
+            active="{item.checked}"
-            highlighted={highlightedIndex === i}
+            highlighted="{highlightedIndex === i}"
-            on:click={() => {
+            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}
+              title="{useTitleInItem ? itemToString(item) : undefined}"
-              name={itemToString(item)}
+              name="{itemToString(item)}"
-              labelText={itemToString(item)}
+              labelText="{itemToString(item)}"
-              checked={item.checked}
+              checked="{item.checked}"
-              {disabled} />
+              disabled="{disabled}" />
           </ListBoxMenuItem>
         {/each}
       </ListBoxMenu>

src/Notification/InlineNotification.svelte

@@ -81,29 +81,35 @@
 
 {#if open}
   <div
-    {role}
+    role="{role}"
-    {kind}
+    kind="{kind}"
-    class:bx--inline-notification={true}
+    class:bx--inline-notification="{true}"
-    class:bx--inline-notification--low-contrast={lowContrast}
+    class:bx--inline-notification--low-contrast="{lowContrast}"
-    class:bx--inline-notification--hide-close-button={hideCloseButton}
+    class:bx--inline-notification--hide-close-button="{hideCloseButton}"
-    class={kind && `bx--inline-notification--${kind}`}
+    class="{kind && `bx--inline-notification--${kind}`}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave>
-    <div class:bx--inline-notification__details={true}>
+    <div class:bx--inline-notification__details="{true}">
-      <NotificationIcon {notificationType} {kind} {iconDescription} />
+      <NotificationIcon
-      <NotificationTextDetails {title} {subtitle} {notificationType}>
+        notificationType="{notificationType}"
+        kind="{kind}"
+        iconDescription="{iconDescription}" />
+      <NotificationTextDetails
+        title="{title}"
+        subtitle="{subtitle}"
+        notificationType="{notificationType}">
         <slot />
       </NotificationTextDetails>
     </div>
     <slot name="actions" />
     {#if !hideCloseButton}
       <NotificationButton
-        {iconDescription}
+        iconDescription="{iconDescription}"
-        {notificationType}
+        notificationType="{notificationType}"
-        on:click={close} />
+        on:click="{close}" />
     {/if}
   </div>
 {/if}

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}

src/Notification/NotificationButton.svelte

@@ -28,18 +28,18 @@
 
 <button
   type="button"
-  aria-label={iconDescription}
+  aria-label="{iconDescription}"
-  title={iconDescription}
+  title="{iconDescription}"
-  class:bx--toast-notification__close-button={notificationType === 'toast'}
+  class:bx--toast-notification__close-button="{notificationType === 'toast'}"
-  class:bx--inline-notification__close-button={notificationType === 'inline'}
+  class:bx--inline-notification__close-button="{notificationType === 'inline'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <svelte:component
-    this={renderIcon}
+    this="{renderIcon}"
-    {title}
+    title="{title}"
     class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
       {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
 </button>

src/Notification/NotificationIcon.svelte

@@ -35,6 +35,6 @@
 </script>
 
 <svelte:component
-  this={icons[kind]}
+  this="{icons[kind]}"
-  title={iconDescription}
+  title="{iconDescription}"
   class="bx--{notificationType}-notification__icon" />

src/Notification/NotificationTextDetails.svelte

@@ -25,18 +25,18 @@
 </script>
 
 {#if notificationType === 'toast'}
-  <div class:bx--toast-notification__details={true}>
+  <div class:bx--toast-notification__details="{true}">
-    <h3 class:bx--toast-notification__title={true}>{title}</h3>
+    <h3 class:bx--toast-notification__title="{true}">{title}</h3>
-    <div class:bx--toast-notification__subtitle={true}>{subtitle}</div>
+    <div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
-    <div class:bx--toast-notification__caption={true}>{caption}</div>
+    <div class:bx--toast-notification__caption="{true}">{caption}</div>
     <slot />
   </div>
 {/if}
 
 {#if notificationType === 'inline'}
-  <div class:bx--inline-notification__text-wrapper={true}>
+  <div class:bx--inline-notification__text-wrapper="{true}">
-    <p class:bx--inline-notification__title={true}>{title}</p>
+    <p class:bx--inline-notification__title="{true}">{title}</p>
-    <div class:bx--inline-notification__subtitle={true}>{subtitle}</div>
+    <div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
     <slot />
   </div>
 {/if}

src/Notification/ToastNotification.svelte

@@ -87,25 +87,32 @@
 
 {#if open}
   <div
-    {role}
+    role="{role}"
-    {kind}
+    kind="{kind}"
-    class:bx--toast-notification={true}
+    class:bx--toast-notification="{true}"
-    class:bx--toast-notification--low-contrast={lowContrast}
+    class:bx--toast-notification--low-contrast="{lowContrast}"
-    class={kind && `bx--toast-notification--${kind}`}
+    class="{kind && `bx--toast-notification--${kind}`}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave>
-    <NotificationIcon {notificationType} {kind} {iconDescription} />
+    <NotificationIcon
-    <NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
+      notificationType="{notificationType}"
+      kind="{kind}"
+      iconDescription="{iconDescription}" />
+    <NotificationTextDetails
+      title="{title}"
+      subtitle="{subtitle}"
+      caption="{caption}"
+      notificationType="{notificationType}">
       <slot />
     </NotificationTextDetails>
     {#if !hideCloseButton}
       <NotificationButton
-        {iconDescription}
+        iconDescription="{iconDescription}"
-        {notificationType}
+        notificationType="{notificationType}"
-        on:click={close} />
+        on:click="{close}" />
     {/if}
   </div>
 {/if}

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}
+  {#if !hideLabel}
-  <div class:bx--number={true} class:bx--skeleton={true} />
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
 </div>

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}

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}
+    data-invalid="{error || undefined}"
-    class:bx--number={true}
+    class:bx--number="{true}"
-    class:bx--number--helpertext={true}
+    class:bx--number--helpertext="{true}"
-    class:bx--number--readonly={readonly}
+    class:bx--number--readonly="{readonly}"
-    class:bx--number--light={light}
+    class:bx--number--light="{light}"
-    class:bx--number--nolabel={hideLabel}
+    class:bx--number--nolabel="{hideLabel}"
-    class:bx--number--mobile={mobile}
+    class:bx--number--mobile="{mobile}"
-    class={size && `bx--number--${size}`}>
+    class="{size && `bx--number--${size}`}">
     {#if mobile}
       {#if label}
         <label
-          for={id}
+          for="{id}"
-          class:bx--label={true}
+          class:bx--label="{true}"
-          class:bx--visually-hidden={hideLabel}>
+          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}
+          title="{decrementLabel}"
-          aria-label={decrementLabel || iconDescription}
+          aria-label="{decrementLabel || iconDescription}"
-          class:bx--number__control-btn={true}
+          class:bx--number__control-btn="{true}"
-          class:down-icon={true}
+          class:down-icon="{true}"
-          on:click={() => {
+          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}
+          disabled="{disabled}"
-          {id}
+          id="{id}"
-          {name}
+          name="{name}"
-          {max}
+          max="{max}"
-          {min}
+          min="{min}"
-          {step}
+          step="{step}"
-          {value}
+          value="{value}"
-          {readonly} />
+          readonly="{readonly}" />
         <button
           type="button"
           aria-live="polite"
           aria-atomic="true"
-          title={incrementLabel}
+          title="{incrementLabel}"
-          aria-label={incrementLabel || iconDescription}
+          aria-label="{incrementLabel || iconDescription}"
-          class:bx--number__control-btn={true}
+          class:bx--number__control-btn="{true}"
-          class:up-icon={true}
+          class:up-icon="{true}"
-          on:click={() => {
+          on:click="{() => {
             updateValue(1);
-          }}
+          }}"
-          {disabled}>
+          disabled="{disabled}">
           <CaretUpGlyph class="up-icon" />
         </button>
       </div>
     {:else}
       {#if label}
         <label
-          for={id}
+          for="{id}"
-          class:bx--label={true}
+          class:bx--label="{true}"
-          class:bx--visually-hidden={hideLabel}>
+          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}
+          aria-describedby="{errorId}"
-          data-invalid={invalid || undefined}
+          data-invalid="{invalid || undefined}"
-          aria-invalid={invalid || undefined}
+          aria-invalid="{invalid || undefined}"
-          aria-label={label ? undefined : ariaLabel}
+          aria-label="{label ? undefined : ariaLabel}"
           on:input
-          on:input={({ target }) => {
+          on:input="{({ target }) => {
             value = target.value;
-          }}
+          }}"
-          {disabled}
+          disabled="{disabled}"
-          {id}
+          id="{id}"
-          {max}
+          max="{max}"
-          {min}
+          min="{min}"
-          {step}
+          step="{step}"
-          {value}
+          value="{value}"
-          {readonly} />
+          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}
+            title="{incrementLabel || iconDescription}"
-            aria-label={incrementLabel || iconDescription}
+            aria-label="{incrementLabel || iconDescription}"
-            class:bx--number__control-btn={true}
+            class:bx--number__control-btn="{true}"
-            class:up-icon={true}
+            class:up-icon="{true}"
-            on:click={() => {
+            on:click="{() => {
               updateValue(1);
-            }}
+            }}"
-            {disabled}>
+            disabled="{disabled}">
             <CaretUpGlyph class="up-icon" />
           </button>
           <button
             type="button"
             aria-live="polite"
             aria-atomic="true"
-            title={decrementLabel || iconDescription}
+            title="{decrementLabel || iconDescription}"
-            aria-label={decrementLabel || iconDescription}
+            aria-label="{decrementLabel || iconDescription}"
-            class:bx--number__control-btn={true}
+            class:bx--number__control-btn="{true}"
-            class:down-icon={true}
+            class:down-icon="{true}"
-            on:click={() => {
+            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>

src/OrderedList/OrderedList.svelte

@@ -7,8 +7,8 @@
 </script>
 
 <ol
-  class:bx--list--ordered={true}
+  class:bx--list--ordered="{true}"
-  class:bx--list--nested={nested}
+  class:bx--list--nested="{nested}"
   {...$$restProps}
   on:click
   on:mouseover

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"

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-expanded="{open}"
-  aria-label={ariaLabel}
+  aria-label="{ariaLabel}"
-  {id}
+  id="{id}"
-  class:bx--overflow-menu={true}
+  class:bx--overflow-menu="{true}"
-  class:bx--overflow-menu--open={open}
+  class:bx--overflow-menu--open="{open}"
-  class:bx--overflow-menu--light={light}
+  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}
+      this="{icon}"
-      aria-label={iconDescription}
+      aria-label="{iconDescription}"
-      title={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}
+      aria-label="{ariaLabel}"
-      data-floating-menu-direction={direction}
+      data-floating-menu-direction="{direction}"
-      class:bx--overflow-menu-options={true}
+      class:bx--overflow-menu-options="{true}"
-      class:bx--overflow-menu--flip={flipped}
+      class:bx--overflow-menu--flip="{flipped}"
-      class:bx--overflow-menu-options--open={open}
+      class:bx--overflow-menu-options--open="{open}"
-      class:bx--overflow-menu-options--light={light}
+      class:bx--overflow-menu-options--light="{light}"
       class:menuOptionsClass>
       <slot />
     </ul>