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

docs/src/pages/framed/Accordion/ExpandableAccordion.svelte

@@ -29,7 +29,7 @@
     open = !open;
   }}"
 >
-  {open ? 'Collapse' : 'Expand'}
+  {open ? "Collapse" : "Expand"}
   all
 </Button>
 

docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte

@@ -6,12 +6,6 @@
   const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
 </script>
 
-<style>
-  .hidden {
-    display: none;
-  }
-</style>
-
 <ToggleSmall
   style="margin-bottom: var(--cds-spacing-05)"
   labelText="Show code snippets"
@@ -19,7 +13,8 @@
 />
 
 {#if toggled}
-  <h5>"Show more" will not render</h5><br />
+  <h5>"Show more" will not render</h5>
+  <br />
 {/if}
 <div class:hidden="{!toggled}">
   <CodeSnippet type="multi" code="{code}" />
@@ -27,8 +22,15 @@
 
 {#if toggled}
   <br /><br />
-  <h5>"Show more" will render</h5><br />
+  <h5>"Show more" will render</h5>
+  <br />
   <div class:hidden="{!toggled}">
     <CodeSnippet type="multi" code="{code}" />
   </div>
 {/if}
+
+<style>
+  .hidden {
+    display: none;
+  }
+</style>

docs/src/pages/framed/ComboBox/FilterableComboBox.svelte

@@ -10,6 +10,10 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
   shouldFilterItem="{shouldFilterItem}"
 />

docs/src/pages/framed/ComboBox/MultipleComboBox.svelte

@@ -16,12 +16,6 @@
   $: secondary = formatSelected(comboBox2_selectedIndex);
 </script>
 
-<style>
-  div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
-  }
-</style>
-
 <ComboBox
   bind:selectedIndex="{comboBox1_selectedIndex}"
   titleText="Primary contact"
@@ -39,3 +33,9 @@
 />
 
 <div>Secondary: {secondary}</div>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>

docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte

@@ -4,12 +4,6 @@
   let selectedIndex = 1;
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <ContentSwitcher bind:selectedIndex>
   <Switch text="Latest news" />
   <Switch text="Trending" />
@@ -27,3 +21,9 @@
 </div>
 
 <div>Selected index: {selectedIndex}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte

@@ -24,7 +24,7 @@
 
 <DataTable sortable headers="{headers}" rows="{rows}">
   <span slot="cell" let:cell>
-    {#if cell.key === 'overflow'}
+    {#if cell.key === "overflow"}
       <OverflowMenu flipped>
         <OverflowMenuItem text="Restart" />
         <OverflowMenuItem

docs/src/pages/framed/Dropdown/MultipleDropdown.svelte

@@ -16,12 +16,6 @@
   $: secondary = formatSelected(dropdown2_selectedIndex);
 </script>
 
-<style>
-  div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
-  }
-</style>
-
 <Dropdown
   titleText="Primary contact"
   bind:selectedIndex="{dropdown1_selectedIndex}"
@@ -39,3 +33,9 @@
 />
 
 <div>Secondary: {secondary}</div>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>

docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte

@@ -42,7 +42,7 @@
   >
     Cancel
   </Button>
-  {#if state !== 'dormant'}
+  {#if state !== "dormant"}
     <InlineLoading status="{state}" description="{descriptionMap[state]}" />
   {:else}
     <Button on:click="{() => (state = 'active')}">Submit</Button>

docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte

@@ -19,12 +19,6 @@
   $: secondary = formatSelected(multiselect2_selectedIds);
 </script>
 
-<style>
-  div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
-  }
-</style>
-
 <MultiSelect
   titleText="Primary contact"
   bind:selectedIds="{multiselect1_selectedIds}"
@@ -42,3 +36,9 @@
 />
 
 <div>Secondary: {secondary}</div>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>

docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte

@@ -19,7 +19,7 @@
 </FormGroup>
 
 <ButtonSet>
-  {#each ['free', 'standard', 'pro'] as value}
+  {#each ["free", "standard", "pro"] as value}
     <Button
       on:click="{() => {
         plan = value;

docs/src/pages/framed/Search/SearchReactive.svelte

@@ -4,12 +4,6 @@
   let value = "";
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <Search bind:value />
 
 <div>
@@ -33,3 +27,9 @@
 </div>
 
 <div>Value: {value}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/Toggle/ToggleReactive.svelte

@@ -4,19 +4,19 @@
   let toggled = true;
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <Toggle labelText="Push notifications" bind:toggled />
 
 <div>
   <Button size="small" on:click="{() => (toggled = !toggled)}">
     Toggle
-    {toggled ? 'off' : 'on'}
+    {toggled ? "off" : "on"}
   </Button>
 </div>
 
 <div>Toggled: {toggled}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/Tooltip/TooltipReactive.svelte

@@ -4,20 +4,20 @@
   let open = true;
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <Tooltip bind:open triggerText="Resource list" align="start">
   <p>Resources are provisioned based on your account's organization.</p>
 </Tooltip>
 
 <div style="margin-top: var(--cds-spacing-12);">
   <Button size="small" on:click="{() => (open = !open)}">
-    {open ? 'Close tooltip' : 'Open tooltip'}
+    {open ? "Close tooltip" : "Open tooltip"}
   </Button>
 </div>
 
 <div>Open: {open}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>

docs/src/pages/framed/_reset.svelte

@@ -13,6 +13,8 @@
   $: document.documentElement.setAttribute("theme", currentTheme);
 </script>
 
+<slot />
+
 <style>
   :global(body.framed) {
     min-height: 100vh;
@@ -20,5 +22,3 @@
     padding: var(--cds-spacing-06) var(--cds-spacing-05);
   }
 </style>
-
-<slot />