chore(prettier): use svelteStrictMode

src/Tile/ClickableTile.svelte

@@ -14,21 +14,21 @@
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <a
-  class:bx--tile={true}
-  class:bx--tile--clickable={true}
-  class:bx--tile--is-clicked={clicked}
-  class:bx--tile--light={light}
+  class:bx--tile="{true}"
+  class:bx--tile--clickable="{true}"
+  class:bx--tile--is-clicked="{clicked}"
+  class:bx--tile--light="{light}"
   {...$$restProps}
   on:click
-  on:click={() => {
+  on:click="{() => {
     clicked = !clicked;
-  }}
+  }}"
   on:keydown
-  on:keydown={({ key }) => {
+  on:keydown="{({ key }) => {
     if (key === ' ' || key === 'Enter') {
       clicked = !clicked;
     }
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave>

src/Tile/ExpandableTile.svelte

@@ -73,33 +73,33 @@
 </script>
 
 <div
-  bind:this={ref}
-  {id}
-  {tabindex}
-  class:bx--tile={true}
-  class:bx--tile--expandable={true}
-  class:bx--tile--is-expanded={expanded}
-  class:bx--tile--light={light}
+  bind:this="{ref}"
+  id="{id}"
+  tabindex="{tabindex}"
+  class:bx--tile="{true}"
+  class:bx--tile--expandable="{true}"
+  class:bx--tile--is-expanded="{expanded}"
+  class:bx--tile--light="{light}"
   {...$$restProps}
-  style={expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}
+  style="{expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
   on:click
-  on:click={() => {
+  on:click="{() => {
     expanded = !expanded;
-  }}
+  }}"
   on:keypress
-  on:keypress={(e) => {
+  on:keypress="{(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       expanded = !expanded;
     }
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave>
-  <div bind:this={refContent}>
-    <div bind:this={refAbove} class:bx--tile-content={true}>
+  <div bind:this="{refContent}">
+    <div bind:this="{refAbove}" class:bx--tile-content="{true}">
       <span
-        class:bx--tile-content__above-the-fold={true}
+        class:bx--tile-content__above-the-fold="{true}"
         on:click
         on:mouseover
         on:mouseenter
@@ -108,18 +108,18 @@
       </span>
     </div>
     <button
-      aria-expanded={expanded}
-      aria-label={expanded ? tileExpandedIconText : tileCollapsedIconText}
-      class:bx--tile__chevron={true}>
+      aria-expanded="{expanded}"
+      aria-label="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
+      class:bx--tile__chevron="{true}">
       <ChevronDown16 />
     </button>
-    <div class:bx--tile-content={true}>
+    <div class:bx--tile-content="{true}">
       <span
         on:click
         on:mouseover
         on:mouseenter
         on:mouseleave
-        class:bx--tile-content__below-the-fold={true}>
+        class:bx--tile-content__below-the-fold="{true}">
         <slot name="below" />
       </span>
     </div>

src/Tile/RadioTile.svelte

@@ -53,38 +53,40 @@
 
 <input
   type="radio"
-  {id}
-  {name}
-  {value}
-  {checked}
-  class:bx--tile-input={true}
+  id="{id}"
+  name="{name}"
+  value="{value}"
+  checked="{checked}"
+  class:bx--tile-input="{true}"
   on:change
-  on:change={() => {
+  on:change="{() => {
     update(value);
-  }} />
+  }}" />
 <label
-  for={id}
-  {tabindex}
-  class:bx--tile={true}
-  class:bx--tile--selectable={true}
-  class:bx--tile--is-selected={checked}
-  class:bx--tile--light={light}
+  for="{id}"
+  tabindex="{tabindex}"
+  class:bx--tile="{true}"
+  class:bx--tile--selectable="{true}"
+  class:bx--tile--is-selected="{checked}"
+  class:bx--tile--light="{light}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={(e) => {
+  on:keydown="{(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       update(value);
     }
-  }}>
-  <span class:bx--tile__checkmark={true}>
-    <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
+  }}">
+  <span class:bx--tile__checkmark="{true}">
+    <CheckmarkFilled16
+      aria-label="{iconDescription}"
+      title="{iconDescription}" />
   </span>
-  <span class:bx--tile-content={true}>
+  <span class:bx--tile-content="{true}">
     <slot />
   </span>
 </label>

src/Tile/SelectableTile.svelte

@@ -62,41 +62,43 @@
 </script>
 
 <input
-  bind:this={ref}
+  bind:this="{ref}"
   type="checkbox"
   tabindex="-1"
-  class:bx--tile-input={true}
-  checked={selected}
-  {id}
-  {value}
-  {name}
-  {title} />
+  class:bx--tile-input="{true}"
+  checked="{selected}"
+  id="{id}"
+  value="{value}"
+  name="{name}"
+  title="{title}" />
 <label
-  for={id}
-  {tabindex}
-  class:bx--tile={true}
-  class:bx--tile--selectable={true}
-  class:bx--tile--is-selected={selected}
-  class:bx--tile--light={light}
+  for="{id}"
+  tabindex="{tabindex}"
+  class:bx--tile="{true}"
+  class:bx--tile--selectable="{true}"
+  class:bx--tile--is-selected="{selected}"
+  class:bx--tile--light="{light}"
   {...$$restProps}
   on:click
-  on:click|preventDefault={() => {
+  on:click|preventDefault="{() => {
     selected = !selected;
-  }}
+  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={(e) => {
+  on:keydown="{(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       selected = !selected;
     }
-  }}>
-  <span class:bx--tile__checkmark={true}>
-    <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
+  }}">
+  <span class:bx--tile__checkmark="{true}">
+    <CheckmarkFilled16
+      aria-label="{iconDescription}"
+      title="{iconDescription}" />
   </span>
-  <span class:bx--tile-content={true}>
+  <span class:bx--tile-content="{true}">
     <slot />
   </span>
 </label>

src/Tile/Tile.Story.svelte

@@ -29,13 +29,13 @@
         {...$$props}
         id="tile-1"
         name="tiles"
-        bind:selected={selectedTile1}
-        on:select={({ detail }) => {
+        bind:selected="{selectedTile1}"
+        on:select="{({ detail }) => {
           console.log('on:select', detail);
-        }}
-        on:deselect={({ detail }) => {
+        }}"
+        on:deselect="{({ detail }) => {
           console.log('on:deselect', detail);
-        }}>
+        }}">
         Multi-select Tile
       </SelectableTile>
       <SelectableTile {...$$props} id="tile-2" name="tiles">
@@ -48,7 +48,11 @@
   {:else if story === 'selectable'}
     <TileGroup legend="Selectable Tile Group" bind:selected>
       {#each radioTiles as { value, id, labelText }, i (id)}
-        <RadioTile {...$$props} {value} {id} {labelText}>
+        <RadioTile
+          {...$$props}
+          value="{value}"
+          id="{id}"
+          labelText="{labelText}">
           Selectable Tile
         </RadioTile>
       {/each}

src/Tile/Tile.svelte

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

src/Tile/TileGroup.svelte

@@ -39,9 +39,9 @@
   $: dispatch("select", $selectedValue);
 </script>
 
-<fieldset {disabled} class:bx--tile-group={true} {...$$restProps}>
+<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
   {#if legend}
-    <legend class:bx--label={true}>{legend}</legend>
+    <legend class:bx--label="{true}">{legend}</legend>
   {/if}
   <div>
     <slot />