chore(prettier): use svelteStrictMode

src/UIShell/Content.svelte

@@ -6,6 +6,6 @@
   export let id = "main-content";
 </script>
 
-<main {id} class:bx--content={true} {...$$restProps}>
+<main id="{id}" class:bx--content="{true}" {...$$restProps}>
   <slot />
 </main>

src/UIShell/GlobalHeader/Header.svelte

@@ -46,16 +46,16 @@
     : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
 </script>
 
-<svelte:window bind:innerWidth={winWidth} />
+<svelte:window bind:innerWidth="{winWidth}" />
 
-<header role="banner" aria-label={ariaLabel} class:bx--header={true}>
+<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
   {#if winWidth < 1056}
-    <HamburgerMenu bind:isOpen={isSideNavOpen} />
+    <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
   {/if}
-  <a {href} class:bx--header__name={true} {...$$restProps} on:click>
+  <a href="{href}" class:bx--header__name="{true}" {...$$restProps} on:click>
     {#if company}
-      <span class:bx--header__name--prefix={true}>{company}&nbsp;</span>
+      <span class:bx--header__name--prefix="{true}">{company}&nbsp;</span>
     {/if}
     <slot name="platform">{platformName}</slot>
   </a>

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -50,26 +50,26 @@
 </style>
 
 <svelte:body
-  on:click={({ target }) => {
+  on:click="{({ target }) => {
     if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
       isOpen = false;
       dispatch('close');
     }
-  }} />
+  }}" />
 
 <div>
   <button
-    bind:this={ref}
+    bind:this="{ref}"
     type="button"
-    class:bx--header__action={true}
-    class:bx--header__action--active={isOpen}
-    class:action-text={text}
+    class:bx--header__action="{true}"
+    class:bx--header__action--active="{isOpen}"
+    class:action-text="{text}"
     {...$$restProps}
     on:click
-    on:click|stopPropagation={() => {
+    on:click|stopPropagation="{() => {
       isOpen = !isOpen;
       dispatch(isOpen ? 'open' : 'close');
-    }}>
+    }}">
     <Icon {...icon} />
     <slot name="text">
       {#if text}<span>{text}</span>{/if}
@@ -77,10 +77,10 @@
   </button>
   {#if isOpen}
     <div
-      bind:this={refPanel}
-      class:bx--header-panel={true}
-      class:bx--header-panel--expanded={true}
-      transition:slide={{ duration: 200 }}>
+      bind:this="{refPanel}"
+      class:bx--header-panel="{true}"
+      class:bx--header-panel--expanded="{true}"
+      transition:slide="{{ duration: 200 }}">
       <slot />
     </div>
   {/if}

src/UIShell/GlobalHeader/HeaderActionLink.svelte

@@ -31,10 +31,10 @@
 </style>
 
 <a
-  class:bx--header__action={true}
-  class:bx--header__action--active={linkIsActive}
-  class:action-link={true}
+  class:bx--header__action="{true}"
+  class:bx--header__action--active="{linkIsActive}"
+  class:action-link="{true}"
   {...$$restProps}
-  {href}>
+  href="{href}">
   <Icon {...icon} />
 </a>

src/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -134,76 +134,76 @@
 </style>
 
 <svelte:window
-  on:mouseup={({ target }) => {
+  on:mouseup="{({ target }) => {
     if (target && elTypeSearch) {
       if (!elTypeSearch.contains(target)) {
         searchIsActive = false;
         isSearchFocus = false;
       }
     }
-  }} />
+  }}" />
 
 <div
-  bind:this={elTypeSearch}
+  bind:this="{elTypeSearch}"
   role="search"
   class="search-wrapper"
-  class:search-wrapper-hidden={!searchIsActive}
-  class:search-focus={isSearchFocus || searchIsActive}>
+  class:search-wrapper-hidden="{!searchIsActive}"
+  class:search-focus="{isSearchFocus || searchIsActive}">
   <div
     id="right-panel-action-search"
     class="search-wrapper-2"
     role="combobox"
-    aria-expanded={searchIsActive}>
+    aria-expanded="{searchIsActive}">
     <button
-      tabindex={searchTabIndex}
+      tabindex="{searchTabIndex}"
       aria-label="Search"
