chore(prettier): use svelteStrictMode

docs/src/components/CopyableCodeSnippet.svelte

@@ -7,7 +7,7 @@
 
 <CodeSnippet
   {...$$restProps}
-  {code}
-  on:click={() => {
+  code="{code}"
+  on:click="{() => {
     copy(code);
-  }} />
+  }}" />

docs/src/components/GlobalHeader.svelte

@@ -17,7 +17,7 @@
   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

@@ -28,7 +28,7 @@
 
 <Carbon.Row>
   <Carbon.Column>
-    <Carbon.ToggleSmall bind:toggled={skeleton} labelText="Skeleton state" />
+    <Carbon.ToggleSmall bind:toggled="{skeleton}" labelText="Skeleton state" />
   </Carbon.Column>
 </Carbon.Row>
 
@@ -36,8 +36,11 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Accordion">
-        <Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
-          <Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
+        <Carbon.Accordion
+          count="{3}"
+          skeleton="{skeleton}"
+          open="{accordionItemOpen}">
+          <Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
             Content 1
           </Carbon.AccordionItem>
           <Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
@@ -47,7 +50,7 @@
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Breadcrumb">
-        <Carbon.Breadcrumb {skeleton}>
+        <Carbon.Breadcrumb skeleton="{skeleton}">
           <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
           <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
           <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
@@ -59,27 +62,33 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Primary button">
-        <Carbon.Button {skeleton}>Primary</Carbon.Button>
+        <Carbon.Button skeleton="{skeleton}">Primary</Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Secondary button">
-        <Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
+        <Carbon.Button kind="secondary" skeleton="{skeleton}">
+          Secondary
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Tertiary button">
-        <Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
+        <Carbon.Button kind="tertiary" skeleton="{skeleton}">
+          Tertiary
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Ghost button">
-        <Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
+        <Carbon.Button kind="ghost" skeleton="{skeleton}">Ghost</Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Danger button">
-        <Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
+        <Carbon.Button kind="danger" skeleton="{skeleton}">
+          Danger
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
   </Carbon.Row>
@@ -87,50 +96,52 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Primary button with icon">
-        <Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
+        <Carbon.Button icon="{Add16}" skeleton="{skeleton}">
+          With icon
+        </Carbon.Button>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Icon-only buttons">
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           iconDescription="Primary"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="secondary"
           iconDescription="Secondary"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="tertiary"
           iconDescription="Tertiary"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="ghost"
           iconDescription="Ghost"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
         <Carbon.Button
-          icon={Add16}
+          icon="{Add16}"
           hasIconOnly
           kind="danger"
           iconDescription="Danger"
           tooltipPosition="bottom"
           tooltipAlignment="center"
-          {skeleton} />
+          skeleton="{skeleton}" />
       </TileCard>
     </Carbon.Column>
   </Carbon.Row>
@@ -140,9 +151,9 @@
       <TileCard title="Checkbox">
         <fieldset class="bx--fieldset">
           <legend class="bx--label">Checkbox heading</legend>
-          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
-          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
-          <Carbon.Checkbox {skeleton} labelText="Checkbox label" />
+          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
+          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
+          <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
         </fieldset>
       </TileCard>
     </Carbon.Column>
@@ -152,11 +163,11 @@
           <legend class="bx--label">Checkbox heading</legend>
           <Carbon.Checkbox
             indeterminate
-            {skeleton}
+            skeleton="{skeleton}"
             labelText="Checkbox label" />
           <Carbon.Checkbox
             indeterminate
-            {skeleton}
+            skeleton="{skeleton}"
             labelText="Checkbox label" />
         </fieldset>
       </TileCard>
@@ -166,21 +177,21 @@
   <Carbon.Row class="scope">
     <Carbon.Column noGutter>
       <TileCard title="Inline Code Snippet">
-        <Carbon.CodeSnippet type="inline" light {skeleton}>
+        <Carbon.CodeSnippet type="inline" light skeleton="{skeleton}">
           {`node -v`}
         </Carbon.CodeSnippet>
       </TileCard>
     </Carbon.Column>
     <Carbon.Column noGutter>
       <TileCard title="Single-line Code Snippet">
-        <Carbon.CodeSnippet type="single" light {skeleton}>
+        <Carbon.CodeSnippet type="single" light skeleton="{skeleton}">
           {`tsc -c tsconfig.json`}
         </Carbon.CodeSnippet>
       </TileCard>
     </Carbon.Column>
-    <Carbon.Column lg={8} noGutter>
+    <Carbon.Column lg="{8}" noGutter>
       <TileCard title="Multi-line Code Snippet">
