chore(prettier): use svelteStrictMode

src/TimePicker/TimePicker.Story.svelte

@@ -13,14 +13,14 @@
   <TimePickerSelect
     {...$$props.select}
     id="time-picker-select-1"
-    bind:value={select1}>
+    bind:value="{select1}">
     <SelectItem value="AM" text="AM" />
     <SelectItem value="PM" text="PM" />
   </TimePickerSelect>
   <TimePickerSelect
     {...$$props.select}
     id="time-picker-select-2"
-    bind:value={select2}>
+    bind:value="{select2}">
     <SelectItem value="Time zone 1" text="Time zone 1" />
     <SelectItem value="Time zone 2" text="Time zone 2" />
   </TimePickerSelect>

src/TimePicker/TimePicker.svelte

@@ -85,52 +85,52 @@
 </script>
 
 <div
-  class:bx--form-item={true}
+  class:bx--form-item="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
   <div
-    class:bx--time-picker={true}
-    class:bx--time-picker--light={light}
-    class:bx--select--light={light}>
-    <div class:bx--time-picker__input={true}>
+    class:bx--time-picker="{true}"
+    class:bx--time-picker--light="{light}"
+    class:bx--select--light="{light}">
+    <div class:bx--time-picker__input="{true}">
       {#if labelText}
         <label
-          for={id}
-          class:bx--label={true}
-          class:bx--visually-hidden={hideLabel}
-          class:bx--label--disabled={disabled}>
+          for="{id}"
+          class:bx--label="{true}"
+          class:bx--visually-hidden="{hideLabel}"
+          class:bx--label--disabled="{disabled}">
           {labelText}
         </label>
       {/if}
       <input
-        bind:this={ref}
-        data-invalid={invalid || undefined}
-        {pattern}
-        {placeholder}
-        {maxlength}
-        {id}
-        {name}
-        {type}
-        {value}
-        {disabled}
-        class:bx--time-picker__input-field={true}
-        class:bx--text-input={true}
-        class:bx--text-input--light={light}
-        class:bx--text-input--invalid={invalid}
+        bind:this="{ref}"
+        data-invalid="{invalid || undefined}"
+        pattern="{pattern}"
+        placeholder="{placeholder}"
+        maxlength="{maxlength}"
+        id="{id}"
+        name="{name}"
+        type="{type}"
+        value="{value}"
+        disabled="{disabled}"
+        class:bx--time-picker__input-field="{true}"
+        class:bx--text-input="{true}"
+        class:bx--text-input--light="{light}"
+        class:bx--text-input--invalid="{invalid}"
         on:change
         on:input
-        on:input={({ target }) => {
+        on:input="{({ target }) => {
           value = target.value;
-        }}
+        }}"
         on:focus
         on:blur />
     </div>
     <slot />
   </div>
   {#if invalid}
-    <div class:bx--form-requirement={true}>{invalidText}</div>
+    <div class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}
 </div>

src/TimePicker/TimePickerSelect.svelte

@@ -60,8 +60,8 @@
 </script>
 
 <div
-  class:bx--select={true}
-  class:bx--time-picker__select={true}
+  class:bx--select="{true}"
+  class:bx--time-picker__select="{true}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -69,27 +69,27 @@
   on:mouseleave>
   {#if labelText}
     <label
-      for={id}
-      class:bx--label={true}
-      class:bx--visually-hidden={hideLabel}>
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}">
       {labelText}
     </label>
   {/if}
   <!-- svelte-ignore a11y-no-onchange -->
   <select
-    bind:this={ref}
-    {id}
-    {name}
-    {disabled}
-    {value}
-    class:bx--select-input={true}
-    on:change={({ target }) => {
+    bind:this="{ref}"
+    id="{id}"
+    name="{name}"
+    disabled="{disabled}"
+    value="{value}"
+    class:bx--select-input="{true}"
+    on:change="{({ target }) => {
       selectedValue.set(target.value);
-    }}>
+    }}">
     <slot />
   </select>
   <ChevronDownGlyph
-    aria-label={iconDescription}
-    title={iconDescription}
+    aria-label="{iconDescription}"
+    title="{iconDescription}"
     class="bx--select__arrow" />
 </div>