From 5b10679f286e340187c6a7a5e753fe4e11c88e7c Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 15 Nov 2024 19:01:29 +0000
Subject: [PATCH] Docs: Minor fixes to Svelte CSF

---
 docs/_snippets/arg-types-in-story.md          |  3 +-
 docs/_snippets/button-group-story.md          | 54 ++-----------------
 .../button-story-component-decorator.md       |  8 ++-
 docs/_snippets/button-story-using-args.md     |  6 +--
 docs/_snippets/button-story-with-emojis.md    |  6 +--
 docs/_snippets/button-story.md                |  6 +--
 .../component-story-custom-args-mapping.md    |  6 +--
 .../component-story-static-asset-cdn.md       |  6 +--
 ...omponent-story-static-asset-with-import.md |  6 +--
 ...onent-story-static-asset-without-import.md |  6 +--
 docs/_snippets/list-story-starter.md          |  2 +-
 .../my-component-play-function-alt-queries.md |  8 +--
 ...my-component-play-function-query-findby.md | 14 ++---
 .../my-component-play-function-waitfor.md     |  6 +--
 .../my-component-play-function-with-canvas.md |  6 +--
 ...component-play-function-with-clickevent.md |  6 +--
 .../my-component-play-function-with-delay.md  |  6 +--
 ...omponent-play-function-with-selectevent.md |  6 +--
 .../my-component-story-basic-and-props.md     |  6 +--
 .../my-component-vite-env-variables.md        |  6 +--
 .../my-component-with-env-variables.md        |  6 +--
 .../nextjs-navigation-override-in-story.md    |  3 +-
 .../nextjs-router-override-in-story.md        |  3 +-
 docs/_snippets/parameters-in-story.md         |  4 +-
 .../register-component-with-play-function.md  |  1 -
 .../tags-autodocs-remove-component.md         | 12 ++---
 docs/_snippets/tags-combo-example.md          | 12 ++---
 docs/_snippets/tags-in-meta-and-story.md      |  4 +-
 docs/_snippets/tags-remove-in-story.md        |  6 +--
 .../your-component-with-decorator.md          | 10 ++--
 docs/_snippets/your-component.md              |  2 +-
 docs/get-started/frameworks/svelte-vite.mdx   |  6 +--
 docs/get-started/frameworks/sveltekit.mdx     |  6 +--
 docs/get-started/install.mdx                  |  2 +-
 docs/writing-stories/decorators.mdx           |  2 -
 docs/writing-stories/index.mdx                |  2 +-
 36 files changed, 98 insertions(+), 156 deletions(-)