-        <Carbon.CodeSnippet type="multi" light {skeleton}>
+        <Carbon.CodeSnippet type="multi" light skeleton="{skeleton}">
           {`* {
 margin: 0;
 padding: 0;

docs/src/components/Theme.svelte

@@ -21,7 +21,7 @@
   }
 </style>
 
-<Select inline labelText="Theme" bind:selected={theme}>
+<Select inline labelText="Theme" bind:selected="{theme}">
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />

docs/src/components/TileCard.svelte

@@ -44,7 +44,7 @@
         hasIconOnly
         kind="ghost"
         size="small"
-        icon={Code16}
+        icon="{Code16}"
         iconDescription="Usage"
         tooltipAlignment="center"
         tooltipPosition="top" />
@@ -52,7 +52,7 @@
         hasIconOnly
         kind="ghost"
         size="small"
-        icon={Code16}
+        icon="{Code16}"
         iconDescription="Usage"
         tooltipAlignment="center"
         tooltipPosition="top" />

docs/src/routes/_layout.svelte

@@ -58,28 +58,28 @@
 </style>
 
 {#if segment !== 'examples'}
-  <GlobalHeader {segment} />
+  <GlobalHeader segment="{segment}" />
   <SideNav isOpen>
     <SideNavItems>
       <SideNavLink
         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}>
+        expanded="{segment === 'components'}"
+        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>
@@ -90,11 +90,11 @@
           style="display: flex; align-items: center; justify-content:
           space-between;">
           <Breadcrumb>
-            <BreadcrumbItem href="." isCurrentPage={!$tail && !segment}>
+            <BreadcrumbItem href="." isCurrentPage="{!$tail && !segment}">
               Home
             </BreadcrumbItem>
             {#if segment && $tail}
-              <BreadcrumbItem href={segment} isCurrentPage={!$tail}>
+              <BreadcrumbItem href="{segment}" isCurrentPage="{!$tail}">
                 {urlIds[segment]}
               </BreadcrumbItem>
             {/if}

docs/src/routes/components/[slug].svelte

@@ -96,35 +96,35 @@
 <Row noGutter>
   <div class="preview">
     {#if component}
-      <svelte:component this={component.default} {...defaultProps} />
+      <svelte:component this="{component.default}" {...defaultProps} />
     {/if}
   </div>
 </Row>
 
 <Row>
-  <Column md={3} lg={4}>
+  <Column md="{3}" lg="{4}">
     {#each Object.keys(props) as key}
       {#if Array.isArray(props[key].values)}
-        <FormGroup legendText={key}>
+        <FormGroup legendText="{key}">
           <RadioButtonGroup
-            selected={props[key].default}
-            on:change={({ detail }) => {
+            selected="{props[key].default}"
+            on:change="{({ detail }) => {
               defaultProps = { ...defaultProps, [key]: detail };
-            }}>
+            }}">
             {#each props[key].values as value}
-              <RadioButton {value} id={value} labelText={value} />
+              <RadioButton value="{value}" id="{value}" labelText="{value}" />
             {/each}
           </RadioButtonGroup>
         </FormGroup>
       {/if}
     {/each}
   </Column>
-  <Column md={5}>
+  <Column md="{5}">
     <CodeSnippet
       type="multi"
-      code={data.source}
-      on:click={() => {
+      code="{data.source}"
+      on:click="{() => {
         copy(data.source);
-      }} />
+      }}" />
   </Column>
 </Row>

docs/src/routes/examples/Button.svelte

@@ -8,10 +8,10 @@
   <Button
     {...$$props}
     kind="primary"
-    on:click={() => console.log('click')}
-    on:mouseover={() => console.log('mouseover')}
-    on:mouseenter={() => console.log('mouseenter')}
-    on:mouseleave={() => console.log('mouseleave')}>
+    on:click="{() => console.log('click')}"
+    on:mouseover="{() => console.log('mouseover')}"
+    on:mouseenter="{() => console.log('mouseenter')}"
+    on:mouseleave="{() => console.log('mouseleave')}">
     Primary button
   </Button>
 
@@ -26,15 +26,15 @@
 
 <div>
   <h4>Buttons with Icons</h4>
-  <Button {...$$props} kind="primary" icon={Add16}>Primary</Button>
+  <Button {...$$props} kind="primary" icon="{Add16}">Primary</Button>
 
-  <Button {...$$props} kind="secondary" icon={Add16}>Secondary</Button>
+  <Button {...$$props} kind="secondary" icon="{Add16}">Secondary</Button>
 
-  <Button {...$$props} kind="tertiary" icon={Add16}>Tertiary</Button>
+  <Button {...$$props} kind="tertiary" icon="{Add16}">Tertiary</Button>
 
-  <Button {...$$props} kind="ghost" icon={Add16}>Ghost</Button>
+  <Button {...$$props} kind="ghost" icon="{Add16}">Ghost</Button>
 
-  <Button {...$$props} kind="danger" icon={Add16}>Danger</Button>
+  <Button {...$$props} kind="danger" icon="{Add16}">Danger</Button>
 </div>
 
 <div>
@@ -43,7 +43,7 @@
     {...$$props}
     kind="primary"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Primary"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -52,7 +52,7 @@
     {...$$props}
     kind="secondary"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Secondary"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -61,7 +61,7 @@
     {...$$props}
     kind="tertiary"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Tertiary"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -70,7 +70,7 @@
     {...$$props}
     kind="ghost"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Ghost"
     tooltipPosition="bottom"
     tooltipAlignment="center" />
@@ -79,7 +79,7 @@
     {...$$props}
     kind="danger"
     hasIconOnly
-    icon={Add16}
+    icon="{Add16}"
     iconDescription="Danger"
     tooltipPosition="bottom"
     tooltipAlignment="center" />

docs/src/routes/getting-started/index.svelte

@@ -27,10 +27,11 @@
         <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`} />
+            <CopyableCodeSnippet
+              code="{`npm -i -D carbon-components-svelte`}" />
           </TabContent>
         </div>
       </Tabs>