-      class:bx--header__action={true}
-      class:btn-search={true}
-      class:btn-search-disabled={searchIsActive}
-      on:click={() => {
+      class:bx--header__action="{true}"
+      class:btn-search="{true}"
+      class:btn-search-disabled="{searchIsActive}"
+      on:click="{() => {
         isSearchFocus = true;
         searchIsActive = true;
         dispatch('focusInputSearch');
-      }}
+      }}"
       type="button"
-      on:keydown={({ key }) => {
+      on:keydown="{({ key }) => {
         if (key === 'Enter') {
           searchIsActive = !searchIsActive;
         }
-      }}>
-      <Icon title="Search" tabindex="0" render={Search20} />
+      }}">
+      <Icon title="Search" tabindex="0" render="{Search20}" />
     </button>
     <input
-      bind:this={elInput}
+      bind:this="{elInput}"
       id="input-search-field"
       type="text"
       autocomplete="off"
-      tabindex={closeTabIndex}
+      tabindex="{closeTabIndex}"
       class="input-search"
-      class:input-hidden={!searchIsActive}
+      class:input-hidden="{!searchIsActive}"
       placeholder="Search"
-      on:focus={() => dispatch('focusInputSearch')}
-      on:focusout={() => dispatch('focusOutInputSearch')}
-      on:input={dispatchInputs} />
+      on:focus="{() => dispatch('focusInputSearch')}"
+      on:focusout="{() => dispatch('focusOutInputSearch')}"
+      on:input="{dispatchInputs}" />
     <button
       id="right-panel-close-search"
-      tabindex={closeTabIndex}
-      class:bx--header__action={true}
-      class:btn-clear={true}
-      class:btn-clear-hidden={!searchIsActive}
+      tabindex="{closeTabIndex}"
+      class:bx--header__action="{true}"
+      class:btn-clear="{true}"
+      class:btn-clear-hidden="{!searchIsActive}"
       type="button"
       aria-label="Clear search"
-      on:click={() => {
+      on:click="{() => {
         isSearchFocus = false;
         searchIsActive = false;
         searchStore.clear();
-      }}
-      on:keydown={({ key }) => {
+      }}"
+      on:keydown="{({ key }) => {
         if (key === 'Enter') {
           searchIsActive = !searchIsActive;
         }
-      }}>
-      <Icon title="Close" tabindex="0" render={Close20} />
+      }}">
+      <Icon title="Close" tabindex="0" render="{Close20}" />
     </button>
   </div>
 </div>

src/UIShell/GlobalHeader/HeaderNav.svelte

@@ -6,8 +6,11 @@
   export let ariaLabel = undefined;
 </script>
 
-<nav aria-label={ariaLabel} class:bx--header__nav={true} {...$$restProps}>
-  <ul role="menubar" aria-label={ariaLabel} class:bx--header__menu-bar={true}>
+<nav aria-label="{ariaLabel}" class:bx--header__nav="{true}" {...$$restProps}>
+  <ul
+    role="menubar"
+    aria-label="{ariaLabel}"
+    class:bx--header__menu-bar="{true}">
     <slot />
   </ul>
 </nav>

src/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -16,8 +16,8 @@
   <a
     role="menuitem"
     tabindex="0"
-    {href}
-    class:bx--header__menu-item={true}
+    href="{href}"
+    class:bx--header__menu-item="{true}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -27,6 +27,6 @@
     on:keydown
     on:focus
     on:blur>
-    <span class:bx--text-truncate--end={true}>{text}</span>
+    <span class:bx--text-truncate--end="{true}">{text}</span>
   </a>
 </li>

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <svelte:window
-  on:mouseup={({ target }) => {
+  on:mouseup="{({ target }) => {
     if (ref.contains(target) || target === ref) {
       expanded = !expanded;
     } else {
@@ -37,26 +37,26 @@
         expanded = false;
       }
     }
-  }} />
+  }}" />
 
-<li class:bx--header__submenu={true} title={iconDescription}>
+<li class:bx--header__submenu="{true}" title="{iconDescription}">
   <a
-    bind:this={ref}
+    bind:this="{ref}"
     role="menuitem"
     tabindex="0"
     aria-haspopup="menu"
