feat(prettier): add svelteBracketNewLine

2025-09-14 18:01:06 +00:00 · 2020-09-24 10:50:34 -05:00 · 2020-09-24 10:50:34 -05:00 · 398887a3d3
commit 398887a3d3
parent 7a28d21ceb
182 changed files with 974 additions and 494 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -1 +1 @@
-{ "svelteStrictMode": true }
+{ "svelteStrictMode": true, "svelteBracketNewLine": true }
--- a/docs/src/components/CopyableCodeSnippet.svelte
+++ b/docs/src/components/CopyableCodeSnippet.svelte
@ -10,4 +10,5 @@
  code="{code}"
  on:click="{() => {
    copy(code);
-  }}" />
+  }}"
+/>
--- a/docs/src/components/GlobalHeader.svelte
+++ b/docs/src/components/GlobalHeader.svelte
@ -17,7 +17,8 @@
  platformName="Components Svelte"
  href="."
  rel="prefetch"
-  aria-current="{segment === undefined ? 'page' : undefined}">
+  aria-current="{segment === undefined ? 'page' : undefined}"
+>
  <SkipToContent />
  <!-- <HeaderNav>
    <HeaderNavItem
--- a/docs/src/components/Portfolio.svelte
+++ b/docs/src/components/Portfolio.svelte
@ -39,7 +39,8 @@
        <Carbon.Accordion
          count="{3}"
          skeleton="{skeleton}"
-          open="{accordionItemOpen}">
+          open="{accordionItemOpen}"
+        >
          <Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
            Content 1
          </Carbon.AccordionItem>
@ -109,7 +110,8 @@
          iconDescription="Primary"
          tooltipPosition="bottom"
          tooltipAlignment="center"
-          skeleton="{skeleton}" />
+          skeleton="{skeleton}"
+        />
        <Carbon.Button
          icon="{Add16}"
          hasIconOnly
@ -117,7 +119,8 @@
          iconDescription="Secondary"
          tooltipPosition="bottom"
          tooltipAlignment="center"
-          skeleton="{skeleton}" />
+          skeleton="{skeleton}"
+        />
        <Carbon.Button
          icon="{Add16}"
          hasIconOnly
@ -125,7 +128,8 @@
          iconDescription="Tertiary"
          tooltipPosition="bottom"
          tooltipAlignment="center"
-          skeleton="{skeleton}" />
+          skeleton="{skeleton}"
+        />
        <Carbon.Button
          icon="{Add16}"
          hasIconOnly
@ -133,7 +137,8 @@
          iconDescription="Ghost"
          tooltipPosition="bottom"
          tooltipAlignment="center"
-          skeleton="{skeleton}" />
+          skeleton="{skeleton}"
+        />
        <Carbon.Button
          icon="{Add16}"
          hasIconOnly
@ -141,7 +146,8 @@
          iconDescription="Danger"
          tooltipPosition="bottom"
          tooltipAlignment="center"
-          skeleton="{skeleton}" />
+          skeleton="{skeleton}"
+        />
      </TileCard>
    </Carbon.Column>
  </Carbon.Row>
@ -164,11 +170,13 @@
          <Carbon.Checkbox
            indeterminate
            skeleton="{skeleton}"
-            labelText="Checkbox label" />
+            labelText="Checkbox label"
+          />
          <Carbon.Checkbox
            indeterminate
            skeleton="{skeleton}"
-            labelText="Checkbox label" />
+            labelText="Checkbox label"
+          />
        </fieldset>
      </TileCard>
    </Carbon.Column>
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@ -47,7 +47,8 @@
        icon="{Code16}"
        iconDescription="Usage"
        tooltipAlignment="center"
-        tooltipPosition="top" />
+        tooltipPosition="top"
+      />
      <Button
        hasIconOnly
        kind="ghost"
@ -55,7 +56,8 @@
        icon="{Code16}"
        iconDescription="Usage"
        tooltipAlignment="center"
-        tooltipPosition="top" />
+        tooltipPosition="top"
+      />
    </div>
  </div>
 </Tile>
--- a/docs/src/routes/_layout.svelte
+++ b/docs/src/routes/_layout.svelte
@ -65,21 +65,25 @@
        text="Getting Started"
        href="getting-started"
        rel="prefetch"
-        isSelected="{segment === 'getting-started'}" />
+        isSelected="{segment === 'getting-started'}"
+      />
      <SideNavMenu
        text="Components"
        expanded="{segment === 'components'}"
-        isSelected="{segment === 'components' && !$tail}">
+        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>
@ -88,7 +92,8 @@
      <Row>
        <Column
          style="display: flex; align-items: center; justify-content:
-          space-between;">
+          space-between;"
+        >
          <Breadcrumb>
            <BreadcrumbItem href="." isCurrentPage="{!$tail && !segment}">
              Home
--- a/docs/src/routes/components/[slug].svelte
+++ b/docs/src/routes/components/[slug].svelte
@ -110,7 +110,8 @@
            selected="{props[key].default}"
            on:change="{({ detail }) => {
              defaultProps = { ...defaultProps, [key]: detail };
-            }}">
+            }}"
+          >
            {#each props[key].values as value}
              <RadioButton value="{value}" id="{value}" labelText="{value}" />
            {/each}
@ -125,6 +126,7 @@
      code="{data.source}"
      on:click="{() => {
        copy(data.source);
-      }}" />
+      }}"
+    />
  </Column>
 </Row>
--- a/docs/src/routes/examples/Button.svelte
+++ b/docs/src/routes/examples/Button.svelte
@ -11,7 +11,8 @@
    on:click="{() => console.log('click')}"
    on:mouseover="{() => console.log('mouseover')}"
    on:mouseenter="{() => console.log('mouseenter')}"
-    on:mouseleave="{() => console.log('mouseleave')}">
+    on:mouseleave="{() => console.log('mouseleave')}"
+  >
    Primary button
  </Button>

@ -46,7 +47,8 @@
    icon="{Add16}"
    iconDescription="Primary"
    tooltipPosition="bottom"
-    tooltipAlignment="center" />
+    tooltipAlignment="center"
+  />

  <Button
    {...$$props}
@ -55,7 +57,8 @@
    icon="{Add16}"
    iconDescription="Secondary"
    tooltipPosition="bottom"
-    tooltipAlignment="center" />
+    tooltipAlignment="center"
+  />

  <Button
    {...$$props}
@ -64,7 +67,8 @@
    icon="{Add16}"
    iconDescription="Tertiary"
    tooltipPosition="bottom"
-    tooltipAlignment="center" />
+    tooltipAlignment="center"
+  />

  <Button
    {...$$props}
@ -73,7 +77,8 @@
    icon="{Add16}"
    iconDescription="Ghost"
    tooltipPosition="bottom"
-    tooltipAlignment="center" />
+    tooltipAlignment="center"
+  />

  <Button
    {...$$props}
@ -82,5 +87,6 @@
    icon="{Add16}"
    iconDescription="Danger"
    tooltipPosition="bottom"
-    tooltipAlignment="center" />
+    tooltipAlignment="center"
+  />
 </div>