diff --git a/docs/_snippets/arg-types-in-story.md b/docs/_snippets/arg-types-in-story.md
index 41508f9a65d..43ce951c112 100644
--- a/docs/_snippets/arg-types-in-story.md
+++ b/docs/_snippets/arg-types-in-story.md
@@ -52,7 +52,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 export const Basic = {
   argTypes: {
@@ -126,4 +126,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index 14a3021bbab..146034a60d1 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -175,28 +175,12 @@ export const Pair: Story = {
 </script>
 
 <Story
-  name="Primary"
+  name="Pair"
   args={{
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
   }}
 />
-
-<Story
-  name="Secondary"
-  args={{
-    backgroundColor: '#ff0',
-    label: '😄👍😍💯',
-   }}
-/>
-
-<Story
-  name="Tertiary"
-  args={{
-    backgroundColor:'#ff0',
-    label: '📚📕📈🤓',
-  }}
-/>
 ```
 
 ```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
@@ -232,28 +216,12 @@ export const Pair = {
 </script>
 
 <Story
-  name="Primary"
+  name="Pair"
   args={{
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
   }}
 />
-
-<Story
-  name="Secondary"
-  args={{
-    backgroundColor: '#ff0',
-    label: '😄👍😍💯',
-   }}
-/>
-
-<Story
-  name="Tertiary"
-  args={{
-    backgroundColor:'#ff0',
-    label: '📚📕📈🤓',
-  }}
-/>
 ```
 
 ```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -294,28 +262,12 @@ export const Pair: Story = {
 </script>
 
 <Story
-  name="Primary"
+  name="Pair"
   args={{
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
   }}
 />
-
-<Story
-  name="Secondary"
-  args={{
-    backgroundColor: '#ff0',
-    label: '😄👍😍💯',
-   }}
-/>
-
-<Story
-  name="Tertiary"
-  args={{
-    backgroundColor:'#ff0',
-    label: '📚📕📈🤓',
-  }}
-/>
 ```
 
 ```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index 7ff333389d5..85ef46ff097 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -199,7 +199,7 @@ export default meta;
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => MarginDecorators],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```
@@ -223,7 +223,7 @@ export default {
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => MarginDecorators],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```
@@ -251,9 +251,7 @@ export default meta;
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => ({
-      Component: MarginDecorator,
-    })],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index 5973b4acd0f..97f33121e09 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -336,7 +336,7 @@ export const Tertiary: Story = {
   args={{
     backgroundColor: '#ff0',
     label: '😄👍😍💯',
-   }}
+  }}
 />
 
 <Story
@@ -401,7 +401,7 @@ export const Tertiary = {
   args={{
     backgroundColor: '#ff0',
     label: '😄👍😍💯',
-   }}
+  }}
 />
 
 <Story
@@ -471,7 +471,7 @@ export const Tertiary: Story = {
   args={{
     backgroundColor: '#ff0',
     label: '😄👍😍💯',
-   }}
+  }}
 />
 
 <Story
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index 6f227f68c2f..0588748d903 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -277,7 +277,7 @@ export const Tertiary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -344,7 +344,7 @@ export const Tertiary = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -416,7 +416,7 @@ export const Tertiary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md
index 96e7982e516..fef76460391 100644
--- a/docs/_snippets/button-story.md
+++ b/docs/_snippets/button-story.md
@@ -451,7 +451,7 @@ export const Primary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -465,7 +465,7 @@ export const Primary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -507,7 +507,7 @@ export const Primary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
index 79008639bda..f6df7d66211 100644
--- a/docs/_snippets/component-story-custom-args-mapping.md
+++ b/docs/_snippets/component-story-custom-args-mapping.md
@@ -34,7 +34,7 @@ export default meta;
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './components/Button.svelte';
+  import Button from './Button.svelte';
 
   import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
@@ -122,7 +122,7 @@ export default {
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './components/Button.svelte';
+  import Button from './Button.svelte';
 
   import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
@@ -219,7 +219,7 @@ export default meta;
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './components/Button.svelte';
+  import Button from './Button.svelte';
 
   import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
index 01c884bcbe2..b75ef7a9187 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -126,7 +126,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -163,7 +163,7 @@ export const WithAnImage = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -205,7 +205,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index 9469177d2d8..ae48423539e 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -164,7 +164,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -209,7 +209,7 @@ export const WithAnImage = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -259,7 +259,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index 9305fffa4af..99b0e2d3273 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -121,7 +121,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -156,7 +156,7 @@ export const WithAnImage = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -196,7 +196,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
index d91ed7daaa4..09215a1d1de 100644
--- a/docs/_snippets/list-story-starter.md
+++ b/docs/_snippets/list-story-starter.md
@@ -118,7 +118,7 @@ export default {
   component: List,
 };
 
-//Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty = {};
 ```
 
diff --git a/docs/_snippets/my-component-play-function-alt-queries.md b/docs/_snippets/my-component-play-function-alt-queries.md
index c8d90beaf74..4145c3cd2ac 100644
--- a/docs/_snippets/my-component-play-function-alt-queries.md
+++ b/docs/_snippets/my-component-play-function-alt-queries.md
@@ -32,7 +32,7 @@ export const ExampleWithRole: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -103,7 +103,7 @@ export const ExampleWithRole = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -185,7 +185,7 @@ export const ExampleWithRole: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -211,7 +211,7 @@ import type { Meta, StoryObj } from '@storybook/svelte';
 
 import { userEvent, within } from '@storybook/test';
 
-import { MyComponent } from './MyComponent';
+import MyComponent from './MyComponent.svelte';
 
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
diff --git a/docs/_snippets/my-component-play-function-query-findby.md b/docs/_snippets/my-component-play-function-query-findby.md
index da507231077..b3835f17926 100644
--- a/docs/_snippets/my-component-play-function-query-findby.md
+++ b/docs/_snippets/my-component-play-function-query-findby.md
@@ -34,7 +34,7 @@ export const AsyncExample: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -60,7 +60,7 @@ export const AsyncExample: Story = {
 ```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import { userEvent, within } from '@storybook/test';
 
-import MyComponent  from './MyComponent.svelte';
+import MyComponent from './MyComponent.svelte';
 
 export default {
   component: MyComponent,
@@ -76,7 +76,7 @@ export const AsyncExample = {
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await canvas.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i });
   },
 };
 ```
@@ -100,7 +100,7 @@ export const AsyncExample = {
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await canvas.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i });
   },
 };
 ```
