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/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>

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

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

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

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

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)