--- a/docs/src/routes/getting-started/index.svelte
+++ b/docs/src/routes/getting-started/index.svelte
@ -27,11 +27,13 @@
        <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`}" />
+              code="{`npm -i -D carbon-components-svelte`}"
+            />
          </TabContent>
        </div>
      </Tabs>
--- a/examples/rollup-typescript/src/App.svelte
+++ b/examples/rollup-typescript/src/App.svelte
@ -49,7 +49,8 @@
                      <Select
                        labelText="Carbon theme"
                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem">
+                        style="margin-bottom: 1rem"
+                      >
                        <SelectItem value="white" text="White" />
                        <SelectItem value="g10" text="Gray 10" />
                        <SelectItem value="g90" text="Gray 90" />
--- a/examples/rollup/src/App.svelte
+++ b/examples/rollup/src/App.svelte
@ -49,7 +49,8 @@
                      <Select
                        labelText="Carbon theme"
                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem">
+                        style="margin-bottom: 1rem"
+                      >
                        <SelectItem value="white" text="White" />
                        <SelectItem value="g10" text="Gray 10" />
                        <SelectItem value="g90" text="Gray 90" />
--- a/examples/routify/src/pages/index.svelte
+++ b/examples/routify/src/pages/index.svelte
@ -40,7 +40,8 @@
                <Select
                  labelText="Carbon theme"
                  bind:selected="{$carbon_theme}"
-                  style="margin-bottom: 1rem">
+                  style="margin-bottom: 1rem"
+                >
                  <SelectItem value="white" text="White" />
                  <SelectItem value="g10" text="Gray 10" />
                  <SelectItem value="g90" text="Gray 90" />
--- a/examples/sapper/src/components/Nav.svelte
+++ b/examples/sapper/src/components/Nav.svelte
@ -53,12 +53,14 @@
    <li>
      <a
        aria-current="{segment === undefined ? 'page' : undefined}"
-        href=".">home</a>
+        href="."
+      >home</a>
    </li>
    <li>
      <a
        aria-current="{segment === 'about' ? 'page' : undefined}"
-        href="about">about</a>
+        href="about"
+      >about</a>
    </li>

    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
@ -67,7 +69,8 @@
      <a
        rel="prefetch"
        aria-current="{segment === 'blog' ? 'page' : undefined}"
-        href="blog">blog</a>
+        href="blog"
+      >blog</a>
    </li>
  </ul>
 </nav>
--- a/examples/sapper/src/routes/index.svelte
+++ b/examples/sapper/src/routes/index.svelte
@ -41,7 +41,8 @@
                <Select
                  labelText="Carbon theme"
                  bind:selected="{$carbon_theme}"
-                  style="margin-bottom: 1rem">
+                  style="margin-bottom: 1rem"
+                >
                  <SelectItem value="white" text="White" />
                  <SelectItem value="g10" text="Gray 10" />
                  <SelectItem value="g90" text="Gray 90" />
--- a/examples/svite/src/App.svelte
+++ b/examples/svite/src/App.svelte
@ -44,7 +44,8 @@
                      <Select
                        labelText="Carbon theme"
                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem">
+                        style="margin-bottom: 1rem"
+                      >
                        <SelectItem value="white" text="White" />
                        <SelectItem value="g10" text="Gray 10" />
                        <SelectItem value="g90" text="Gray 90" />
--- a/examples/webpack/src/App.svelte
+++ b/examples/webpack/src/App.svelte
@ -45,7 +45,8 @@
                      <Select
                        labelText="Carbon theme"
                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem">
+                        style="margin-bottom: 1rem"
+                      >
                        <SelectItem value="white" text="White" />
                        <SelectItem value="g10" text="Gray 10" />
                        <SelectItem value="g90" text="Gray 90" />
--- a/src/Accordion/Accordion.Skeleton.svelte
+++ b/src/Accordion/Accordion.Skeleton.svelte
@ -22,11 +22,13 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  {#if open}
    <li
      class:bx--accordion__item="{true}"
-      class:bx--accordion__item--active="{true}">
+      class:bx--accordion__item--active="{true}"
+    >
      <span class:bx--accordion__heading="{true}">
        <ChevronRight16 class="bx--accordion__arrow" />
        <SkeletonText class="bx--accordion__title" />
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@ -20,7 +20,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave />
+    on:mouseleave
+  />
 {:else}
  <ul
    class:bx--accordion="{true}"
@ -29,7 +30,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <slot />
  </ul>
 {/if}
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@ -31,7 +31,8 @@
  on:animationend
  on:animationend="{() => {
    animation = undefined;
-  }}">
+  }}"
+>
  <button
    type="button"
    class:bx--accordion__heading="{true}"
@ -50,10 +51,12 @@
      if (open && key === 'Escape') {
        open = false;
      }
-    }}">
+    }}"
+  >
    <ChevronRight16
      class="bx--accordion__arrow"
-      aria-label="{iconDescription}" />
+      aria-label="{iconDescription}"
+    />
    <div class="bx--accordion__title">
      <slot name="title">{title}</slot>
    </div>
--- a/src/Breadcrumb/Breadcrumb.Skeleton.svelte
+++ b/src/Breadcrumb/Breadcrumb.Skeleton.svelte
@ -20,7 +20,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
    <div class:bx--breadcrumb-item="{true}">
      <span class:bx--link="{true}">&nbsp;</span>
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@ -20,7 +20,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave />
+    on:mouseleave
+  />
 {:else}
  <nav
    aria-label="Breadcrumb"
@ -28,10 +29,12 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <ol
      class:bx--breadcrumb="{true}"
-      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}">
+      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
+    >
      <slot />
    </ol>
  </nav>
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@ -21,13 +21,15 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  {#if href}
    <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>
--- a/src/Button/Button.Skeleton.svelte
+++ b/src/Button/Button.Skeleton.svelte
@ -23,7 +23,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    {''}
  </a>
 {:else}
@ -35,5 +36,6 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave></div>
+    on:mouseleave
+  ></div>
 {/if}
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@ -129,7 +129,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave />
+    on:mouseleave
+  />
 {:else}
  {#if as}
    <slot props="{buttonProps}" />
@ -141,7 +142,8 @@
      on:click
      on:mouseover
      on:mouseenter
-      on:mouseleave>
+      on:mouseleave
+    >
      {#if hasIconOnly}
        <span class:bx--assistive-text="{true}">{iconDescription}</span>
      {/if}
@ -151,7 +153,8 @@
          this="{icon}"
          aria-hidden="true"
          class="bx--btn__icon"
-          aria-label="{iconDescription}" />
+          aria-label="{iconDescription}"
+        />
      {/if}
    </a>
  {:else}
@ -161,7 +164,8 @@
      on:click
      on:mouseover
      on:mouseenter
-      on:mouseleave>
+      on:mouseleave
+    >
      {#if hasIconOnly}
        <span class:bx--assistive-text="{true}">{iconDescription}</span>
      {/if}
@ -171,7 +175,8 @@
          this="{icon}"
          aria-hidden="true"
          class="bx--btn__icon"
-          aria-label="{iconDescription}" />
+          aria-label="{iconDescription}"
+        />
      {/if}
    </button>
  {/if}
--- a/src/Button/ButtonSet.svelte
+++ b/src/Button/ButtonSet.svelte
@ -9,6 +9,7 @@
 <div
  class:bx--btn-set="{true}"
  class:bx--btn-set--stacked="{stacked}"
-  {...$$restProps}>
+  {...$$restProps}
+>
  <slot />
 </div>
--- a/src/Checkbox/Checkbox.Skeleton.svelte
+++ b/src/Checkbox/Checkbox.Skeleton.svelte
@ -6,8 +6,10 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <span
    class:bx--checkbox-label-text="{true}"
-    class:bx--skeleton="{true}"></span>
+    class:bx--skeleton="{true}"
+  ></span>
 </div>
--- a/src/Checkbox/Checkbox.Story.svelte
+++ b/src/Checkbox/Checkbox.Story.svelte
@ -41,7 +41,8 @@
      bind:checked
      on:check="{({ detail }) => {
        console.log('on:check', detail);
-      }}" />
+      }}"
+    />
    <Checkbox {...checkboxProps} id="checkbox-label-2" checked />
  </fieldset>
 {/if}
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@ -79,7 +79,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave />
+    on:mouseleave
+  />
 {:else}
  <div
    class:bx--form-item="{true}"
@ -88,7 +89,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <input
      bind:this="{ref}"
      type="checkbox"
@ -102,11 +104,13 @@
      on:change
      on:change="{() => {
        checked = !checked;
-      }}" />
+      }}"
+    />
    <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
      <span
        class:bx--checkbox-label-text="{true}"
-        class:bx--visually-hidden="{hideLabel}">
+        class:bx--visually-hidden="{hideLabel}"
+      >
        {labelText}
      </span>
    </label>
--- a/src/CodeSnippet/CodeSnippet.Skeleton.svelte
+++ b/src/CodeSnippet/CodeSnippet.Skeleton.svelte
@ -15,7 +15,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div class:bx--snippet-container="{true}">
    {#if type === 'single'}
      <span></span>
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@ -111,7 +111,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave />
+    on:mouseleave
+  />
 {:else}
  {#if type === 'inline'}
    {#if hideCopyButton}
@ -121,7 +122,8 @@
          {expanded && 'bx--snippet--expand'}
          {light && 'bx--snippet--light'}
          {hideCopyButton && 'bx--snippet--no-copy'}"
-        {...$$restProps}>
+        {...$$restProps}
+      >
        <code id="{id}">
          <slot>{code}</slot>
        </code>
@ -141,7 +143,8 @@
        on:click
        on:mouseover
        on:mouseenter
-        on:mouseleave>
+        on:mouseleave
+      >
        <code id="{id}">
          <slot>{code}</slot>
        </code>
@ -158,12 +161,14 @@
      class="{type && `bx--snippet--${type}`} {$$restProps.class}"
      on:mouseover
      on:mouseenter
-      on:mouseleave>
+      on:mouseleave
+    >
      <div
        role="{type === 'single' ? 'textbox' : undefined}"
        tabindex="{type === 'single' ? '0' : undefined}"
        class:bx--snippet-container="{true}"
-        aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}">
+        aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
+      >
        <code>
          <pre bind:this="{ref}">
            <slot>{code}</slot>
@ -176,7 +181,8 @@
          feedbackTimeout="{feedbackTimeout}"
          iconDescription="{copyButtonDescription}"
          on:click
-          on:animationend />
+          on:animationend
+        />
      {/if}
      {#if showMoreLess}
        <Button
@ -185,11 +191,13 @@
          class="bx--snippet-btn--expand"
          on:click="{() => {
            expanded = !expanded;
-          }}">
+          }}"
+        >
          <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>
--- a/src/ComboBox/ComboBox.Story.svelte
+++ b/src/ComboBox/ComboBox.Story.svelte
@ -33,21 +33,23 @@
 <p>
  <code>items</code> must be an array of objects; mandatory fields are `id` and `text`.
 </p>
-<pre
-  style="margin-top: 1rem;">
-  <code>{'items = Array<{ id: string; text: string; }>'}</code>
+<pre style="margin-top: 1rem;">
+  <code
+  >{'items = Array<{ id: string; text: string; }>'}</code>
 </pre>
 <div style="margin-top: 2rem;">
  <ToggleSmall
    labelText="Enable filtering"
    bind:toggled
-    style="margin-top: 1rem;" />
+    style="margin-top: 1rem;"
+  />
  <Button
    size="small"
    on:click="{() => {
      selectedIndex = 1;
    }}"
-    style="margin-top: 1rem;">
+    style="margin-top: 1rem;"
+  >
    Set item to "Option 2"
  </Button>
 </div>
@ -65,5 +67,6 @@
      console.log('on:clear');
    }}"
    items="{items}"
-    shouldFilterItem="{shouldFilterItem}" />
+    shouldFilterItem="{shouldFilterItem}"
+  />
 </div>
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@ -183,7 +183,8 @@
    <label
      for="{id}"
      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}">
+      class:bx--label--disabled="{disabled}"
+    >
      {titleText}
    </label>
  {/if}
@ -196,7 +197,8 @@
    invalidText="{invalidText}"
    open="{open}"
    light="{light}"
-    size="{size}">
+    size="{size}"
+  >
    <ListBoxField
      role="button"
      aria-expanded="{open}"
@ -206,7 +208,8 @@
      id="{id}"
      name="{name}"
      disabled="{disabled}"
-      translateWithId="{translateWithId}">
+      translateWithId="{translateWithId}"
+    >
      <input
        bind:this="{ref}"
        tabindex="0"
@ -251,7 +254,8 @@
        disabled="{disabled}"
        placeholder="{placeholder}"
        id="{id}"
-        value="{inputValue}" />
+        value="{inputValue}"
+      />
      {#if invalid}
        <WarningFilled16 class="bx--list-box__invalid-icon" />
      {/if}
@ -265,7 +269,8 @@
          }}"
          translateWithId="{translateWithId}"
          disabled="{disabled}"
-          open="{open}" />
+          open="{open}"
+        />
      {/if}
      <ListBoxMenuIcon
        on:click="{(e) => {
@ -273,7 +278,8 @@
          open = !open;
        }}"
        translateWithId="{translateWithId}"
-        open="{open}" />
+        open="{open}"
+      />
    </ListBoxField>
    {#if open}
      <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
@ -290,7 +296,8 @@
            }}"
            on:mouseenter="{() => {
              highlightedIndex = i;
-            }}">
+            }}"
+          >
            {itemToString(item)}
          </ListBoxMenuItem>
        {/each}
@ -300,7 +307,8 @@
  {#if !invalid && helperText}
    <div
      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
+      class:bx--form__helper-text--disabled="{disabled}"
+    >
      {helperText}
    </div>
  {/if}
--- a/src/ComposedModal/ComposedModal.Story.svelte
+++ b/src/ComposedModal/ComposedModal.Story.svelte
@ -18,11 +18,13 @@
    {...$$props.composedModal}
    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
@ -30,7 +32,8 @@
          size="field"
          on:click="{() => {
            type = type === 'password' ? 'text' : 'password';
-          }}">
+          }}"
+        >
          Programmatically toggle password
        </Button>
      </div>
@ -58,7 +61,8 @@
    </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>
@ -86,11 +90,13 @@
    {...$$props.composedModal}
    open
    on:close="{() => {}}"
-    on:submit="{() => {}}">
+    on:submit="{() => {}}"
+  >
    <ModalHeader
      {...$$props.modalHeader}
      title="Passive modal title as the message. Should be direct and 3 lines or
-      less." />
+      less."
+    />
    <ModalBody {...$$props.modalBody} />
    <ModalFooter {...$$props.modalFooter} />
  </ComposedModal>
@ -101,18 +107,21 @@
    <Button
      on:click="{() => {
        open = true;
-      }}">
+      }}"
+    >
      Launch composed modal
    </Button>
  </div>
  <ComposedModal
    {...$$props.composedModal}
    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>
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@ -122,14 +122,16 @@
      focus(currentTarget);
      didOpen = false;
    }
-  }}">
+  }}"
+>
  <div
    bind:this="{innerModal}"
    class:bx--modal-container="{true}"
    class="{size && `bx--modal-container--${size}`} {containerClass}"
    on:click="{() => {
      didClickInnerModal = true;
-    }}">
+    }}"
+  >
    <slot />
  </div>
 </div>
--- a/src/ComposedModal/ModalBody.svelte
+++ b/src/ComposedModal/ModalBody.svelte
@ -17,7 +17,8 @@
  role="{hasScrollingContent ? 'region' : undefined}"
  class:bx--modal-content="{true}"
  class:bx--modal-content--with-form="{hasForm}"
-  {...$$restProps}>
+  {...$$restProps}
+>
  <slot />
 </div>
 {#if hasScrollingContent}
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@ -52,7 +52,8 @@
      kind="{danger ? 'danger' : 'primary'}"
      disabled="{primaryButtonDisabled}"
      class="{primaryClass}"
-      on:click="{submit}">
+      on:click="{submit}"
+    >
      {primaryButtonText}
    </Button>
  {/if}
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@ -52,7 +52,8 @@
    <p
      class:bx--modal-header__label="{true}"
      class:bx--type-delta="{true}"
-      class:labelClass>
+      class:labelClass
+    >
      {label}
    </p>
  {/if}
@ -60,7 +61,8 @@
    <p
      class:bx--modal-header__heading="{true}"
      class:bx--type-beta="{true}"
-      class:titleClass>
+      class:titleClass
+    >
      {title}
    </p>
  {/if}
@ -72,7 +74,8 @@
    class:bx--modal-close="{true}"
    class:closeClass
    on:click
-    on:click="{closeModal}">
+    on:click="{closeModal}"
+  >
    <Close20 class="bx--modal-close__icon {closeIconClass}" />
  </button>
 </div>
--- a/src/ContentSwitcher/ContentSwitcher.Story.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.Story.svelte
@ -19,7 +19,8 @@
    light="{light}"
    on:change="{({ detail }) => {
      console.log('on:change', detail);
-    }}">
+    }}"
+  >
    <Switch {...$$props} text="First section" />
    <Switch {...$$props} text="Second section" selected />
    <Switch {...$$props} text="Third section" />
@ -30,7 +31,8 @@
    bind:selectedIndex
    on:change="{({ detail }) => {
      console.log('on:change', detail);
-    }}">
+    }}"
+  >
    <Switch {...$$props} text="First section" />
    <Switch {...$$props} text="Second section" />
    <Switch {...$$props}>
@ -44,7 +46,8 @@
    style="margin-top: 1.5rem"
    on:click="{() => {
      selectedIndex = 1;
-    }}">
+    }}"
+  >
    Programmatically set to second index
  </div>
 {/if}
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@ -64,6 +64,7 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <slot />
 </div>
--- a/src/ContentSwitcher/Switch.svelte
+++ b/src/ContentSwitcher/Switch.svelte
@ -75,7 +75,8 @@
    } else if (key === 'ArrowLeft') {
      ctx.change(-1);
    }
-  }}">
+  }}"
+>
  <span class:bx--content-switcher__label="{true}">
    <slot>{text}</slot>
  </span>
--- a/src/Copy/Copy.svelte
+++ b/src/Copy/Copy.svelte
@ -51,14 +51,16 @@
    if (animationName === 'hide-feedback') {
      animation = undefined;
    }
-  }}">
+  }}"
+>
  <slot>
    {#if animation}{feedback || $$restProps['aria-label']}{/if}
  </slot>
  <span
    aria-hidden="true"
    class:bx--assistive-text="{true}"
-    class:bx--copy-btn__feedback="{true}">
+    class:bx--copy-btn__feedback="{true}"
+  >
    {feedback}
  </span>
 </button>
--- a/src/CopyButton/CopyButton.Story.svelte
+++ b/src/CopyButton/CopyButton.Story.svelte
@ -9,4 +9,5 @@
  }}"
  on:animationend="{(e) => {
    console.log('animation end', e.animationName);
-  }}" />
+  }}"
+/>
--- a/src/CopyButton/CopyButton.svelte
+++ b/src/CopyButton/CopyButton.svelte
@ -15,6 +15,7 @@
  title="{iconDescription}"
  {...$$restProps}
  on:click
-  on:animationend>
+  on:animationend
+>
  <Copy16 class="bx--snippet__icon" />
 </Copy>
--- a/src/DataTable/DataTable.Story.svelte
+++ b/src/DataTable/DataTable.Story.svelte
@ -82,7 +82,8 @@
    <TableContainer
      title="DataTable"
      description="With default options"
-      {...props.getTableContainerProps()}>
+      {...props.getTableContainerProps()}
+    >
      <Table {...props.getTableProps()}>
        <TableHead>
          <TableRow>
@ -126,7 +127,8 @@
      console.log('on:click:cell', detail);
    }}"
    rows="{rows}"
-    headers="{headers}" />
+    headers="{headers}"
+  />
 {:else}
  <DataTable
    title="{$$props.title}"
@ -147,5 +149,6 @@
      console.log('on:click:cell', detail);
    }}"
    rows="{rows}"
-    headers="{headers}" />
+    headers="{headers}"
+  />
 {/if}
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@ -121,7 +121,8 @@
      zebra="{zebra}"
      size="{size}"
      stickyHeader="{stickyHeader}"
-      sortable="{sortable}">
+      sortable="{sortable}"
+    >
      <TableHead>
        <TableRow>
          {#each headers as header, i (header.key)}
@ -137,7 +138,8 @@
                  key: header.key,
                  sortDirection,
                });
-              }}">
+              }}"
+            >
              {header.value}
            </TableHeader>
          {/each}
@ -149,13 +151,15 @@
            on:click="{() => {
              dispatch('click', { row });
              dispatch('click:row', row);
-            }}">
+            }}"
+          >
            {#each row.cells as cell, j (cell.key)}
              <TableCell
                on:click="{() => {
                  dispatch('click', { row, cell });
                  dispatch('click:cell', cell);
-                }}">
+                }}"
+              >
                {cell.value}
              </TableCell>
            {/each}
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@ -47,7 +47,8 @@
      class:bx--data-table--zebra="{zebra}"
      class:bx--data-table--static="{useStaticWidth}"
      class:bx--data-table--no-border="{!shouldShowBorder}"
-      class:bx--data-table--sticky-header="{stickyHeader}">
+      class:bx--data-table--sticky-header="{stickyHeader}"
+    >
      <slot />
    </table>
  </section>
@ -62,7 +63,8 @@
    class:bx--data-table--static="{useStaticWidth}"
    class:bx--data-table--no-border="{!shouldShowBorder}"
    class:bx--data-table--sticky-header="{stickyHeader}"
-    {...$$restProps}>
+    {...$$restProps}
+  >
    <slot />
  </table>
 {/if}
--- a/src/DataTable/TableContainer.svelte
+++ b/src/DataTable/TableContainer.svelte
@ -21,7 +21,8 @@
 <div
  class:bx--data-table-container="{true}"
  class:bx--data-table--max-width="{stickyHeader}"
-  {...$$restProps}>
+  {...$$restProps}
+>
  {#if title}
    <div class:bx--data-table-header="{true}">
      <h4 class:bx--data-table-header__title="{true}">{title}</h4>
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@ -38,19 +38,22 @@
    {...$$restProps}
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <button
      class:bx--table-sort="{true}"
      class:bx--table-sort--active="{active}"
      class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
-      on:click>
+      on:click
+    >
      <span class:bx--table-header-label="{true}">
        <slot />
      </span>
      <ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
      <ArrowsVertical20
        aria-label="{ariaLabel}"
-        class="bx--table-sort__icon-unsorted" />
+        class="bx--table-sort__icon-unsorted"
+      />
    </button>
  </th>
 {:else}
@ -61,7 +64,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <span class:bx--table-header-label="{true}">
      <slot />
    </span>
--- a/src/DataTable/TableRow.svelte
+++ b/src/DataTable/TableRow.svelte
@ -14,6 +14,7 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <slot />
 </tr>
--- a/src/DataTableSkeleton/DataTableSkeleton.svelte
+++ b/src/DataTableSkeleton/DataTableSkeleton.svelte
@ -15,7 +15,7 @@
   * Set the size of the data table
   * @type {"compact" | "short" | "tall"} [size]
   */
-   export let size = undefined;
+  export let size = undefined;

  /**
   * Set to `true` to apply zebra styles to the datatable rows
@ -61,7 +61,8 @@
        <span
          class:bx--skeleton="{true}"
          class:bx--btn="{true}"
-          class:bx--btn--sm="{true}"></span>
+          class:bx--btn--sm="{true}"
+        ></span>
      </div>
    </section>
  {/if}
@ -76,7 +77,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <thead>
      <tr>
        {#each cols as col, i (col)}
--- a/src/DatePicker/DatePicker.Skeleton.svelte
+++ b/src/DatePicker/DatePicker.Skeleton.svelte
@ -18,19 +18,22 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div
    class:bx--date-picker="{true}"
    class:bx--skeleton="{true}"
    class:bx--date-picker--range="{true}"
    class:bx--date-picker--short="{!range}"
-    class:bx--date-picker--simple="{!range}">
+    class:bx--date-picker--simple="{!range}"
+  >
    {#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
      <div class:bx--date-picker-container="{true}">
        <label for="{id}" class:bx--label="{true}"></label>
        <div
          class:bx--date-picker__input="{true}"
-          class:bx--skeleton="{true}"></div>
+          class:bx--skeleton="{true}"
+        ></div>
      </div>
    {/each}
  </div>
--- a/src/DatePicker/DatePicker.Story.svelte
+++ b/src/DatePicker/DatePicker.Story.svelte
@ -19,7 +19,8 @@
      datePickerType="single"
      on:change="{({ detail }) => {
        console.log('change', detail);
-      }}">
+      }}"
+    >
      <DatePickerInput
        {...$$props.datePickerInput}
        on:close="{() => {
@ -27,13 +28,15 @@
        }}"
        on:input="{() => {
          console.log('on:input');
-        }}" />
+        }}"
+      />
    </DatePicker>
    <button
      on:click|preventDefault="{() => {
        value = '12/12/2020';
      }}"
-      style="margin-top: 1rem">
+      style="margin-top: 1rem"
+    >
      Set date to 12/12/2020
    </button>
  </div>
@ -42,11 +45,13 @@
    <DatePickerInput
      {...$$props.datePickerInput}
      id="date-picker-input-id-start"
-      labelText="Start date" />
+      labelText="Start date"
+    />
    <DatePickerInput
      {...$$props.datePickerInput}
      id="date-picker-input-id-end"
-      labelText="End date" />
+      labelText="End date"
+    />
  </DatePicker>
 {:else}
  <DatePicker
@ -55,7 +60,8 @@
    bind:value
    on:change="{({ detail }) => {
      console.log('on:change', detail);
-    }}">
+    }}"
+  >
    <DatePickerInput {...$$props.datePickerInput} />
  </DatePicker>
 {/if}
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@ -191,7 +191,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div
    bind:this="{datePickerRef}"
    id="{id}"
@ -199,7 +200,8 @@
    class:bx--date-picker--short="{short}"
    class:bx--date-picker--light="{light}"
    class="{datePickerType && `bx--date-picker--${datePickerType}`}
-      {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
+      {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}"
+  >
    <slot />
  </div>
 </div>
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@ -102,13 +102,15 @@
 <div
  class:bx--date-picker-container="{true}"
  class:bx--date-picker--nolabel="{!labelText}"
-  {...$$restProps}>
+  {...$$restProps}
+>
  {#if labelText}
    <label
      for="{id}"
      class:bx--label="{true}"
      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}">
+      class:bx--label--disabled="{disabled}"
+    >
      {labelText}
    </label>
  {/if}
@ -141,14 +143,16 @@
      on:blur
      on:blur="{({ relatedTarget }) => {
        blurInput(relatedTarget);
-      }}" />
+      }}"
+    />
    {#if $hasCalendar}
      <Calendar16
        role="img"
        class="bx--date-picker__icon"
        aria-label="{iconDescription}"
        title="{iconDescription}"
-        on:click="{openCalendar}" />
+        on:click="{openCalendar}"
+      />
    {/if}
  </div>
  {#if invalid}
--- a/src/Dropdown/Dropdown.Skeleton.svelte
+++ b/src/Dropdown/Dropdown.Skeleton.svelte
@ -16,7 +16,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div role="button" class:bx--list-box__field="{true}">
    <span class:bx--list-box__label="{true}"></span>
  </div>
--- a/src/Dropdown/Dropdown.Story.svelte
+++ b/src/Dropdown/Dropdown.Story.svelte
@ -25,16 +25,17 @@
    <code>items</code> must be an array of objects; mandatory fields are `id` and
    `text`.
  </p>
-  <pre
-    style="margin-top: 1rem;">
-    <code>{'items = Array<{ id: string; text: string; }>'}</code>
+  <pre style="margin-top: 1rem;">
+    <code
+    >{'items = Array<{ id: string; text: string; }>'}</code>
  </pre>
  <div style="margin-top: 2rem; margin-bottom: 2rem;">
    <Button
      size="small"
      on:click="{() => {
        selectedIndex = selectedIndex > -1 ? -1 : 1;
-      }}">
+      }}"
+    >
      {selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
    </Button>
  </div>
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@ -157,12 +157,14 @@
  class:bx--dropdown__wrapper--inline="{inline}"
  class:bx--list-box__wrapper--inline="{inline}"
  class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}"
-  {...$$restProps}>
+  {...$$restProps}
+>
  {#if titleText}
    <label
      for="{id}"
      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}">
+      class:bx--label--disabled="{disabled}"
+    >
      {titleText}
    </label>
  {/if}
@ -184,7 +186,8 @@
    open="{open}"
    invalid="{invalid}"
    invalidText="{invalidText}"
-    light="{light}">
+    light="{light}"
+  >
    {#if invalid}
      <WarningFilled16 class="bx--list-box__invalid-icon" />
    {/if}
@ -217,7 +220,8 @@
      }}"
      disabled="{disabled}"
      translateWithId="{translateWithId}"
-      id="{id}">
+      id="{id}"
+    >
      <span class="bx--list-box__label">
        {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
      </span>
@ -236,7 +240,8 @@
            }}"
            on:mouseenter="{() => {
              highlightedIndex = i;
-            }}">
+            }}"
+          >
            {itemToString(item)}
          </ListBoxMenuItem>
        {/each}
@ -246,7 +251,8 @@
  {#if !inline && !invalid && helperText}
    <div
      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
+      class:bx--form__helper-text--disabled="{disabled}"
+    >
      {helperText}
    </div>
  {/if}
--- a/src/FileUploader/FileUploader.Skeleton.svelte
+++ b/src/FileUploader/FileUploader.Skeleton.svelte
@ -9,7 +9,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <SkeletonText heading width="100px" />
  <SkeletonText width="225px" class="bx--label-description" />
  <ButtonSkeleton />
--- a/src/FileUploader/FileUploader.Story.svelte
+++ b/src/FileUploader/FileUploader.Story.svelte
@ -21,7 +21,8 @@
      {...$$props}
      on:add="{({ detail }) => {
        console.log(detail);
-      }}" />
+      }}"
+    />
  {:else if story === 'item'}
    <FileUploaderItem
      {...$$props}
@ -30,7 +31,8 @@
      }}"
      on:click="{() => {
        console.log('click');
-      }}" />
+      }}"
+    />
  {:else if story === 'uploader'}
    <div class="bx--file__container">
      <FileUploader
@ -42,13 +44,15 @@
        }}"
        on:remove="{({ detail }) => {
          console.log('remove', detail);
-        }}" />
+        }}"
+      />
      <Button
        kind="secondary"
        size="small"
        style="margin-top: 1rem"
        disabled="{disabled}"
-        on:click="{fileUploader.clearFiles}">
+        on:click="{fileUploader.clearFiles}"
+      >
        Clear File{files.length === 1 ? '' : 's'}
      </Button>
    </div>
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@ -95,7 +95,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <strong class:bx--file--label="{true}">{labelTitle}</strong>
  <p class:bx--label-description="{true}">{labelDescription}</p>
  <FileUploaderButton
@ -108,7 +109,8 @@
    on:change
    on:change="{({ target }) => {
      files = [...target.files].map(({ name }) => name);
-    }}" />
+    }}"
+  />
  <div class:bx--file-container="{true}">
    {#each files as name, i (name)}
      <span class:bx--file__selected-file="{true}">
@ -126,7 +128,8 @@
            on:click
            on:click="{() => {
              files = files.filter((_, index) => index !== i);
-            }}" />
+            }}"
+          />
        </span>
      </span>
    {/each}
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@ -79,7 +79,8 @@
    if (key === ' ' || key === 'Enter') {
      ref.click();
    }
-  }}">
+  }}"
+>
  <span role="{role}">{labelText}</span>
 </label>
 <input
@ -104,4 +105,5 @@
  on:click
  on:click="{({ target }) => {
    target.value = null;
-  }}" />
+  }}"
+/>
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@ -94,7 +94,8 @@
      over = false;
      dispatch('add', validateFiles(dataTransfer.files));
    }
-  }}">
+  }}"
+>
  <label
    for="{id}"
    tabindex="{tabindex}"
@ -105,11 +106,13 @@
      if (key === ' ' || key === 'Enter') {
        ref.click();
      }
-    }}">
+    }}"
+  >
    <div
      role="{role}"
      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}"
@ -128,7 +131,8 @@
        on:click
        on:click="{({ target }) => {
          target.value = null;
-        }}" />
+        }}"
+      />
    </div>
  </label>
 </div>
--- a/src/FileUploader/FileUploaderItem.svelte
+++ b/src/FileUploader/FileUploaderItem.svelte
@ -54,7 +54,8 @@
  {...$$restProps}
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <p class:bx--file-filename="{true}">{name}</p>
  <span class:bx--file__state-container="{true}">
    <Filename
@ -68,7 +69,8 @@
      }}"
      iconDescription="{iconDescription}"
      status="{status}"
-      invalid="{invalid}" />
+      invalid="{invalid}"
+    />
  </span>
  {#if invalid && errorSubject}
    <div class:bx--form-requirement="{true}">
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@ -28,7 +28,8 @@
    description="{iconDescription}"
    {...$$restProps}
    small
-    withOverlay="{false}" />
+    withOverlay="{false}"
+  />
 {/if}

 {#if status === 'edit'}
@ -41,7 +42,8 @@
    class="bx--file-close"
    {...$$restProps}
    on:click
-    on:keydown />
+    on:keydown
+  />
 {/if}

 {#if status === 'complete'}
@ -49,5 +51,6 @@
    aria-label="{iconDescription}"
    title="{iconDescription}"
    class="bx--file-complete"
-    {...$$restProps} />
+    {...$$restProps}
+  />
 {/if}
--- a/src/Form/Form.Story.svelte
+++ b/src/Form/Form.Story.svelte
@ -17,7 +17,8 @@
 <Form
  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" />
@ -29,7 +30,8 @@
    min="{0}"
    max="{100}"
    value="{50}"
-    step="{10}" />
+    step="{10}"
+  />
  <FormGroup legendText="Toggle heading">
    <Toggle id="toggle-1" />
    <Toggle id="toggle-2" disabled />
@ -38,29 +40,35 @@
    <FileUploader
      id="file-1"
      buttonLabel="Add files"
-      labelDescription="Choose Files..." />
+      labelDescription="Choose Files..."
+    />
  </FormGroup>
  <FormGroup legendText="Radio Button heading">
    <RadioButtonGroup
      name="radio-button-group"
-      defaultSelected="default-selected">
+      defaultSelected="default-selected"
+    >
      <RadioButton
        id="radio-1"
        value="standard"
-        labelText="Standard Radio Button" />
+        labelText="Standard Radio Button"
+      />
      <RadioButton
        id="radio-2"
        value="default-selected"
-        labelText="Default Selected Radio Button" />
+        labelText="Default Selected Radio Button"
+      />
      <RadioButton
        id="radio-3"
        value="blue"
-        labelText="Standard Radio Button" />
+        labelText="Standard Radio Button"
+      />
      <RadioButton
        id="radio-4"
        value="disabled"
        labelText="Disabled Radio Button"
-        disabled />
+        disabled
+      />
    </RadioButtonGroup>
  </FormGroup>
  <FormGroup legendText="Search">
@ -71,7 +79,8 @@
      disabled
      hidden
      value="placeholder-item"
-      text="Choose an option" />
+      text="Choose an option"
+    />
    <SelectItem value="option-1" text="Option 1" />
    <SelectItem value="option-2" text="Option 2" />
    <SelectItem value="option-3" text="Option 3" />
@ -79,7 +88,8 @@
  <TextInput
    id="text-input-1"
    labelText="Text Input label"
-    placeholder="Placeholder text" />
+    placeholder="Placeholder text"
+  />
  <TextInput id="text-input-2" type="password" labelText="Password" required />
  <TextInput
    id="text-input-3"
@ -88,12 +98,14 @@
    invalidText="Your password must be at least 6 characters as well as contain
    at least one uppercase, one lowercase, and one number."
    required
-    invalid />
+    invalid
+  />
  <TextArea
    id="text-area"
    labelText="Text Area label"
    placeholder="Placeholder text"
    rows="{4}"
-    cols="{50}" />
+    cols="{50}"
+  />
  <Button type="submit">Submit</Button>
 </Form>
--- a/src/Form/Form.svelte
+++ b/src/Form/Form.svelte
@ -5,6 +5,7 @@
  on:mouseover
  on:mouseenter
  on:mouseleave
-  on:submit|preventDefault>
+  on:submit|preventDefault
+>
  <slot />
 </form>
--- a/src/FormGroup/FormGroup.svelte
+++ b/src/FormGroup/FormGroup.svelte
@ -31,7 +31,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <legend class:bx--label="{true}">{legendText}</legend>
  <slot />
  {#if message}
--- a/src/FormItem/FormItem.svelte
+++ b/src/FormItem/FormItem.svelte
@ -4,6 +4,7 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <slot />
 </div>
--- a/src/FormLabel/FormLabel.svelte
+++ b/src/FormLabel/FormLabel.svelte
@ -13,6 +13,7 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <slot />
 </label>
--- a/src/Icon/Icon.Skeleton.svelte
+++ b/src/Icon/Icon.Skeleton.svelte
@ -13,4 +13,5 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave></div>
+  on:mouseleave
+></div>
--- a/src/Icon/Icon.svelte
+++ b/src/Icon/Icon.svelte
@ -25,7 +25,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave />
+    on:mouseleave
+  />
 {:else}
  <svelte:component
    this="{render}"
@ -33,5 +34,6 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave />
+    on:mouseleave
+  />
 {/if}
--- a/src/InlineLoading/InlineLoading.Story.svelte
+++ b/src/InlineLoading/InlineLoading.Story.svelte
@ -43,7 +43,8 @@
        style="margin-left: 1rem;"
        description="{loadingDescription}"
        status="{success ? 'finished' : 'active'}"
-        aria-live="{ariaLive}" />
+        aria-live="{ariaLive}"
+      />
    {:else}
      <Button on:click="{handleSubmit}">Submit</Button>
    {/if}
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@ -53,7 +53,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div class:bx--inline-loading__animation="{true}">
    {#if status === 'error'}
      <Error20 class="bx--inline-loading--error" />
@ -64,7 +65,8 @@
        small
        description="{iconDescription}"
        withOverlay="{false}"
-        active="{status === 'active'}" />
+        active="{status === 'active'}"
+      />
    {/if}
  </div>
  {#if description}
--- a/src/Link/Link.stories.js
+++ b/src/Link/Link.stories.js
@ -9,6 +9,6 @@ export const Default = () => ({
    href: text("The link href (href)", "#"),
    inline: boolean("Use the in-line variant (inline)", false),
    disabled: boolean("Disabled (disabled)", false),
-    visited: boolean('Allow visited styles', false),
+    visited: boolean("Allow visited styles", false),
  },
 });
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@ -35,7 +35,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <slot />
  </p>
 {:else}
@ -51,7 +52,8 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <slot />
  </a>
 {/if}
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@ -59,7 +59,8 @@
      e.stopPropagation();
    }
  }}"
-  on:click|preventDefault|stopPropagation>
+  on:click|preventDefault|stopPropagation
+>
  <slot />
 </div>
 {#if invalid}
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@ -78,6 +78,7 @@
  on:mouseenter
  on:mouseleave
  on:keydown|preventDefault|stopPropagation
-  on:blur>
+  on:blur
+>
  <slot />
 </div>
--- a/src/ListBox/ListBoxMenu.svelte
+++ b/src/ListBox/ListBoxMenu.svelte
@ -10,6 +10,7 @@
  role="listbox"
  id="menu-{id}"
  class:bx--list-box__menu="{true}"
-  {...$$restProps}>
+  {...$$restProps}
+>
  <slot />
 </div>
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@ -36,6 +36,7 @@
  class:bx--list-box__menu-icon="{true}"
  class:bx--list-box__menu-icon--open="{open}"
  {...$$restProps}
-  on:click|preventDefault>
+  on:click|preventDefault
+>
  <ChevronDown16 aria-label="{description}" title="{description}" />
 </div>
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@ -19,7 +19,8 @@
  {...$$restProps}
  on:click
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div class:bx--list-box__menu-item__option="{true}">
    <slot />
  </div>
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@ -75,7 +75,8 @@
    if (!disabled && e.key === 'Enter') {
      dispatch('clear', e);
    }
-  }}">
+  }}"
+>
  {#if selectionCount}{selectionCount}{/if}
  <Close16 />
 </div>
--- a/src/ListItem/ListItem.svelte
+++ b/src/ListItem/ListItem.svelte
@ -4,6 +4,7 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <slot />
 </li>
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@ -36,14 +36,16 @@
  <div
    class:bx--loading-overlay="{true}"
    class:bx--loading-overlay--stop="{!active}"
-    {...$$restProps}>
+    {...$$restProps}
+  >
    <div
      aria-atomic="true"
      aria-labelledby="{id}"
      aria-live="{active ? 'assertive' : 'off'}"
      class:bx--loading="{true}"
      class:bx--loading--small="{small}"
-      class:bx--loading--stop="{!active}">
+      class:bx--loading--stop="{!active}"
+    >
      <!-- svelte-ignore a11y-label-has-associated-control -->
      <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
      <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
@ -53,13 +55,15 @@
            class:bx--loading__background="{true}"
            cx="0"
            cy="0"
-            r="{spinnerRadius}"></circle>
+            r="{spinnerRadius}"
+          ></circle>
        {/if}
        <circle
          class:bx--loading__stroke="{true}"
          cx="0"
          cy="0"
-          r="{spinnerRadius}"></circle>
+          r="{spinnerRadius}"
+        ></circle>
      </svg>
    </div>
  </div>
@ -71,7 +75,8 @@
    class:bx--loading="{true}"
    class:bx--loading--small="{small}"
    class:bx--loading--stop="{!active}"
-    {...$$restProps}>
+    {...$$restProps}
+  >
    <!-- svelte-ignore a11y-label-has-associated-control -->
    <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
    <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
@ -81,13 +86,15 @@
          class:bx--loading__background="{true}"
          cx="0"
          cy="0"
-          r="{spinnerRadius}"></circle>
+          r="{spinnerRadius}"
+        ></circle>
      {/if}
      <circle
        class:bx--loading__stroke="{true}"
        cx="0"
        cy="0"
-        r="{spinnerRadius}"></circle>
+        r="{spinnerRadius}"
+      ></circle>
    </svg>
  </div>
 {/if}
--- a/src/Modal/Modal.Story.svelte
+++ b/src/Modal/Modal.Story.svelte
@ -11,7 +11,8 @@
  <Button
    on:click="{() => {
      open = true;
-    }}">
+    }}"
+  >
    Launch modal
  </Button>
 </div>
@ -33,7 +34,8 @@
  }}"
  on:submit="{() => {
    console.log('submit');
-  }}">
+  }}"
+>
  <div>
    <PasswordInput bind:type placeholder="Password Input" aria-level="" />
    <Button
@ -41,7 +43,8 @@
      size="field"
      on:click="{() => {
        type = type === 'password' ? 'text' : 'password';
-      }}">
+      }}"
+    >
      Programmatically toggle password
    </Button>
  </div>
--- a/src/Modal/Modal.stories.js
+++ b/src/Modal/Modal.stories.js
@ -16,7 +16,7 @@ export const Default = () => ({
    open: boolean("Open (open)", true),
    passiveModal: boolean("Without footer (passiveModal)", false),
    danger: boolean("Danger mode (danger)", false),
-    alert: boolean('Alert mode (alert)', false),
+    alert: boolean("Alert mode (alert)", false),
    shouldSubmitOnEnter: boolean(
      "Enter key to submit (shouldSubmitOnEnter)",
      false
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@ -196,7 +196,8 @@
  }}"
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div
    bind:this="{innerModal}"
    role="dialog"
@ -207,7 +208,8 @@
    class="{size && `bx--modal-container--${size}`}"
    on:click="{() => {
      didClickInnerModal = true;
-    }}">
+    }}"
+  >
    <div class:bx--modal-header="{true}">
      {#if passiveModal}
        <button
@ -218,10 +220,12 @@
          class="bx--modal-close"
          on:click="{() => {
            open = false;
-          }}">
+          }}"
+        >
          <Close20
            aria-label="{iconDescription}"
-            class="bx--modal-close__icon" />
+            class="bx--modal-close__icon"
+          />
        </button>
      {/if}
      {#if modalLabel}
@ -241,10 +245,12 @@
          class:bx--modal-close="{true}"
          on:click="{() => {
            open = false;
-          }}">
+          }}"
+        >
          <Close20
            aria-label="{iconDescription}"
-            class="bx--modal-close__icon" />
+            class="bx--modal-close__icon"
+          />
        </button>
      {/if}
    </div>
@ -256,7 +262,8 @@
      tabindex="{hasScrollingContent ? '0' : undefined}"
      role="{hasScrollingContent ? 'region' : undefined}"
      aria-label="{hasScrollingContent ? ariaLabel : undefined}"
-      aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}">
+      aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}"
+    >
      <slot />
    </div>
    {#if hasScrollingContent}
@ -268,7 +275,8 @@
          kind="secondary"
          on:click="{() => {
            dispatch('click:button--secondary');
-          }}">
+          }}"
+        >
          {secondaryButtonText}
        </Button>
        <Button
@ -276,7 +284,8 @@
          disabled="{primaryButtonDisabled}"
          on:click="{() => {
            dispatch('submit');
-          }}">
+          }}"
+        >
          {primaryButtonText}
        </Button>
      </div>
--- a/src/MultiSelect/MultiSelect.Story.svelte
+++ b/src/MultiSelect/MultiSelect.Story.svelte
@ -22,7 +22,8 @@
    size="small"
    on:click="{() => {
      selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
-    }}">
+    }}"
+  >
    {selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
  </Button>
 </div>
@ -34,5 +35,6 @@
    placeholder="Filter..."
    bind:selectedIds
    bind:items
-    bind:value />
+    bind:value
+  />
 </div>
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@ -259,12 +259,14 @@
  class:bx--multi-select__wrapper--inline="{inline}"
  class:bx--list-box__wrapper--inline="{inline}"
  class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
-  {...$$restProps}>
+  {...$$restProps}
+>
  {#if titleText}
    <label
      for="{id}"
      class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}">
+      class:bx--label--disabled="{disabled}"
+    >
      {titleText}
    </label>
  {/if}
@ -281,7 +283,8 @@
      {filterable && 'bx--multi-select--filterable'}
      {invalid && 'bx--multi-select--invalid'}
      {inline && 'bx--multi-select--inline'}
-      {checked.length > 0 && 'bx--multi-select--selected'}">
+      {checked.length > 0 && 'bx--multi-select--selected'}"
+  >
    {#if invalid}
      <WarningFilled16 class="bx--list-box__invalid-icon" />
    {/if}
@ -327,7 +330,8 @@
      }}"
      id="{id}"
      disabled="{disabled}"
-      translateWithId="{translateWithId}">
+      translateWithId="{translateWithId}"
+    >
      {#if checked.length > 0}
        <ListBoxSelection
          selectionCount="{checked.length}"
@ -339,7 +343,8 @@
            fieldRef.blur();
          }}"
          translateWithId="{translateWithId}"
-          disabled="{disabled}" />
+          disabled="{disabled}"
+        />
      {/if}
      {#if filterable}
        <input
@ -383,7 +388,8 @@
          placeholder="{placeholder}"
          id="{id}"
          name="{name}"
-          value="{inputValue}" />
+          value="{inputValue}"
+        />
        {#if invalid}
          <WarningFilled16 class="bx--list-box__invalid-icon" />
        {/if}
@ -395,7 +401,8 @@
            }}"
            translateWithId="{translateWithId}"
            disabled="{disabled}"
-            open="{open}" />
+            open="{open}"
+          />
        {/if}
        <ListBoxMenuIcon
          on:click="{(e) => {
@ -403,7 +410,8 @@
            open = !open;
          }}"
          translateWithId="{translateWithId}"
-          open="{open}" />
+          open="{open}"
+        />
      {/if}
      {#if !filterable}
        <span class="bx--list-box__label">{label}</span>
@ -425,7 +433,8 @@
            }}"
            on:mouseenter="{() => {
              highlightedIndex = i;
-            }}">
+            }}"
+          >
            <Checkbox
              readonly
              tabindex="-1"
@ -434,7 +443,8 @@
              name="{itemToString(item)}"
              labelText="{itemToString(item)}"
              checked="{item.checked}"
-              disabled="{disabled}" />
+              disabled="{disabled}"
+            />
          </ListBoxMenuItem>
        {/each}
      </ListBoxMenu>
@ -443,7 +453,8 @@
  {#if !inline && !invalid && helperText}
    <div
      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
+      class:bx--form__helper-text--disabled="{disabled}"
+    >
      {helperText}
    </div>
  {/if}
--- a/src/Notification/InlineNotification.svelte
+++ b/src/Notification/InlineNotification.svelte
@ -91,16 +91,19 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <div class:bx--inline-notification__details="{true}">
      <NotificationIcon
        notificationType="{notificationType}"
        kind="{kind}"
-        iconDescription="{iconDescription}" />
+        iconDescription="{iconDescription}"
+      />
      <NotificationTextDetails
        title="{title}"
        subtitle="{subtitle}"
-        notificationType="{notificationType}">
+        notificationType="{notificationType}"
+      >
        <slot />
      </NotificationTextDetails>
    </div>
@ -109,7 +112,8 @@
      <NotificationButton
        iconDescription="{iconDescription}"
        notificationType="{notificationType}"
-        on:click="{close}" />
+        on:click="{close}"
+      />
    {/if}
  </div>
 {/if}
--- a/src/Notification/Notification.Story.svelte
+++ b/src/Notification/Notification.Story.svelte
@ -11,7 +11,8 @@
    {...$$props}
    on:close="{() => {
      console.log('on:close');
-    }}">
+    }}"
+  >
    <div slot="actions">
      <NotificationActionButton>{$$props.action}</NotificationActionButton>
    </div>
@ -22,5 +23,6 @@
    on:close="{() => {
      console.log('on:close');
    }}"
-    style="min-width: 30rem; margin-bottom: .5rem" />
+    style="min-width: 30rem; margin-bottom: .5rem"
+  />
 {/if}
--- a/src/Notification/NotificationActionButton.svelte
+++ b/src/Notification/NotificationActionButton.svelte
@ -10,6 +10,7 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <slot />
 </Button>
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@ -36,10 +36,12 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <svelte:component
    this="{renderIcon}"
    title="{title}"
    class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
-      {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
+      {notificationType === 'inline' && 'bx--inline-notification__close-icon'}"
+  />
 </button>
--- a/src/Notification/NotificationIcon.svelte
+++ b/src/Notification/NotificationIcon.svelte
@ -37,4 +37,5 @@
 <svelte:component
  this="{icons[kind]}"
  title="{iconDescription}"
-  class="bx--{notificationType}-notification__icon" />
+  class="bx--{notificationType}-notification__icon"
+/>
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@ -96,23 +96,27 @@
    on:click
    on:mouseover
    on:mouseenter
-    on:mouseleave>
+    on:mouseleave
+  >
    <NotificationIcon
      notificationType="{notificationType}"
      kind="{kind}"
-      iconDescription="{iconDescription}" />
+      iconDescription="{iconDescription}"
+    />
    <NotificationTextDetails
      title="{title}"
      subtitle="{subtitle}"
      caption="{caption}"
-      notificationType="{notificationType}">
+      notificationType="{notificationType}"
+    >
      <slot />
    </NotificationTextDetails>
    {#if !hideCloseButton}
      <NotificationButton
        iconDescription="{iconDescription}"
        notificationType="{notificationType}"
-        on:click="{close}" />
+        on:click="{close}"
+      />
    {/if}
  </div>
 {/if}
--- a/src/NumberInput/NumberInput.Skeleton.svelte
+++ b/src/NumberInput/NumberInput.Skeleton.svelte
@ -12,7 +12,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  {#if !hideLabel}
    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
  {/if}
--- a/src/NumberInput/NumberInput.Story.svelte
+++ b/src/NumberInput/NumberInput.Story.svelte
@ -17,5 +17,6 @@
    bind:value
    on:change="{({ detail }) => {
      console.log('on:change', detail);
-    }}" />
+    }}"
+  />
 {/if}
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@ -178,7 +178,8 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <div
    data-invalid="{error || undefined}"
    class:bx--number="{true}"
@ -187,14 +188,16 @@
    class:bx--number--light="{light}"
    class:bx--number--nolabel="{hideLabel}"
    class:bx--number--mobile="{mobile}"
-    class="{size && `bx--number--${size}`}">
+    class="{size && `bx--number--${size}`}"
+  >
    {#if mobile}
      {#if label}
        <label
          for="{id}"
          class:bx--label="{true}"
          class:bx--label--disabled="{disabled}"
-          class:bx--visually-hidden="{hideLabel}">
+          class:bx--visually-hidden="{hideLabel}"
+        >
          <slot name="label">{label}</slot>
        </label>
      {/if}
@ -210,7 +213,8 @@
          on:click="{() => {
            updateValue(-1);
          }}"
-          disabled="{disabled}">
+          disabled="{disabled}"
+        >
          <CaretDownGlyph class="down-icon" />
        </button>
        <input
@ -229,7 +233,8 @@
          min="{min}"
          step="{step}"
          value="{value}"
-          readonly="{readonly}" />
+          readonly="{readonly}"
+        />
        <button
          type="button"
          aria-live="polite"
@ -241,7 +246,8 @@
          on:click="{() => {
            updateValue(1);
          }}"
-          disabled="{disabled}">
+          disabled="{disabled}"
+        >
          <CaretUpGlyph class="up-icon" />
        </button>
      </div>
@ -251,7 +257,8 @@
          for="{id}"
          class:bx--label="{true}"
          class:bx--label--disabled="{disabled}"
-          class:bx--visually-hidden="{hideLabel}">
+          class:bx--visually-hidden="{hideLabel}"
+        >
          <slot name="label">{label}</slot>
        </label>
      {/if}
@ -274,7 +281,8 @@
          min="{min}"
          step="{step}"
          value="{value}"
-          readonly="{readonly}" />
+          readonly="{readonly}"
+        />
        {#if invalid}
          <WarningFilled16 class="bx--number__invalid" />
        {/if}
@ -290,7 +298,8 @@
            on:click="{() => {
              updateValue(1);
            }}"
-            disabled="{disabled}">
+            disabled="{disabled}"
+          >
            <CaretUpGlyph class="up-icon" />
          </button>
          <button
@ -304,7 +313,8 @@
            on:click="{() => {
              updateValue(-1);
            }}"
-            disabled="{disabled}">
+            disabled="{disabled}"
+          >
            <CaretDownGlyph class="down-icon" />
          </button>
        </div>
@ -313,7 +323,8 @@
    {#if !error && helperText}
      <div
        class:bx--form__helper-text="{true}"
-        class:bx--form__helper-text--disabled="{disabled}">
+        class:bx--form__helper-text--disabled="{disabled}"
+      >
        {helperText}
      </div>
    {/if}
--- a/src/OrderedList/OrderedList.svelte
+++ b/src/OrderedList/OrderedList.svelte
@ -13,6 +13,7 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
  <slot />
 </ol>
--- a/src/OverflowMenu/OverflowMenu.Story.svelte
+++ b/src/OverflowMenu/OverflowMenu.Story.svelte
@ -13,32 +13,38 @@
      {...$$props.menu}
      on:close="{({ detail }) => {
        console.log('close', detail);
-      }}">
+      }}"
+    >
      <OverflowMenuItem
        {...$$props.menuItem}
        href="https://ibm.com"
        text="Option 1"
-        bind:primaryFocus />
+        bind:primaryFocus
+      />
      <OverflowMenuItem
        {...$$props.menuItem}
        href="https://ibm.com"
        text="Option 2 is an example of a really long string and how we
        recommend handling this"
-        requireTitle />
+        requireTitle
+      />
      <OverflowMenuItem
        {...$$props.menuItem}
        href="https://ibm.com"
        text="Option 3"
-        disabled />
+        disabled
+      />
      <OverflowMenuItem
        {...$$props.menuItem}
        href="https://ibm.com"
-        text="Option 4" />
+        text="Option 4"
+      />
      <OverflowMenuItem
        {...$$props.menuItem}
        href="https://ibm.com"
        text="Danger option"
-        danger />
+        danger
+      />
    </OverflowMenu>
  {:else if story === 'trigger'}
    <OverflowMenu
@ -46,17 +52,20 @@
      on:close="{({ detail }) => {
        console.log('close', detail);
      }}"
-      style="width: auto">
+      style="width: auto"
+    >
      <div slot="menu" style="padding: 0 1rem">Menu</div>
      <OverflowMenuItem
        {...$$props.menuItem}
        text="Option 1"
-        bind:primaryFocus />
+        bind:primaryFocus
+      />
      <OverflowMenuItem
        {...$$props.menuItem}
        text="Option 2 is an example of a really long string and how we
        recommend handling this"
-        requireTitle />
+        requireTitle
+      />
      <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
      <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
      <OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
@ -66,16 +75,19 @@
      {...$$props.menu}
      on:close="{({ detail }) => {
        console.log('close', detail);
-      }}">
+      }}"
+    >
      <OverflowMenuItem
        {...$$props.menuItem}
        text="Option 1"
-        bind:primaryFocus />
+        bind:primaryFocus
+      />
      <OverflowMenuItem
        {...$$props.menuItem}
        text="Option 2 is an example of a really long string and how we
        recommend handling this"
-        requireTitle />
+        requireTitle
+      />
      <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
      <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
      <OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@ -188,13 +188,15 @@
        buttonRef.focus();
      }
    }
-  }}">
+  }}"
+>
  <slot name="menu">
    <svelte:component
      this="{icon}"
      aria-label="{iconDescription}"
      title="{iconDescription}"
-      class="bx--overflow-menu__icon {iconClass}" />
+      class="bx--overflow-menu__icon {iconClass}"
+    />
  </slot>
  {#if open}
    <ul
@ -207,7 +209,8 @@
      class:bx--overflow-menu--flip="{flipped}"
      class:bx--overflow-menu-options--open="{open}"
      class:bx--overflow-menu-options--light="{light}"
-      class:menuOptionsClass>
+      class:menuOptionsClass
+    >
      <slot />
    </ul>
  {/if}
--- a/Show more
+++ b/Show more