-    aria-expanded={expanded}
-    aria-label={text}
-    {href}
-    class:bx--header__menu-item={true}
-    class:bx--header__menu-title={true}
+    aria-expanded="{expanded}"
+    aria-label="{text}"
+    href="{href}"
+    class:bx--header__menu-item="{true}"
+    class:bx--header__menu-title="{true}"
     {...$$restProps}
     on:keydown
-    on:keydown={({ key }) => {
+    on:keydown="{({ key }) => {
       if (key === 'Enter') {
         expanded = !expanded;
       }
-    }}
+    }}"
     on:click|preventDefault
     on:mouseover
     on:mouseenter
@@ -66,10 +66,10 @@
     on:blur>
     {text}
     <ChevronDown16
-      aria-label={iconDescription}
+      aria-label="{iconDescription}"
       class="bx--header__menu-arrow" />
   </a>
-  <ul role="menu" aria-label={text} class:bx--header__menu={true}>
+  <ul role="menu" aria-label="{text}" class:bx--header__menu="{true}">
     <slot />
   </ul>
 </li>

src/UIShell/GlobalHeader/HeaderPanelLink.svelte

@@ -6,8 +6,8 @@
   export let href = undefined;
 </script>
 
-<li class:bx--switcher__item={true}>
-  <a {href} class:bx--switcher__item-link={true} {...$$restProps}>
+<li class:bx--switcher__item="{true}">
+  <a href="{href}" class:bx--switcher__item-link="{true}" {...$$restProps}>
     <slot />
   </a>
 </li>

src/UIShell/GlobalHeader/HeaderPanelLinks.svelte

@@ -1,3 +1,3 @@
-<ul class:bx--switcher__item={true}>
+<ul class:bx--switcher__item="{true}">
   <slot />
 </ul>

src/UIShell/GlobalHeader/HeaderUtilities.svelte

@@ -1,3 +1,3 @@
-<div class:bx--header__global={true}>
+<div class:bx--header__global="{true}">
   <slot />
 </div>

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -20,15 +20,15 @@
 <button
   type="button"
   title="Open menu"
-  aria-label={ariaLabel}
-  class:bx--header__action={true}
-  class:bx--header__menu-trigger={true}
-  class:bx--header__menu-toggle={true}
+  aria-label="{ariaLabel}"
+  class:bx--header__action="{true}"
+  class:bx--header__menu-trigger="{true}"
+  class:bx--header__menu-toggle="{true}"
   {...$$restProps}
-  transition:fly={{ x: -200, delay: 50, duration: 250 }}
+  transition:fly="{{ x: -200, delay: 50, duration: 250 }}"
   on:click
-  on:click={() => (isOpen = !isOpen)}>
+  on:click="{() => (isOpen = !isOpen)}">
   <Icon
-    title={isOpen ? 'Close' : 'Open Menu'}
-    render={isOpen ? Close20 : Menu20} />
+    title="{isOpen ? 'Close' : 'Open Menu'}"
+    render="{isOpen ? Close20 : Menu20}" />
 </button>

src/UIShell/SideNav/SideNav.svelte

@@ -20,19 +20,19 @@
 
 {#if fixed}
   <div
-    on:click={() => {
+    on:click="{() => {
       isOpen = false;
-    }}
-    class:bx--side-nav__overlay={true}
-    class:bx--side-nav__overlay-active={isOpen} />
+    }}"
+    class:bx--side-nav__overlay="{true}"
+    class:bx--side-nav__overlay-active="{isOpen}"></div>
 {/if}
 <nav
-  aria-label={ariaLabel}
-  class:bx--side-nav__navigation={true}
-  class:bx--side-nav={true}
-  class:bx--side-nav--ux={true}
-  class:bx--side-nav--expanded={isOpen}
-  class:bx--side-nav--collapsed={!isOpen && fixed}
+  aria-label="{ariaLabel}"
+  class:bx--side-nav__navigation="{true}"
+  class:bx--side-nav="{true}"
+  class:bx--side-nav--ux="{true}"
+  class:bx--side-nav--expanded="{isOpen}"
+  class:bx--side-nav--collapsed="{!isOpen && fixed}"
   {...$$restProps}>
   <slot />
 </nav>

src/UIShell/SideNav/SideNavItems.svelte

@@ -1,3 +1,3 @@
-<ul class:bx--side-nav__items={true}>
+<ul class:bx--side-nav__items="{true}">
   <slot />
 </ul>

src/UIShell/SideNav/SideNavLink.svelte

