feat(prettier): add svelteBracketNewLine

.prettierrc

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

docs/src/components/CopyableCodeSnippet.svelte

@@ -10,4 +10,5 @@
   code="{code}"
   on:click="{() => {
     copy(code);
-  }}" />
+  }}"
+/>

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

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>

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>

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

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>

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>

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>

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

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

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

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>

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

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

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

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

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}

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>

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>

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>

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>

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}

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}

src/Button/ButtonSet.svelte

@@ -9,6 +9,7 @@
 <div
   class:bx--btn-set="{true}"
   class:bx--btn-set--stacked="{stacked}"
-  {...$$restProps}>
+  {...$$restProps}
+>
   <slot />
 </div>

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>

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}

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>

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>

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>

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
+<pre style="margin-top: 1rem;">
-  style="margin-top: 1rem;">
+  <code
-  <code>{'items = Array<{ id: string; text: string; }>'}</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>

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}

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>

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>

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}

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}

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>

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}

src/ContentSwitcher/ContentSwitcher.svelte

@@ -64,6 +64,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
   <slot />
 </div>

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>

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>

src/CopyButton/CopyButton.Story.svelte

@@ -9,4 +9,5 @@
   }}"
   on:animationend="{(e) => {
     console.log('animation end', e.animationName);
-  }}" />
+  }}"
+/>

src/CopyButton/CopyButton.svelte

@@ -15,6 +15,7 @@
   title="{iconDescription}"
   {...$$restProps}
   on:click
-  on:animationend>
+  on:animationend
+>
   <Copy16 class="bx--snippet__icon" />
 </Copy>

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}

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}

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}

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>

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>

src/DataTable/TableRow.svelte

@@ -14,6 +14,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
   <slot />
 </tr>

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)}

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>

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}

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>

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}

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>

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
+  <pre style="margin-top: 1rem;">
-    style="margin-top: 1rem;">
+    <code
-    <code>{'items = Array<{ id: string; text: string; }>'}</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>

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}

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

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>

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}

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

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>

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

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}

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>

src/Form/Form.svelte

@@ -5,6 +5,7 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:submit|preventDefault>
+  on:submit|preventDefault
+>
   <slot />
 </form>

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}

src/FormItem/FormItem.svelte

@@ -4,6 +4,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
   <slot />
 </div>

src/FormLabel/FormLabel.svelte

@@ -13,6 +13,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
   <slot />
 </label>

src/Icon/Icon.Skeleton.svelte

@@ -13,4 +13,5 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave></div>
+  on:mouseleave
+></div>

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}

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}

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}

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),
   },
 });

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}

src/ListBox/ListBox.svelte

@@ -59,7 +59,8 @@
       e.stopPropagation();
     }
   }}"
-  on:click|preventDefault|stopPropagation>
+  on:click|preventDefault|stopPropagation
+>
   <slot />
 </div>
 {#if invalid}

src/ListBox/ListBoxField.svelte

@@ -78,6 +78,7 @@
   on:mouseenter
   on:mouseleave
   on:keydown|preventDefault|stopPropagation
-  on:blur>
+  on:blur
+>
   <slot />
 </div>

src/ListBox/ListBoxMenu.svelte

@@ -10,6 +10,7 @@
   role="listbox"
   id="menu-{id}"
   class:bx--list-box__menu="{true}"
-  {...$$restProps}>
+  {...$$restProps}
+>
   <slot />
 </div>

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>

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>

src/ListBox/ListBoxSelection.svelte

@@ -75,7 +75,8 @@
     if (!disabled && e.key === 'Enter') {
       dispatch('clear', e);
     }
-  }}">
+  }}"
+>
   {#if selectionCount}{selectionCount}{/if}
   <Close16 />
 </div>

src/ListItem/ListItem.svelte

@@ -4,6 +4,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
   <slot />
 </li>

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}

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>

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

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>

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>

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}

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}

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}

src/Notification/NotificationActionButton.svelte

@@ -10,6 +10,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
   <slot />
 </Button>

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>

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

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}

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}

src/NumberInput/NumberInput.Story.svelte

@@ -17,5 +17,6 @@
     bind:value
     on:change="{({ detail }) => {
       console.log('on:change', detail);
-    }}" />
+    }}"
+  />
 {/if}

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}

src/OrderedList/OrderedList.svelte

@@ -13,6 +13,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+>
   <slot />
 </ol>

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

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}