From dce2dda72aa1ba6834fc1ea97451b20dc4ea9eaf Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 1 Jan 2022 10:58:42 -0800
Subject: [PATCH] Update docs (#965)

* chore(docs): run "npx browserslist@latest --update-db"

* chore(docs): upgrade carbon-icons-svelte to latest

* refactor(docs): re-use styles from css/all.scss

* chore(docs): add pnpm install command

* chore(docs): upgrade prettier, prettier-plugin-svelte

* docs(date-picker): improve "DatePicker in a modal" example

* fix(docs): restore "scripts-markup-styles" svelte sort order

* chore(docs): upgrade mdsvex

* chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte

* refactor(docs): use svelte:fragment where applicable

* fix(docs): include missing "options" in svelteSortOrder prettier config
---
 docs/package.json                             |  8 +-
 docs/src/App.svelte                           | 84 -------------------
 docs/src/index.js                             |  1 +
 docs/src/pages/_layout.svelte                 |  4 +-
 docs/src/pages/components/Accordion.svx       | 12 +--
 docs/src/pages/components/DataTable.svx       | 28 +++----
 docs/src/pages/components/DatePicker.svx      |  6 ++
 docs/src/pages/components/ImageLoader.svx     |  8 +-
 .../pages/components/InlineNotification.svx   |  4 +-
 docs/src/pages/components/Tabs.svx            | 12 +--
 .../DataTable/DataTableAppendColumns.svelte   |  4 +-
 .../DataTableNonExpandableRows.svelte         |  4 +-
 .../framed/DatePicker/DatePickerModal.svelte  |  7 +-
 .../ProgrammaticImageLoader.svelte            |  4 +-
 .../src/pages/framed/Tabs/TabsReactive.svelte |  4 +-
 docs/src/pages/framed/UIShell/Header.svelte   |  5 +-
 .../src/pages/framed/UIShell/HeaderNav.svelte |  5 +-
 .../pages/framed/UIShell/HeaderNavRail.svelte |  5 +-
 .../pages/framed/UIShell/HeaderSearch.svelte  |  4 +-
 .../framed/UIShell/HeaderSwitcher.svelte      |  4 +-
 .../framed/UIShell/HeaderUtilities.svelte     |  4 +-
 .../UIShell/PersistedHamburgerMenu.svelte     |  5 +-
 docs/src/pages/index.svelte                   |  9 +-
 docs/svelte.config.js                         |  3 +-
 docs/yarn.lock                                | 41 ++++-----
 package.json                                  |  6 +-
 yarn.lock                                     | 28 +++----
 27 files changed, 119 insertions(+), 190 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 8780145d..a5970183 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,14 +15,14 @@
     "carbon-components": "10.48.0",
     "carbon-components-10.47": "npm:carbon-components@10.47",
     "carbon-components-svelte": "../",
-    "carbon-icons-svelte": "^10.38.0",
+    "carbon-icons-svelte": "^10.44.3",
     "clipboard-copy": "^4.0.1",
     "cross-env": "^7.0.3",
-    "mdsvex": "^0.8.8",
+    "mdsvex": "^0.9.8",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
-    "prettier": "^2.1.2",
-    "prettier-plugin-svelte": "^1.4.1",
+    "prettier": "^2.5.1",
+    "prettier-plugin-svelte": "^2.5.1",
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.21.0",
     "remark-slug": "^6.0.0",
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index ac77060f..e2d19ce3 100644
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@@ -4,87 +4,3 @@
 </script>
 
 <Router routes="{routes}" />
-
-<style lang="scss" global>
-  // This is a recipe for dynamic, client-side theming
-  // All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
-
-  $feature-flags: (
-    // Custom CSS properties must be enabled to dynamically switch themes
-    enable-css-custom-properties: true,
-    ui-shell: true,
-    grid-columns-16: true
-  );
-
-  $css--font-face: true;
-  $css--helpers: true;
-  $css--body: true;
-  $css--use-layer: true;
-  $css--reset: true;
-  $css--default-type: true;
-  $css--plex: true;
-
-  // Use all Carbon themes
-  @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
-  @import "carbon-components/scss/globals/scss/component-tokens";
-  @import "carbon-components/src/components/tag/tag";
-  @import "carbon-components/src/components/notification/inline-notification";
-  @import "carbon-components/src/components/notification/toast-notification";
-  @import "carbon-components-10.47/src/components/popover/popover";
-
-  // The default theme is "white" (White)
-  :root {
-    @include carbon--theme($carbon--theme--white, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g10" to use the Gray 10 theme
-  // <html theme="g10">
-  :root[theme="g10"] {
-    @include carbon--theme($carbon--theme--g10, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g80" to use the Gray 90 theme
-  // <html theme="g80">
-  :root[theme="g80"] {
-    @include carbon--theme($carbon--theme--g80, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g90" to use the Gray 90 theme
-  // <html theme="g90">
-  :root[theme="g90"] {
-    @include carbon--theme($carbon--theme--g90, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Set the <html> theme attribute to "g100" to use the Gray 100 theme
-  // <html theme="g100">
-  :root[theme="g100"] {
-    @include carbon--theme($carbon--theme--g100, true) {
-      @include emit-component-tokens($tag-colors);
-      @include emit-component-tokens($notification-colors);
-    }
-  }
-
-  // Programmatically update the theme in JavaScript:
-  // document.documentElement.setAttribute("theme", "g90");
-
-  @import "carbon-components/scss/globals/scss/_css--reset";
-  @import "carbon-components/scss/globals/scss/_css--font-face";
-  @import "carbon-components/scss/globals/scss/_css--helpers";
-  @import "carbon-components/scss/globals/scss/_css--body";
-  @import "carbon-components/scss/globals/grid/grid";
-
-  // Import all component styles
-  @import "carbon-components/scss/globals/scss/styles";
-</style>
diff --git a/docs/src/index.js b/docs/src/index.js
index aba70f6a..41ae7b9c 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,4 +1,5 @@
 import App from "./App.svelte";
+import "../../css/all.scss";
 
 const app = new App({ target: document.body });
 
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index c5f66c23..7c25d441 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -48,9 +48,9 @@
     expandedByDefault="{true}"
     bind:isSideNavOpen
   >
-    <div slot="skip-to-content">
+    <svelte:fragment slot="skip-to-content">
       <SkipToContent />
-    </div>
+    </svelte:fragment>
 
     <span slot="platform" class="platform-name">
       Carbon Components Svelte
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index 078fd257..0890d559 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -46,25 +46,25 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
 
 <Accordion>
   <AccordionItem>
-    <div slot="title">
+    <svelte:fragment slot="title">
       <h5>Natural Language Classifier</h5>
       <div>AI / Machine Learning</div>
-    </div>
+    </svelte:fragment>
    <p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
    </p>
   </AccordionItem>
   <AccordionItem>
-  <div slot="title">
+  <svelte:fragment slot="title">
       <h5>Natural Language Understanding</h5>
       <div>AI / Machine Learning</div>
-    </div>
+    </svelte:fragment>
     <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
   </AccordionItem>
   <AccordionItem>
-  <div slot="title">
+  <svelte:fragment slot="title">
       <h5>Language Translator</h5>
       <div>AI / Machine Learning</div>
-    </div>
+    </svelte:fragment>
     <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
   </AccordionItem>
 </Accordion>
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 60baa463..9e8a754e 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -131,20 +131,20 @@ The slot name for the table header cells is `"cell-header"`.
     },
   ]}"
 >
- <span slot="cell-header" let:header>
+ <svelte:fragment slot="cell-header" let:header>
     {#if header.key === 'port'}
       {header.value} (network)
     {:else}
       {header.value}
     {/if}
-  </span>
-  <span slot="cell" let:row let:cell>
+  </svelte:fragment>
+  <svelte:fragment slot="cell" let:row let:cell>
     {#if cell.key === 'rule' && cell.value === 'Round robin'}
       <Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
     {:else}
       {cell.value}
     {/if}
-  </span>
+  </svelte:fragment>
 </DataTable>
 
 ### With title, description
@@ -1018,11 +1018,11 @@ In the following example, each row in the sortable data table has an overflow me
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Non-expandable rows
@@ -1085,11 +1085,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Expandable (short size)
@@ -1146,11 +1146,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Expandable (tall size)
@@ -1207,11 +1207,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Batch expansion
@@ -1268,11 +1268,11 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
     },
   ]}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
 
 ### Skeleton
diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 30dd2a96..1374344f 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -71,6 +71,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### DatePicker in a modal
 
+Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element.
+
+This is needed when placing a `DatePicker` inside of a `Modal` component.
+
+Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options.
+
 <FileSource src="/framed/DatePicker/DatePickerModal" />
 
 ### Skeleton
diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx
index 34808896..9bc498a9 100644
--- a/docs/src/pages/components/ImageLoader.svx
+++ b/docs/src/pages/components/ImageLoader.svx
@@ -16,12 +16,12 @@ This utility component uses the [Image API](https://developer.mozilla.org/en-US/
 Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
 
 <ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
-    <div slot="loading">
+    <svelte:fragment slot="loading">
         <InlineLoading />
-    </div>
-    <div slot="error">
+    </svelte:fragment>
+    <svelte:fragment slot="error">
         An error occurred.
-    </div>
+    </svelte:fragment>
 </ImageLoader>
 
 ### With aspect ratio
diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx
index 88b75733..98b461d4 100644
--- a/docs/src/pages/components/InlineNotification.svx
+++ b/docs/src/pages/components/InlineNotification.svx
@@ -25,9 +25,9 @@ source: Notification/InlineNotification.svelte
 ### With actions
 
 <InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
-  <div slot="actions">
+  <svelte:fragment slot="actions">
     <NotificationActionButton>Learn more</NotificationActionButton>
-  </div>
+  </svelte:fragment>
 </InlineNotification>
 
 ### Notification variants
diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx
index e89b5e44..e35a5956 100644
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@@ -13,11 +13,11 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 ### Auto width
@@ -30,11 +30,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width.
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 ### Reactive example
@@ -47,11 +47,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width.
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 ### Skeleton (default)
diff --git a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
index c013365d..dffa197f 100644
--- a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <DataTable sortable headers="{headers}" rows="{rows}">
-  <span slot="cell" let:cell>
+  <svelte:fragment slot="cell" let:cell>
     {#if cell.key === "overflow"}
       <OverflowMenu flipped>
         <OverflowMenuItem text="Restart" />
@@ -34,5 +34,5 @@
         <OverflowMenuItem danger text="Stop" />
       </OverflowMenu>
     {:else}{cell.value}{/if}
-  </span>
+  </svelte:fragment>
 </DataTable>
diff --git a/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte b/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
index ff08ef97..6e362b41 100644
--- a/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
@@ -60,9 +60,9 @@
   ]}"
   rows="{rows}"
 >
-  <div slot="expanded-row" let:row>
+  <svelte:fragment slot="expanded-row" let:row>
     <pre>
       {JSON.stringify(row, null, 2)}
     </pre>
-  </div>
+  </svelte:fragment>
 </DataTable>
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
index 3940d610..ea33e5e9 100644
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -2,7 +2,12 @@
   import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
 </script>
 
-<Modal open modalHeading="DatePicker">
+<Modal
+  open
+  modalHeading="Meeting date"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+>
   <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
   </DatePicker>
diff --git a/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte b/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
index 471a15c8..dab9501e 100644
--- a/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
+++ b/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
@@ -18,9 +18,9 @@
 </Button>
 
 <ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
-  <div slot="error">
+  <svelte:fragment slot="error">
     <Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
       Error. Try again
     </Button>
-  </div>
+  </svelte:fragment>
 </ImageLoader>
diff --git a/docs/src/pages/framed/Tabs/TabsReactive.svelte b/docs/src/pages/framed/Tabs/TabsReactive.svelte
index 68a5b4ba..f85e5c07 100644
--- a/docs/src/pages/framed/Tabs/TabsReactive.svelte
+++ b/docs/src/pages/framed/Tabs/TabsReactive.svelte
@@ -8,11 +8,11 @@
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
-  <div slot="content">
+  <svelte:fragment slot="content">
     <TabContent>Content 1</TabContent>
     <TabContent>Content 2</TabContent>
     <TabContent>Content 3</TabContent>
-  </div>
+  </svelte:fragment>
 </Tabs>
 
 <div>
diff --git a/docs/src/pages/framed/UIShell/Header.svelte b/docs/src/pages/framed/UIShell/Header.svelte
index a1a6fddf..4f09da2f 100644
--- a/docs/src/pages/framed/UIShell/Header.svelte
+++ b/docs/src/pages/framed/UIShell/Header.svelte
@@ -15,10 +15,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
-
+  </svelte:fragment>
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />
diff --git a/docs/src/pages/framed/UIShell/HeaderNav.svelte b/docs/src/pages/framed/UIShell/HeaderNav.svelte
index 8035eb68..0f8024a3 100644
--- a/docs/src/pages/framed/UIShell/HeaderNav.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNav.svelte
@@ -21,10 +21,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
-
+  </svelte:fragment>
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />
diff --git a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
index 0cf9e43a..846971c8 100644
--- a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
@@ -22,10 +22,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
-
+  </svelte:fragment>
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />
diff --git a/docs/src/pages/framed/UIShell/HeaderSearch.svelte b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
index d5d30ebd..221dc304 100644
--- a/docs/src/pages/framed/UIShell/HeaderSearch.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
@@ -66,9 +66,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte">
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
   <HeaderUtilities>
     <HeaderSearch
       bind:ref
diff --git a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
index d974ff1c..c06c72a5 100644
--- a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
@@ -41,9 +41,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
   <HeaderUtilities>
     <HeaderAction bind:isOpen transition="{transitions[selected].value}">
       <HeaderPanelLinks>
diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
index 9e1019bc..439a95ce 100644
--- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
@@ -27,9 +27,9 @@
 </script>
 
 <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
+  </svelte:fragment>
   <HeaderUtilities>
     <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
     <HeaderAction
diff --git a/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte b/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
index 5a8ce687..6bad2c56 100644
--- a/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
+++ b/docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte
@@ -25,10 +25,9 @@
   platformName="Carbon Svelte"
   bind:isSideNavOpen
 >
-  <div slot="skip-to-content">
+  <svelte:fragment slot="skip-to-content">
     <SkipToContent />
-  </div>
-
+  </svelte:fragment>
   <HeaderNav>
     <HeaderNavItem href="/" text="Link 1" />
     <HeaderNavItem href="/" text="Link 2" />
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 8714c081..c9be5bcc 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -23,6 +23,7 @@
 
   const installYarn = "yarn add -D carbon-components-svelte";
   const installNpm = "npm i -D carbon-components-svelte";
+  const installPnpm = "pnpm i -D carbon-components-svelte";
   const themes = {
     white: "White",
     g10: "Gray 10",
@@ -98,6 +99,10 @@
         <Row noGutter>
           <CodeSnippet code="{installNpm}" />
         </Row>
+        <h4>Using pnpm:</h4>
+        <Row noGutter>
+          <CodeSnippet code="{installPnpm}" />
+        </Row>
       </Column>
     </Row>
     <Row style="margin-bottom: var(--cds-layout-04)">
@@ -126,7 +131,7 @@
           <Tab label="CSS StyleSheet" />
           <Tab label="CDN" />
           <Tab label="SCSS" />
-          <div slot="content">
+          <svelte:fragment slot="content">
             <TabContent>
               <p>
                 This library ships with six pre-compiled CSS StyleSheets built
@@ -194,7 +199,7 @@
                 for documentation.
               </p>
             </TabContent>
-          </div>
+          </svelte:fragment>
         </Tabs>
       </Column>
     </Row>
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index 8f27725b..67c86bcc 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -67,8 +67,7 @@ function plugin() {
       const scriptBlock = createImports(node.value);
       const formattedCode = format(scriptBlock + node.value, {
         parser: "svelte",
-        svelteBracketNewLine: true,
-        svelteSortOrder: "scripts-markup-styles",
+        svelteSortOrder: "scripts-markup-styles-options",
       });
       const highlightedCode = Prism.highlight(
         formattedCode,
diff --git a/docs/yarn.lock b/docs/yarn.lock
index d46e4516..62db1da2 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -452,9 +452,9 @@ cacheable-request@^7.0.1:
     responselike "^2.0.0"
 
 caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
-  version "1.0.30001180"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001180.tgz#67abcd6d1edf48fa5e7d1e84091d1d65ab76e33b"
-  integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
+  version "1.0.30001294"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz"
+  integrity sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==
 
 "carbon-components-10.47@npm:carbon-components@10.47":
   version "10.47.1"
@@ -467,7 +467,7 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
     warning "^3.0.0"
 
 carbon-components-svelte@../:
-  version "0.50.4"
+  version "0.51.0"
   dependencies:
     flatpickr "4.6.9"
 
@@ -481,10 +481,10 @@ carbon-components@10.48.0:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-icons-svelte@^10.38.0:
-  version "10.38.0"
-  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.38.0.tgz#daf74e4a2a826ad994c950a67307b8392d80ca3a"
-  integrity sha512-uEckbbNHFtDzKz+QRx6GxvZcezXXqfDOiaE7mupkiRPkBbALrA9CPJZbI5Q2XW5mpn8lgN3IlTm2u1iJEAlVJw==
+carbon-icons-svelte@^10.44.3:
+  version "10.44.3"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.44.3.tgz#cc437d5d10512777a8d476c742ff2885fc5dfcf0"
+  integrity sha512-vLBy3T5Dnv68vjTJEtwL7DKHX4VqXHeJ6DwPtiO9zTwoMOU3eLx/exzR6KTISuUMqfEPmrOy4dOwZc5sPWuxLA==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -1647,12 +1647,13 @@ mdast-util-to-string@^1.0.0:
   resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
   integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
 
-mdsvex@^0.8.8:
-  version "0.8.8"
-  resolved "https://registry.npmjs.org/mdsvex/-/mdsvex-0.8.8.tgz#1d7d7a9fd681a7d0f9418a24a0c282ff9f2e828d"
-  integrity sha512-T496FO26UdKs6R7oD8GkuMgFyd37M4QZmePm4mOvT5judvF5fxes7xfICIiTSKz3If1iieXVmI6XEhNI0qqi5A==
+mdsvex@^0.9.8:
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/mdsvex/-/mdsvex-0.9.8.tgz#f430988b86c4d9080381de2fbe54326c046487bc"
+  integrity sha512-5QvThjRKoKkGH00qdHxLZ5ROd80RgGiJvM2B9opeFreaiGFTLoKKFUgEBCslLrwM24cVGJLmIM3rR83OFDf3tQ==
   dependencies:
     "@types/unist" "^2.0.3"
+    prism-svelte "^0.4.7"
     prismjs "^1.17.1"
     vfile-message "^2.0.4"
 
@@ -1942,15 +1943,15 @@ prelude-ls@~1.1.2:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier-plugin-svelte@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
-  integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA==
+prettier-plugin-svelte@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz#6c2f5e7fbe2aa208b340b75edc4fdfda33fb254c"
+  integrity sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==
 
-prettier@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
-  integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
 prism-svelte@^0.4.7:
   version "0.4.7"
diff --git a/package.json b/package.json
index 35a08183..0b881500 100644
--- a/package.json
+++ b/package.json
@@ -35,14 +35,14 @@
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
-    "prettier": "^2.2.1",
-    "prettier-plugin-svelte": "^2.1.5",
+    "prettier": "^2.5.1",
+    "prettier-plugin-svelte": "^2.5.1",
     "rollup": "^2.38.4",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.42.1",
     "sveld": "^0.10.2",
-    "svelte": "^3.40.1",
+    "svelte": "^3.44.3",
     "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"
   },
diff --git a/yarn.lock b/yarn.lock
index bf5286fc..0a04610e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1801,21 +1801,21 @@ postcss@^8.2.4:
     nanoid "^3.1.20"
     source-map "^0.6.1"
 
-prettier-plugin-svelte@^2.1.5:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.5.tgz#cb1df2bffafa0562f05e02c6e9373806ef51ebb1"
-  integrity sha512-7ySuC/n0Rk8v6GrzoruojfLYde6ncjeFCAA65Dm+fXrK2Mgc3FlvzXMPpm//P3LgfEoc3zMEG/xog1YeoNhdSQ==
-
-prettier@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
-  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+prettier-plugin-svelte@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz#6c2f5e7fbe2aa208b340b75edc4fdfda33fb254c"
+  integrity sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==
 
 prettier@^2.3.2:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
   integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
 
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -2345,16 +2345,16 @@ svelte-preprocess@^4.8.0:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.40.1:
-  version "3.40.1"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.40.1.tgz#0c1fa443c812f042ce5ccd8d3bec1654a612c259"
-  integrity sha512-IreCwsCD5yoKlXCDXCyHZ0mh1wNwm3/5QD+nVNBzSWug5dUiWcah/8QWnDcC3IYbJbn0ZRT04b8y4ITMtr1bNQ==
-
 svelte@^3.42.4:
   version "3.43.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.43.2.tgz#217fc6059f52afa281f39200b6253ac1b83812b4"
   integrity sha512-Lj+TJfSeod8UGnoG2opysdlCy4MCck/hHQsZwtNPXdYTwLTz+WC37QwewPhZtd+h3dpfps4h9QzFxWGVI4tzQw==
 
+svelte@^3.44.3:
+  version "3.44.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.44.3.tgz#795b1ced6ed3da44969099e5061b850c93c95e9a"
+  integrity sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg==
+
 terser@^5.0.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81"