@@ -26,21 +26,21 @@
   import { Icon } from "../../Icon";
 </script>
 
-<li class:bx--side-nav__item={true}>
+<li class:bx--side-nav__item="{true}">
   <a
-    aria-current={isSelected ? 'page' : undefined}
-    {href}
-    class:bx--side-nav__link={true}
-    class:bx--side-nav__link--current={isSelected}
+    aria-current="{isSelected ? 'page' : undefined}"
+    href="{href}"
+    class:bx--side-nav__link="{true}"
+    class:bx--side-nav__link--current="{isSelected}"
     {...$$restProps}
     on:click>
     {#if icon}
       <div
-        class:bx--side-nav__icon={true}
-        class:bx--side-nav__icon--small={true}>
+        class:bx--side-nav__icon="{true}"
+        class:bx--side-nav__icon--small="{true}">
         <Icon {...icon} />
       </div>
     {/if}
-    <span class:bx--side-nav__link-text={true}>{text}</span>
+    <span class:bx--side-nav__link-text="{true}">{text}</span>
   </a>
 </li>

src/UIShell/SideNav/SideNavMenu.svelte

@@ -21,31 +21,31 @@
   import { Icon } from "../../Icon";
 </script>
 
-<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={icon}>
+<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
   <button
     type="button"
     aria-haspopup="true"
-    aria-expanded={expanded}
-    class:bx--side-nav__submenu={true}
+    aria-expanded="{expanded}"
+    class:bx--side-nav__submenu="{true}"
     {...$$restProps}
     on:click
-    on:click={() => {
+    on:click="{() => {
       expanded = !expanded;
-    }}>
+    }}">
     {#if icon}
-      <div class:bx--side-nav__icon={true}>
+      <div class:bx--side-nav__icon="{true}">
         <Icon {...icon} />
       </div>
     {/if}
-    <span class:bx--side-nav__submenu-title={true}>{text}</span>
+    <span class:bx--side-nav__submenu-title="{true}">{text}</span>
     <div
-      class:bx--side-nav__icon={true}
-      class:bx--side-nav__icon--small={true}
-      class:bx--side-nav__submenu-chevron={true}>
-      <Icon title="Open Menu" tabindex="0" render={ChevronDown16} />
+      class:bx--side-nav__icon="{true}"
+      class:bx--side-nav__icon--small="{true}"
+      class:bx--side-nav__submenu-chevron="{true}">
+      <Icon title="Open Menu" tabindex="0" render="{ChevronDown16}" />
     </div>
   </button>
-  <ul role="menu" class:bx--side-nav__menu={true}>
+  <ul role="menu" class:bx--side-nav__menu="{true}">
     <slot />
   </ul>
 </li>

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -18,14 +18,14 @@
   export let text = undefined;
 </script>
 
-<li role="none" class:bx--side-nav__menu-item={true}>
+<li role="none" class:bx--side-nav__menu-item="{true}">
   <a
     role="menuitem"
-    aria-current={isSelected ? 'page' : undefined}
-    {href}
-    class:bx--side-nav__link={true}
+    aria-current="{isSelected ? 'page' : undefined}"
+    href="{href}"
+    class:bx--side-nav__link="{true}"
     {...$$restProps}
     on:click>
-    <span class:bx--side-nav__link-text={true}>{text}</span>
+    <span class:bx--side-nav__link-text="{true}">{text}</span>
   </a>
 </li>

src/UIShell/SkipToContent.svelte

@@ -12,6 +12,11 @@
   export let tabindex = "0";
 </script>
 
-<a {href} {tabindex} class:bx--skip-to-content={true} {...$$restProps} on:click>
+<a
+  href="{href}"
+  tabindex="{tabindex}"
+  class:bx--skip-to-content="{true}"
+  {...$$restProps}
+  on:click>
   <slot>Skip to main content</slot>
 </a>

src/UIShell/UIShell.Story.svelte

@@ -128,7 +128,7 @@
 </style>
 
 {#if story === 'header'}
-  <Header {...$$props} company={undefined}>
+  <Header {...$$props} company="{undefined}">
     <div slot="skip-to-content">
       <SkipToContent />
     </div>
@@ -137,21 +137,21 @@
     </span>
   </Header>
 {:else if story === 'sidenav'}
-  <SideNav isOpen={true}>
+  <SideNav isOpen="{true}">
     <SideNavItems>
-      <SideNavMenu text="Menu 01" icon={iCatalog}>
+      <SideNavMenu text="Menu 01" icon="{iCatalog}">
         <SideNavMenuItem text="Sub 01" href="/" />
         <SideNavMenuItem text="Sub 02" href="/" />
         <SideNavMenuItem text="Sub 03" href="/" />
         <SideNavMenuItem text="Sub 04" href="/" />
       </SideNavMenu>
-      <SideNavMenu text="Menu 02" icon={iAdjust}>
+      <SideNavMenu text="Menu 02" icon="{iAdjust}">
         <SideNavMenuItem text="Sub 01" href="/" />
         <SideNavMenuItem text="Sub 02" href="/" />
         <SideNavMenuItem text="Sub 03" href="/" />
         <SideNavMenuItem text="Sub 04" href="/" />
       </SideNavMenu>
-      <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+      <SideNavLink text="Menu 03" href="/" icon="{iProtection}" />
     </SideNavItems>
   </SideNav>
 {:else if story === 'header-with-nav'}
@@ -171,18 +171,21 @@
   <Header {...$$props}>
     <HeaderUtilities>
       <HeaderActionSearch />
-      <HeaderAction type="Settings" icon={iSettings}>
+      <HeaderAction type="Settings" icon="{iSettings}">
         <HeaderPanelLinks>
           <HeaderPanelDivider>Settings</HeaderPanelDivider>
         </HeaderPanelLinks>
       </HeaderAction>
-      <HeaderActionLink type="Help" icon={iHelp} />
-      <HeaderAction type="Notifications" icon={iNotifications} isOpen={true}>
+      <HeaderActionLink type="Help" icon="{iHelp}" />
+      <HeaderAction
+        type="Notifications"
+        icon="{iNotifications}"
+        isOpen="{true}">
         <HeaderPanelLinks>
           <HeaderPanelDivider>Notifications</HeaderPanelDivider>
         </HeaderPanelLinks>
       </HeaderAction>
-      <HeaderActionLink type="Account" icon={iAccount} />
+      <HeaderActionLink type="Account" icon="{iAccount}" />
     </HeaderUtilities>
   </Header>
 {:else if story === 'header-with-switcher'}
@@ -190,14 +193,14 @@
     <HeaderUtilities>
       <HeaderAction
         type="Switcher"
-        icon={isOpen ? iAccount : iSwitcher}
+        icon="{isOpen ? iAccount : iSwitcher}"
         bind:isOpen
-        on:open={() => {
+        on:open="{() => {
           console.log('on:open');
-        }}
-        on:close={() => {
+        }}"
+        on:close="{() => {
           console.log('on:close');
-        }}>
+        }}">
         <HeaderPanelLinks>
           <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
           <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -212,22 +215,22 @@
     </HeaderUtilities>
   </Header>
 {:else if story === 'header-and-sidenav'}
