chore(deps-dev): upgrade prettier-plugin-svelte (#498)

docs/src/components/ComponentApi.svelte

@@ -39,29 +39,6 @@
   );
 </script>
 
-<style>
-  .description {
-    margin-bottom: var(--cds-spacing-04);
-  }
-
-  .cell {
-    position: relative;
-    z-index: 9;
-    min-height: 1.25rem;
-    margin-bottom: var(--cds-spacing-02);
-  }
-
-  .overflow {
-    overflow-x: auto;
-  }
-
-  :global(.my-layout-01-03),
-  :global(.overflow .bx--structured-list) {
-    margin-top: var(--cds-layout-01);
-    margin-bottom: var(--cds-layout-04);
-  }
-</style>
-
 <p style="margin-bottom: var(--cds-layout-02)">
   Component source code:
   <Link inline size="lg" href="{source}" target="_blank">
@@ -101,12 +78,12 @@
               {/if}
             </StructuredListCell>
             <StructuredListCell>
-              {#each prop.type.split(' | ') as type, i (type)}
+              {#each prop.type.split(" | ") as type, i (type)}
                 <div
                   class="cell"
                   style="z-index: {prop.type.split(' | ').length - i}"
                 >
-                  {#if type.startsWith('typeof')}
+                  {#if type.startsWith("typeof")}
                     <TooltipDefinition
                       direction="top"
                       align="start"
@@ -114,7 +91,7 @@
                     >
                       Carbon Svelte icon
                     </TooltipDefinition>
-                  {:else if type.startsWith('HTML')}
+                  {:else if type.startsWith("HTML")}
                     <Link
                       href="{mdn_api}{type}"
                       target="_blank"
@@ -125,7 +102,7 @@
                     </Link>
                   {:else if type in typeMap}
                     <code>{typeMap[type]}</code>
-                  {:else if type.startsWith('(')}
+                  {:else if type.startsWith("(")}
                     <code>{type}</code>
                   {:else}
                     <InlineSnippet code="{type}" />
@@ -136,12 +113,12 @@
             <StructuredListCell><code>{prop.value}</code></StructuredListCell>
             <StructuredListCell>
               {#if prop.description}
-                {#each prop.description.split('\n') as line}
+                {#each prop.description.split("\n") as line}
                   <div class="description">
                     {@html line
-                      .replace(/\</g, '&lt;')
-                      .replace(/\>/g, '&gt;')
-                      .replace(/`(.*?)`/g, '<code>$1</code>')}.
+                      .replace(/\</g, "&lt;")
+                      .replace(/\>/g, "&gt;")
+                      .replace(/`(.*?)`/g, "<code>$1</code>")}.
                   </div>
                 {/each}
               {:else}
@@ -160,7 +137,7 @@
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">
     {#each component.slots as slot (slot.name)}
-      <ListItem>{slot.default ? 'default' : slot.name}</ListItem>
+      <ListItem>{slot.default ? "default" : slot.name}</ListItem>
     {/each}
   </UnorderedList>
 {:else}
@@ -198,9 +175,32 @@
     spreads
     <code>$$restProps</code>
     to the
-    {#if component.rest_props.type === 'Element'}
+    {#if component.rest_props.type === "Element"}
       <code>{component.rest_props.name}</code>
       element.
     {:else}<code>{component.rest_props.name}</code> component.{/if}
   {:else}This component does not spread <code>restProps</code>{/if}
 </div>
+
+<style>
+  .description {
+    margin-bottom: var(--cds-spacing-04);
+  }
+
+  .cell {
+    position: relative;
+    z-index: 9;
+    min-height: 1.25rem;
+    margin-bottom: var(--cds-spacing-02);
+  }
+
+  .overflow {
+    overflow-x: auto;
+  }
+
+  :global(.my-layout-01-03),
+  :global(.overflow .bx--structured-list) {
+    margin-top: var(--cds-layout-01);
+    margin-bottom: var(--cds-layout-04);
+  }
+</style>

docs/src/components/Footer.svelte

@@ -2,12 +2,6 @@
   import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
 </script>
 
-<style>
-  footer {
-    background: var(--cds-ui-01);
-  }
-</style>
-
 <footer class="bx--content">
   <Grid>
     <Row>
@@ -26,3 +20,9 @@
     </Row>
   </Grid>
 </footer>
+
+<style>
+  footer {
+    background: var(--cds-ui-01);
+  }
+</style>

docs/src/components/InlineSnippet.svelte

@@ -5,12 +5,6 @@
   import copy from "clipboard-copy";
 </script>
 
-<style>
-  div {
-    margin-bottom: var(--cds-spacing-04);
-  }
-</style>
-
 <div>
   <CodeSnippet
     code="{code}"
@@ -20,3 +14,9 @@
     }}"
   />
 </div>
+
+<style>
+  div {
+    margin-bottom: var(--cds-spacing-04);
+  }
+</style>

docs/src/components/Preview.svelte

@@ -13,6 +13,40 @@
   $: themedSrcUrl = $url(`${src}?theme=${$theme}`);
 </script>
 
+<div class="preview">
+  {#if framed}
+    <div class="framed-header">
+      <div
+        style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
+      >
+        Content loaded in an iframe
+      </div>
+      <Button
+        style="margin-left: auto;"
+        kind="ghost"
+        target="_blank"
+        size="field"
+        href="{themedSrcUrl}"
+        icon="{Launch16}"
+      >
+        Open in new tab
+      </Button>
+    </div>
+  {/if}
+  <div class="preview-viewer" class:framed>
+    {#if framed}
+      <iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
+    {:else}
+      <slot />
+    {/if}
+  </div>
+  <div class="code-override">
+    <CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
+      {@html code}
+    </CodeSnippet>
+  </div>
+</div>
+
 <style global>
   .preview {
     margin-bottom: var(--cds-layout-04);
@@ -130,37 +164,3 @@
     height: 100%;
   }
 </style>
-
-<div class="preview">
-  {#if framed}
-    <div class="framed-header">
-      <div
-        style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
-      >
-        Content loaded in an iframe
-      </div>
-      <Button
-        style="margin-left: auto;"
-        kind="ghost"
-        target="_blank"
-        size="field"
-        href="{themedSrcUrl}"
-        icon="{Launch16}"
-      >
-        Open in new tab
-      </Button>
-    </div>
-  {/if}
-  <div class="preview-viewer" class:framed>
-    {#if framed}
-      <iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
-    {:else}
-      <slot />
-    {/if}
-  </div>
-  <div class="code-override">
-    <CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
-      {@html code}
-    </CodeSnippet>
-  </div>
-</div>

docs/src/components/TileCard.svelte

@@ -12,6 +12,33 @@
   $: tileComponent = href ? ClickableTile : Tile;
 </script>
 
+<div class="card-wrapper" class:borderRight class:borderBottom>
+  <AspectRatio>
+    <svelte:component
+      this="{tileComponent}"
+      href="{href}"
+      {...$$restProps}
+      style="height: 100%;"
+    >
+      <div class="card">
+        <div>
+          <h5 class="title">{title}</h5>
+          {#if subtitle}
+            <div class="subtitle">{subtitle}</div>
+          {/if}
+        </div>
+        <div class="card-footer">
+          <svelte:component
+            this="{LogoGithub32}"
+            style="fill: var(--cds-icon-01)"
+          />
+          <Launch20 style="fill: var(--cds-icon-01)" />
+        </div>
+      </div>
+    </svelte:component>
+  </AspectRatio>
+</div>
+
 <style>
   .card-wrapper {
     border-right: 1px solid transparent;
@@ -56,30 +83,3 @@
     }
   }
 </style>
-
-<div class="card-wrapper" class:borderRight class:borderBottom>
-  <AspectRatio>
-    <svelte:component
-      this="{tileComponent}"
-      href="{href}"
-      {...$$restProps}
-      style="height: 100%;"
-    >
-      <div class="card">
-        <div>
-          <h5 class="title">{title}</h5>
-          {#if subtitle}
-            <div class="subtitle">{subtitle}</div>
-          {/if}
-        </div>
-        <div class="card-footer">
-          <svelte:component
-            this="{LogoGithub32}"
-            style="fill: var(--cds-icon-01)"
-          />
-          <Launch20 style="fill: var(--cds-icon-01)" />
-        </div>
-      </div>
-    </svelte:component>
-  </AspectRatio>
-</div>