@@ -111,7 +111,7 @@ export const AsyncExample = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -199,7 +199,7 @@ export const AsyncExample: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -298,7 +298,7 @@ export const AsyncExample = {
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await canvas.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i });
   },
 };
 ```
diff --git a/docs/_snippets/my-component-play-function-waitfor.md b/docs/_snippets/my-component-play-function-waitfor.md
index d963cae3bea..195096524fb 100644
--- a/docs/_snippets/my-component-play-function-waitfor.md
+++ b/docs/_snippets/my-component-play-function-waitfor.md
@@ -45,7 +45,7 @@ export const ExampleAsyncStory: Story = {
 
   import { userEvent, waitFor, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -155,7 +155,7 @@ export const ExampleAsyncStory = {
 
   import { userEvent, waitFor, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -276,7 +276,7 @@ export const ExampleAsyncStory: Story = {
 
   import { userEvent, waitFor, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
diff --git a/docs/_snippets/my-component-play-function-with-canvas.md b/docs/_snippets/my-component-play-function-with-canvas.md
index 00979b5b998..7d44ad477a7 100644
--- a/docs/_snippets/my-component-play-function-with-canvas.md
+++ b/docs/_snippets/my-component-play-function-with-canvas.md
@@ -30,7 +30,7 @@ export const ExampleStory: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -101,7 +101,7 @@ export const ExampleStory = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -178,7 +178,7 @@ export const ExampleStory: Story = {
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
diff --git a/docs/_snippets/my-component-play-function-with-clickevent.md b/docs/_snippets/my-component-play-function-with-clickevent.md
index 6da48d0d567..bf4b5b8c47f 100644
--- a/docs/_snippets/my-component-play-function-with-clickevent.md
+++ b/docs/_snippets/my-component-play-function-with-clickevent.md
@@ -41,7 +41,7 @@ export const FireEventExample: Story = {
 
   import { fireEvent, userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -141,7 +141,7 @@ export const FireEventExample = {
 
   import { fireEvent, userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -252,7 +252,7 @@ export const FireEventExample: Story = {
 
   import { fireEvent, userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
diff --git a/docs/_snippets/my-component-play-function-with-delay.md b/docs/_snippets/my-component-play-function-with-delay.md
index 60acb5e218a..e4fd3ac0633 100644
--- a/docs/_snippets/my-component-play-function-with-delay.md
+++ b/docs/_snippets/my-component-play-function-with-delay.md
@@ -41,7 +41,7 @@ export const DelayedStory: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -140,7 +140,7 @@ export const DelayedStory = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -250,7 +250,7 @@ export const DelayedStory: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
diff --git a/docs/_snippets/my-component-play-function-with-selectevent.md b/docs/_snippets/my-component-play-function-with-selectevent.md
index 4f29e6795f4..1892f1790d4 100644
--- a/docs/_snippets/my-component-play-function-with-selectevent.md
+++ b/docs/_snippets/my-component-play-function-with-selectevent.md
@@ -44,7 +44,7 @@ export const ExampleChangeEvent: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -151,7 +151,7 @@ export const ExampleChangeEvent = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -269,7 +269,7 @@ export const ExampleChangeEvent: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
diff --git a/docs/_snippets/my-component-story-basic-and-props.md b/docs/_snippets/my-component-story-basic-and-props.md
index 46e37249912..c4ad00503ea 100644
--- a/docs/_snippets/my-component-story-basic-and-props.md
+++ b/docs/_snippets/my-component-story-basic-and-props.md
@@ -127,7 +127,7 @@ export const WithProp: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -171,7 +171,7 @@ export const WithProp = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -220,7 +220,7 @@ export const WithProp: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
diff --git a/docs/_snippets/my-component-vite-env-variables.md b/docs/_snippets/my-component-vite-env-variables.md
index 325e1fe266a..d3b873cdac1 100644
--- a/docs/_snippets/my-component-vite-env-variables.md
+++ b/docs/_snippets/my-component-vite-env-variables.md
@@ -1,6 +1,6 @@
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -50,7 +50,7 @@ export const ExampleStory = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -111,7 +111,7 @@ export const ExampleStory: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
diff --git a/docs/_snippets/my-component-with-env-variables.md b/docs/_snippets/my-component-with-env-variables.md
index ae87f8dc476..81f0ad36f50 100644
--- a/docs/_snippets/my-component-with-env-variables.md
+++ b/docs/_snippets/my-component-with-env-variables.md
@@ -19,7 +19,7 @@ export const ExampleStory: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -66,7 +66,7 @@ export const ExampleStory = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -124,7 +124,7 @@ export const ExampleStory: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
diff --git a/docs/_snippets/nextjs-navigation-override-in-story.md b/docs/_snippets/nextjs-navigation-override-in-story.md
index 417f5c104c7..a2afcfbfdd3 100644
--- a/docs/_snippets/nextjs-navigation-override-in-story.md
+++ b/docs/_snippets/nextjs-navigation-override-in-story.md
@@ -41,7 +41,7 @@ const meta = {
 } satisfies Meta<typeof NavigationBasedComponent>;
 export default meta;
 
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 // If you have the actions addon,
 // you can interact with the links and see the route change events there
@@ -91,4 +91,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-router-override-in-story.md b/docs/_snippets/nextjs-router-override-in-story.md
index bdf1d071820..cac0babd268 100644
--- a/docs/_snippets/nextjs-router-override-in-story.md
+++ b/docs/_snippets/nextjs-router-override-in-story.md
@@ -32,7 +32,7 @@ const meta = {
 } satisfies Meta<typeof RouterBasedComponent>;
 export default meta;
 
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 // If you have the actions addon,
 // you can interact with the links and see the route change events there
@@ -79,4 +79,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/parameters-in-story.md b/docs/_snippets/parameters-in-story.md
index 91f2009131a..77dfdf57459 100644
--- a/docs/_snippets/parameters-in-story.md
+++ b/docs/_snippets/parameters-in-story.md
@@ -107,7 +107,7 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 export const OnDark: Story = {
   // 👇 Story-level parameters
@@ -130,7 +130,7 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 export const OnDark: Story = {
   // 👇 Story-level parameters
diff --git a/docs/_snippets/register-component-with-play-function.md b/docs/_snippets/register-component-with-play-function.md
index 59c310fd542..177564a6205 100644
--- a/docs/_snippets/register-component-with-play-function.md
+++ b/docs/_snippets/register-component-with-play-function.md
@@ -182,7 +182,6 @@ export const FilledForm = {
   });
 </script>
 
-
 <!--
   See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
   to learn more about using the canvasElement to query the DOM
diff --git a/docs/_snippets/tags-autodocs-remove-component.md b/docs/_snippets/tags-autodocs-remove-component.md
index 1b73a5f8167..60014c99126 100644
--- a/docs/_snippets/tags-autodocs-remove-component.md
+++ b/docs/_snippets/tags-autodocs-remove-component.md
@@ -1,5 +1,5 @@
 ```ts filename="Page.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Page } from './Page';
 