-  <Header expandedByDefault={false} bind:isSideNavOpen {...$$props}>
-    <SideNav fixed bind:isOpen={isSideNavOpen}>
+  <Header expandedByDefault="{false}" bind:isSideNavOpen {...$$props}>
+    <SideNav fixed bind:isOpen="{isSideNavOpen}">
       <SideNavItems>
-        <SideNavMenu text="Menu 01" icon={iCatalog}>
+        <SideNavMenu text="Menu 01" icon="{iCatalog}">
           <SideNavMenuItem text="Sub 01" href="/" />
           <SideNavMenuItem text="Sub 02" href="/" />
           <SideNavMenuItem text="Sub 03" href="/" />
           <SideNavMenuItem text="Sub 04" href="/" />
         </SideNavMenu>
-        <SideNavMenu text="Menu 02" icon={iAdjust}>
+        <SideNavMenu text="Menu 02" icon="{iAdjust}">
           <SideNavMenuItem text="Sub 01" href="/" />
           <SideNavMenuItem text="Sub 02" href="/" />
           <SideNavMenuItem text="Sub 03" href="/" />
           <SideNavMenuItem text="Sub 04" href="/" />
         </SideNavMenu>
-        <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+        <SideNavLink text="Menu 03" href="/" icon="{iProtection}" />
       </SideNavItems>
     </SideNav>
   </Header>