@@ -60,7 +60,7 @@ export default {
 ```
 
 ```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
-import type { Meta, StoryObj } from '@storybook/svelte';
+import type { Meta } from '@storybook/svelte';
 
 import Page from './Page.svelte';
 
@@ -74,7 +74,7 @@ export default meta;
 
 ```ts filename="Page.stories.ts" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Page } from './Page';
 
@@ -101,7 +101,7 @@ export default meta;
 ```
 
 ```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
-import type { Meta, StoryObj } from '@storybook/svelte';
+import type { Meta } from '@storybook/svelte';
 
 import Page from './Page.svelte';
 
@@ -115,7 +115,7 @@ export default meta;
 
 ```ts filename="Page.stories.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Page } from './Page';
 
@@ -137,7 +137,7 @@ export default {
 ```
 
 ```ts filename="Page.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Page',
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index 558eac1a700..46086937d72 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -261,13 +261,13 @@ export const Combo: Story = {
 
 <!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
 <Story
-  name="Variant1"
+  name="Variant2"
   tags={['!dev', '!autodocs']}
   args={{ variant: 2 }}
 />
 
 <!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
-<Story name="Variant1" tags={['!dev', '!autodocs']}>
+<Story name="Combo" tags={['!test']}>
   <Button variant={1}>
   <Button variant={2}>
 </Story>
@@ -292,13 +292,13 @@ export const Combo: Story = {
 
 <!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
 <Story
-  name="Variant1"
+  name="Variant2"
   tags={['!dev', '!autodocs']}
   args={{ variant: 2 }}
 />
 
 <!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
-<Story name="Variant1" tags={['!dev', '!autodocs']}>
+<Story name="Combo" tags={['!test']}>
   <Button variant={1}>
   <Button variant={2}>
 </Story>
@@ -323,13 +323,13 @@ export const Combo: Story = {
 
 <!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
 <Story
-  name="Variant1"
+  name="Variant2"
   tags={['!dev', '!autodocs']}
   args={{ variant: 2 }}
 />
 
 <!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
-<Story name="Variant1" tags={['!dev', '!autodocs']}>
+<Story name="Combo" tags={['!test']}>
   <Button variant={1}>
   <Button variant={2}>
 </Story>
diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index 5dbf645840e..d0f262f2d6f 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -249,7 +249,7 @@ type Story = StoryObj<typeof Button>;
 
 export const ExperimentalFeatureStory: Story = {
   /*
-   *This particular story will have these tags applied:
+   * This particular story will have these tags applied:
    * - experimental
    * - autodocs (inherited from meta)
    * - dev (inherited from meta)
@@ -281,7 +281,7 @@ type Story = StoryObj<typeof Button>;
 
 export const ExperimentalFeatureStory: Story = {
   /*
-   *This particular story will have these tags applied:
+   * This particular story will have these tags applied:
    * - experimental
    * - autodocs (inherited from meta)
    * - dev (inherited from meta)
diff --git a/docs/_snippets/tags-remove-in-story.md b/docs/_snippets/tags-remove-in-story.md
index b124a3f8342..b48beba734f 100644
--- a/docs/_snippets/tags-remove-in-story.md
+++ b/docs/_snippets/tags-remove-in-story.md
@@ -31,7 +31,7 @@ export const ExperimentalFeatureStory: Story = {
   });
 </script>
 
-<!-- 👇 For this particular story, remove the inherited stable` tag and apply the `experimental` tag -->
+<!-- 👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag -->
 <Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
 ```
 
@@ -78,7 +78,7 @@ export const ExperimentalFeatureStory = {
   });
 </script>
 
-<!-- 👇 For this particular story, remove the inherited stable` tag and apply the `experimental` tag -->
+<!-- 👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag -->
 <Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
 ```
 
@@ -136,7 +136,7 @@ export const ExperimentalFeatureStory: Story = {
   });
 </script>
 
-<!-- 👇 For this particular story, remove the inherited stable` tag and apply the `experimental` tag -->
+<!-- 👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag -->
 <Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
 ```
 
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index a3b8111e583..c06d4349672 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -157,9 +157,7 @@ export default meta;
 
   const { Story } = defineMeta({
     component: YourComponent,
-    decorators: [() => ({
-      Component: MarginDecorator,
-    })],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```
@@ -195,18 +193,18 @@ import YourComponent from './YourComponent.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
 const meta = {
-  component: Button,
+  component: YourComponent,
   decorators: [() => MarginDecorator],
 } satisfies Meta<typeof YourComponent>;
 
 export default meta;
 ```
 
-```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import MyComponent from './MyComponent.svelte';
+  import YourComponent from './YourComponent.svelte';
   import MarginDecorator from './MarginDecorator.svelte';
 
   const { Story } = defineMeta({
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 26795169434..34d5c4f5a7d 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -230,7 +230,7 @@ export const FirstStory: Story = {
 ```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import YourComponent from './YourComponent.svelte';
 
-//👇This default export determines where your story goes in the story list
+//👇 This default export determines where your story goes in the story list
 export default {
   component: YourComponent,
 };
diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx
index 16871558f60..64b7e6a2c44 100644
--- a/docs/get-started/frameworks/svelte-vite.mdx
+++ b/docs/get-started/frameworks/svelte-vite.mdx
@@ -75,7 +75,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. 
   
   <Callout variant="info">
-    The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+    The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
   </Callout>
 
   ### Setup
@@ -150,13 +150,13 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   <Callout variant="info">
 
-    If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configration options](#configure).
+    If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configuration options](#configure).
   
   </Callout>
 
   #### Story slots to snippets
   
-  With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
+  With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing you to extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
 
   ```svelte title="MyComponent.stories.svelte"
   <script>
diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx
index 1e182e28208..eda3f2473a9 100644
--- a/docs/get-started/frameworks/sveltekit.mdx
+++ b/docs/get-started/frameworks/sveltekit.mdx
@@ -160,7 +160,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
   Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. 
   
   <Callout variant="info">
-    The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+      The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
   </Callout>
 
   ### Setup
@@ -235,13 +235,13 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   <Callout variant="info">
 
-    If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configration options](#configure).
+    If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configuration options](#configure).
   
   </Callout>
 
   #### Story slots to snippets
   
-  With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
+  With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing you to extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
 
   ```svelte title="MyComponent.stories.svelte"
   <script>
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index 5f2ee161e13..ff1d301b144 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -196,7 +196,7 @@ There are some noteworthy items here:
     {/* prettier-ignore-end */}
 
     <Callout variant="info" style={{ marginBottom: "2rem" }}>
-      The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+      The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
     </Callout>
   </IfRenderer>
 
diff --git a/docs/writing-stories/decorators.mdx b/docs/writing-stories/decorators.mdx
index c8d86cff5a5..a86e2ca8738 100644
--- a/docs/writing-stories/decorators.mdx
+++ b/docs/writing-stories/decorators.mdx
@@ -51,8 +51,6 @@ When writing stories, decorators are typically used to wrap stories with extra m
 
 </If>
 
-
-
 ![Story with padding](../_assets/writing-stories/decorators-padding.png)
 
 ## “Context” for mocking
diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
index 05338e3de1e..6cf05e520c4 100644
--- a/docs/writing-stories/index.mdx
+++ b/docs/writing-stories/index.mdx
@@ -92,7 +92,7 @@ components/
 
 <If renderer="svelte">
  
-    If you're using Svelte CSF, define your stories with the `Story` component, otherwise use the named exports of a standard CSF file. We recommend you use UpperCamelCase for your story exports. Here’s how to render `Button` in the “primary” state and export a story called `Primary` using both methods.
+  If you're using Svelte CSF, define your stories with the `Story` component, otherwise use the named exports of a standard CSF file. We recommend you use UpperCamelCase for your story exports. Here’s how to render `Button` in the “primary” state and export a story called `Primary` using both methods.
 
 </If>