From 6bee07d8ea7d975df5197a27fcebe0f1c0c72b87 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 5 Nov 2024 10:48:44 +0000
Subject: [PATCH 01/12] Docs: Svelte CSF snippets

---
 docs/_snippets/button-group-story.md          |  19 +-
 .../button-story-component-args-primary.md    |  69 +++-
 .../button-story-component-decorator.md       |  65 +++-
 .../button-story-controls-primary-variant.md  |  95 ++++-
 .../button-story-controls-radio-group.md      | 105 +++++-
 docs/_snippets/button-story-decorator.md      |  73 +++-
 .../button-story-default-docs-code.md         |  67 ----
 ...ton-story-default-export-with-component.md |  43 ++-
 .../button-story-primary-composition.md       |  89 ++++-
 .../button-story-primary-long-name.md         |  89 ++++-
 docs/_snippets/button-story-rename-story.md   |   7 +-
 docs/_snippets/button-story-using-args.md     | 139 +++++--
 .../button-story-with-addon-example.md        |  84 ++++-
 docs/_snippets/button-story-with-args.md      |  78 ++--
 docs/_snippets/button-story-with-emojis.md    | 121 ++++--
 docs/_snippets/button-story.md                |  78 ++--
 docs/_snippets/checkbox-story-csf.md          | 126 ++++++-
 docs/_snippets/checkbox-story.md              |  16 +-
 ...y-conditional-controls-mutual-exclusion.md | 138 ++++++-
 ...onent-story-conditional-controls-toggle.md | 120 +++++-
 .../component-story-custom-args-complex.md    |  40 +-
 .../component-story-custom-args-mapping.md    | 108 +++++-
 .../component-story-disable-controls-alt.md   | 108 +++++-
 .../component-story-disable-controls-regex.md | 233 +++++++++++-
 .../component-story-disable-controls.md       | 120 +++++-
 .../component-story-sort-controls.md          |  81 +++-
 .../component-story-static-asset-cdn.md       |  91 +++--
 ...omponent-story-static-asset-with-import.md |  93 ++++-
 ...onent-story-static-asset-without-import.md |  75 +++-
 .../component-story-with-accessibility.md     |  78 +++-
 .../gizmo-story-controls-customization.md     | 354 +++++++++++++++++-
 docs/_snippets/histogram-story.md             | 103 +++--
 docs/_snippets/list-story-expanded.md         |  47 +--
 docs/_snippets/list-story-starter.md          | 103 ++++-
 .../login-form-with-play-function.md          | 191 ++++++++--
 .../main-config-csf-addon-register.md         |  28 --
 .../main-config-svelte-csf-register.md        |  24 ++
 docs/_snippets/margindecorator.md             |  42 ++-
 docs/_snippets/my-component-disable-toc.md    | 119 +++++-
 .../my-component-play-function-alt-queries.md | 158 +++++++-
 ...my-component-play-function-query-findby.md | 170 ++++++++-
 .../my-component-play-function-waitfor.md     | 236 +++++++++++-
 .../my-component-play-function-with-canvas.md | 152 +++++++-
 ...component-play-function-with-clickevent.md | 218 ++++++++++-
 .../my-component-play-function-with-delay.md  | 215 ++++++++++-
 ...omponent-play-function-with-selectevent.md | 243 +++++++++++-
 .../my-component-story-basic-and-props.md     |  80 +++-
 .../my-component-vite-env-variables.md        | 116 +++++-
 .../my-component-with-env-variables.md        | 124 +++++-
 docs/_snippets/page-story-slots.md            |  32 +-
 docs/_snippets/page-story.md                  |  19 +-
 docs/_snippets/parameters-in-meta.md          | 145 +++++--
 docs/_snippets/parameters-in-story.md         | 126 ++++++-
 .../register-component-with-play-function.md  | 271 +++++++++++++-
 .../storybook-addon-a11y-component-config.md  | 201 +++++++++-
 .../_snippets/storybook-addon-a11y-disable.md |  73 +++-
 .../storybook-addon-a11y-story-config.md      | 118 +++++-
 .../storybook-auto-docs-baseline-example.md   |  42 +--
 .../storybook-auto-docs-custom-file.md        |  14 +-
 ...ybook-auto-docs-mdx-docs-docs-only-page.md |   8 +-
 .../storybook-auto-docs-mdx-docs-dos-donts.md |  10 +-
 .../storybook-auto-docs-mdx-docs-imports.md   |   6 +-
 ...storybook-auto-docs-mdx-docs-meta-block.md |   6 +-
 .../storybook-auto-docs-mdx-docs-story.md     |   6 +-
 .../_snippets/storybook-auto-docs-mdx-file.md |   7 +-
 .../storybook-auto-docs-standalone-page.md    |   5 +-
 .../storybook-auto-docs-starter-example.md    |   5 +-
 .../storybook-custom-docs-markdown.md         |   5 +-
 docs/_snippets/svelte-csf-addon-options.md    |  31 ++
 docs/_snippets/svelte-csf-addon-tags.md       |  33 ++
 .../svelte-csf-story-custom-children.md       |  39 ++
 docs/_snippets/svelte-csf-story-migration.md  |  28 ++
 .../svelte-vite-framework-options.md          |  27 ++
 .../svelte-webpack-framework-options.md       |  27 ++
 docs/_snippets/sveltekit-framework-options.md |  27 ++
 .../table-story-fully-customize-controls.md   |  30 --
 docs/_snippets/tags-autodocs-in-meta.md       |  79 +++-
 .../tags-autodocs-remove-component.md         |  79 +++-
 docs/_snippets/tags-autodocs-remove-story.md  | 107 +++++-
 docs/_snippets/tags-combo-example.md          |  50 +--
 docs/_snippets/tags-docs-only-in-meta.md      | 161 ++++++--
 docs/_snippets/tags-in-meta-and-story.md      | 319 ++++++++++++----
 docs/_snippets/tags-in-preview.md             |  21 +-
 docs/_snippets/tags-remove-in-story.md        | 151 ++++++--
 .../your-component-with-decorator.md          |  66 +++-
 docs/_snippets/your-component.md              |  88 +++--
 docs/essentials/controls.mdx                  |  36 +-
 docs/get-started/browse-stories.mdx           |   2 +-
 docs/get-started/frameworks/svelte-vite.mdx   | 133 ++++++-
 .../frameworks/svelte-webpack5.mdx            |  45 +--
 docs/get-started/frameworks/sveltekit.mdx     | 141 +++++--
 docs/get-started/install.mdx                  |  16 +-
 docs/get-started/setup.mdx                    |   6 +-
 docs/get-started/whats-a-story.mdx            |  26 +-
 docs/writing-docs/autodocs.mdx                |  10 +-
 docs/writing-docs/mdx.mdx                     |   2 +-
 docs/writing-stories/args.mdx                 |  36 +-
 docs/writing-stories/decorators.mdx           |  68 +++-
 docs/writing-stories/index.mdx                | 143 +++++--
 docs/writing-stories/parameters.mdx           |  34 +-
 docs/writing-stories/play-function.mdx        |  18 +-
 docs/writing-stories/typescript.mdx           |   2 +-
 docs/writing-tests/accessibility-testing.mdx  |  31 +-
 103 files changed, 7457 insertions(+), 1125 deletions(-)
 delete mode 100644 docs/_snippets/button-story-default-docs-code.md
 delete mode 100644 docs/_snippets/main-config-csf-addon-register.md
 create mode 100644 docs/_snippets/main-config-svelte-csf-register.md
 create mode 100644 docs/_snippets/svelte-csf-addon-options.md
 create mode 100644 docs/_snippets/svelte-csf-addon-tags.md
 create mode 100644 docs/_snippets/svelte-csf-story-custom-children.md
 create mode 100644 docs/_snippets/svelte-csf-story-migration.md
 create mode 100644 docs/_snippets/svelte-vite-framework-options.md
 create mode 100644 docs/_snippets/svelte-webpack-framework-options.md
 create mode 100644 docs/_snippets/sveltekit-framework-options.md
 delete mode 100644 docs/_snippets/table-story-fully-customize-controls.md

diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index e7695e6334a4..8b2fe3766d62 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -160,7 +160,11 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="svelte" language="js"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK if pattern is possible -->
+```
+
+```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import ButtonGroup from '../ButtonGroup.svelte';
 
 //👇 Imports the Button stories
@@ -178,7 +182,11 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK if pattern is possible -->
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import ButtonGroup from './ButtonGroup.svelte';
@@ -201,7 +209,11 @@ export const Pair: Story = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK if pattern is possible -->
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import ButtonGroup from './ButtonGroup.svelte';
@@ -350,4 +362,3 @@ export const Pair: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
index 81b292e7a885..9dabf008185e 100644
--- a/docs/_snippets/button-story-component-args-primary.md
+++ b/docs/_snippets/button-story-component-args-primary.md
@@ -134,7 +134,27 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -150,19 +170,27 @@ export default {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<Meta title="Button" component={Button} args={{ primary: true, }} />
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -182,7 +210,27 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -289,4 +337,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index a50f6e1e6034..5f2929bcc764 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -190,7 +190,23 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    decorators: [() => ({
+      Component: MarginDecorator,
+    })],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -200,27 +216,23 @@ export default {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import Button from './Button.svelte';
   import MarginDecorator from './MarginDecorator.svelte';
 
-  import Button from './Button.svelte';
+  const { Story } = defineMeta({
+    component: Button,
+    decorators: [() => ({
+      Component: MarginDecorator,
+    })],
+  });
 </script>
-
-<meta title="Button" component="{Button}" />
-
-<template let:args>
-  <MarginDecorator>
-    {/*👇 Your component here */}
-  </MarginDecorator>
-</template>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -229,12 +241,28 @@ import MarginDecorator from './MarginDecorator.svelte';
 const meta = {
   component: Button,
   decorators: [() => MarginDecorator],
-};
+} satisfies Meta<typeof YourComponent>;
 
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    decorators: [() => ({
+      Component: MarginDecorator,
+    })],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -309,4 +337,3 @@ type Story = StoryObj;
 
 export const Example: Story = {};
 ```
-
diff --git a/docs/_snippets/button-story-controls-primary-variant.md b/docs/_snippets/button-story-controls-primary-variant.md
index c3b6dc562ca1..bec2cf1b1044 100644
--- a/docs/_snippets/button-story-controls-primary-variant.md
+++ b/docs/_snippets/button-story-controls-primary-variant.md
@@ -17,6 +17,34 @@ 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 Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story name="Primary" args={{ variant: 'primary' }} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    variant: 'primary',
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -31,6 +59,39 @@ export const Primary = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story name="Primary" args={{ variant: 'primary' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -51,6 +112,39 @@ 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 Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story name="Primary" args={{ variant: 'primary' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -99,4 +193,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-controls-radio-group.md b/docs/_snippets/button-story-controls-radio-group.md
index 7a548bee60a4..19a3386680f4 100644
--- a/docs/_snippets/button-story-controls-radio-group.md
+++ b/docs/_snippets/button-story-controls-radio-group.md
@@ -16,6 +16,38 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      variant: {
+        options: ['primary', 'secondary'],
+        control: { type: 'radio' },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -30,6 +62,42 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      variant: {
+        options: ['primary', 'secondary'],
+        control: { type: 'radio' },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -49,6 +117,42 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      variant: {
+        options: ['primary', 'secondary'],
+        control: { type: 'radio' },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -95,4 +199,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-decorator.md b/docs/_snippets/button-story-decorator.md
index e0611b5e6458..899724fd39ca 100644
--- a/docs/_snippets/button-story-decorator.md
+++ b/docs/_snippets/button-story-decorator.md
@@ -159,7 +159,29 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  decorators={[
+    () => ({
+      Component: MarginDecorator
+    })
+  ]}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -172,7 +194,29 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  decorators={[
+    () => ({
+      Component: MarginDecorator
+    })
+  ]}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -190,7 +234,29 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  decorators={[
+    () => ({
+      Component: MarginDecorator
+    })
+  ]}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -307,4 +373,3 @@ export const Primary: Story = {
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
 ```
-
diff --git a/docs/_snippets/button-story-default-docs-code.md b/docs/_snippets/button-story-default-docs-code.md
deleted file mode 100644
index 65c72cab6b18..000000000000
--- a/docs/_snippets/button-story-default-docs-code.md
+++ /dev/null
@@ -1,67 +0,0 @@
-```js filename="Button.stories.js" renderer="svelte" language="js"
-import Button from './Button.svelte';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  //👇 Creates specific argTypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-//👇 Some function to demonstrate the behavior
-const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-export const ExampleStory = (args) => {
-  //👇 Destructure the label from the args object
-  const { label } = args;
-
-  //👇 Assigns the function result to a variable and pass it as a prop into the component
-  const functionResult = someFunction(label);
-  return {
-    Component: Button,
-    props: {
-      ...args,
-      label: functionResult,
-    },
-  };
-};
-ExampleStory.args = {
-  primary: true,
-  size: 'small',
-  label: 'button',
-};
-```
-
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Button from './Button.svelte';
-
-  //👇 Some function to demonstrate the behavior
-  function someFunction(someValue) {
-    return `i am a ${someValue}`;
-  }
-</script>
-
-{/*👇 Creates specific argTypes */}
-<Meta title="Button" component={Button} argTypes={{ backgroundColor: { control: 'color' }, }} />
-
-{/* 👇 Assigns the function result to a variable and pass it as a prop into the component */}
-<template let:args>
-  <button {...args} label="{someFunction(args.label)}" />
-</template>
-
-<Story name="ExampleStory" args={{ primary: true, size:'small', label: 'Button', }} />
-```
-
diff --git a/docs/_snippets/button-story-default-export-with-component.md b/docs/_snippets/button-story-default-export-with-component.md
index 11b2d8aa7039..e4e58c13a619 100644
--- a/docs/_snippets/button-story-default-export-with-component.md
+++ b/docs/_snippets/button-story-default-export-with-component.md
@@ -88,7 +88,19 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -96,7 +108,19 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -108,7 +132,19 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -168,4 +204,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-primary-composition.md b/docs/_snippets/button-story-primary-composition.md
index 15a9897a0427..17ba61744df0 100644
--- a/docs/_snippets/button-story-primary-composition.md
+++ b/docs/_snippets/button-story-primary-composition.md
@@ -25,6 +25,32 @@ export const Secondary: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+```
+
+```js filename="Button.stories.js|jsx" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -47,6 +73,37 @@ export const Secondary = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -75,6 +132,37 @@ export const Secondary: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -147,4 +235,3 @@ export const Secondary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-primary-long-name.md b/docs/_snippets/button-story-primary-long-name.md
index 0bf7d82e78d1..0ac80cc3f162 100644
--- a/docs/_snippets/button-story-primary-long-name.md
+++ b/docs/_snippets/button-story-primary-long-name.md
@@ -25,6 +25,32 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation and apply to the other languages (e.g., ts-4-9, ts) -->
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryLongName = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -47,6 +73,37 @@ export const PrimaryLongName = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation and apply to the other languages (e.g., ts-4-9, ts) -->
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryLongName: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -75,6 +132,37 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation and apply to the other languages (e.g., ts-4-9, ts) -->
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryLongName: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -147,4 +235,3 @@ export const PrimaryLongName: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-rename-story.md b/docs/_snippets/button-story-rename-story.md
index 23e6f25a0918..e1c114962351 100644
--- a/docs/_snippets/button-story-rename-story.md
+++ b/docs/_snippets/button-story-rename-story.md
@@ -188,7 +188,7 @@ export default {
   component: Button,
 };
 
-export const Primary = ({
+export const Primary = {
   // 👇 Rename this story
   name: 'I am the primary',
   args: {
@@ -210,7 +210,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = ({
+export const Primary: Story = {
   // 👇 Rename this story
   name: 'I am the primary',
   args: {
@@ -232,7 +232,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = ({
+export const Primary: Story = {
   // 👇 Rename this story
   name: 'I am the primary',
   args: {
@@ -337,4 +337,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index aa8610f4d991..03150c37525a 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -12,8 +12,8 @@ type Story = StoryObj<Button>;
 
 export const Primary: Story = {
   args: {
-    label: 'Button',
     backgroundColor: '#ff0',
+    label: 'Button',
   },
 };
 
@@ -51,7 +51,7 @@ export default {
 export const Primary = {
   render: (args) => createButton(args),
   args: {
-    primary: true,
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -96,7 +96,7 @@ type Story = StoryObj<ButtonArgs>;
 export const Primary: Story = {
   render: (args) => createButton(args),
   args: {
-    primary: true,
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -312,7 +312,44 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    backgroundColor: '#ff0',
+    label: 'Button',
+  }}
+/>
+
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+   }}
+/>
+
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -341,35 +378,49 @@ export const Tertiary = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this against recommendation -->
 
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
 </script>
 
-<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control:
-'boolean' }, }} />
+<Story
+  name="Primary"
+  args={{
+    backgroundColor: '#ff0',
+    label: 'Button',
+  }}
+/>
 
-{/* 👇 We create a “template” of how args map to rendering */}
-<template let:args>
-  <button {...args} />
-</template>
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+   }}
+/>
 
-{/* 👇 Each story then reuses that template */}
-<Story name="Primary" args={{ background: '#ff0', label: 'Button' }} /> <Story name="Secondary"
-args={{ background: '#ff0', label: '😄👍😍💯' }} /> <Story name="Tertiary" args={{ background:
-'#ff0', label: '📚📕📈🤓' }} />
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
 
-//👇This default export determines where your story goes in the story list
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
@@ -399,12 +450,49 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: vet this against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    backgroundColor: '#ff0',
+    label: 'Button',
+  }}
+/>
+
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+   }}
+/>
+
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
 
-//👇This default export determines where your story goes in the story list
 const meta: Meta<typeof Button> = {
   component: Button,
 };
@@ -575,7 +663,7 @@ export const Primary: Story = {
     template: '<Button v-bind="args" />',
   }),
   args: {
-    background: '#ff0',
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -616,7 +704,7 @@ export default {
 
 export const Primary = {
   args: {
-    background: '#ff0',
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -648,7 +736,7 @@ type Story = StoryObj;
 
 export const Primary: Story = {
   args: {
-    background: '#ff0',
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -667,4 +755,3 @@ export const Tertiary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-with-addon-example.md b/docs/_snippets/button-story-with-addon-example.md
index 211a987fcbec..352ed0817f75 100644
--- a/docs/_snippets/button-story-with-addon-example.md
+++ b/docs/_snippets/button-story-with-addon-example.md
@@ -213,7 +213,31 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    /* 👇 The title prop is optional.
+     * See https://storybook.js.org/docs/configure/#configure-story-loading
+     * to learn how to generate automatic titles
+    */
+    title: 'Button',
+    component: Button,
+    parameters: {
+      myAddon: {
+        data: 'This data is passed to the addon',
+      },
+    },
+  });
+</script>
+
+<Story name="Basic"/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -234,24 +258,31 @@ export default {
 export const Basic = {};
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<Meta title="Button" component={Button} parameters={{ myAddon: { data: 'this data is passed to the
-addon', }, }} />
+  const { Story } = defineMeta({
+    /* 👇 The title prop is optional.
+     * See https://storybook.js.org/docs/configure/#configure-story-loading
+     * to learn how to generate automatic titles
+    */
+    title: 'Button',
+    component: Button,
+    parameters: {
+      myAddon: {
+        data: 'This data is passed to the addon',
+      },
+    },
+  });
+</script>
 
-<template let:args>
-  <button {...args} />
-</template>
+<Story name="Basic"/>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -277,7 +308,31 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {};
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    /* 👇 The title prop is optional.
+     * See https://storybook.js.org/docs/configure/#configure-story-loading
+     * to learn how to generate automatic titles
+    */
+    title: 'Button',
+    component: Button,
+    parameters: {
+      myAddon: {
+        data: 'This data is passed to the addon',
+      },
+    },
+  });
+</script>
+
+<Story name="Basic"/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -453,4 +508,3 @@ export const Basic: Story = {
   render: () => html`<custom-button label="Hello"></custom-button>`,
 };
 ```
-
diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md
index 2c0e9701c35f..3da07a30731c 100644
--- a/docs/_snippets/button-story-with-args.md
+++ b/docs/_snippets/button-story-with-args.md
@@ -224,7 +224,27 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    primary: true,
+    label: 'Button'
+  }}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -239,30 +259,27 @@ export const Primary = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
-
-<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control:
-'boolean' }, }} />
-
-{/*👇 We create a “template” of how args map to rendering */}
 
-<template let:args>
-  <button {...args} />
-</template>
-
-{/* 👇 Each story then reuses that template */}
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
 
-<Story name='Primary' args={{ primary: true, label: 'Button' }} />
+<Story
+  name="Primary"
+  args={{
+    primary: true,
+    label: 'Button'
+  }}
+/>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -282,7 +299,27 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    primary: true,
+    label: 'Button'
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -423,4 +460,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index f59e8067860f..8950cfa04996 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -275,7 +275,39 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
+
+<Story name="Primary">
+  <div>
+    <Button backgroundColor="#ff0" label="Button" />
+  </div>
+</Story>
+
+<Story name="Secondary">
+  <div>
+    <Button backgroundColor="#ff0" label="😄👍😍💯" />
+  </div>
+</Story>
+
+<Story name="Tertiary">
+  <div>
+    <Button backgroundColor="#ff0" label="📚📕📈🤓" />
+  </div>
+</Story>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -318,29 +350,39 @@ export const Tertiary = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<meta title="Button" component="{Button}" />
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
 
 <Story name="Primary">
-  <button background="#ff0" label="Button" />
+  <div>
+    <Button backgroundColor="#ff0" label="Button" />
+  </div>
 </Story>
 
 <Story name="Secondary">
-  <button background="#ff0" label="😄👍😍💯" />
+  <div>
+    <Button backgroundColor="#ff0" label="😄👍😍💯" />
+  </div>
 </Story>
 
 <Story name="Tertiary">
-  <button background="#ff0" label="📚📕📈🤓" />
+  <div>
+    <Button backgroundColor="#ff0" label="📚📕📈🤓" />
+  </div>
 </Story>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -388,7 +430,39 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
+
+<Story name="Primary">
+  <div>
+    <Button backgroundColor="#ff0" label="Button" />
+  </div>
+</Story>
+
+<Story name="Secondary">
+  <div>
+    <Button backgroundColor="#ff0" label="😄👍😍💯" />
+  </div>
+</Story>
+
+<Story name="Tertiary">
+  <div>
+    <Button backgroundColor="#ff0" label="📚📕📈🤓" />
+  </div>
+</Story>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -489,21 +563,21 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="Button" />',
+    template: '<Button backgroundColor="#ff0" label="Button" />',
   }),
 };
 
 export const Secondary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="😄👍😍💯" />',
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
   }),
 };
 
 export const Tertiary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
   }),
 };
 ```
@@ -528,21 +602,21 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="Button" />',
+    template: '<Button backgroundColor="#ff0" label="Button" />',
   }),
 };
 
 export const Secondary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="😄👍😍💯" />',
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
   }),
 };
 
 export const Tertiary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
   }),
 };
 ```
@@ -560,15 +634,15 @@ export default {
  * to learn how to use render functions.
  */
 export const Primary = {
-  render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="Button"></demo-button>`,
 };
 
 export const Secondary = {
-  render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="😄👍😍💯"></demo-button>`,
 };
 
 export const Tertiary = {
-  render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="📚📕📈🤓"></demo-button>`,
 };
 ```
 
@@ -590,15 +664,14 @@ type Story = StoryObj;
  * to learn how to use render functions.
  */
 export const Primary: Story = {
-  render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="Button"></demo-button>`,
 };
 
 export const Secondary: Story = {
-  render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="😄👍😍💯"></demo-button>`,
 };
 
 export const Tertiary: Story = {
-  render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="📚📕📈🤓"></demo-button>`,
 };
 ```
-
diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md
index 3b9b10ac020a..d14d6a9e5dbd 100644
--- a/docs/_snippets/button-story.md
+++ b/docs/_snippets/button-story.md
@@ -449,46 +449,47 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
-import Button from './Button.svelte';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
 
-export default {
-  component: Button,
-};
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: () => ({
-    Component: Button,
-    props: {
-      primary: true,
-      label: 'Button',
-    },
-  }),
-};
+  import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
+
+<Story name="Primary">
+  <div>
+    <Button primary="true" label="Button" />
+  </div>
+</Story>
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
 
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<meta title="Button" component="{Button}" />
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
 
 <Story name="Primary">
-  <button primary="true" label="Button" />
+  <div>
+    <Button primary="true" label="Button" />
+  </div>
 </Story>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -516,7 +517,27 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
+
+<Story name="Primary">
+  <div>
+    <Button primary="true" label="Button" />
+  </div>
+</Story>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -642,4 +663,3 @@ export const Primary: Story = {
   render: () => html`<demo-button primary></demo-button>`,
 };
 ```
-
diff --git a/docs/_snippets/checkbox-story-csf.md b/docs/_snippets/checkbox-story-csf.md
index 579a92497eab..6e35e8e04ab2 100644
--- a/docs/_snippets/checkbox-story-csf.md
+++ b/docs/_snippets/checkbox-story-csf.md
@@ -17,6 +17,39 @@ export const Unchecked: Story = {
 };
 ```
 
+```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    component: Checkbox,
+  });
+</script>
+
+<Story
+  name="Unchecked"
+  args={{
+    label: 'Unchecked'
+  }}
+/>
+```
+
+```js filename="Checkbox.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Checkbox from './Checkbox.svelte';
+
+export default {
+  component: Checkbox,
+};
+
+export const Unchecked = {
+  args: {
+    label: 'Unchecked',
+  },
+};
+```
+
 ```js filename="Checkbox.stories.js|jsx" renderer="common" language="js"
 import { Checkbox } from './Checkbox';
 
@@ -31,6 +64,44 @@ export const Unchecked = {
 };
 ```
 
+```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    component: Checkbox,
+  });
+</script>
+
+<Story
+  name="Unchecked"
+  args={{
+    label: 'Unchecked'
+  }}
+/>
+```
+
+```ts filename="Checkbox.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Checkbox from './Checkbox.svelte';
+
+const meta = {
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unchecked: Story = {
+  args: {
+    label: 'Unchecked',
+  },
+};
+```
+
 ```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -51,11 +122,29 @@ export const Unchecked: Story = {
 };
 ```
 
-```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
+```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import { Checkbox } from './Checkbox';
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    component: Checkbox,
+  });
+</script>
+
+<Story
+  name="Unchecked"
+  args={{
+    label: 'Unchecked'
+  }}
+/>
+```
+
+```ts filename="Checkbox.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Checkbox from './Checkbox.svelte';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -71,24 +160,24 @@ export const Unchecked: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Checkbox.stories.svelte */}
+```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
+import { Checkbox } from './Checkbox';
 
-  import Checkbox from './Checkbox.svelte';
-</script>
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+};
 
-<meta title="MDX/Checkbox" component="{Checkbox}" />
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
 
-<Story name="allCheckboxes">
-  <form>
-    <Checkbox id="Unchecked" label="Unchecked" />
-    <Checkbox id="Checked" label="Checked" {checked} />
-    <Checkbox appearance="secondary" id="second" label="Secondary" {checked} />
-  </form>
-</Story>
+export const Unchecked: Story = {
+  args: {
+    label: 'Unchecked',
+  },
+};
 ```
 
 ```js filename="Checkbox.stories.js" renderer="web-components" language="js"
@@ -120,4 +209,3 @@ export const Unchecked: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/checkbox-story.md b/docs/_snippets/checkbox-story.md
index 6abf4e1c3017..b74dca2e8999 100644
--- a/docs/_snippets/checkbox-story.md
+++ b/docs/_snippets/checkbox-story.md
@@ -1,6 +1,4 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
@@ -9,17 +7,20 @@ import * as CheckboxStories from './Checkbox.stories';
 
 # Checkbox
 
-A checkbox is a square box that can be activated or deactivated when ticked. 
+A checkbox is a square box that can be activated or deactivated when ticked.
 
 Use checkboxes to select one or more options from a list of choices.
 
 <Canvas of={CheckboxStories.Unchecked} />
-````
+```
 
-```md renderer="react" language="mdx"
-{/* Checkbox.mdx */}
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx"
+{/* TK: vet this against recomendation */}
+```
 
+```mdx filename="Checkbox.mdx" renderer="react" language="mdx"
 import { Canvas, Meta, Story } from '@storybook/blocks';
+
 import * as CheckboxStories from './Checkbox.stories';
 
 <Meta of={CheckboxStories} />
@@ -32,4 +33,3 @@ With `MDX` we can compose Markdown documentation with `Checkbox` stories and int
   <Story of={CheckboxStories.Unchecked} />
 </Canvas>
 ```
-
diff --git a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
index 41a16c128408..9c8adeffd8ee 100644
--- a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
+++ b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
@@ -21,6 +21,49 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      // Button can be passed a label or an image, not both
+      label: {
+        control: 'text',
+        if: { arg: 'image', truthy: false },
+      },
+      image: {
+        control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+        if: { arg: 'label', truthy: false },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -40,6 +83,53 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      // Button can be passed a label or an image, not both
+      label: {
+        control: 'text',
+        if: { arg: 'image', truthy: false },
+      },
+      image: {
+        control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+        if: { arg: 'label', truthy: false },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -64,6 +154,53 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      // Button can be passed a label or an image, not both
+      label: {
+        control: 'text',
+        if: { arg: 'image', truthy: false },
+      },
+      image: {
+        control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+        if: { arg: 'label', truthy: false },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -125,4 +262,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-conditional-controls-toggle.md b/docs/_snippets/component-story-conditional-controls-toggle.md
index fa14d79829c9..d3a19f55e3c0 100644
--- a/docs/_snippets/component-story-conditional-controls-toggle.md
+++ b/docs/_snippets/component-story-conditional-controls-toggle.md
@@ -18,6 +18,43 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      label: { control: 'text' }, // Always shows the control
+      advanced: { control: 'boolean' },
+      // Only enabled if advanced is true
+      margin: { control: 'number', if: { arg: 'advanced' } },
+      padding: { control: 'number', if: { arg: 'advanced' } },
+      cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -34,6 +71,47 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      label: { control: 'text' }, // Always shows the control
+      advanced: { control: 'boolean' },
+      // Only enabled if advanced is true
+      margin: { control: 'number', if: { arg: 'advanced' } },
+      padding: { control: 'number', if: { arg: 'advanced' } },
+      cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -55,6 +133,47 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      label: { control: 'text' }, // Always shows the control
+      advanced: { control: 'boolean' },
+      // Only enabled if advanced is true
+      margin: { control: 'number', if: { arg: 'advanced' } },
+      padding: { control: 'number', if: { arg: 'advanced' } },
+      cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -107,4 +226,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md
index f3a5b1793fa6..87534abc44cf 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -288,7 +288,11 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly -->
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import YourComponent from './YourComponent.svelte';
 
 export default {
@@ -328,32 +332,11 @@ export const ExampleStory = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* YourComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import YourComponent from './YourComponent.svelte';
-
-  //👇 Some function to demonstrate the behavior
-  function someFunction(valuePropertyA, valuePropertyB) {
-    // Makes some computations and returns something
-  }
-</script>
-
-{/*👇 Creates specific argTypes and automatically infers them when 'options' is defined */}
-
-<Meta title="YourComponent" component={YourComponent} argTypes={{ propertyA: { options: ['Item One',
-'Item Two', 'Item Three'], control: { type: 'select' }, }, propertyB: { options: ['Another Item
-One', 'Another Item Two', 'Another Item Three'], }, }} />
-
-<template let:args>
-  <YourComponent {...args} someProperty="{someFunction(args.propertyA," args.propertyB)} />
-</template>
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK -->
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
@@ -398,7 +381,11 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK -->
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
@@ -677,4 +664,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
index 606e2e82f51d..836775e74539 100644
--- a/docs/_snippets/component-story-custom-args-mapping.md
+++ b/docs/_snippets/component-story-custom-args-mapping.md
@@ -30,6 +30,39 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly  -->
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+/* TK: Needs follow up and vetting before extending it to other languages (e.g., ts-4-9, ts) */
+import Button from './Button.svelte';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+export default {
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -58,6 +91,43 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly  -->
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+/* TK */
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = {
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -91,6 +161,43 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly  -->
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+/* TK */
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -179,4 +286,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-disable-controls-alt.md b/docs/_snippets/component-story-disable-controls-alt.md
index 2bec9b308315..072ae8812ace 100644
--- a/docs/_snippets/component-story-disable-controls-alt.md
+++ b/docs/_snippets/component-story-disable-controls-alt.md
@@ -16,6 +16,39 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        control: false,
+      },
+    },
+  });
+</script>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
 import { YourComponent } from './YourComponent';
 
@@ -30,6 +63,43 @@ export default {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        control: false,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -49,6 +119,43 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: Histogram,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        control: false,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -95,4 +202,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-disable-controls-regex.md b/docs/_snippets/component-story-disable-controls-regex.md
index 13c6d4e56d7b..ca361955899d 100644
--- a/docs/_snippets/component-story-disable-controls-regex.md
+++ b/docs/_snippets/component-story-disable-controls-regex.md
@@ -35,6 +35,80 @@ export const RegexExclude: Story = {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+
+<Story
+  name="ArrayInclude"
+  parameters={{
+    controls: { include: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexInclude"
+  parameters={{
+    controls: { include: /^hello*/ },
+  }}
+/>
+
+<Story
+  name="ArrayExclude"
+  parameters={{
+    controls: { exclude: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexExclude"
+  parameters={{
+    controls: { exclude: /^hello*/ },
+  }}
+/>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+};
+
+export const ArrayInclude = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
+
+export const RegexInclude = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
+
+export const ArrayExclude = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
+
+export const RegexExclude = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
 import { YourComponent } from './YourComponent';
 
@@ -67,6 +141,85 @@ export const RegexExclude = {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+
+<Story
+  name="ArrayInclude"
+  parameters={{
+    controls: { include: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexInclude"
+  parameters={{
+    controls: { include: /^hello*/ },
+  }}
+/>
+
+<Story
+  name="ArrayExclude"
+  parameters={{
+    controls: { exclude: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexExclude"
+  parameters={{
+    controls: { exclude: /^hello*/ },
+  }}
+/>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ArrayInclude: Story = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
+
+export const RegexInclude: Story = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
+
+export const ArrayExclude: Story = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
+
+export const RegexExclude: Story = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -105,6 +258,85 @@ export const RegexExclude: Story = {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+
+<Story
+  name="ArrayInclude"
+  parameters={{
+    controls: { include: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexInclude"
+  parameters={{
+    controls: { include: /^hello*/ },
+  }}
+/>
+
+<Story
+  name="ArrayExclude"
+  parameters={{
+    controls: { exclude: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexExclude"
+  parameters={{
+    controls: { exclude: /^hello*/ },
+  }}
+/>
+```
+
+```ts filename="YourComponent.stories.ts|tsx" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof YourComponent>;
+
+export const ArrayInclude: Story = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
+
+export const RegexInclude: Story = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
+
+export const ArrayExclude: Story = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
+
+export const RegexExclude: Story = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -207,4 +439,3 @@ export const RegexExclude: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/component-story-disable-controls.md b/docs/_snippets/component-story-disable-controls.md
index 60af7727dd6d..7b08f6c6d584 100644
--- a/docs/_snippets/component-story-disable-controls.md
+++ b/docs/_snippets/component-story-disable-controls.md
@@ -18,6 +18,43 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        table: {
+          disable: true,
+        },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
 import { YourComponent } from './YourComponent';
 
@@ -34,6 +71,47 @@ export default {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        table: {
+          disable: true,
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -55,6 +133,47 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: Vet this against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        table: {
+          disable: true,
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -107,4 +226,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-sort-controls.md b/docs/_snippets/component-story-sort-controls.md
index 0af15d4f2125..0a4d9112a1e5 100644
--- a/docs/_snippets/component-story-sort-controls.md
+++ b/docs/_snippets/component-story-sort-controls.md
@@ -11,8 +11,31 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: vet against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    parameters: { controls: { sort: 'requiredFirst' } },
+  });
+</script>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
-import { YourComponent } from './your-component';
+import { YourComponent } from './YourComponent';
 
 export default {
   component: YourComponent,
@@ -20,6 +43,33 @@ export default {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: vet against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    parameters: { controls: { sort: 'requiredFirst' } },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -34,6 +84,34 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: vet against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    parameters: { controls: { sort: 'requiredFirst' } },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+};
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -65,4 +143,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
index 11802b03e0e2..cc1d9c7ba3a7 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -34,7 +34,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -53,7 +53,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -86,7 +86,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { MyComponent } from './MyComponent';
@@ -105,7 +105,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { MyComponent } from './MyComponent';
@@ -124,7 +124,30 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <div>
+    <MyComponent
+      src="https://storybook.js.org/images/placeholders/350x150.png"
+      alt="My CDN placeholder"
+    />
+  </div>
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -142,28 +165,30 @@ export const WithAnImage = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
 
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
-</script>
-
-<meta title="img" component="{MyComponent}" />
 
-<template>
-  <MyComponent
-    src="https://storybook.js.org/images/placeholders/350x150.png"
-    alt="My CDN placeholder"
-  />
-</template>
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
 
-<Story name="WithAnImage" />
+<Story name="WithAnImage">
+  <div>
+    <MyComponent
+      src="https://storybook.js.org/images/placeholders/350x150.png"
+      alt="My CDN placeholder"
+    />
+  </div>
+</Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -186,7 +211,30 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <div>
+    <MyComponent
+      src="https://storybook.js.org/images/placeholders/350x150.png"
+      alt="My CDN placeholder"
+    />
+  </div>
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -300,4 +348,3 @@ export const WithAnImage: Story = {
     />`,
 };
 ```
-
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index 832e85099131..f324cdf62573 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -47,7 +47,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import imageFile from './static/image.png';
@@ -71,7 +71,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import imageFile from './static/image.png';
@@ -114,7 +114,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import imageFile from './static/image.png';
@@ -138,7 +138,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import imageFile from './static/image.png';
@@ -162,9 +162,34 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js renderer="svelte" language="js"
-//MyComponent.stories.js
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
 
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  import imageFile from './static/image.png';
+
+  let image = {
+    src: imageFile,
+    alt: 'my image',
+  };
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="WithAnImage">
+	<div>
+		<MyComponent {image} />
+	</div>
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 import imageFile from './static/image.png';
@@ -186,11 +211,11 @@ export const WithAnImage = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
+```svelte filename="MyComponent.stories.svelte" renderer="svelte"language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
 
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -200,18 +225,20 @@ export const WithAnImage = {
     src: imageFile,
     alt: 'my image',
   };
-</script>
 
-<meta title="img" component="{MyComponent}" />
-
-<template>
-  <MyComponent {image} />
-</template>
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
 
-<Story name="WithAnImage" />
+<Story name="WithAnImage">
+	<div>
+		<MyComponent {image} />
+	</div>
+</Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -238,7 +265,34 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte"language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  import imageFile from './static/image.png';
+
+  let image = {
+    src: imageFile,
+    alt: 'my image',
+  };
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="WithAnImage">
+	<div>
+		<MyComponent {image} />
+	</div>
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -392,4 +446,3 @@ export const WithAnImage: Story = {
   render: () => html`<img src="${image.src}" alt="${image.alt}" />`,
 };
 ```
-
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index c0ab68f70118..a3459b4306cb 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -34,7 +34,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -52,7 +52,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -119,7 +119,27 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <div>
+    <MyComponent src="/image.png" alt="my image" />
+  </div>
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -138,25 +158,27 @@ export const WithAnImage = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
 
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
-</script>
-
-<meta title="img" component="{MyComponent}" />
 
-<template>
-  <MyComponent src="/image.png" alt="my image" />
-</template>
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
 
-<Story name="WithAnImage" />
+<Story name="WithAnImage">
+  <div>
+    <MyComponent src="/image.png" alt="my image" />
+  </div>
+</Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -180,7 +202,27 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vetthis example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <div>
+    <MyComponent src="/image.png" alt="my image" />
+  </div>
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -287,4 +329,3 @@ export const WithAnImage: Story = {
   render: () => html`<img src="/image.png" alt="image" />`,
 };
 ```
-
diff --git a/docs/_snippets/component-story-with-accessibility.md b/docs/_snippets/component-story-with-accessibility.md
index be41f9d28d46..fae081ed47de 100644
--- a/docs/_snippets/component-story-with-accessibility.md
+++ b/docs/_snippets/component-story-with-accessibility.md
@@ -211,7 +211,28 @@ export const Inaccessible: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+  });
+</script>
+
+<!-- This is an accessible story -->
+<Story name="Accessible" args={{ primary: false, label: 'Button' }} />
+
+<!-- This is not -->
+<Story name="Inaccessible" args={{ primary: false, label: 'Button' backgroundColor: 'red' }} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -223,10 +244,6 @@ export default {
 
 // This is an accessible story
 export const Accessible = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     primary: false,
     label: 'Button',
@@ -235,10 +252,6 @@ export const Accessible = {
 
 // This is not
 export const Inaccessible = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     ...Accessible.args,
     backgroundColor: 'red',
@@ -246,7 +259,28 @@ export const Inaccessible = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+  });
+</script>
+
+<!-- This is an accessible story -->
+<Story name="Accessible" args={{ primary: false, label: 'Button' }} />
+
+<!-- This is not -->
+<Story name="Inaccessible" args={{ primary: false, label: 'Button' backgroundColor: 'red' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -278,7 +312,28 @@ export const Inaccessible: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+  });
+</script>
+
+<!-- This is an accessible story -->
+<Story name="Accessible" args={{ primary: false, label: 'Button' }} />
+
+<!-- This is not -->
+<Story name="Inaccessible" args={{ primary: false, label: 'Button' backgroundColor: 'red' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -467,4 +522,3 @@ export const Inaccessible: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/gizmo-story-controls-customization.md b/docs/_snippets/gizmo-story-controls-customization.md
index 66b09953a883..3383281faaf4 100644
--- a/docs/_snippets/gizmo-story-controls-customization.md
+++ b/docs/_snippets/gizmo-story-controls-customization.md
@@ -57,6 +57,121 @@ const meta: Meta<Gizmo> = {
 export default meta;
 ```
 
+```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: Vet against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Gizmo from './Gizmo.svelte';
+
+  const { Story } = defineMeta({
+    component: Gizmo,
+    argTypes: {
+      canRotate: {
+        control: 'boolean',
+      },
+      width: {
+        control: { type: 'number', min: 400, max: 1200, step: 50 },
+      },
+      height: {
+        control: { type: 'range', min: 200, max: 1500, step: 50 },
+      },
+      rawData: {
+        control: 'object',
+      },
+      coordinates: {
+        control: 'object',
+      },
+      texture: {
+        control: {
+          type: 'file',
+          accept: '.png',
+        },
+      },
+      position: {
+        control: 'radio',
+        options: ['left', 'right', 'center'],
+      },
+      rotationAxis: {
+        control: 'check',
+        options: ['x', 'y', 'z'],
+      },
+      scaling: {
+        control: 'select',
+        options: [10, 50, 75, 100, 200],
+      },
+      label: {
+        control: 'text',
+      },
+      meshColors: {
+        control: {
+          type: 'color',
+          presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+        },
+      },
+      revisionDate: {
+        control: 'date',
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Gizmo.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Gizmo from './Gizmo.svelte';
+
+export default {
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+};
+```
+
 ```js filename="Gizmo.stories.js|jsx" renderer="common" language="js"
 import { Gizmo } from './Gizmo';
 
@@ -112,6 +227,125 @@ export default {
 };
 ```
 
+```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: Vet against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Gizmo from './Gizmo.svelte';
+
+  const { Story } = defineMeta({
+    component: Gizmo,
+    argTypes: {
+      canRotate: {
+        control: 'boolean',
+      },
+      width: {
+        control: { type: 'number', min: 400, max: 1200, step: 50 },
+      },
+      height: {
+        control: { type: 'range', min: 200, max: 1500, step: 50 },
+      },
+      rawData: {
+        control: 'object',
+      },
+      coordinates: {
+        control: 'object',
+      },
+      texture: {
+        control: {
+          type: 'file',
+          accept: '.png',
+        },
+      },
+      position: {
+        control: 'radio',
+        options: ['left', 'right', 'center'],
+      },
+      rotationAxis: {
+        control: 'check',
+        options: ['x', 'y', 'z'],
+      },
+      scaling: {
+        control: 'select',
+        options: [10, 50, 75, 100, 200],
+      },
+      label: {
+        control: 'text',
+      },
+      meshColors: {
+        control: {
+          type: 'color',
+          presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+        },
+      },
+      revisionDate: {
+        control: 'date',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Gizmo.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Gizmo from './Gizmo.svelte';
+
+const meta = {
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+} satisfies Meta<typeof Gizmo>;
+
+export default meta;
+```
+
 ```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -172,6 +406,125 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: Vet against recommendation -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Gizmo from './Gizmo.svelte';
+
+  const { Story } = defineMeta({
+    component: Gizmo,
+    argTypes: {
+      canRotate: {
+        control: 'boolean',
+      },
+      width: {
+        control: { type: 'number', min: 400, max: 1200, step: 50 },
+      },
+      height: {
+        control: { type: 'range', min: 200, max: 1500, step: 50 },
+      },
+      rawData: {
+        control: 'object',
+      },
+      coordinates: {
+        control: 'object',
+      },
+      texture: {
+        control: {
+          type: 'file',
+          accept: '.png',
+        },
+      },
+      position: {
+        control: 'radio',
+        options: ['left', 'right', 'center'],
+      },
+      rotationAxis: {
+        control: 'check',
+        options: ['x', 'y', 'z'],
+      },
+      scaling: {
+        control: 'select',
+        options: [10, 50, 75, 100, 200],
+      },
+      label: {
+        control: 'text',
+      },
+      meshColors: {
+        control: {
+          type: 'color',
+          presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+        },
+      },
+      revisionDate: {
+        control: 'date',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Gizmo.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Gizmo from './Gizmo.svelte';
+
+const meta: Meta<typeof Gizmo> = {
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -341,4 +694,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index 7571d7ad7e78..1b859aa445da 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -227,23 +227,37 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Histogram.stories.js" renderer="svelte" language="js"
+```svelte filename="Histogram.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Histogram from './Histogram.svelte';
+
+  const { Story } = defineMeta({
+    component: Histogram,
+  });
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  }}
+/>
+```
+
+```js filename="Histogram.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Histogram from './Histogram.svelte';
 
 export default {
   component: Histogram,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Default = {
-  render: (args) => ({
-    Component: Histogram,
-    props: args,
-  }),
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -253,7 +267,30 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Histogram.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Histogram from './Histogram.svelte';
+
+  const { Story } = defineMeta({
+    component: Histogram,
+  });
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  }}
+/>
+```
+
+```ts filename="Histogram.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Histogram from './Histogram.svelte';
@@ -265,16 +302,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Default: Story = {
-  render: (args) => ({
-    Component: Histogram,
-    props: args,
-  }),
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -284,7 +312,30 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Histogram.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Histogram from './Histogram.svelte';
+
+  const { Story } = defineMeta({
+    component: Histogram,
+  });
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  }}
+/>
+```
+
+```ts filename="Histogram.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Histogram from './Histogram.svelte';
@@ -296,16 +347,7 @@ const meta: Meta<typeof Histogram> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Default: Story = {
-  render: (args) => ({
-    Component: Histogram,
-    props: args,
-  }),
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -446,4 +488,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/list-story-expanded.md b/docs/_snippets/list-story-expanded.md
index d7a86fb93a14..95d98f6cc8f5 100644
--- a/docs/_snippets/list-story-expanded.md
+++ b/docs/_snippets/list-story-expanded.md
@@ -358,42 +358,20 @@ export const ManyItems: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* List.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import List from './List.svelte';
-
-  import ListItem from './ListItem.svelte';
-</script>
-
-<meta title="List" component="{List}" />
-
-<template let:args id="Empty">
-  <List {...args} />
-</template>
-
-<template let:args id="OneItem">
-  <List {...args}>
-    <ListItem />
-  </List>
-</template>
-
-<template let:args id="ManyItems">
-  <List {...args}>
-    <ListItem />
-    <ListItem />
-    <ListItem />
-  </List>
-</template>
-
-<Story name="Empty" template="Empty" />
+```svelte filename="List.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!--
+  TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly
+  This is a special case as the CSF JS/TS Storybook versions don't support the component "directive"
+  It's referenced in the Writing Docs/Index.mdx file (https://storybook.js.org/docs/writing-stories#stories-for-two-or-more-components)
+-->
+```
 
-<Story name="OneItem" template="OneItem" />
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK -->
+```
 
-<Story name="MultipleItems" template="ManyItems" />
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK -->
 ```
 
 ```js filename="List.stories.js" renderer="vue" language="js"
@@ -599,4 +577,3 @@ export const ManyItems: Story = {
   `,
 };
 ```
-
diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
index e5111efdf5f4..d91ed7daaa41 100644
--- a/docs/_snippets/list-story-starter.md
+++ b/docs/_snippets/list-story-starter.md
@@ -76,7 +76,6 @@ export default {
 };
 
 // Always an empty list, not super interesting
-
 export const Empty = {};
 ```
 
@@ -92,7 +91,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
@@ -108,7 +107,7 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
@@ -119,8 +118,7 @@ export default {
   component: List,
 };
 
-// Always an empty list, not super interesting
-
+//Always an empty list, not super interesting
 export const Empty = {};
 ```
 
@@ -136,7 +134,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
@@ -152,28 +150,96 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* List.stories.svelte */}
+```svelte filename="List.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<!-- Always an empty list, not super interesting -->
+<Story name="Empty" />
+```
+
+```js filename="List.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import List from './List.svelte';
 
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+export default {
+  component: List,
+};
+
+// Always an empty list, not super interesting
+export const Empty = {};
+```
+
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import List from './List.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
 </script>
 
-<meta title="List" component="{List}" />
+<!-- Always an empty list, not super interesting -->
+<Story name="Empty" />
+```
+
+```ts filename="List.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
 
-<template let:args>
-  <List {...args} />
-</template>
+import List from './List.svelte';
 
-<Story name="Empty">
-  <List {...args} />
-</Story>
+const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Always an empty list, not super interesting
+export const Empty: Story = {};
+```
+
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<!-- Always an empty list, not super interesting -->
+<Story name="Empty" />
+```
+
+```ts filename="List.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import List from './List.svelte';
+
+const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+// Always an empty list, not super interesting
+export const Empty: Story = {};
 ```
 
 ```js filename="List.stories.js" renderer="vue" language="js"
@@ -262,4 +328,3 @@ export const Empty: Story = {
   render: () => html`<demo-list></demo-list>`,
 };
 ```
-
diff --git a/docs/_snippets/login-form-with-play-function.md b/docs/_snippets/login-form-with-play-function.md
index 12a24031604f..50cb48daa0d9 100644
--- a/docs/_snippets/login-form-with-play-function.md
+++ b/docs/_snippets/login-form-with-play-function.md
@@ -33,8 +33,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -70,8 +70,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -112,8 +112,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -154,8 +154,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -191,8 +191,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -235,8 +235,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -279,14 +279,55 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
 
-```js filename="LoginForm.stories.js" renderer="svelte" language="js"
+```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within } from '@storybook/test';
+
+  import LoginForm from './LoginForm.svelte';
+
+  const { Story } = defineMeta({
+    component: LoginForm,
+  });
+</script>
+
+<Story name="EmptyForm" />
+
+<!--
+  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
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  }}
+/>
+```
+
+```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import { expect, userEvent, within } from '@storybook/test';
 
 import LoginForm from './LoginForm.svelte';
@@ -316,14 +357,55 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within } from '@storybook/test';
+
+  import LoginForm from './LoginForm.svelte';
+
+  const { Story } = defineMeta({
+    component: LoginForm,
+  });
+</script>
+
+<Story name="EmptyForm" />
+
+<!--
+  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
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  }}
+/>
+```
+
+```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -357,14 +439,56 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts"
+```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within } from '@storybook/test';
+
+  import LoginForm from './LoginForm.svelte';
+
+  const { Story } = defineMeta({
+    component: LoginForm,
+  });
+
+</script>
+
+<Story name="EmptyForm" />
+
+<!--
+  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
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  }}
+/>
+```
+
+```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -398,8 +522,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -444,8 +568,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -495,8 +619,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -546,8 +670,8 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -581,8 +705,8 @@ export const FilledForm = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
@@ -620,10 +744,9 @@ export const FilledForm: Story = {
     // 👇 Assert DOM structure
     await expect(
       canvas.getByText(
-        'Everything is perfect. Your account is ready and we should probably get you started!',
-      ),
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
     ).toBeInTheDocument();
   },
 };
 ```
-
diff --git a/docs/_snippets/main-config-csf-addon-register.md b/docs/_snippets/main-config-csf-addon-register.md
deleted file mode 100644
index d38fecb2ffa1..000000000000
--- a/docs/_snippets/main-config-csf-addon-register.md
+++ /dev/null
@@ -1,28 +0,0 @@
-```js filename=".storybook/main.js" renderer="svelte" language="js"
-export default {
-  // Replace sveltekit with svelte-vite if you are not working with SvelteKit
-  framework: '@storybook/sveltekit',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-svelte-csf', //👈 The Svelte CSF addon goes here
-  ],
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
-// Replace sveltekit with svelte-vite if you are not working with SvelteKit
-import type { StorybookConfig } from '@storybook/sveltekit';
-
-const config: StorybookConfig = {
-  framework: '@storybook/sveltekit',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-svelte-csf', //👈 The Svelte CSF addon goes here
-  ],
-};
-
-export default config;
-```
-
diff --git a/docs/_snippets/main-config-svelte-csf-register.md b/docs/_snippets/main-config-svelte-csf-register.md
new file mode 100644
index 000000000000..7676d4f05ec2
--- /dev/null
+++ b/docs/_snippets/main-config-svelte-csf-register.md
@@ -0,0 +1,24 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-svelte-csf',
+  ],
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+// Replace your-framework with the name of your Svelte framework
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-svelte-csf',
+  ],
+};
+
+export default config;
+```
diff --git a/docs/_snippets/margindecorator.md b/docs/_snippets/margindecorator.md
index 4cf91687525f..d184d839be2b 100644
--- a/docs/_snippets/margindecorator.md
+++ b/docs/_snippets/margindecorator.md
@@ -1,6 +1,5 @@
-```html renderer="svelte" language="js" tabTitle="with-margin-component"
-{/* MarginDecorator.svelte */}
-
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="js" tabTitle="Svelte 4"
+<!-- TK: Vet this against recommendation -->
 <div>
   <slot />
 </div>
@@ -12,9 +11,25 @@
 </style>
 ```
 
-```html renderer="svelte" language="ts" tabTitle="with-margin-component"
-{/* MarginDecorator.svelte */}
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="js" tabTitle="Svelte 5"
+<!-- TK: Vet this against recommendation -->
+<script>
+	let { children } = $props();
+</script>
+
+<div>
+	{@render children()}
+</div>
+
+<style>
+  div {
+    margin: 3em;
+  }
+</style>
+```
 
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="ts" tabTitle="Svelte 4"
+<!-- TK: Vet this against recommendation -->
 <div>
   <slot />
 </div>
@@ -26,3 +41,20 @@
 </style>
 ```
 
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="ts" tabTitle="Svelte 5"
+<!-- TK: Vet this against recommendation -->
+<script>
+	// @ts-nocheck
+	let { children } = $props();
+</script>
+
+<div>
+	{@render children()}
+</div>
+
+<style>
+  div {
+    margin: 3em;
+  }
+</style>
+```
diff --git a/docs/_snippets/my-component-disable-toc.md b/docs/_snippets/my-component-disable-toc.md
index 57ce09e8074c..a9f684807f7c 100644
--- a/docs/_snippets/my-component-disable-toc.md
+++ b/docs/_snippets/my-component-disable-toc.md
@@ -18,7 +18,43 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        toc: {
+          disable: true, // 👈 Disables the table of contents
+        },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+```
+
+```js filename="MyComponent.stories.js" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -34,6 +70,46 @@ export default {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        toc: {
+          disable: true, // 👈 Disables the table of contents
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -55,6 +131,46 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        toc: {
+          disable: true, // 👈 Disables the table of contents
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -107,4 +223,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/my-component-play-function-alt-queries.md b/docs/_snippets/my-component-play-function-alt-queries.md
index 6a729e8f8d5e..c8d90beaf745 100644
--- a/docs/_snippets/my-component-play-function-alt-queries.md
+++ b/docs/_snippets/my-component-play-function-alt-queries.md
@@ -26,6 +26,55 @@ export const ExampleWithRole: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ExampleWithRole"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* 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
+ */
+export const ExampleWithRole = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -48,6 +97,60 @@ export const ExampleWithRole = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ExampleWithRole"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* 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
+ */
+export const ExampleWithRole: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -76,6 +179,60 @@ export const ExampleWithRole: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ExampleWithRole"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* 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
+ */
+export const ExampleWithRole: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -147,4 +304,3 @@ export const ExampleWithRole: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-query-findby.md b/docs/_snippets/my-component-play-function-query-findby.md
index 8ea6145a24ea..da507231077f 100644
--- a/docs/_snippets/my-component-play-function-query-findby.md
+++ b/docs/_snippets/my-component-play-function-query-findby.md
@@ -28,6 +28,59 @@ export const AsyncExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="AsyncExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent  from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* 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
+ */
+export const AsyncExample = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i }));
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -52,6 +105,64 @@ export const AsyncExample = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="AsyncExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* 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
+ */
+export const AsyncExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -82,6 +193,64 @@ export const AsyncExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="AsyncExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* 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
+ */
+export const AsyncExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -159,4 +328,3 @@ export const AsyncExample: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-waitfor.md b/docs/_snippets/my-component-play-function-waitfor.md
index df40859aed4f..d963cae3beae 100644
--- a/docs/_snippets/my-component-play-function-waitfor.md
+++ b/docs/_snippets/my-component-play-function-waitfor.md
@@ -39,6 +39,81 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, waitFor, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ExampleAsyncStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* 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
+ */
+export const ExampleAsyncStory = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, waitFor, within } from '@storybook/test';
 
@@ -74,6 +149,86 @@ export const ExampleAsyncStory = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, waitFor, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ExampleAsyncStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* 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
+ */
+export const ExampleAsyncStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -115,6 +270,86 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, waitFor, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ExampleAsyncStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* 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
+ */
+export const ExampleAsyncStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -225,4 +460,3 @@ export const ExampleAsyncStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-canvas.md b/docs/_snippets/my-component-play-function-with-canvas.md
index d37ff14e0301..00979b5b9980 100644
--- a/docs/_snippets/my-component-play-function-with-canvas.md
+++ b/docs/_snippets/my-component-play-function-with-canvas.md
@@ -24,6 +24,56 @@ 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 { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ExampleStory"
+  play={async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const ExampleStory = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -45,6 +95,57 @@ 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 { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  play={async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleStory: Story = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -72,6 +173,56 @@ 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 { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  play={async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ExampleStory: Story = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -140,4 +291,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-clickevent.md b/docs/_snippets/my-component-play-function-with-clickevent.md
index af4f3789f540..6da48d0d567a 100644
--- a/docs/_snippets/my-component-play-function-with-clickevent.md
+++ b/docs/_snippets/my-component-play-function-with-clickevent.md
@@ -35,6 +35,75 @@ export const FireEventExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { fireEvent, userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ClickExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  }}
+/>
+
+<Story
+  name="FireEventExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* 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
+ */
+export const ClickExample = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const FireEventExample = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { fireEvent, userEvent, within } from '@storybook/test';
 
@@ -66,6 +135,80 @@ export const FireEventExample = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { fireEvent, userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ClickExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  }}
+/>
+
+<Story
+  name="FireEventExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* 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
+ */
+export const ClickExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const FireEventExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -103,6 +246,80 @@ export const FireEventExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { fireEvent, userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="ClickExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  }}
+/>
+
+<Story
+  name="FireEventExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* 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
+ */
+export const ClickExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const FireEventExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -201,4 +418,3 @@ export const FireEventExample: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-delay.md b/docs/_snippets/my-component-play-function-with-delay.md
index 84b02a17e028..60acb5e218aa 100644
--- a/docs/_snippets/my-component-play-function-with-delay.md
+++ b/docs/_snippets/my-component-play-function-with-delay.md
@@ -35,6 +35,74 @@ export const DelayedStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="DelayedStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* 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
+ */
+export const DelayedStory = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -66,6 +134,79 @@ export const DelayedStory = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="DelayedStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* 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
+ */
+export const DelayedStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -103,6 +244,79 @@ export const DelayedStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</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
+-->
+<Story
+  name="DelayedStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* 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
+ */
+export const DelayedStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -201,4 +415,3 @@ export const DelayedStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-selectevent.md b/docs/_snippets/my-component-play-function-with-selectevent.md
index b8269e99687c..ed7d46ffad45 100644
--- a/docs/_snippets/my-component-play-function-with-selectevent.md
+++ b/docs/_snippets/my-component-play-function-with-selectevent.md
@@ -38,6 +38,83 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<script>
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+</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
+-->
+<Story
+  name="ExampleChangeEvent"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+// Function to emulate pausing between interactions
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* 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
+ */
+export const ExampleChangeEvent = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -72,6 +149,88 @@ export const ExampleChangeEvent = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<script>
+  function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+</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
+-->
+<Story
+  name="ExampleChangeEvent"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* 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
+ */
+export const ExampleChangeEvent: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -112,6 +271,89 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vet this against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent  from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<script>
+  function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+</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
+-->
+<Story
+  name="ExampleChangeEvent"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* 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
+ */
+export const ExampleChangeEvent: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -219,4 +461,3 @@ export const ExampleChangeEvent: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-basic-and-props.md b/docs/_snippets/my-component-story-basic-and-props.md
index 42ac3f0c5f1d..ab7528b7ef22 100644
--- a/docs/_snippets/my-component-story-basic-and-props.md
+++ b/docs/_snippets/my-component-story-basic-and-props.md
@@ -125,7 +125,33 @@ export const WithProp: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="Basic">
+	<div>
+		<MyComponent />
+	</div>
+</Story>
+
+<Story name="WithProp">
+	<div>
+		<MyComponent prop="value" />
+	</div>
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -149,24 +175,33 @@ export const WithProp = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
   import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
 </script>
 
 <Story name="Basic">
-  <MyComponent />
+	<div>
+		<MyComponent />
+	</div>
 </Story>
 
 <Story name="WithProp">
-  <MyComponent prop="value" />
+	<div>
+		<MyComponent prop="value" />
+	</div>
 </Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -195,7 +230,33 @@ export const WithProp: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="Basic">
+	<div>
+		<MyComponent />
+	</div>
+</Story>
+
+<Story name="WithProp">
+	<div>
+		<MyComponent prop="value" />
+	</div>
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -333,4 +394,3 @@ export const WithProp: Story = {
   render: () => html`<my-component prop="value" />`,
 };
 ```
-
diff --git a/docs/_snippets/my-component-vite-env-variables.md b/docs/_snippets/my-component-vite-env-variables.md
index 8b72972f0f83..325e1fe266a7 100644
--- a/docs/_snippets/my-component-vite-env-variables.md
+++ b/docs/_snippets/my-component-vite-env-variables.md
@@ -1,3 +1,38 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const ExampleStory = {
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -13,6 +48,46 @@ 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 MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  }}
+/>
+```
+
+```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+};
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -34,6 +109,46 @@ 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 MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  }}
+/>
+```
+
+```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+};
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -85,4 +200,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-with-env-variables.md b/docs/_snippets/my-component-with-env-variables.md
index 5becbe876f27..ae87f8dc476f 100644
--- a/docs/_snippets/my-component-with-env-variables.md
+++ b/docs/_snippets/my-component-with-env-variables.md
@@ -17,6 +17,39 @@ 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 MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: process.env.STORYBOOK_DATA_KEY
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const ExampleStory = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -31,6 +64,44 @@ 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 MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: process.env.STORYBOOK_DATA_KEY
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -51,11 +122,29 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import { MyComponent } from './MyComponent';
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: process.env.STORYBOOK_DATA_KEY
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
 
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
@@ -71,22 +160,24 @@ export const ExampleStory: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
-  import MyComponent from './MyComponent.svelte';
-</script>
+import { MyComponent } from './MyComponent';
 
-<meta title="MyComponent" component="{MyComponent}" />
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
 
-<template let:args>
-  <MyComponent {...args} />
-</template>
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-<Story name="ExampleStory" args={{ propertyA: process.env.STORYBOOK_DATA_KEY, }} />
+export const ExampleStory: Story = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
 ```
 
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
@@ -117,4 +208,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index bf8f8b3253c7..8c8da393fe1d 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -171,24 +171,23 @@ export const CustomFooter: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Page.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Page from './Page.svelte';
-</script>
-
-<meta title="Page" component="{Page}" />
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!--
+  TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly
+  This is a special case as the CSF JS/TS Storybook versions don't support the component "directive"
+  It's referenced in the following documentation:
+  - Essentials/Controls https://storybook.js.org/docs/essentials/controls#fully-custom-args
+  - Writing Stories/Args https://storybook.js.org/docs/writing-stories/args#args-can-modify-any-aspect-of-your-component
+  - Writing Stories/Typescript (https://storybook.js.org/docs/writing-stories/typescript#typing-custom-args)
+-->
+```
 
-<template let:args>
-  <Page {...args}>
-    <footer>{args.footer}</footer>
-  </Page>
-</template>
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK -->
+```
 
-<Story name="CustomFooter" args={{ footer: 'Built with Storybook', }} />
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK -->
 ```
 
 ```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="3"
@@ -336,4 +335,3 @@ export const CustomFooter: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md
index 3d3ff8c6bc92..2005110d89eb 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -154,7 +154,11 @@ export const LoggedIn: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="svelte" language="js"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (eg., ts-4-9, ts) -->
+```
+
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Page from './Page.svelte';
 
 //👇 Imports all Header stories
@@ -171,7 +175,11 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (eg., ts-4-9, ts) -->
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Page from './Page.svelte';
@@ -193,7 +201,11 @@ export const LoggedIn: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (eg., ts-4-9, ts) -->
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Page from './Page.svelte';
@@ -346,4 +358,3 @@ export const LoggedIn: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/parameters-in-meta.md b/docs/_snippets/parameters-in-meta.md
index 7abf1b58804d..9037dc413549 100644
--- a/docs/_snippets/parameters-in-meta.md
+++ b/docs/_snippets/parameters-in-meta.md
@@ -5,14 +5,10 @@ import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
-  //👇 Creates specific parameters for the story
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
@@ -20,77 +16,169 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific parameters at the component level
+    parameters: {
+      backgrounds: {
+        default: 'dark',
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
 export default {
   component: Button,
-  // 👇 Meta-level parameters
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
       default: 'dark',
     },
   },
 };
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-export const Basic = {};
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific parameters at the component level
+    parameters: {
+      backgrounds: {
+        default: 'dark',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta = {
   component: Button,
-  // 👇 Meta-level parameters
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
       default: 'dark',
     },
   },
 } satisfies Meta<typeof Button>;
+
 export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-type Story = StoryObj<typeof Meta>;
+  import Button from './Button.svelte';
 
-export const Basic: Story = {};
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific parameters at the component level
+    parameters: {
+      backgrounds: {
+        default: 'dark',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+
+export default meta;
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  // 👇 Meta-level parameters
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
       default: 'dark',
     },
   },
 };
-export default meta;
 
-type Story = StoryObj<typeof Button>;
-
-export const Basic: Story = {};
+export default meta;
 ```
 
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
-  //👇 Creates specific parameters for the story
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
@@ -101,18 +189,13 @@ import type { Meta } from '@storybook/web-components';
 
 const meta: Meta = {
   component: 'demo-button',
-  //👇 Creates specific parameters for the story
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/parameters-in-story.md b/docs/_snippets/parameters-in-story.md
index 277c2d5fc2c5..91f2009131a9 100644
--- a/docs/_snippets/parameters-in-story.md
+++ b/docs/_snippets/parameters-in-story.md
@@ -23,6 +23,43 @@ 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 Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 Story-level parameters-->
+<Story
+  name="OnDark"
+  parameters={{
+    backgrounds: { default: 'dark' }
+  }}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const OnDark = {
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -40,6 +77,48 @@ export const OnDark = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 Story-level parameters-->
+<Story
+  name="OnDark"
+  parameters={{
+    backgrounds: { default: 'dark' }
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Meta>;
+
+export const OnDark: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -49,8 +128,8 @@ import { Button } from './Button';
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Meta>;
 
 export const OnDark: Story = {
@@ -63,6 +142,48 @@ export const OnDark: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 Story-level parameters-->
+<Story
+  name="OnDark"
+  parameters={{
+    backgrounds: { default: 'dark' }
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const OnDark: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -72,8 +193,8 @@ import { Button } from './Button';
 const meta: Meta<typeof Button> = {
   component: Button,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const OnDark: Story = {
@@ -134,4 +255,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/register-component-with-play-function.md b/docs/_snippets/register-component-with-play-function.md
index a5851e727f61..59c310fd542d 100644
--- a/docs/_snippets/register-component-with-play-function.md
+++ b/docs/_snippets/register-component-with-play-function.md
@@ -43,6 +43,92 @@ export const FilledForm: Story = {
 };
 ```
 
+```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import RegistrationForm from './RegistrationForm.svelte';
+
+  const { Story } = defineMeta({
+    component: RegistrationForm,
+  });
+</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
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  }}
+/>
+```
+
+```js filename="RegistrationForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+export default {
+  component: RegistrationForm,
+};
+
+/*
+ * 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
+ */
+export const FilledForm = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+};
+```
+
 ```js filename="RegistrationForm.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -83,6 +169,98 @@ export const FilledForm = {
 };
 ```
 
+```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import RegistrationForm from './RegistrationForm.svelte';
+
+  const { Story } = defineMeta({
+    component: RegistrationForm,
+  });
+</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
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  }}
+/>
+```
+
+```ts filename="RegistrationForm.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+const meta = {
+  component: RegistrationForm,
+} satisfies Meta<typeof RegistrationForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ * 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
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+};
+```
+
 ```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -129,6 +307,97 @@ export const FilledForm: Story = {
 };
 ```
 
+```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import RegistrationForm from './RegistrationForm.svelte';
+
+  const { Story } = defineMeta({
+    component: RegistrationForm,
+  });
+</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
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  }}
+/>
+```
+
+```ts filename="RegistrationForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+const meta: Meta<typeof RegistrationForm> = {
+  component: RegistrationForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof RegistrationForm>;
+
+/*
+ * 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
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+};
+```
+
 ```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -215,6 +484,7 @@ export const FilledForm = {
 
 ```ts filename="RegistrationForm.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { userEvent, within } from '@storybook/test';
 
 const meta: Meta = {
@@ -254,4 +524,3 @@ export const FilledForm: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-component-config.md b/docs/_snippets/storybook-addon-a11y-component-config.md
index 3b54d8d96e63..d0b5ab9fee65 100644
--- a/docs/_snippets/storybook-addon-a11y-component-config.md
+++ b/docs/_snippets/storybook-addon-a11y-component-config.md
@@ -32,6 +32,70 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      a11y: {
+        // Optional selector to inspect
+        element: '#storybook-root',
+        config: {
+          rules: [
+            {
+              // The autocomplete rule will not run based on the CSS selector provided
+              id: 'autocomplete-valid',
+              selector: '*:not([autocomplete="nope"])',
+            },
+            {
+              // Setting the enabled option to false will disable checks for this particular rule on all stories.
+              id: 'image-alt',
+              enabled: false,
+            },
+          ],
+        },
+        options: {},
+        manual: true,
+      },
+    },
+  });
+</script>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+  parameters: {
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -62,6 +126,74 @@ export default {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      a11y: {
+        // Optional selector to inspect
+        element: '#storybook-root',
+        config: {
+          rules: [
+            {
+              // The autocomplete rule will not run based on the CSS selector provided
+              id: 'autocomplete-valid',
+              selector: '*:not([autocomplete="nope"])',
+            },
+            {
+              // Setting the enabled option to false will disable checks for this particular rule on all stories.
+              id: 'image-alt',
+              enabled: false,
+            },
+          ],
+        },
+        options: {},
+        manual: true,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+  parameters: {
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -97,6 +229,74 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      a11y: {
+        // Optional selector to inspect
+        element: '#storybook-root',
+        config: {
+          rules: [
+            {
+              // The autocomplete rule will not run based on the CSS selector provided
+              id: 'autocomplete-valid',
+              selector: '*:not([autocomplete="nope"])',
+            },
+            {
+              // Setting the enabled option to false will disable checks for this particular rule on all stories.
+              id: 'image-alt',
+              enabled: false,
+            },
+          ],
+        },
+        options: {},
+        manual: true,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  parameters: {
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -191,4 +391,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-disable.md b/docs/_snippets/storybook-addon-a11y-disable.md
index 21df7df27a7f..083c3d108cbb 100644
--- a/docs/_snippets/storybook-addon-a11y-disable.md
+++ b/docs/_snippets/storybook-addon-a11y-disable.md
@@ -81,7 +81,29 @@ export const NonA11yStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="NonA11yStory"
+  parameters={{
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -98,7 +120,29 @@ export const NonA11yStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="NonA11yStory"
+  parameters={{
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -120,7 +164,29 @@ export const NonA11yStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="NonA11yStory"
+  parameters={{
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -237,4 +303,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-story-config.md b/docs/_snippets/storybook-addon-a11y-story-config.md
index 5d556fb37551..5f9e31e99615 100644
--- a/docs/_snippets/storybook-addon-a11y-story-config.md
+++ b/docs/_snippets/storybook-addon-a11y-story-config.md
@@ -141,7 +141,44 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  parameters={{
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -173,7 +210,44 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  parameters={{
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -210,7 +284,44 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  parameters={{
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -417,4 +528,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-baseline-example.md b/docs/_snippets/storybook-auto-docs-baseline-example.md
index fe87ee88e10a..71f84bec493d 100644
--- a/docs/_snippets/storybook-auto-docs-baseline-example.md
+++ b/docs/_snippets/storybook-auto-docs-baseline-example.md
@@ -1,7 +1,6 @@
- renderer="common" language="mdx" tabTitle="custom-title"
-```mdx
-{/* Button.mdx */}
 
+```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="custom-title"
+{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 import { Meta, Controls } from '@storybook/blocks';
 
 <Meta title="Button" />
@@ -25,41 +24,9 @@ Button has the following properties:
 <Controls />
 ```
 
- renderer="common" language="mdx"
-```mdx
-{/* Button.mdx */}
-
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Button" />
-
-# Definition
-
-Button is a clickable interactive element that triggers a response.
-
-You can place text and icons inside of a button.
-
-Buttons are often used for form submissions and to toggle elements into view.
-
-## Usage
-
-The component comes in different variants such as `primary`, `secondary`, `large` and `small` which you can use to alter the look and feel of the button.
-
-## Inputs
-
-Button has the following properties:
-
-- `primary` - If `true`, the button will have a primary style.
-- `size` - The size of the button.
-- `label` - The label of the button.
-- `backgroundColor` - The background color of the button.
-- `onClick` - Callback function when clicked.
-```
-
- renderer="common" language="mdx" tabTitle="of-prop"
-```mdx
-{/* Button.mdx */}
 
+```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="of-prop"
+{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 import { Meta, Controls } from '@storybook/blocks';
 
 import * as ButtonStories from './Button.stories';
@@ -84,4 +51,3 @@ Button has the following properties:
 
 <Controls />
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-custom-file.md b/docs/_snippets/storybook-auto-docs-custom-file.md
index 3f6d8f595084..542de912800a 100644
--- a/docs/_snippets/storybook-auto-docs-custom-file.md
+++ b/docs/_snippets/storybook-auto-docs-custom-file.md
@@ -1,12 +1,12 @@
- renderer="common" language="mdx"
-```mdx
-{/* src/components/Select.mdx */}
+
+```mdx filename="src/components/Select.mdx" renderer="common" language="mdx"
+{/* TK: vet this against recommendation and filter out Svelte CSF */}
 
 # Select
 
-Select is a type of input that allows users to choose one or more options from a list of choices. 
+Select is a type of input that allows users to choose one or more options from a list of choices.
 
-The options are hidden by default and revealed when a user interacts with an element. 
+The options are hidden by default and revealed when a user interacts with an element.
 
 It shows the currently selected option in its default collapsed state.
 
@@ -16,11 +16,9 @@ To help users get acquainted with the existing UI elements, it is recommended to
 
 ### When to use?
 
-In a select input where there are less than 3-4 items, consider using radio boxes, or radio inputs instead. 
+In a select input where there are less than 3-4 items, consider using radio boxes, or radio inputs instead.
 
 ### How to use?
 
 To help users understand the options available in a select input, include a default option that is unselectable and acts as a label.
-
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
index 771daab8da92..ba32208b9bc3 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* ExampleDocumentation.mdx */}
-
+```mdx filename="ExampleDocumentation.mdx" renderer="common" language="mdx"
+{/* TK: Vet this against recommendation and filter out Svelte CSF */}
 import { Meta } from '@storybook/blocks';
 
 import * as ExampleComponentStories from './ExampleComponent.stories';
@@ -11,6 +10,5 @@ import * as ExampleComponentStories from './ExampleComponent.stories';
 
 {/* 👇 Component documentation page */}
 
-<Meta of={ExampleComponentStories} /> 
+<Meta of={ExampleComponentStories} />
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md b/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
index 640fc532e36e..1e9952059dfb 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
@@ -1,15 +1,13 @@
-```mdx renderer="common" language="mdx"
-{/* Guideline.mdx */}
-
+```mdx filename="Guideline.mdx" renderer="common" language="mdx"
+{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 <Guidelines>
   <Dos>
-    - Use buttons for the main actions on your page 
+    - Use buttons for the main actions on your page
     - Identify the primary action and make it `primary`
   </Dos>
   <Donts>
-    - Use a button when a link will do (e.g., for navigation-only actions) 
+    - Use a button when a link will do (e.g., for navigation-only actions)
     - Use multiple `primary` buttons in a single UI state
   </Donts>
 </Guidelines>
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
index a17d8e36ac69..475f173249ea 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
@@ -1,8 +1,6 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
+{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
index 10fdbd6282ca..e4ac4cff9e17 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
@@ -1,10 +1,8 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
+{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 import { Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 
 <Meta of={CheckboxStories} />
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
index 9a33596648de..a008b7caf9bc 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
@@ -1,10 +1,8 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
+{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 import { Canvas } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 
 <Canvas of={CheckboxStories.Unchecked} />
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-file.md b/docs/_snippets/storybook-auto-docs-mdx-file.md
index 41e7a6e3f22f..24eaf6724bc9 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-file.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-file.md
@@ -1,5 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Page.mdx */}
+```mdx filename="Page.mdx" renderer="common" language="mdx"
+{/* TK: Vet this against recommendation and filter out Svelte CSF */}
 
 import { Canvas, Meta, Story } from '@storybook/blocks';
 
@@ -13,7 +13,7 @@ import * as PageStories from './Page.stories';
 
 # Page
 
-Page is a layout container that is used to position children in predetermined areas. 
+Page is a layout container that is used to position children in predetermined areas.
 
 It's often used to apply consistent positioning for content across pages in an application
 
@@ -37,4 +37,3 @@ List items are used to group related content in a list. They must be nested with
 
 <Story of={ListItemStories.Starter} meta={ListItemStories} />
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-standalone-page.md b/docs/_snippets/storybook-auto-docs-standalone-page.md
index b1fb8f8bdcc3..e0ce5eb71b48 100644
--- a/docs/_snippets/storybook-auto-docs-standalone-page.md
+++ b/docs/_snippets/storybook-auto-docs-standalone-page.md
@@ -1,5 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* src/GettingStarted.mdx */}
+```mdx filename="src/GettingStarted.mdx" renderer="common" language="mdx"
+{/* TK: Vet this against recommendation and filter out Svelte CSF */}
 
 # Getting Started
 
@@ -61,4 +61,3 @@ Your development environment is critical. Here are some tools and resources to h
 
 ---
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-starter-example.md b/docs/_snippets/storybook-auto-docs-starter-example.md
index d8d8bddf22b0..7ad620c62e85 100644
--- a/docs/_snippets/storybook-auto-docs-starter-example.md
+++ b/docs/_snippets/storybook-auto-docs-starter-example.md
@@ -1,5 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Button.mdx */}
+```mdx filename="Button.mdx" renderer="common" language="mdx"
+{/* TK: Vet this against recommendation and filter out Svelte CSF */}
 
 import { Meta, Story } from '@storybook/blocks';
 
@@ -19,4 +19,3 @@ Buttons are often used for form submissions and to toggle elements into view.
 
 <Story of={ButtonStories.Basic} />
 ```
-
diff --git a/docs/_snippets/storybook-custom-docs-markdown.md b/docs/_snippets/storybook-custom-docs-markdown.md
index fc666e9b2b65..c54ae3b584bb 100644
--- a/docs/_snippets/storybook-custom-docs-markdown.md
+++ b/docs/_snippets/storybook-custom-docs-markdown.md
@@ -1,5 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Changelog.mdx */}
+```mdx filename="Changelog.mdx" renderer="common" language="mdx"
+{/* TK: Vet this against recommendation and filter out Svelte CSF */}
 
 import { Meta, Markdown } from "@storybook/blocks";
 
@@ -11,4 +11,3 @@ import Readme from "../../Changelog.md?raw";
 
 <Markdown>{Readme}</Markdown>
 ```
-
diff --git a/docs/_snippets/svelte-csf-addon-options.md b/docs/_snippets/svelte-csf-addon-options.md
new file mode 100644
index 000000000000..12b4dc2f730f
--- /dev/null
+++ b/docs/_snippets/svelte-csf-addon-options.md
@@ -0,0 +1,31 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // Other configuration
+  addons: [
+    {
+      name: '@storybook/addon-svelte-csf',
+      options: {
+        legacyTemplate: true, // Enables the legacy template syntax
+      },
+    },
+  ],
+};
+```
+
+```js filename=".storybook/main.ts" renderer="svelte" language="ts"
+// Replace your-framework with the name of your Svelte framework
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  // Other configuration
+  addons: [
+    {
+      name: '@storybook/addon-svelte-csf',
+      options: {
+        legacyTemplate: true, // Enables the legacy template syntax
+      },
+    },
+  ],
+};
+export default config;
+```
diff --git a/docs/_snippets/svelte-csf-addon-tags.md b/docs/_snippets/svelte-csf-addon-tags.md
new file mode 100644
index 000000000000..4026367c0a5a
--- /dev/null
+++ b/docs/_snippets/svelte-csf-addon-tags.md
@@ -0,0 +1,33 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Before"
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+</script>
+
+<Meta title="MyComponent" component={MyComponent} />
+
+<Template let:args>
+  <MyComponent {...args} />
+</Template>
+
+<Story name="Default" autodocs />
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="After"
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+
+</script>
+
+<Story name="Default">
+  <MyComponent tags={['autodocs']} />
+</Story>
+```
diff --git a/docs/_snippets/svelte-csf-story-custom-children.md b/docs/_snippets/svelte-csf-story-custom-children.md
new file mode 100644
index 000000000000..cc1263e909c2
--- /dev/null
+++ b/docs/_snippets/svelte-csf-story-custom-children.md
@@ -0,0 +1,39 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Before"
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  import OuterComponent from './OuterComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
+</script>
+
+<Meta title="MyComponent" component={MyComponent} />
+
+<Template let:args>
+  <OuterComponent>
+    <MyComponent />
+  </OuterComponent>
+</Template>
+
+<Story name="Default" />
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="After"
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import OuterComponent from './OuterComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+
+</script>
+
+<Story name="Default">
+  <OuterComponent>
+    <MyComponent />
+  </OuterComponent>
+</Story>
+```
diff --git a/docs/_snippets/svelte-csf-story-migration.md b/docs/_snippets/svelte-csf-story-migration.md
new file mode 100644
index 000000000000..1898b745f625
--- /dev/null
+++ b/docs/_snippets/svelte-csf-story-migration.md
@@ -0,0 +1,28 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Before"
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+</script>
+
+
+<Meta title="MyComponent" component={MyComponent} />
+
+<Story name="Default" />
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="After"
+<script context>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    title: 'MyComponent',
+    component: MyComponent,
+  });
+</script>
+
+
+<Story name="Default" />
+```
diff --git a/docs/_snippets/svelte-vite-framework-options.md b/docs/_snippets/svelte-vite-framework-options.md
new file mode 100644
index 000000000000..d023f1226d8c
--- /dev/null
+++ b/docs/_snippets/svelte-vite-framework-options.md
@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+import { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/svelte-webpack-framework-options.md b/docs/_snippets/svelte-webpack-framework-options.md
new file mode 100644
index 000000000000..22852dd3ab2f
--- /dev/null
+++ b/docs/_snippets/svelte-webpack-framework-options.md
@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/svelte-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+import { StorybookConfig } from '@storybook/svelte-webpack5';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    name: '@storybook/svelte-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/sveltekit-framework-options.md b/docs/_snippets/sveltekit-framework-options.md
new file mode 100644
index 000000000000..55de473d707b
--- /dev/null
+++ b/docs/_snippets/sveltekit-framework-options.md
@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/sveltekit',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+import { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    name: '@storybook/sveltekit',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/table-story-fully-customize-controls.md b/docs/_snippets/table-story-fully-customize-controls.md
deleted file mode 100644
index 091214d5621a..000000000000
--- a/docs/_snippets/table-story-fully-customize-controls.md
+++ /dev/null
@@ -1,30 +0,0 @@
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/*Table.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Table from './Table.svelte';
-</script>
-
-<Meta title="Custom Table" component={Table} argTypes={{ size: { options: ['small', 'medium',
-'large'], }, }} />
-
-<template let:args>
-  <table {...args}>
-    <tbody>
-      {#each args.data as row}
-      <tr>
-        {#each row as col}
-        <td>{col}</td>
-        {/each}
-      </tr>
-      {/each}
-    </tbody>
-  </table>
-</template>
-
-{/* 👇 The data arg is for the story component and the remaining args get passed to the Table component */}
-<Story name="Numeric" args={{ data: [ [1, 2, 3], [4, 5, 6], ], size: 'large', }} />
-```
-
diff --git a/docs/_snippets/tags-autodocs-in-meta.md b/docs/_snippets/tags-autodocs-in-meta.md
index 062907b3fe1f..38c05474cf94 100644
--- a/docs/_snippets/tags-autodocs-in-meta.md
+++ b/docs/_snippets/tags-autodocs-in-meta.md
@@ -11,6 +11,30 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+```
+
 ```js filename="Button.stories.js" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -21,6 +45,33 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```
+
 ```ts filename="Button.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 } from '@storybook/your-framework';
@@ -35,6 +86,33 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```
+
 ```ts filename="Button.stories.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
@@ -69,4 +147,3 @@ const meta: Meta = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/tags-autodocs-remove-component.md b/docs/_snippets/tags-autodocs-remove-component.md
index c1000d58ae8b..1b73a5f81677 100644
--- a/docs/_snippets/tags-autodocs-remove-component.md
+++ b/docs/_snippets/tags-autodocs-remove-component.md
@@ -11,6 +11,30 @@ const meta: Meta<Page> = {
 export default meta;
 ```
 
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+    // 👇 Disable auto-generated documentation for this component
+    tags: ['!autodocs'],
+  });
+</script>
+```
+
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Page from './Page.svelte';
+
+export default {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+```
+
 ```js filename="Page.stories.js" renderer="common" language="js"
 import { Page } from './Page';
 
@@ -21,6 +45,33 @@ export default {
 };
 ```
 
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+    // 👇 Disable auto-generated documentation for this component
+    tags: ['!autodocs'],
+  });
+</script>
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Page from './Page.svelte';
+
+const meta = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+} satisfies Meta<typeof Page>;
+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';
@@ -35,6 +86,33 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+    // 👇 Disable auto-generated documentation for this component
+    tags: ['!autodocs'],
+  });
+</script>
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Page from './Page.svelte';
+
+const meta: Meta<typeof Page> = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+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';
@@ -69,4 +147,3 @@ const meta: Meta = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/tags-autodocs-remove-story.md b/docs/_snippets/tags-autodocs-remove-story.md
index 70f036a52755..d50ed675de30 100644
--- a/docs/_snippets/tags-autodocs-remove-story.md
+++ b/docs/_snippets/tags-autodocs-remove-story.md
@@ -18,6 +18,38 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--👇 Removes this story from auto-generated documentation -->
+<Story name="UndocumentedStory" tags={['!autodocs']} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+
+export const UndocumentedStory = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
+
 ```js filename="Button.stories.js" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -33,6 +65,43 @@ export const UndocumentedStory = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--👇 Removes this story from auto-generated documentation -->
+<Story name="UndocumentedStory" tags={['!autodocs']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
+
 ```ts filename="Button.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';
@@ -54,6 +123,43 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--👇 Removes this story from auto-generated documentation -->
+<Story name="UndocumentedStory" tags={['!autodocs']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
+
 ```ts filename="Button.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';
@@ -107,4 +213,3 @@ export const UndocumentedStory: Story = {
   tags: ['!autodocs'],
 };
 ```
-
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index 2a5d3041103d..b24fd47d493f 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -22,8 +22,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -32,7 +30,6 @@ export const Combo: Story = {
       <div>
         <demo-button variant={1}>
         <demo-button variant={2}>
-        {/* Etc... */}
       </div>
     `,
   }),
@@ -58,8 +55,6 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -67,7 +62,6 @@ export const Combo = {
     <>
       <Button variant={1}>
       <Button variant={2}>
-      {/* Etc... */}
     </>
   ),
 };
@@ -97,8 +91,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -106,7 +98,6 @@ export const Combo: Story = {
     <>
       <Button variant={1}>
       <Button variant={2}>
-      {/* Etc... */}
     </>
   ),
 };
@@ -136,8 +127,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -145,7 +134,6 @@ export const Combo: Story = {
     <>
       <Button variant={1}>
       <Button variant={2}>
-      {/* Etc... */}
     </>
   ),
 };
@@ -170,8 +158,6 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -179,7 +165,6 @@ export const Combo = {
     <>
       <Button variant={1}>
       <Button variant={2}>
-      {/* Etc... */}
     </>
   ),
 };
@@ -209,8 +194,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -218,7 +201,6 @@ export const Combo: Story = {
     <>
       <Button variant={1}>
       <Button variant={2}>
-      {/* Etc... */}
     </>
   ),
 };
@@ -248,8 +230,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -257,12 +237,25 @@ export const Combo: Story = {
     <>
       <Button variant={1}>
       <Button variant={2}>
-      {/* Etc... */}
     </>
   ),
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts)
+    If not suuported, adjust documentation to reflect it by making it conditionally render
+ -->
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+```
+
 ```js filename="Button.stories.js" renderer="vue" language="js"
 import { Button } from './Button';
 
@@ -282,8 +275,6 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -293,7 +284,6 @@ export const Combo = {
       <div>
         <Button variant={1}>
         <Button variant={2}>
-        {/* Etc... */}
       </div>
     `,
   }),
@@ -324,8 +314,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -335,7 +323,6 @@ export const Combo: Story = {
       <div>
         <Button variant={1}>
         <Button variant={2}>
-        {/* Etc... */}
       </div>
     `,
   }),
@@ -366,8 +353,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -377,7 +362,6 @@ export const Combo: Story = {
       <div>
         <Button variant={1}>
         <Button variant={2}>
-        {/* Etc... */}
       </div>
     `,
   }),
@@ -404,8 +388,6 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -443,8 +425,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -452,9 +432,7 @@ export const Combo: Story = {
     <div>
       <demo-button variant="1">
       <demo-button variant="2">
-      {/* Etc... */}
     </div>
   `,
 };
 ```
-
diff --git a/docs/_snippets/tags-docs-only-in-meta.md b/docs/_snippets/tags-docs-only-in-meta.md
index f602b0e1b9bc..8aecfde2ecc4 100644
--- a/docs/_snippets/tags-docs-only-in-meta.md
+++ b/docs/_snippets/tags-docs-only-in-meta.md
@@ -5,60 +5,168 @@ import { Button } from './Button';
 
 const meta: Meta<Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will:
+     * - Be included in the docs page
+     * - Not appear in Storybook's sidebar
+     */
+    tags: ['autodocs', '!dev'],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+```
+
 ```js filename="Button.stories.js" renderer="common" language="js"
 import { Button } from './Button';
 
 export default {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will:
+     * - Be included in the docs page
+     * - Not appear in Storybook's sidebar
+     */
+    tags: ['autodocs', '!dev'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```
+
 ```ts filename="Button.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 { Button } from './Button';
 
 const meta = {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 } satisfies Meta<typeof Button>;
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will:
+     * - Be included in the docs page
+     * - Not appear in Storybook's sidebar
+     */
+    tags: ['autodocs', '!dev'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+```
+
 ```ts filename="Button.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 { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
@@ -69,10 +177,10 @@ export default meta;
 export default {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
@@ -84,13 +192,12 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index fb7cdcd14f97..e2663d5095bc 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -5,25 +5,81 @@ import { Button } from './Button';
 
 const meta: Meta<Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will have these tags applied:
+     * - autodocs
+     * - dev (implicit default, inherited from preview)
+     * - test (implicit default, inherited from preview)
+     */
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--
+  This particular story will have these tags applied:
+  - experimental
+  - autodocs (inherited from meta)
+  - dev (inherited from meta)
+  - test (inherited from meta)
+-->
+<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export const ExperimentalFeatureStory = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -34,22 +90,83 @@ import { Button } from './Button';
 
 export default {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will have these tags applied:
+     * - autodocs
+     * - dev (implicit default, inherited from preview)
+     * - test (implicit default, inherited from preview)
+     */
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--
+  This particular story will have these tags applied:
+  - experimental
+  - autodocs (inherited from meta)
+  - dev (inherited from meta)
+  - test (inherited from meta)
+-->
+<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -63,25 +180,86 @@ import { Button } from './Button';
 
 const meta = {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will have these tags applied:
+     * - autodocs
+     * - dev (implicit default, inherited from preview)
+     * - test (implicit default, inherited from preview)
+     */
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--
+  This particular story will have these tags applied:
+  - experimental
+  - autodocs (inherited from meta)
+  - dev (inherited from meta)
+  - test (inherited from meta)
+-->
+<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /*
+   *This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -95,25 +273,25 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   *This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -123,22 +301,22 @@ export const ExperimentalFeatureStory: Story = {
 export default {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -150,27 +328,26 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   *  - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
 ```
-
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index 7d9aeff2964d..de110347bbe0 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -1,11 +1,11 @@
 ```js filename=".storybook/preview.js" renderer="common" language="js"
 export default {
   // ...rest of preview
-  /**
-   * 👇 All stories in your project will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default)
-   *    - test (implicit default)
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
    */
   tags: ['autodocs'],
 };
@@ -17,15 +17,14 @@ import type { Preview } from '@storybook/your-renderer';
 
 const preview: Preview = {
   // ...rest of preview
-  /**
-   * 👇 All stories in your project will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default)
-   *    - test (implicit default)
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
    */
   tags: ['autodocs'],
 };
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/tags-remove-in-story.md b/docs/_snippets/tags-remove-in-story.md
index 8e94be4250c3..e00352ad504b 100644
--- a/docs/_snippets/tags-remove-in-story.md
+++ b/docs/_snippets/tags-remove-in-story.md
@@ -1,22 +1,53 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta: Meta<Button> = {
   component: Button,
   // 👇 Applies to all stories in this file
   tags: ['stable'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 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
+  tags: ['!stable', 'experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Applies to all stories in this file
+    tags: ['stable'],
+  });
+</script>
+
+<!-- 👇 For this particular story, remove the inherited stable` tag and apply the `experimental` tag -->
+<Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export const ExperimentalFeatureStory = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -31,10 +62,46 @@ export default {
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 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
+  tags: ['!stable', 'experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Applies to all stories in this file
+    tags: ['stable'],
+  });
+</script>
+
+<!-- 👇 For this particular story, remove the inherited stable` tag and apply the `experimental` tag -->
+<Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -55,10 +122,46 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 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
+  tags: ['!stable', 'experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<!-- TODO: Vet this example against recommendation -->
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Applies to all stories in this file
+    tags: ['stable'],
+  });
+</script>
+
+<!-- 👇 For this particular story, remove the inherited stable` tag and apply the `experimental` tag -->
+<Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -74,15 +177,12 @@ const meta: Meta<typeof Button> = {
   // 👇 Applies to all stories in this file
   tags: ['stable'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 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
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -96,10 +196,7 @@ export default {
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 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
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -113,16 +210,12 @@ const meta: Meta = {
   // 👇 Applies to all stories in this file
   tags: ['stable'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 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
   tags: ['!stable', 'experimental'],
 };
 ```
-
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index 820f72da82e5..3d095bf8f386 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -148,9 +148,24 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js"
-import YourComponent from './YourComponent.svelte';
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
 
+  const { Story } = defineMeta({
+    component: YourComponent,
+    decorators: [() => ({
+      Component: MarginDecorator,
+    })],
+  });
+</script>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
 export default {
@@ -159,27 +174,23 @@ export default {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* YourComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template } from '@storybook/addon-svelte-csf';
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import YourComponent from './YourComponent.svelte';
   import MarginDecorator from './MarginDecorator.svelte';
 
-  import YourComponent from './YourComponent.svelte';
+  const { Story } = defineMeta({
+    component: YourComponent,
+    decorators: [() => ({
+      Component: MarginDecorator,
+    })],
+  });
 </script>
-
-<meta title="YourComponent" component="{YourComponent}" />
-
-<template let:args>
-  <MarginDecorator>
-    {/*👇 Your component here */}
-  </MarginDecorator>
-</template>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
@@ -188,12 +199,28 @@ import MarginDecorator from './MarginDecorator.svelte';
 const meta = {
   component: Button,
   decorators: [() => MarginDecorator],
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof YourComponent>;
 
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    decorators: [() => ({
+      Component: MarginDecorator,
+    })],
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
@@ -262,4 +289,3 @@ const meta: Meta<YourComponentProps> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 7ec83e1ce72a..26795169434a 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -207,7 +207,27 @@ export const FirstStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  //👇 This export determines where your story goes in the story list
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+<Story
+  name="FirstStory"
+  args={{
+    /*👇 The args you need here will depend on your component */
+  }}
+/>
+```
+
+```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
@@ -215,48 +235,39 @@ export default {
   component: YourComponent,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const FirstStory = {
-  render: (args) => ({
-    Component: YourComponent,
-    props: args,
-  }),
   args: {
     //👇 The args you need here will depend on your component
   },
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* YourComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import YourComponent from './YourComponent.svelte';
-</script>
-
-{/*👇 The title determines where your story goes in the story list */}
-<Meta title="YourComponent" component={YourComponent} argTypes={{ /* Customize your args here
-depending on your component */ }} />
 
-<template let:args>
-  <button {...args} />
-</template>
+  //👇 This export determines where your story goes in the story list
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
 
-<Story name="FirstStory" args={{ /* The args you need here will depend on your component */ }} />
+<Story
+  name="FirstStory"
+  args={{
+    /*👇 The args you need here will depend on your component */
+  }}
+/>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 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
 const meta = {
   component: YourComponent,
 } satisfies Meta<typeof YourComponent>;
@@ -271,12 +282,32 @@ export const FirstStory: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  //👇 This export determines where your story goes in the story list
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+<Story
+  name="FirstStory"
+  args={{
+    /*👇 The args you need here will depend on your component */
+  }}
+/>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 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
 const meta: Meta<typeof YourComponent> = {
   component: YourComponent,
 };
@@ -412,4 +443,3 @@ export const FirstStory: Story = {
   },
 };
 ```
-
diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx
index 9066e7e4dc63..3acc38b7a855 100644
--- a/docs/essentials/controls.mdx
+++ b/docs/essentials/controls.mdx
@@ -149,7 +149,7 @@ For instance, suppose you have a `variant` arg on your story that should be `pri
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-controls-primary-variant.md" usesCsf3 csf2Path="essentials/controls#snippet-button-story-controls-primary-variant" />
+<CodeSnippets path="button-story-controls-primary-variant.md" />
 
 {/* prettier-ignore-end */}
 
@@ -161,7 +161,17 @@ It works as long as you type a valid string into the auto-generated text control
 
 We can specify which controls get used by declaring a custom [argType](../api/arg-types.mdx) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, and defaultValue for an arg. These get automatically filled in by Storybook Docs.
 
-`ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a property of the component, let's put that annotation on the default export.
+<IfRenderer renderer="svelte">
+
+  `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a component property, let's put that annotation on the `defineMeta` function, or the default export if you're using standard CSF.
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a component property, let's put that annotation on the default export.
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -179,7 +189,7 @@ This replaces the input with a radio group for a more intuitive experience.
 
 ## Custom control type matchers
 
-Controls can automatically be inferred from arg's name with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp), but currently only for the color picker and date picker controls. If you've used the Storybook CLI to setup your project, it should have automatically created the following defaults in `.storybook/preview.js`:
+Controls can automatically be inferred from arg's name with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp), but currently only for the color picker and date picker controls. If you've used the Storybook CLI to setup your project, it should have automatically created the following defaults in `.storybook/preview.js|ts`:
 
 | Control   | Default regex                            | Description                                               |
 | --------- | ---------------------------------------- | --------------------------------------------------------- |
@@ -203,7 +213,7 @@ If you haven't used the CLI to set the configuration, or if you want to define y
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="page-story-slots.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story-slots" />
+  <CodeSnippets path="page-story-slots.md"/>
 
   {/* prettier-ignore-end */}
 
@@ -224,7 +234,7 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-custom-args-complex.md" usesCsf3 csf2Path="essentials/controls#snippet-component-story-custom-args-complex" />
+<CodeSnippets path="component-story-custom-args-complex.md" />
 
 {/* prettier-ignore-end */}
 
@@ -240,6 +250,16 @@ Note that both `mapping` and `control.labels` don't have to be exhaustive. If th
 
 ## Creating and editing stories from controls
 
+<If renderer="svelte">
+
+  <Callout variant="info">
+
+    This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+  
+  </Callout>
+  
+</If>
+
 The Controls addon allows you to create or edit stories, directly from the Controls panel.
 
 ### Create a new story
@@ -262,7 +282,7 @@ You can also update a control's value, then save the changes to the story. The s
 
 ### Disable creating and editing of stories
 
-If you don't want to allow the creation or editing of stories from the Controls panel, you can disable this feature by setting the `disableSaveFromUI` parameter to `true` in the `parameters.controls` parameter in your `.storybook/preview.js` file.
+If you don't want to allow the creation or editing of stories from the Controls panel, you can disable this feature by setting the `disableSaveFromUI` parameter to `true` in the `parameters.controls` parameter in your `.storybook/preview.js|ts` file.
 
 ## Configuration
 
@@ -315,7 +335,7 @@ Controls supports the following configuration [parameters](../writing-stories/pa
 
 Since Controls is built on the same engine as Storybook Docs, it can also show property documentation alongside your controls using the expanded parameter (defaults to false). This means you embed a complete [`Controls`](../api/doc-blocks/doc-block-controls.mdx) doc block in the controls panel. The description and default value rendering can be [customized](#fully-custom-args) like the doc block.
 
-To enable expanded mode globally, add the following to [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering):
+To enable expanded mode globally, add the following to [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering):
 
 {/* prettier-ignore-start */}
 
@@ -349,7 +369,7 @@ Consider the following story snippets:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-disable-controls-regex.md" usesCsf3 csf2Path="essentials/controls#snippet-component-story-disable-controls-regex" />
+<CodeSnippets path="component-story-disable-controls-regex.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/get-started/browse-stories.mdx b/docs/get-started/browse-stories.mdx
index 1cf04a1c9be3..bb835c97d6a3 100644
--- a/docs/get-started/browse-stories.mdx
+++ b/docs/get-started/browse-stories.mdx
@@ -10,7 +10,7 @@ Last chapter, we learned that stories correspond with discrete component states.
 
 ## Sidebar and Canvas
 
-A `*.stories.js` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story, it renders in the Canvas an isolated preview iframe.
+A `*.stories.js|ts|svelte` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story, it renders in the Canvas an isolated preview iframe.
 
 <Video src="../_assets/get-started/example-browse-all-stories-optimized.mp4" />
 
diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx
index 91c76a67089a..057cabf1d144 100644
--- a/docs/get-started/frameworks/svelte-vite.mdx
+++ b/docs/get-started/frameworks/svelte-vite.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/).
 
-<If notRenderer={'svelte'}>
+<If notRenderer="svelte">
   <Callout variant="info">
     Storybook for Svelte & Vite is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'svelte'}>
+<If renderer="svelte">
   ## Requirements
 
   * Svelte ≥ 4.0
@@ -26,7 +26,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   ### In a project without Storybook
 
-  Follow the prompts after running this command in your Sveltekit project's root directory:
+  Follow the prompts after running this command in your Svelte project's root directory:
 
   {/* prettier-ignore-start */}
 
@@ -48,7 +48,9 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   #### Automatic migration
 
-  When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
+  {/* TK: Vet this for accuracy, the migration never prompted me to opt-in to the @storybook/sveltekit package, instead it updated the package version. Additionally the example refers to svelte-vite, not sveltekit */}
+
+  When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/svelte-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
 
   #### Manual migration
 
@@ -70,7 +72,15 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   ## Writing native Svelte stories
 
-  Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
+  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).
+  </Callout>
+
+  ### Setup
+
+  If you initialized your project with the Svelte framework, the addon has already been installed and configured for you. However, if you're [migrating](#automatic-migration) from a previous version, you'll need to take additional steps to enable this feature.
 
   Run the following command to install the addon.
 
@@ -81,29 +91,112 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   {/* prettier-ignore-end */}
 
   <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 CLI's [`add`](../../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
+  
+  </Callout>
+
+  Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
+  
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="main-config-svelte-csf-register.md" />
+
+  {/* prettier-ignore-end */}
+
+  ### Configure
+ 
+  By default, the Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) addon offers zero-config support for Storybook's Svelte framework. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional addon options. Listed below are the available options and examples of how to use them.
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="svelte-csf-addon-options.md" />
+
+  {/* prettier-ignore-end */}
+
+  | Options          | Description |
+  | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
+  | `legacyTemplate` | Enables support for the `Template` component for backward compatibility. <br/> `options: { legacyTemplate: true }` |
+  
+  <Callout variant="info">
+
+    Enabling the `legacyTemplate` option can introduce a performance overhead and should be used cautiously. For more information, refer to the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf/blob/next/README.md#legacy-api).
+  
   </Callout>
 
+  ### Upgrade to Svelte CSF addon v5
+
+  With the Svelte 5 release, Storybook's Svelte CSF addon has been updated to support the new features. This guide will help you migrate to the latest version of the addon. Below is an overview of the major changes in version 5.0 and the steps needed to upgrade your project.
+
+  #### Simplified story API
+  
+  If you are using the `Meta` component or the `meta` named export to define the story's metadata (e.g., [parameters](../../writing-stories/parameters.mdx)), you'll need to update your stories to use the new `defineMeta` function. This function returns an object with the required information, including a `Story` component that you must use to define your component stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-migration.md" />
+
+  {/* prettier-ignore-end */}
+
+  #### Story templates
+ 
+  If you used the `Template` component to control how the component renders in the Storybook, this feature was replaced with built-in children support in the `Story` component, enabling you to compose components and define the UI structure directly in the story.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-custom-children.md" />
+
+  {/* prettier-ignore-end */}
+
+  <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).
+  
+  </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.
+
+  ```svelte title="MyComponent.stories.svelte"
+  <script>
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+    
+    import MyComponent from './MyComponent.svelte';
+
+    const { Story } = defineMeta({
+      component: MyComponent,
+    });
+  </script>
+
+  <Story name="Default" args={{ exampleProperty: true }}>
+    {#snippet children(args)}
+      <MyComponent {...args}>Reactive component</MyComponent>
+    {/snippet}
+  </Story>
+  ```
+
+  #### Tags support
+
+  If you enabled automatic documentation generation with the `autodocs` story property, you must replace it with [`tags`](../../writing-stories/tags.mdx). This property allows you to categorize and filter stories based on specific criteria and generate documentation based on the tags applied to the stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-addon-tags.md" />
+
+  {/* prettier-ignore-end */}
+
   ## API
 
   ### Options
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/svelte-vite',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-vite-framework-options.md" />
+
+  {/* prettier-ignore-end */}
 
   The available options are:
 
diff --git a/docs/get-started/frameworks/svelte-webpack5.mdx b/docs/get-started/frameworks/svelte-webpack5.mdx
index 8c3f78ddc2b8..0815e1f5f858 100644
--- a/docs/get-started/frameworks/svelte-webpack5.mdx
+++ b/docs/get-started/frameworks/svelte-webpack5.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'svelte'}>
+<If notRenderer="svelte">
   <Callout variant="info">
     Storybook for Svelte & Webpack is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'svelte'}>
+<If renderer="svelte">
   ## Requirements
 
   * Svelte ≥ 4.0
@@ -86,42 +86,17 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
 
   {/* prettier-ignore-end */}
 
-  ## Writing native Svelte stories
-
-  Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
-
-  Run the following command to install the addon.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="svelte-csf-addon-install.md" />
-
-  {/* prettier-ignore-end */}
-
-  <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 [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
-  </Callout>
-
   ## API
 
   ### Options
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/svelte-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+    {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-webpack-framework-options.md" />
+
+  {/* prettier-ignore-end */}
 
   The available options are:
 
@@ -131,5 +106,11 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
 
   Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
 
+  ## Troubleshooting
+
+  ### Svelte CSF addon compatibility
+
+  In version 5 of the Svelte CSF [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf), support for Webpack was removed to align with Svelte's ecosystem. If you're using this framework and you want to write stories using Svelte's native templating syntax with the Svelte CSF addon, we encourage you to downgrade to version 4 of the addon.
+
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx
index 3480bdb4b8f0..f6f1b29fabee 100644
--- a/docs/get-started/frameworks/sveltekit.mdx
+++ b/docs/get-started/frameworks/sveltekit.mdx
@@ -12,7 +12,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 * 🔗 Automatic link handling
 * 💫 and more!
 
-<If notRenderer={'svelte'}>
+<If notRenderer="svelte">
   <Callout variant="info">
     Storybook for SvelteKit is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
@@ -20,7 +20,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'svelte'}>
+<If renderer="svelte">
   ## Requirements
 
   * SvelteKit ≥ 1.0
@@ -87,10 +87,10 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
   | Module                                                                             | Status                 | Note                                                                                                                                    |
   | ---------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
   | [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported           | `version` is always empty in Storybook.                                                                                                 |
-  | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⚠️ **Experimental**    | See [How to mock](#how-to-mock).                                                                                                         |
-  | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⚠️ **Experimental**    | See [How to mock](#how-to-mock).                                                                                                         |
+  | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⚠️ **Experimental**     | See [How to mock](#how-to-mock).                                                                                                        |
+  | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⚠️ **Experimental**     | See [How to mock](#how-to-mock).                                                                                                        |
   | [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ✅ Supported           | Requires SvelteKit 1.4.0 or newer.                                                                                                      |
-  | [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ⚠️ **Experimental**    | See [How to mock](#how-to-mock).                                                                                                         |
+  | [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ⚠️ **Experimental**     | See [How to mock](#how-to-mock).                                                                                                        |
   | [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API, so it cannot dynamically serve content. |
   | [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public)     | ✅ Supported           |                                                                                                                                         |
   | [`$lib`](https://kit.svelte.dev/docs/modules#$lib)                                 | ✅ Supported           |                                                                                                                                         |
@@ -103,8 +103,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   To mock a SvelteKit import you can define it within `parameters.sveltekit_experimental`:
 
-  ```ts
-  // MyComponent.stories.svelte
+  ```ts title="MyComponent.stories.js|ts"
   export const MyStory = {
     parameters: {
       sveltekit_experimental: {
@@ -130,12 +129,11 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   ### Mocking links
 
-  The default link-handling behavior (e.g. when clicking an `<a href="..." />` element) is to log an action to the [Actions panel](../../essentials/actions.mdx).
+  The default link-handling behavior (e.g., when clicking an `<a href="..." />` element) is to log an action to the [Actions panel](../../essentials/actions.mdx).
 
-  You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values define your mock. For example:
+  You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href, and the values define your mock. For example:
 
-  ```ts
-  // MyComponent.stories.svelte
+  ```ts title="MyComponent.stories.js|ts"
   export const MyStory = {
     parameters: {
       sveltekit_experimental: {
@@ -159,7 +157,15 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   ## Writing native Svelte stories
 
-  Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
+  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).
+  </Callout>
+
+  ### Setup
+
+  If you initialized your project with the Sveltekit framework, the addon has already been installed and configured for you. However, if you're [migrating](#automatic-migration) from a previous version, you'll need to take additional steps to enable this feature.
 
   Run the following command to install the addon.
 
@@ -170,9 +176,101 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
   {/* prettier-ignore-end */}
 
   <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 [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+  
+    The CLI's [`add`](../../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
+  
+  </Callout>
+
+  Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
+  
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="main-config-svelte-csf-register.md" />
+
+  {/* prettier-ignore-end */}
+
+  ### Configure
+ 
+  By default, the Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) addon offers zero-config support for Storybook's SvelteKit framework. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional addon options. Listed below are the available options and examples of how to use them.
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="svelte-csf-addon-options.md" />
+
+  {/* prettier-ignore-end */}
+
+  | Options          | Description |
+  | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
+  | `legacyTemplate` | Enables support for the `Template` component for backward compatibility. <br/> `options: { legacyTemplate: true }` |
+  
+  <Callout variant="info">
+
+    Enabling the `legacyTemplate` option can introduce a performance overhead and should be used cautiously. For more information, refer to the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf/blob/next/README.md#legacy-api).
+  
+  </Callout>
+
+  ### Upgrade to Svelte CSF addon v5
+
+  With the Svelte 5 release, Storybook's Svelte CSF addon has been updated to support the new features. This guide will help you migrate to the latest version of the addon. Below is an overview of the major changes in version 5.0 and the steps needed to upgrade your project.
+
+  #### Simplified story API
+  
+  If you are using the `Meta` component or the `meta` named export to define the story's metadata (e.g., [parameters](../../writing-stories/parameters.mdx)), you'll need to update your stories to use the new `defineMeta` function. This function returns an object with the required information, including a `Story` component that you must use to define your component stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-migration.md" />
+
+  {/* prettier-ignore-end */}
+
+  #### Story templates
+ 
+  If you used the `Template` component to control how the component renders in the Storybook, this feature was replaced with built-in children support in the `Story` component, enabling you to compose components and define the UI structure directly in the story.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-custom-children.md" />
+
+  {/* prettier-ignore-end */}
+
+  <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).
+  
   </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.
+
+  ```svelte title="MyComponent.stories.svelte"
+  <script>
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+    
+    import MyComponent from './MyComponent.svelte';
+
+    const { Story } = defineMeta({
+      component: MyComponent,
+    });
+  </script>
+
+  <Story name="Default" args={{ exampleProperty: true }}>
+    {#snippet children(args)}
+      <MyComponent {...args}>Reactive component</MyComponent>
+    {/snippet}
+  </Story>
+  ```
+
+  #### Tags support
+
+  If you enabled automatic documentation generation with the `autodocs` story property, you must replace it with [`tags`](../../writing-stories/tags.mdx). This property allows you to categorize and filter stories based on specific criteria and generate documentation based on the tags applied to the stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-addon-tags.md" />
+
+  {/* prettier-ignore-end */}
+
   ## API
 
   ### Parameters
@@ -267,20 +365,11 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
+  {/* prettier-ignore-start */ }
 
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/sveltekit',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  <CodeSnippets path="sveltekit-framework-options.md" />
+
+  {/* prettier-ignore-end */}
 
   The available options are:
 
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index 3a01f4b75333..5f2ee161e13f 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -13,7 +13,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your pr
 
 {/* prettier-ignore-end */}
 
-<details>
+<details id="custom-storybook-version">
   <summary>Install a specific version</summary>
 
   The `init` command will use whichever version you specify. For example:
@@ -171,7 +171,7 @@ There are some noteworthy items here:
   <IfRenderer renderer="svelte">
     #### Writing native Svelte stories
 
-    Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
+    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. Starting with Storybook 8.2, the addon is automatically installed and configured when you initialize your project with the Svelte framework. However, if you installed a [specific version](#custom-storybook-version) of Storybook, you'll need to take additional steps to enable this feature.
 
     Run the following command to install the addon.
 
@@ -181,11 +181,17 @@ There are some noteworthy items here:
 
     {/* prettier-ignore-end */}
 
-    Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to include it.
+    <Callout variant="info">
+
+      The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
+    
+    </Callout>
 
+    Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
+  
     {/* prettier-ignore-start */}
 
-    <CodeSnippets path="main-config-csf-addon-register.md" />
+    <CodeSnippets path="main-config-svelte-csf-register.md" />
 
     {/* prettier-ignore-end */}
 
@@ -259,6 +265,6 @@ There are some noteworthy items here:
   Now that you have successfully installed Storybook and understood how it works, let's continue where you left off in the [setup wizard](#run-the-setup-wizard) and delve deeper into writing stories.
 </IfRenderer>
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik','solid' ]}>
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid' ]}>
   Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
 </IfRenderer>
diff --git a/docs/get-started/setup.mdx b/docs/get-started/setup.mdx
index be35c28e11a2..e922ffc54db1 100644
--- a/docs/get-started/setup.mdx
+++ b/docs/get-started/setup.mdx
@@ -7,11 +7,11 @@ sidebar:
 
 Now that you’ve learned what stories are and how to browse them, let’s demo working on one of your components.
 
-Pick a simple component from your project, like a Button, and write a `.stories.js`, or a `.stories.ts` file to go along with it. It might look something like this:
+Pick a simple component from your project, like a Button, and write a `.stories.js`, `.stories.ts`, or `.stories.svelte` file to go along with it. It might look something like this:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="your-component.md" usesCsf3 csf2Path="get-started/setup#snippet-your-component" />
+<CodeSnippets path="your-component.md" />
 
 {/* prettier-ignore-end */}
 
@@ -66,7 +66,7 @@ Your project may have additional requirements before components can be rendered
 
   A common frontend pattern is for components to assume that they render in a specific “context” with parent components higher up the rendering hierarchy (for instance, theme providers).
 
-  Use [decorators](../writing-stories/decorators.mdx) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
+  Use [decorators](../writing-stories/decorators.mdx) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
 
   {/* prettier-ignore-start */}
 
diff --git a/docs/get-started/whats-a-story.mdx b/docs/get-started/whats-a-story.mdx
index a08d24ac536f..d0d3e7da565f 100644
--- a/docs/get-started/whats-a-story.mdx
+++ b/docs/get-started/whats-a-story.mdx
@@ -9,9 +9,21 @@ A story captures the rendered state of a UI component. Developers write multiple
 
 When you installed Storybook, the CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.
 
-Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples.
+<If renderer="svelte">
 
-Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
+  Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.svelte`. Stories can be written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples or using Svelte native template syntax, via a community-led project called [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf).
+
+  Let’s start with the `Button` component. With Svelte, a story can be defined as an object using standard CSF or with a `Story` component using Svelte CSF. Here’s how to render `Button` in the “primary” state and export a story called `Primary` using both approaches.
+
+</If>
+
+<If notRenderer="svelte">
+  
+  Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples.
+
+  Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -40,6 +52,16 @@ Storybook makes it easy to work on one component in one state (aka a story) at a
   You can also create a story file for your new story. We recommend copy/pasting an existing story file next to the component source file, then adjusting it for your component.
 </If>
 
+<If renderer="svelte">
+
+  <Callout variant="info">
+
+    This feature is not supported with the Svelte template syntax story format. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+    
+  </Callout>
+  
+</If>
+
 <If notRenderer="react">
   If you're working on a component that does not yet have any stories, you can create a story file for your component with a new story. We recommend copy/pasting an existing story file next to the component source file, then adjusting it for your component.
 </If>
diff --git a/docs/writing-docs/autodocs.mdx b/docs/writing-docs/autodocs.mdx
index b78935a1a2b3..02e5b77db8ec 100644
--- a/docs/writing-docs/autodocs.mdx
+++ b/docs/writing-docs/autodocs.mdx
@@ -96,7 +96,7 @@ You can also use MDX to generate the documentation template. This is useful in n
 
 {/* prettier-ignore-end */}
 
-Then you can use it in your `.storybook/preview.js` or an individual story file by importing it:
+Then you can use it in your `.storybook/preview.js|ts` or an individual story file by importing it:
 
 {/* prettier-ignore-start */}
 
@@ -112,7 +112,7 @@ Then you can use it in your `.storybook/preview.js` or an individual story file
 
 ### Generate a table of contents
 
-Storybook's auto-generated documentation pages can be quite long and difficult to navigate. To help with this, you can enable the table of contents feature to provide a quick overview of the documentation page and allow users to jump to a specific section. To enable it, extend your Storybook UI configuration file (i.e., `.storybook/preview.js`) and provide a `docs` [parameter](../writing-stories/parameters.mdx#global-parameters) with a `toc` property.
+Storybook's auto-generated documentation pages can be quite long and difficult to navigate. To help with this, you can enable the table of contents feature to provide a quick overview of the documentation page and allow users to jump to a specific section. To enable it, extend your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) and provide a `docs` [parameter](../writing-stories/parameters.mdx#global-parameters) with a `toc` property.
 
 {/* prettier-ignore-start */}
 
@@ -169,7 +169,7 @@ Autodocs allows you to document your "main" component, defined by the `component
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-with-subcomponents.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-subcomponents" />
+<CodeSnippets path="list-story-with-subcomponents.md" />
 
 {/* prettier-ignore-end */}
 
@@ -181,7 +181,7 @@ If you want to organize your documentation differently for component groups, we
 
 ### Customize the Docs Container
 
-The Docs Container is the component that wraps up the documentation page. It's responsible for rendering the documentation page in Storybook's UI. You can customize it by creating your own component and updating your Storybook UI configuration file (i.e., `.storybook/preview.js`) to reference it.
+The Docs Container is the component that wraps up the documentation page. It's responsible for rendering the documentation page in Storybook's UI. You can customize it by creating your own component and updating your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) to reference it.
 
 {/* prettier-ignore-start */}
 
@@ -191,7 +191,7 @@ The Docs Container is the component that wraps up the documentation page. It's r
 
 ### Override the default theme
 
-By default, Storybook provides two themes for the UI: `light` and `dark`. If you need to customize the theme used by the documentation to match the existing one, you can update your Storybook UI configuration file (i.e., `.storybook/preview.js`) and apply it.
+By default, Storybook provides two themes for the UI: `light` and `dark`. If you need to customize the theme used by the documentation to match the existing one, you can update your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) and apply it.
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/writing-docs/mdx.mdx b/docs/writing-docs/mdx.mdx
index 2f73ab8fb2d3..45694464105b 100644
--- a/docs/writing-docs/mdx.mdx
+++ b/docs/writing-docs/mdx.mdx
@@ -33,7 +33,7 @@ This MDX file references a story file, `Checkbox.stories.js|ts`, that is written
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="checkbox-story-csf.md" usesCsf3 csf2Path="writing-docs/mdx#snippet-checkbox-story-csf" />
+<CodeSnippets path="checkbox-story-csf.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/args.mdx b/docs/writing-stories/args.mdx
index 94b12059142d..f23a58d8d007 100644
--- a/docs/writing-stories/args.mdx
+++ b/docs/writing-stories/args.mdx
@@ -19,11 +19,21 @@ The `args` object can be defined at the [story](#story-args), [component](#compo
 
 ## Story args
 
-To define the args of a single story, use the `args` CSF story key:
+<IfRenderer renderer="svelte">
+
+  To define the args of a single story, use the `args` property in the `Story` component if you are using Svelte CSF with the native templating syntax, or use the `args` key on a CSF story file:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  To define the args of a single story, use the `args` CSF story key:
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-args.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-with-args" />
+<CodeSnippets path="button-story-with-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -31,7 +41,7 @@ These args will only apply to the story for which they are attached, although yo
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-primary-long-name.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-primary-long-name" />
+<CodeSnippets path="button-story-primary-long-name.md" />
 
 {/* prettier-ignore-end */}
 
@@ -39,7 +49,17 @@ In the above example, we use the [object spread](https://developer.mozilla.org/e
 
 ## Component args
 
-You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` key on the `default` CSF export:
+<IfRenderer renderer="svelte">
+
+  You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` property in the `defineMeta` function of a Svelte CSF story file or via the `args` key on the default CSF export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` key on the `default` CSF export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -49,7 +69,7 @@ You can also define args at the component level; they will apply to all the comp
 
 ## Global args
 
-You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, define the `args` property in the default export of `preview.js`:
+You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, define the `args` property in the default export of `preview.js|ts`:
 
 {/* prettier-ignore-start */}
 
@@ -67,7 +87,7 @@ You can separate the arguments to a story to compose in other stories. Here's ho
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-primary-composition.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-primary-composition" />
+<CodeSnippets path="button-story-primary-composition.md" />
 
 {/* prettier-ignore-end */}
 
@@ -79,7 +99,7 @@ Args are useful when writing stories for composite components that are assembled
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="page-story.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story" />
+<CodeSnippets path="page-story.md" />
 
 {/* prettier-ignore-end */}
 
@@ -92,7 +112,7 @@ Args are useful when writing stories for composite components that are assembled
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="page-story-slots.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story-slots" />
+  <CodeSnippets path="page-story-slots.md" />
 
   {/* prettier-ignore-end */}
 </IfRenderer>
diff --git a/docs/writing-stories/decorators.mdx b/docs/writing-stories/decorators.mdx
index e155bcb33002..c8d86cff5a54 100644
--- a/docs/writing-stories/decorators.mdx
+++ b/docs/writing-stories/decorators.mdx
@@ -13,15 +13,45 @@ When writing stories, decorators are typically used to wrap stories with extra m
 
 ## Wrap stories with extra markup
 
-Some components require a “harness” to render in a useful way. For instance, if a component runs right up to its edges, you might want to space it inside Storybook. Use a decorator to add spacing for all stories of the component.
+<IfRenderer renderer="svelte">
 
-![Story without padding](../_assets/writing-stories/decorators-no-padding.png)
+  Some components require a “harness” to render in a useful way. For instance, if a component runs right up to its edges, you might want to space it inside Storybook. With Svelte, you'll need to take additional steps to set it up properly.
 
-{/* prettier-ignore-start */}
+  ![Story without padding](../_assets/writing-stories/decorators-no-padding.png)
+
+  Start by creating a new Svelte component that will act as a decorator. This component will wrap your story and provide the required spacing or layout elements.
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="margindecorator.md" />
+
+  {/* prettier-ignore-end */}
+
+  Update your story to include the component and reference it to apply the required spacing or other functionality for all its stories.
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="your-component-with-decorator.md" />
+
+  {/* prettier-ignore-end */}
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  Some components require a “harness” to render in a useful way. For instance, if a component runs right up to its edges, you might want to space it inside Storybook. Use a decorator to add spacing for all stories of the component.
+
+  ![Story without padding](../_assets/writing-stories/decorators-no-padding.png)
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="your-component-with-decorator.md" />
+
+  {/* prettier-ignore-end */}
+
+</If>
 
-<CodeSnippets path="your-component-with-decorator.md" />
 
-{/* prettier-ignore-end */}
 
 ![Story with padding](../_assets/writing-stories/decorators-padding.png)
 
@@ -55,11 +85,21 @@ If your components are “connected” and require side-loaded data to render, y
 
 ## Story decorators
 
-To define a decorator for a single story, use the `decorators` key on a named export:
+<IfRenderer renderer="svelte">
+
+  To define a decorator for a single story, use the `decorators` property in the `Story` component if you are using Svelte CSF with the native templating syntax, or use the `decorators` key on a CSF named export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  To define a decorator for a single story, use the `decorators` key on a named export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-decorator.md" usesCsf3 csf2Path="writing-stories/decorators#snippet-button-story-decorator" />
+<CodeSnippets path="button-story-decorator.md" />
 
 {/* prettier-ignore-end */}
 
@@ -67,7 +107,17 @@ It is useful to ensure that the story remains a “pure” rendering of the comp
 
 ## Component decorators
 
-To define a decorator for all stories of a component, use the `decorators` key of the default CSF export:
+<IfRenderer renderer="svelte">
+
+  To define a decorator for all component stories, include the `decorators` property in the `defineMeta` function of a Svelte CSF story file. Alternatively, use the `decorators` key on the default CSF export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  To define a decorator for all stories of a component, use the `decorators` key of the default CSF export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -77,7 +127,7 @@ To define a decorator for all stories of a component, use the `decorators` key o
 
 ## Global decorators
 
-We can also set a decorator for **all stories** via the `decorators` export of your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
+We can also set a decorator for **all stories** via the `decorators` export of your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
index 72ec0bf088da..cc8e00ded1b3 100644
--- a/docs/writing-stories/index.mdx
+++ b/docs/writing-stories/index.mdx
@@ -7,50 +7,104 @@ sidebar:
 
 <YouTubeCallout id="P0WHt_L0-2g" title="How to write Storybook stories | Component Story Format" />
 
-A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set of arguments.
+<If renderer="svelte">
+
+  A story captures the rendered state of a UI component. Given a set of arguments, it can be a simple object with annotations or a component that describes its behavior and appearance.
+
+</If>
+
+<If notRenderer="svelte">
+
+  A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set of arguments.
+
+</If>
 
 Storybook uses the generic term arguments (args for short) when talking about React’s `props`, Vue’s `props`, Angular’s `@Input`, and other similar concepts.
 
 ## Where to put stories
 
-A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle. In your filesytem, it looks something like this:
+A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle. In your filesystem, it looks something like this:
 
 ```
 components/
 ├─ Button/
 │  ├─ Button.js | ts | jsx | tsx | vue | svelte
-│  ├─ Button.stories.js | ts | jsx | tsx
+│  ├─ Button.stories.js | ts | jsx | tsx | svelte
 ```
 
 ## Component Story Format
 
-We define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
+<If renderer="svelte">
+
+  We can define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools, or rely on the community-led project [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf) which provides a similar experience. 
+   
+  With Svelte CSF, the essential elements are the `defineMeta` function, which describes the component, and the `Story` component, which describes the stories. This pattern is different from the standard CSF, which uses a [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) to apply the same concepts.
+  
+</If>
+
+<If notRenderer="svelte">
+
+  We define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
 
-The key ingredients are the [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.
+  The key ingredients are the [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.
+
+</If>
 
 ### Default export
 
-The *default* export metadata controls how Storybook lists your stories and provides information used by addons. For example, here’s the default export for a story file `Button.stories.js|ts`:
+<If renderer="svelte">
 
-{/* prettier-ignore-start */}
+  The `defineMeta` function in Svelte CSF with native templating syntax controls how Storybook lists your stories and provides information used by addons. However, if you're not using this story format and relying on standard CSF, use the *default* export to achieve the same result. Below is an example of a story file with both approaches:
 
-<CodeSnippets path="button-story-default-export-with-component.md" />
+  {/* prettier-ignore-start */}
 
-{/* prettier-ignore-end */}
+  <CodeSnippets path="button-story-default-export-with-component.md" />
 
-<Callout variant="info">
+  {/* prettier-ignore-end */}
 
-  Starting with Storybook version 7.0, story titles are analyzed statically as part of the build process. The *default* export must contain a `title` property that can be read statically or a `component` property from which an automatic title can be computed. Using the `id` property to customize your story URL must also be statically readable.
+  <Callout variant="info">
+
+    Starting with Storybook version 7.0, story titles are analyzed statically as part of the build process. With Svelte, the `defineMeta` function or *default* export must contain a `title` property that can be read statically. Using the `id` property to customize your story URL must also be statically readable.
+
+  </Callout>
+
+</If>
+
+<If notRenderer="svelte">
+
+  The *default* export metadata controls how Storybook lists your stories and provides information used by addons. For example, here’s the default export for a story file `Button.stories.js|ts`:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="button-story-default-export-with-component.md" />
+
+  {/* prettier-ignore-end */}
+
+  <Callout variant="info">
+
+    Starting with Storybook version 7.0, story titles are analyzed statically as part of the build process. The *default* export must contain a `title` property that can be read statically or a `component` property from which an automatic title can be computed. Using the `id` property to customize your story URL must also be statically readable.
   
-</Callout>
+  </Callout>
+
+</If>
 
 ### Defining stories
 
-Use the *named* exports of a CSF file to define your component’s stories. 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`.
+<If renderer="svelte">
+ 
+    If you're using Svelte CSF with the native template syntax, define your stories with the `Story` component or 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>
+
+<If notRenderer="svelte">
+
+  Use the *named* exports of a CSF file to define your component’s stories. 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`.
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-args.md" usesCsf3 csf2Path="get-started/whats-a-story#snippet-button-story-with-args" />
+<CodeSnippets path="button-story-with-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -61,7 +115,7 @@ Use the *named* exports of a CSF file to define your component’s stories. We r
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="button-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-with-hooks" />
+  <CodeSnippets path="button-story.md" />
 
   {/* prettier-ignore-end */}
 </IfRenderer>
@@ -73,7 +127,7 @@ Use the *named* exports of a CSF file to define your component’s stories. We r
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="button-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-with-hooks" />
+  <CodeSnippets path="button-story.md" />
 
   {/* prettier-ignore-end */}
 </IfRenderer>
@@ -84,7 +138,7 @@ You can rename any particular story you need. For instance, to give it a more ac
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-rename-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-rename-story" />
+<CodeSnippets path="button-story-rename-story.md" />
 
 {/* prettier-ignore-end */}
 
@@ -96,11 +150,23 @@ Your story will now be shown in the sidebar with the given text.
 
 ## How to write stories
 
-A story is an object that describes how to render a component. You can have multiple stories per component, and those stories can build upon one another. For example, we can add Secondary and Tertiary stories based on our Primary story from above.
+
+<IfRenderer renderer="svelte">
+
+  With Svelte, stories can be defined as objects using standard CSF or with Svelte CSF's `Story` component. Both methods describe how to render a component. You can have multiple stories per component, and those stories can build upon one another. For example, we can add Secondary and Tertiary stories based on our Primary story above.
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  A story is an object that describes how to render a component. You can have multiple stories per component, and those stories can build upon one another. For example, we can add Secondary and Tertiary stories based on our Primary story from above.
+
+</If>
+
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-using-args.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-using-args" />
+<CodeSnippets path="button-story-using-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -108,7 +174,7 @@ What’s more, you can import `args` to reuse when writing stories for other com
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-group-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-group-story" />
+<CodeSnippets path="button-group-story.md" />
 
 {/* prettier-ignore-end */}
 
@@ -122,6 +188,16 @@ You can also use the Controls panel to edit or save a new story after adjusting
 
 <Video src="../_assets/get-started/edit-story-from-controls-optimized.mp4" />
 
+<If renderer="svelte">
+
+  <Callout variant="info">
+
+    This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+  
+  </Callout>
+  
+</If>
+
 Addons can enhance args. For instance, [Actions](../essentials/actions.mdx) auto-detects which args are callbacks and appends a logging function to them. That way, interactions (like clicks) get logged in the actions panel.
 
 <Video src="../_assets/writing-stories/addon-actions-demo-optimized.mp4" />
@@ -132,7 +208,7 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-stories/#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 Without the help of the `play` function and the `@storybook/addon-interactions`, you had to write your own stories and manually interact with the component to test out each use case scenario possible.
 
@@ -156,7 +232,24 @@ This parameter would instruct the backgrounds addon to reconfigure itself whenev
 
 Decorators are a mechanism to wrap a component in arbitrary markup when rendering a story. Components are often created with assumptions about ‘where’ they render. Your styles might expect a theme or layout wrapper, or your UI might expect specific context or data providers.
 
-A simple example is adding padding to a component’s stories. Accomplish this using a decorator that wraps the stories in a `div` with padding, like so:
+<IfRenderer renderer="svelte">
+  
+  A simple example is adding padding to a component’s stories. With Svelte, you must use an auxiliary component to wrap your stories with the required spacing or layout elements.
+   
+  { /* prettier-ignore-start */}
+  
+  <CodeSnippets path="margindecorator.md" />
+  
+  { /* prettier-ignore-end */}
+  
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  A simple example is adding padding to a component’s stories. Accomplish this using a decorator that wraps the stories in a `div` with padding, like so:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -172,7 +265,7 @@ Sometimes you may have two or more components created to work together. For inst
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-starter.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-starter" />
+<CodeSnippets path="list-story-starter.md" />
 
 {/* prettier-ignore-end */}
 
@@ -180,7 +273,7 @@ In such cases, it makes sense to render a different function for each story:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-expanded.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-expanded" />
+<CodeSnippets path="list-story-expanded.md" />
 
 {/* prettier-ignore-end */}
 
@@ -188,7 +281,7 @@ You can also reuse *story data* from the child `ListItem` in your `List` compone
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-reuse-data.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-reuse-data" />
+<CodeSnippets path="list-story-reuse-data.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/parameters.mdx b/docs/writing-stories/parameters.mdx
index 187b54bd2c24..56726601eb2a 100644
--- a/docs/writing-stories/parameters.mdx
+++ b/docs/writing-stories/parameters.mdx
@@ -17,17 +17,37 @@ For example, let’s customize the backgrounds addon via a parameter. We’ll us
 
 ## Story parameters
 
-We can set a parameter for a single story with the `parameters` key on a CSF export:
+<IfRenderer renderer="svelte">
+
+ With Svelte, we can set the `parameters` property in the `Story` component to define parameters for a single story using Svelte CSF with the native templating syntax, or we can use the `parameters` key on a CSF named export:
+ 
+</IfRenderer>
+
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'react', 'preact', 'qwik', 'solid' ]}>
+
+  We can set a parameter for a single story with the `parameters` key on a CSF export:
+
+</IfRenderer>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="parameters-in-story.md" usesCsf3 csf2Path="writing-stories/parameters#snippet-component-story-custom-params" />
+<CodeSnippets path="parameters-in-story.md" />
 
 {/* prettier-ignore-end */}
 
 ## Component parameters
 
-We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
+<IfRenderer renderer="svelte">
+ 
+  To define parameters for all stories of a component, we can add the `parameters` property in the `defineMeta` function of a Svelte CSF story file, or we can use the `parameters` key on the default CSF export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -37,7 +57,7 @@ We can set the parameters for all stories of a component using the `parameters`
 
 ## Global parameters
 
-We can also set the parameters for **all stories** via the `parameters` export of your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
+We can also set the parameters for **all stories** via the `parameters` export of your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
 
 {/* prettier-ignore-start */}
 
@@ -52,8 +72,8 @@ Setting a global parameter is a common way to configure addons. With backgrounds
 The way the global, component and story parameters are combined is:
 
 * More specific parameters take precedence (so a story parameter overwrites a component parameter which overwrites a global parameter).
-* Parameters are **merged** so keys are only ever overwritten, never dropped.
+* Parameters are **merged**, so keys are only ever overwritten and never dropped.
 
-The merging of parameters is important. It means it is possible to override a single specific sub-parameter on a per-story basis but still retain the majority of the parameters defined globally.
+The merging of parameters is important. This means it is possible to override a single specific sub-parameter on a per-story basis while retaining most of the parameters defined globally.
 
-If you are defining an API that relies on parameters (e.g. an [**addon**](../addons/index.mdx)) it is a good idea to take this behavior into account.
+If you are defining an API that relies on parameters (e.g., an [**addon**](../addons/index.mdx)) it is a good idea to take this behavior into account.
diff --git a/docs/writing-stories/play-function.mdx b/docs/writing-stories/play-function.mdx
index eac0bcd4b84a..b6afc7219bf0 100644
--- a/docs/writing-stories/play-function.mdx
+++ b/docs/writing-stories/play-function.mdx
@@ -35,7 +35,7 @@ Storybook's `play` functions are small code snippets that run once the story fin
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="register-component-with-play-function.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-register-component-with-play-function" />
+<CodeSnippets path="register-component-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -51,7 +51,7 @@ Thanks to the [Component Story Format](../api/csf.mdx), an ES6 module based file
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-composition.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-composition" />
+<CodeSnippets path="my-component-play-function-composition.md" />
 
 {/* prettier-ignore-end */}
 
@@ -65,7 +65,7 @@ A common type of component interaction is a button click. If you need to reprodu
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-clickevent.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-clickevent" />
+<CodeSnippets path="my-component-play-function-with-clickevent.md" />
 
 {/* prettier-ignore-end */}
 
@@ -75,7 +75,7 @@ Asides from click events, you can also script additional events with the `play`
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-selectevent.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-selectevent" />
+<CodeSnippets path="my-component-play-function-with-selectevent.md" />
 
 {/* prettier-ignore-end */}
 
@@ -83,7 +83,7 @@ In addition to events, you can also create interactions with the `play` function
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-delay.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-delay" />
+<CodeSnippets path="my-component-play-function-with-delay.md" />
 
 {/* prettier-ignore-end */}
 
@@ -93,7 +93,7 @@ You can also use the `play` function to verify the existence of an element based
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-waitfor.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-waitfor" />
+<CodeSnippets path="my-component-play-function-waitfor.md" />
 
 {/* prettier-ignore-end */}
 
@@ -103,7 +103,7 @@ If you need, you can also adjust your `play` function to find elements based on
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-alt-queries.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-alt-queries" />
+<CodeSnippets path="my-component-play-function-alt-queries.md" />
 
 {/* prettier-ignore-end */}
 
@@ -117,7 +117,7 @@ Otherwise, if the component is not immediately available, for instance, due to a
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-query-findby.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-query-findby" />
+<CodeSnippets path="my-component-play-function-query-findby.md" />
 
 {/* prettier-ignore-end */}
 
@@ -127,7 +127,7 @@ By default, each interaction you write inside your `play` function will be execu
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-canvas.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-canvas" />
+<CodeSnippets path="my-component-play-function-with-canvas.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx
index e590b6d7ed3a..ccbb9cedf1bc 100644
--- a/docs/writing-stories/typescript.mdx
+++ b/docs/writing-stories/typescript.mdx
@@ -54,7 +54,7 @@ Sometimes stories need to define args that aren’t included in the component's
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="page-story-slots.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story-slots" />
+<CodeSnippets path="page-story-slots.md"  />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
index c5560e85daf4..9d04907b17b5 100644
--- a/docs/writing-tests/accessibility-testing.mdx
+++ b/docs/writing-tests/accessibility-testing.mdx
@@ -43,7 +43,7 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-with-accessibility.md" usesCsf3 csf2Path="writing-tests/accessibility-testing#snippet-component-story-with-accessibility" />
+<CodeSnippets path="component-story-with-accessibility.md" />
 
 {/* prettier-ignore-end */}
 
@@ -67,7 +67,17 @@ If you need to dismiss an accessibility rule or modify its settings across all s
 
 #### Component-level a11y configuration
 
-You can also customize your own set of rules for all stories of a component. Update your story's default export and add a parameter with the required configuration:
+<IfRenderer renderer="svelte">
+
+  You can also customize your own set of rules for all stories of a component. If you're using Svelte CSF with the native templating syntax, you can update the `defineMeta` function or the default export of the CSF story and provide the required configuration:
+
+</IfRenderer>
+
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'react', 'preact', 'qwik', 'solid']}>
+
+  You can also customize your own set of rules for all stories of a component. Update your story's default export and add a parameter with the required configuration:
+
+</IfRenderer>
 
 {/* prettier-ignore-start */}
 
@@ -81,17 +91,28 @@ Customize the a11y ruleset at the story level by updating your story to include
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-addon-a11y-story-config.md" usesCsf3 csf2Path="writing-tests/accessibility-testing#snippet-storybook-addon-a11y-story-config" />
+<CodeSnippets path="storybook-addon-a11y-story-config.md" />
 
 {/* prettier-ignore-end */}
 
 #### How to disable a11y tests
 
-Disable accessibility testing for stories or components by adding the following parameter to your story’s export or component’s default export respectively:
+<IfRenderer renderer="svelte">
+
+  If you are using Svelte CSF, you can turn off accessibility testing for stories or components by adding a parameter to your story or adjusting the defineMeta function with the required configuration. With a regular CSF story, you can add the following to your story's export or component's default export:
+  
+</IfRenderer>
+
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'react', 'preact', 'qwik', 'solid']}>
+
+  Disable accessibility testing for stories or components by adding the following parameter to your story’s export or component’s default export respectively:
+
+</IfRenderer>
+
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-addon-a11y-disable.md" usesCsf3 csf2Path="writing-tests/accessibility-testing#snippet-storybook-addon-a11y-disable" />
+<CodeSnippets path="storybook-addon-a11y-disable.md" />
 
 {/* prettier-ignore-end */}
 

From 12421475e4a2d700b5bb0a180585bb08907f5aff Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 5 Nov 2024 14:44:51 +0000
Subject: [PATCH 02/12] Minor polish to the examples

---
 docs/_snippets/button-group-story.md                        | 6 +++---
 docs/_snippets/button-story-component-args-primary.md       | 4 +---
 docs/_snippets/button-story-component-decorator.md          | 2 +-
 docs/_snippets/checkbox-story-csf.md                        | 6 +++---
 docs/_snippets/component-story-disable-controls-alt.md      | 2 +-
 docs/_snippets/component-story-disable-controls-regex.md    | 5 +----
 docs/_snippets/component-story-sort-controls.md             | 3 +--
 docs/_snippets/component-story-static-asset-with-import.md  | 4 ++--
 .../component-story-static-asset-without-import.md          | 2 +-
 docs/_snippets/component-story-with-accessibility.md        | 6 +++---
 10 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index 8b2fe3766d62..c3ae9f62dfd8 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -161,7 +161,7 @@ export const Pair: Story = {
 ```
 
 ```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK if pattern is possible -->
+<!-- TK: if pattern is possible -->
 ```
 
 ```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
@@ -183,7 +183,7 @@ export const Pair = {
 ```
 
 ```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK if pattern is possible -->
+<!-- TK: if pattern is possible -->
 ```
 
 ```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -210,7 +210,7 @@ export const Pair: Story = {
 ```
 
 ```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK if pattern is possible -->
+<!-- TK: if pattern is possible -->
 ```
 
 ```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
index 9dabf008185e..16519e18cd48 100644
--- a/docs/_snippets/button-story-component-args-primary.md
+++ b/docs/_snippets/button-story-component-args-primary.md
@@ -52,7 +52,6 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
@@ -93,7 +92,7 @@ export default {
 ```
 
 ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
-import type { Meta, StoryObj } from 'storybook-solidjs';
+import type { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
@@ -110,7 +109,6 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 ```
 
 ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index 5f2929bcc764..72240b8c9977 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -241,7 +241,7 @@ import MarginDecorator from './MarginDecorator.svelte';
 const meta = {
   component: Button,
   decorators: [() => MarginDecorator],
-} satisfies Meta<typeof YourComponent>;
+} satisfies Meta<typeof Button>;
 
 export default meta;
 ```
diff --git a/docs/_snippets/checkbox-story-csf.md b/docs/_snippets/checkbox-story-csf.md
index 6e35e8e04ab2..b277479d0b13 100644
--- a/docs/_snippets/checkbox-story-csf.md
+++ b/docs/_snippets/checkbox-story-csf.md
@@ -31,7 +31,7 @@ export const Unchecked: Story = {
 <Story
   name="Unchecked"
   args={{
-    label: 'Unchecked'
+    label: 'Unchecked',
   }}
 />
 ```
@@ -78,7 +78,7 @@ export const Unchecked = {
 <Story
   name="Unchecked"
   args={{
-    label: 'Unchecked'
+    label: 'Unchecked',
   }}
 />
 ```
@@ -136,7 +136,7 @@ export const Unchecked: Story = {
 <Story
   name="Unchecked"
   args={{
-    label: 'Unchecked'
+    label: 'Unchecked',
   }}
 />
 ```
diff --git a/docs/_snippets/component-story-disable-controls-alt.md b/docs/_snippets/component-story-disable-controls-alt.md
index 072ae8812ace..85ccf46b7747 100644
--- a/docs/_snippets/component-story-disable-controls-alt.md
+++ b/docs/_snippets/component-story-disable-controls-alt.md
@@ -127,7 +127,7 @@ export default meta;
   import YourComponent from './YourComponent.svelte';
 
   const { Story } = defineMeta({
-    component: Histogram,
+    component: YourComponent,
     argTypes: {
       // foo is the property we want to remove from the UI
       foo: {
diff --git a/docs/_snippets/component-story-disable-controls-regex.md b/docs/_snippets/component-story-disable-controls-regex.md
index ca361955899d..ccc81f8a65e0 100644
--- a/docs/_snippets/component-story-disable-controls-regex.md
+++ b/docs/_snippets/component-story-disable-controls-regex.md
@@ -47,7 +47,6 @@ export const RegexExclude: Story = {
   });
 </script>
 
-
 <Story
   name="ArrayInclude"
   parameters={{
@@ -153,7 +152,6 @@ export const RegexExclude = {
   });
 </script>
 
-
 <Story
   name="ArrayInclude"
   parameters={{
@@ -270,7 +268,6 @@ export const RegexExclude: Story = {
   });
 </script>
 
-
 <Story
   name="ArrayInclude"
   parameters={{
@@ -300,7 +297,7 @@ export const RegexExclude: Story = {
 />
 ```
 
-```ts filename="YourComponent.stories.ts|tsx" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
diff --git a/docs/_snippets/component-story-sort-controls.md b/docs/_snippets/component-story-sort-controls.md
index 0a4d9112a1e5..cc41037323e3 100644
--- a/docs/_snippets/component-story-sort-controls.md
+++ b/docs/_snippets/component-story-sort-controls.md
@@ -99,8 +99,7 @@ export default meta;
 ```
 
 ```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
+import type { Meta } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
 
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index f324cdf62573..58deb0903147 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -211,7 +211,7 @@ export const WithAnImage = {
 };
 ```
 
-```svelte filename="MyComponent.stories.svelte" renderer="svelte"language="ts-4-9" tabTitle="Svelte CSF"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <!-- TODO: Vet this example against recommendation -->
 
 <script module>
@@ -265,7 +265,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```svelte filename="MyComponent.stories.svelte" renderer="svelte"language="ts" tabTitle="Svelte CSF"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <!-- TODO: Vet this example against recommendation -->
 
 <script module>
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index a3459b4306cb..ce94126a3951 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -203,7 +203,7 @@ export const WithAnImage: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vetthis example against recommendation -->
+<!-- TODO: Vet this example against recommendation -->
 
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
diff --git a/docs/_snippets/component-story-with-accessibility.md b/docs/_snippets/component-story-with-accessibility.md
index fae081ed47de..c738b45b0757 100644
--- a/docs/_snippets/component-story-with-accessibility.md
+++ b/docs/_snippets/component-story-with-accessibility.md
@@ -229,7 +229,7 @@ export const Inaccessible: Story = {
 <Story name="Accessible" args={{ primary: false, label: 'Button' }} />
 
 <!-- This is not -->
-<Story name="Inaccessible" args={{ primary: false, label: 'Button' backgroundColor: 'red' }} />
+<Story name="Inaccessible" args={{ primary: false, label: 'Button', backgroundColor: 'red' }} />
 ```
 
 ```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
@@ -277,7 +277,7 @@ export const Inaccessible = {
 <Story name="Accessible" args={{ primary: false, label: 'Button' }} />
 
 <!-- This is not -->
-<Story name="Inaccessible" args={{ primary: false, label: 'Button' backgroundColor: 'red' }} />
+<Story name="Inaccessible" args={{ primary: false, label: 'Button', backgroundColor: 'red' }} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -330,7 +330,7 @@ export const Inaccessible: Story = {
 <Story name="Accessible" args={{ primary: false, label: 'Button' }} />
 
 <!-- This is not -->
-<Story name="Inaccessible" args={{ primary: false, label: 'Button' backgroundColor: 'red' }} />
+<Story name="Inaccessible" args={{ primary: false, label: 'Button', backgroundColor: 'red' }} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"

From 4b58748c52f4c4f59539ca3d814319015d63aa06 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 5 Nov 2024 17:01:45 +0000
Subject: [PATCH 03/12] Updates to the CSF api snippets

---
 ...utton-story-click-handler-simplificated.md | 23 -------------------
 docs/_snippets/button-story-click-handler.md  | 17 --------------
 2 files changed, 40 deletions(-)

diff --git a/docs/_snippets/button-story-click-handler-simplificated.md b/docs/_snippets/button-story-click-handler-simplificated.md
index 7c15bd02541b..983d07c5a843 100644
--- a/docs/_snippets/button-story-click-handler-simplificated.md
+++ b/docs/_snippets/button-story-click-handler-simplificated.md
@@ -119,28 +119,6 @@ export const Text = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  import Button from './Button.svelte';
-</script>
-
-{/*
-  See https://storybook.js.org/docs/essentials/actions#action-argtype-annotation
-  to learn how to set up argTypes for actions
-*/}
-
-<Meta title="Button" component={Button} argTypes={{ onClick: { action: "onClick" }, }} />
-
-<template let:args>
-  <button {...args} on:click="{args.onClick}" />
-</template>
-
-<Story name="Text" args={{ label: 'Hello' }}/>
-```
-
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
@@ -262,4 +240,3 @@ export const Text: Story = {
   args: {},
 };
 ```
-
diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md
index c9b2e1a206d1..731f41ac6a79 100644
--- a/docs/_snippets/button-story-click-handler.md
+++ b/docs/_snippets/button-story-click-handler.md
@@ -149,22 +149,6 @@ export const Text = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
-
-  import { action } from '@storybook/addon-actions';
-
-  import Button from './Button.svelte';
-</script>
-
-<meta title="Button" component="{Button}" />
-
-<Story name="Text"> <Button text="Hello" on:click={action('clicked')}/> </Story>
-```
-
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { action } from '@storybook/addon-actions';
@@ -323,4 +307,3 @@ export const Text: Story = {
   render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 };
 ```
-

From 9775de12969debd6b760ee1014adbacfa03f9749 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 12 Nov 2024 14:36:15 +0100
Subject: [PATCH 04/12] update "writing stories" docs and snippets for svelte
 csf

---
 docs/_snippets/button-group-story.md          | 115 +++++++++++++++++-
 .../button-story-component-decorator.md       |   8 +-
 docs/_snippets/button-story-using-args.md     |   3 -
 docs/_snippets/list-story-expanded.md         |  97 +++++++++++++--
 docs/_snippets/margindecorator.md             |  15 +--
 docs/writing-stories/index.mdx                |   4 +-
 6 files changed, 210 insertions(+), 32 deletions(-)

diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index c3ae9f62dfd8..1d70b315ff29 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -1,4 +1,4 @@
-```ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
+````ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { moduleMetadata } from '@storybook/angular';
@@ -48,7 +48,7 @@ export const Pair = {
     orientation: 'horizontal',
   },
 };
-```
+````
 
 ```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
@@ -161,7 +161,42 @@ export const Pair: Story = {
 ```
 
 ```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: if pattern is possible -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Primary"
+  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"
@@ -183,7 +218,42 @@ export const Pair = {
 ```
 
 ```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: if pattern is possible -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Primary"
+  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"
@@ -210,7 +280,42 @@ export const Pair: Story = {
 ```
 
 ```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: if pattern is possible -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Primary"
+  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 72240b8c9977..7ff333389d57 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -199,9 +199,7 @@ export default meta;
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => ({
-      Component: MarginDecorator,
-    })],
+    decorators: [() => MarginDecorators],
   });
 </script>
 ```
@@ -225,9 +223,7 @@ export default {
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => ({
-      Component: MarginDecorator,
-    })],
+    decorators: [() => MarginDecorators],
   });
 </script>
 ```
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index 03150c37525a..c5ca17f777f3 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -313,7 +313,6 @@ export const Tertiary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -379,8 +378,6 @@ export const Tertiary = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/list-story-expanded.md b/docs/_snippets/list-story-expanded.md
index 95d98f6cc8f5..f1c321b828d2 100644
--- a/docs/_snippets/list-story-expanded.md
+++ b/docs/_snippets/list-story-expanded.md
@@ -359,19 +359,102 @@ export const ManyItems: Story = {
 ```
 
 ```svelte filename="List.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!--
-  TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly
-  This is a special case as the CSF JS/TS Storybook versions don't support the component "directive"
-  It's referenced in the Writing Docs/Index.mdx file (https://storybook.js.org/docs/writing-stories#stories-for-two-or-more-components)
--->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<Story name="Empty" />
+
+<Story name="One Item">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
+
+<Story name="Many Items">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
 ```
 
 ```svelte filename="List.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<Story name="Empty" />
+
+<Story name="One Item">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
+
+<Story name="Many Items">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
 ```
 
 ```svelte filename="List.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<Story name="Empty" />
+
+<Story name="One Item">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
+
+<Story name="Many Items">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
 ```
 
 ```js filename="List.stories.js" renderer="vue" language="js"
diff --git a/docs/_snippets/margindecorator.md b/docs/_snippets/margindecorator.md
index d184d839be2b..82545e73b08b 100644
--- a/docs/_snippets/margindecorator.md
+++ b/docs/_snippets/margindecorator.md
@@ -1,5 +1,4 @@
 ```svelte filename="MarginDecorator.svelte" renderer="svelte" language="js" tabTitle="Svelte 4"
-<!-- TK: Vet this against recommendation -->
 <div>
   <slot />
 </div>
@@ -12,13 +11,12 @@
 ```
 
 ```svelte filename="MarginDecorator.svelte" renderer="svelte" language="js" tabTitle="Svelte 5"
-<!-- TK: Vet this against recommendation -->
 <script>
-	let { children } = $props();
+  let { children } = $props();
 </script>
 
 <div>
-	{@render children()}
+  {@render children()}
 </div>
 
 <style>
@@ -29,7 +27,6 @@
 ```
 
 ```svelte filename="MarginDecorator.svelte" renderer="svelte" language="ts" tabTitle="Svelte 4"
-<!-- TK: Vet this against recommendation -->
 <div>
   <slot />
 </div>
@@ -42,14 +39,14 @@
 ```
 
 ```svelte filename="MarginDecorator.svelte" renderer="svelte" language="ts" tabTitle="Svelte 5"
-<!-- TK: Vet this against recommendation -->
 <script>
-	// @ts-nocheck
-	let { children } = $props();
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children: Snippet } = $props();
 </script>
 
 <div>
-	{@render children()}
+  {@render children()}
 </div>
 
 <style>
diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
index cc8e00ded1b3..05338e3de1ed 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 with the native template syntax, define your stories with the `Story` component or 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>
 
@@ -234,7 +234,7 @@ Decorators are a mechanism to wrap a component in arbitrary markup when renderin
 
 <IfRenderer renderer="svelte">
   
-  A simple example is adding padding to a component’s stories. With Svelte, you must use an auxiliary component to wrap your stories with the required spacing or layout elements.
+  A simple example is adding padding to a component’s stories. With Svelte, you can either use an auxiliary component to wrap your stories with the required spacing or layout elements, or ignore the concept of decorators entirely and define them inline in a template.
    
   { /* prettier-ignore-start */}
   

From ca66a62ee0367ac3baea5d11b14ee5a49596f3e6 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 12 Nov 2024 14:38:53 +0100
Subject: [PATCH 05/12] simplify decorators

---
 docs/_snippets/button-story-decorator.md | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/docs/_snippets/button-story-decorator.md b/docs/_snippets/button-story-decorator.md
index 899724fd39ca..e53848edf6fa 100644
--- a/docs/_snippets/button-story-decorator.md
+++ b/docs/_snippets/button-story-decorator.md
@@ -174,9 +174,7 @@ export const Primary: Story = {
 <Story
   name="Primary"
   decorators={[
-    () => ({
-      Component: MarginDecorator
-    })
+    () => MarginDecorator
   ]}
 />
 ```
@@ -209,9 +207,7 @@ export const Primary = {
 <Story
   name="Primary"
   decorators={[
-    () => ({
-      Component: MarginDecorator
-    })
+    () => MarginDecorator
   ]}
 />
 ```
@@ -249,9 +245,7 @@ export const Primary: Story = {
 <Story
   name="Primary"
   decorators={[
-    () => ({
-      Component: MarginDecorator
-    })
+    () => MarginDecorator
   ]}
 />
 ```

From 506e7865351d785e98c128e478100d59f3dd8a2d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 12 Nov 2024 16:06:06 +0100
Subject: [PATCH 06/12] more svelte snippet changes

---
 .../button-story-primary-composition.md       | 57 +++++++++++++++-
 .../button-story-primary-long-name.md         | 66 ++++++++++++++++++-
 docs/_snippets/button-story-with-emojis.md    | 40 +++--------
 docs/_snippets/button-story.md                | 24 +------
 docs/_snippets/page-story.md                  | 42 +++++++++++-
 docs/_snippets/svelte-csf-addon-tags.md       |  4 +-
 docs/_snippets/svelte-csf-story-migration.md  |  1 -
 docs/get-started/frameworks/svelte-vite.mdx   |  2 +-
 docs/get-started/frameworks/sveltekit.mdx     |  2 +-
 9 files changed, 172 insertions(+), 66 deletions(-)

diff --git a/docs/_snippets/button-story-primary-composition.md b/docs/_snippets/button-story-primary-composition.md
index 17ba61744df0..f04787b86ae4 100644
--- a/docs/_snippets/button-story-primary-composition.md
+++ b/docs/_snippets/button-story-primary-composition.md
@@ -26,7 +26,24 @@ export const Secondary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="Secondary" args={{...primaryArgs, primary: false}} />
 ```
 
 ```js filename="Button.stories.js|jsx" renderer="svelte" language="js" tabTitle="CSF"
@@ -74,7 +91,24 @@ export const Secondary = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="Secondary" args={{...primaryArgs, primary: false}} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -133,7 +167,24 @@ export const Secondary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="Secondary" args={{...primaryArgs, primary: false}} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
diff --git a/docs/_snippets/button-story-primary-long-name.md b/docs/_snippets/button-story-primary-long-name.md
index 0ac80cc3f162..3684eed255a5 100644
--- a/docs/_snippets/button-story-primary-long-name.md
+++ b/docs/_snippets/button-story-primary-long-name.md
@@ -26,7 +26,27 @@ export const PrimaryLongName: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation and apply to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="PrimaryLongName" args={{
+  ...primaryArgs,
+  label: 'Primary with a really long name'
+  }} />
 ```
 
 ```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
@@ -74,7 +94,27 @@ export const PrimaryLongName = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation and apply to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="PrimaryLongName" args={{
+  ...primaryArgs,
+  label: 'Primary with a really long name'
+  }} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -133,7 +173,27 @@ export const PrimaryLongName: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation and apply to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="PrimaryLongName" args={{
+  ...primaryArgs,
+  label: 'Primary with a really long name'
+  }} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index 8950cfa04996..f53c6e530451 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -276,8 +276,6 @@ export const Tertiary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -289,21 +287,15 @@ export const Tertiary: Story = {
 </script>
 
 <Story name="Primary">
-  <div>
-    <Button backgroundColor="#ff0" label="Button" />
-  </div>
+  <Button backgroundColor="#ff0" label="Button" />
 </Story>
 
 <Story name="Secondary">
-  <div>
-    <Button backgroundColor="#ff0" label="😄👍😍💯" />
-  </div>
+  <Button backgroundColor="#ff0" label="😄👍😍💯" />
 </Story>
 
 <Story name="Tertiary">
-  <div>
-    <Button backgroundColor="#ff0" label="📚📕📈🤓" />
-  </div>
+  <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 </Story>
 ```
 
@@ -351,8 +343,6 @@ export const Tertiary = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -364,21 +354,15 @@ export const Tertiary = {
 </script>
 
 <Story name="Primary">
-  <div>
-    <Button backgroundColor="#ff0" label="Button" />
-  </div>
+  <Button backgroundColor="#ff0" label="Button" />
 </Story>
 
 <Story name="Secondary">
-  <div>
-    <Button backgroundColor="#ff0" label="😄👍😍💯" />
-  </div>
+  <Button backgroundColor="#ff0" label="😄👍😍💯" />
 </Story>
 
 <Story name="Tertiary">
-  <div>
-    <Button backgroundColor="#ff0" label="📚📕📈🤓" />
-  </div>
+  <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 </Story>
 ```
 
@@ -444,21 +428,15 @@ export const Tertiary: Story = {
 </script>
 
 <Story name="Primary">
-  <div>
-    <Button backgroundColor="#ff0" label="Button" />
-  </div>
+  <Button backgroundColor="#ff0" label="Button" />
 </Story>
 
 <Story name="Secondary">
-  <div>
-    <Button backgroundColor="#ff0" label="😄👍😍💯" />
-  </div>
+  <Button backgroundColor="#ff0" label="😄👍😍💯" />
 </Story>
 
 <Story name="Tertiary">
-  <div>
-    <Button backgroundColor="#ff0" label="📚📕📈🤓" />
-  </div>
+  <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 </Story>
 ```
 
diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md
index d14d6a9e5dbd..96e7982e516a 100644
--- a/docs/_snippets/button-story.md
+++ b/docs/_snippets/button-story.md
@@ -450,8 +450,6 @@ export const Primary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -462,16 +460,10 @@ export const Primary: Story = {
 	});
 </script>
 
-<Story name="Primary">
-  <div>
-    <Button primary="true" label="Button" />
-  </div>
-</Story>
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -482,11 +474,7 @@ export const Primary: Story = {
 	});
 </script>
 
-<Story name="Primary">
-  <div>
-    <Button primary="true" label="Button" />
-  </div>
-</Story>
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -518,8 +506,6 @@ export const Primary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -530,11 +516,7 @@ export const Primary: Story = {
 	});
 </script>
 
-<Story name="Primary">
-  <div>
-    <Button primary="true" label="Button" />
-  </div>
-</Story>
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md
index 2005110d89eb..295940d9a004 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -155,7 +155,19 @@ export const LoggedIn: Story = {
 ```
 
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (eg., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+  //👇 Imports all Header stories
+  import * as HeaderStories from './Header.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+  });
+</script>
+
+<Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
 ```
 
 ```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
@@ -176,7 +188,19 @@ export const LoggedIn = {
 ```
 
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (eg., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+  //👇 Imports all Header stories
+  import * as HeaderStories from './Header.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+  });
+</script>
+
+<Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
 ```
 
 ```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -202,7 +226,19 @@ export const LoggedIn: Story = {
 ```
 
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (eg., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+  //👇 Imports all Header stories
+  import * as HeaderStories from './Header.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+  });
+</script>
+
+<Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
 ```
 
 ```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
diff --git a/docs/_snippets/svelte-csf-addon-tags.md b/docs/_snippets/svelte-csf-addon-tags.md
index 4026367c0a5a..2539856cf454 100644
--- a/docs/_snippets/svelte-csf-addon-tags.md
+++ b/docs/_snippets/svelte-csf-addon-tags.md
@@ -27,7 +27,7 @@
 
 </script>
 
-<Story name="Default">
-  <MyComponent tags={['autodocs']} />
+<Story name="Default" tags={['autodocs']} >
+  <MyComponent />
 </Story>
 ```
diff --git a/docs/_snippets/svelte-csf-story-migration.md b/docs/_snippets/svelte-csf-story-migration.md
index 1898b745f625..e12e0a748671 100644
--- a/docs/_snippets/svelte-csf-story-migration.md
+++ b/docs/_snippets/svelte-csf-story-migration.md
@@ -23,6 +23,5 @@
   });
 </script>
 
-
 <Story name="Default" />
 ```
diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx
index 057cabf1d144..16871558f60b 100644
--- a/docs/get-started/frameworks/svelte-vite.mdx
+++ b/docs/get-started/frameworks/svelte-vite.mdx
@@ -156,7 +156,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   #### 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 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 f6f1b29fabee..1e182e282086 100644
--- a/docs/get-started/frameworks/sveltekit.mdx
+++ b/docs/get-started/frameworks/sveltekit.mdx
@@ -241,7 +241,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   #### 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 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>

From be6a7bf035bca2ca31be74d9e5650894c03d4172 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 12 Nov 2024 23:07:12 +0000
Subject: [PATCH 07/12] Starting to address feedback on MDX snippets

---
 docs/_snippets/button-group-story.md          |  4 +--
 docs/_snippets/checkbox-story.md              | 28 +++++++++++++------
 .../storybook-auto-docs-mdx-docs-imports.md   | 13 ++++++++-
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index 1d70b315ff29..14a3021bbabd 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -1,4 +1,4 @@
-````ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
+```ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { moduleMetadata } from '@storybook/angular';
@@ -48,7 +48,7 @@ export const Pair = {
     orientation: 'horizontal',
   },
 };
-````
+```
 
 ```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
diff --git a/docs/_snippets/checkbox-story.md b/docs/_snippets/checkbox-story.md
index b74dca2e8999..8f34aee9e443 100644
--- a/docs/_snippets/checkbox-story.md
+++ b/docs/_snippets/checkbox-story.md
@@ -14,12 +14,24 @@ Use checkboxes to select one or more options from a list of choices.
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
-```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx"
-{/* TK: vet this against recomendation */}
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.svelte';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+A checkbox is a square box that can be activated or deactivated when ticked.
+
+Use checkboxes to select one or more options from a list of choices.
+
+<Canvas of={CheckboxStories.Unchecked} />
 ```
 
-```mdx filename="Checkbox.mdx" renderer="react" language="mdx"
-import { Canvas, Meta, Story } from '@storybook/blocks';
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 
@@ -27,9 +39,9 @@ import * as CheckboxStories from './Checkbox.stories';
 
 # Checkbox
 
-With `MDX` we can compose Markdown documentation with `Checkbox` stories and interactive controls.
+A checkbox is a square box that can be activated or deactivated when ticked.
+
+Use checkboxes to select one or more options from a list of choices.
 
-<Canvas>
-  <Story of={CheckboxStories.Unchecked} />
-</Canvas>
+<Canvas of={CheckboxStories.Unchecked} />
 ```
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
index 475f173249ea..ad4e03830036 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
@@ -1,5 +1,16 @@
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
-{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+```
+
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.svelte';
+```
+
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';

From 44d7d1bca532dbdd1769b4e06d3d78135c62a107 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 13 Nov 2024 10:53:03 +0100
Subject: [PATCH 08/12] more svelte snippet fixes

---
 docs/_snippets/storybook-auto-docs-standalone-page.md | 3 +--
 docs/_snippets/storybook-custom-docs-markdown.md      | 6 ++----
 docs/_snippets/svelte-csf-addon-tags.md               | 4 +---
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/docs/_snippets/storybook-auto-docs-standalone-page.md b/docs/_snippets/storybook-auto-docs-standalone-page.md
index e0ce5eb71b48..353d95aa5092 100644
--- a/docs/_snippets/storybook-auto-docs-standalone-page.md
+++ b/docs/_snippets/storybook-auto-docs-standalone-page.md
@@ -1,6 +1,4 @@
 ```mdx filename="src/GettingStarted.mdx" renderer="common" language="mdx"
-{/* TK: Vet this against recommendation and filter out Svelte CSF */}
-
 # Getting Started
 
 Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
@@ -8,6 +6,7 @@ Welcome! Whether you're a designer or a developer, this guide will help you get
 ## Table of Contents
 
 - [Design Resources](#design-resources)
+
   - [Figma](#figma)
   - [UI/UX Design Guidelines](#uiux-design-guidelines)
   - [Design Assets](#design-assets)
diff --git a/docs/_snippets/storybook-custom-docs-markdown.md b/docs/_snippets/storybook-custom-docs-markdown.md
index c54ae3b584bb..933ffd344d2e 100644
--- a/docs/_snippets/storybook-custom-docs-markdown.md
+++ b/docs/_snippets/storybook-custom-docs-markdown.md
@@ -1,9 +1,7 @@
 ```mdx filename="Changelog.mdx" renderer="common" language="mdx"
-{/* TK: Vet this against recommendation and filter out Svelte CSF */}
+import { Meta, Markdown } from '@storybook/blocks';
 
-import { Meta, Markdown } from "@storybook/blocks";
-
-import Readme from "../../Changelog.md?raw";
+import Readme from '../../Changelog.md?raw';
 
 <Meta title="Changelog" />
 
diff --git a/docs/_snippets/svelte-csf-addon-tags.md b/docs/_snippets/svelte-csf-addon-tags.md
index 2539856cf454..8cf9b43b99c8 100644
--- a/docs/_snippets/svelte-csf-addon-tags.md
+++ b/docs/_snippets/svelte-csf-addon-tags.md
@@ -27,7 +27,5 @@
 
 </script>
 
-<Story name="Default" tags={['autodocs']} >
-  <MyComponent />
-</Story>
+<Story name="Default" tags={['autodocs']} />
 ```

From 79b5b1786a8b53f432cf032f2009d9e948f96aca Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 13 Nov 2024 11:46:24 +0100
Subject: [PATCH 09/12] add complex args for svelte csf

---
 ...y-conditional-controls-mutual-exclusion.md |   3 -
 ...onent-story-conditional-controls-toggle.md |   3 -
 .../component-story-custom-args-complex.md    | 114 ++++++++++++++++--
 3 files changed, 105 insertions(+), 15 deletions(-)

diff --git a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
index 9c8adeffd8ee..cf09815088d7 100644
--- a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
+++ b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
@@ -22,7 +22,6 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -84,7 +83,6 @@ export default {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -155,7 +153,6 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/component-story-conditional-controls-toggle.md b/docs/_snippets/component-story-conditional-controls-toggle.md
index d3a19f55e3c0..5a5f0ededa8f 100644
--- a/docs/_snippets/component-story-conditional-controls-toggle.md
+++ b/docs/_snippets/component-story-conditional-controls-toggle.md
@@ -19,7 +19,6 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -72,7 +71,6 @@ export default {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -134,7 +132,6 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md
index 87534abc44cf..ad48c03c9b9b 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -289,7 +289,39 @@ export const ExampleStory: Story = {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+      component: YourComponent,
+      //👇 Creates specific argTypes
+      argTypes: {
+        propertyA: {
+          options: ['Item One', 'Item Two', 'Item Three'],
+          control: { type: 'select' }, // Automatically inferred when 'options' is defined
+        },
+        propertyB: {
+          options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+        },
+      },
+  });
+
+  const someFunction = (valuePropertyA, valuePropertyB) => {
+    // Do some logic here
+  };
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  }}
+>
+  {#snippet children(args)}
+    <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
+  {/snippet}
+</Story>
 ```
 
 ```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
@@ -314,9 +346,9 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 };
 
 export const ExampleStory = {
-  render: ({ propertyA, propertyB }) => {
+  render: (args) => {
     //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
     return {
       Component: YourComponent,
       props: {
@@ -333,7 +365,39 @@ export const ExampleStory = {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+      component: YourComponent,
+      //👇 Creates specific argTypes
+      argTypes: {
+        propertyA: {
+          options: ['Item One', 'Item Two', 'Item Three'],
+          control: { type: 'select' }, // Automatically inferred when 'options' is defined
+        },
+        propertyB: {
+          options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+        },
+      },
+  });
+
+  const someFunction = (valuePropertyA, valuePropertyB) => {
+    // Do some logic here
+  };
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  }}
+>
+  {#snippet children(args)}
+    <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
+  {/snippet}
+</Story>
 ```
 
 ```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -363,9 +427,9 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 };
 
 export const ExampleStory: Story = {
-  render: ({ propertyA, propertyB }) => {
+  render: (args) => {
     //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
     return {
       Component: YourComponent,
       props: {
@@ -382,7 +446,39 @@ export const ExampleStory: Story = {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+      component: YourComponent,
+      //👇 Creates specific argTypes
+      argTypes: {
+        propertyA: {
+          options: ['Item One', 'Item Two', 'Item Three'],
+          control: { type: 'select' }, // Automatically inferred when 'options' is defined
+        },
+        propertyB: {
+          options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+        },
+      },
+  });
+
+  const someFunction = (valuePropertyA, valuePropertyB) => {
+    // Do some logic here
+  };
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  }}
+>
+  {#snippet children(args)}
+    <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
+  {/snippet}
+</Story>
 ```
 
 ```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
@@ -412,9 +508,9 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 };
 
 export const ExampleStory: Story = {
-  render: ({ propertyA, propertyB }) => {
+  render: (args) => {
     //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
     return {
       Component: YourComponent,
       props: {

From 8fd06acdc6bab8f17a413811015c0961e506f06f Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 13 Nov 2024 15:36:15 +0100
Subject: [PATCH 10/12] more svelte csf snippet fixes

---
 docs/_snippets/button-story-using-args.md     |  2 -
 docs/_snippets/button-story-with-emojis.md    |  2 -
 .../component-story-custom-args-complex.md    | 15 ++-
 .../component-story-custom-args-mapping.md    | 93 +++++++++++++++++--
 .../component-story-disable-controls-alt.md   |  3 -
 .../component-story-disable-controls-regex.md |  3 -
 .../component-story-disable-controls.md       |  3 -
 .../component-story-sort-controls.md          |  3 -
 .../component-story-static-asset-cdn.md       | 36 +++----
 ...omponent-story-static-asset-with-import.md | 18 +---
 ...onent-story-static-asset-without-import.md | 18 +---
 .../gizmo-story-controls-customization.md     |  3 -
 docs/_snippets/histogram-story.md             |  3 -
 ...omponent-play-function-with-selectevent.md | 12 ---
 .../my-component-story-basic-and-props.md     | 30 ++----
 docs/_snippets/page-story-slots.md            | 61 ++++++++++--
 .../storybook-auto-docs-baseline-example.md   |  4 -
 .../storybook-auto-docs-custom-file.md        |  3 -
 docs/_snippets/tags-combo-example.md          | 89 +++++++++++++++++-
 docs/_snippets/tags-docs-only-in-meta.md      |  6 --
 docs/_snippets/tags-in-meta-and-story.md      |  6 --
 docs/_snippets/tags-remove-in-story.md        |  6 --
 .../your-component-with-decorator.md          |  8 +-
 23 files changed, 260 insertions(+), 167 deletions(-)

diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index c5ca17f777f3..5973b4acd0f0 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -448,8 +448,6 @@ export const Tertiary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: vet this against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index f53c6e530451..6f227f68c2fe 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -415,8 +415,6 @@ export const Tertiary: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md
index ad48c03c9b9b..de88849bca7e 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -319,7 +319,10 @@ export const ExampleStory: Story = {
   }}
 >
   {#snippet children(args)}
-    <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
+    <YourComponent
+      {...args}
+      someProperty={someFunction(args.propertyA, args.propertyB)}
+    />
   {/snippet}
 </Story>
 ```
@@ -395,7 +398,10 @@ export const ExampleStory = {
   }}
 >
   {#snippet children(args)}
-    <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
+    <YourComponent
+      {...args}
+      someProperty={someFunction(args.propertyA, args.propertyB)}
+    />
   {/snippet}
 </Story>
 ```
@@ -476,7 +482,10 @@ export const ExampleStory: Story = {
   }}
 >
   {#snippet children(args)}
-    <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
+    <YourComponent
+      {...args}
+      someProperty={someFunction(args.propertyA, args.propertyB)}
+    />
   {/snippet}
 </Story>
 ```
diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
index 836775e74539..79008639bda6 100644
--- a/docs/_snippets/component-story-custom-args-mapping.md
+++ b/docs/_snippets/component-story-custom-args-mapping.md
@@ -31,11 +31,38 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly  -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './components/Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      arrow: {
+        options: Object.keys(arrows), // An array of serializable values
+        mapping: arrows, // Maps serializable option values to complex arg values
+        control: {
+          type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+          labels: {
+            // 'labels' maps option values to string labels
+            ArrowUp: 'Up',
+            ArrowDown: 'Down',
+            ArrowLeft: 'Left',
+            ArrowRight: 'Right',
+          },
+        },
+      },
+    },
+  });
+</script>
 ```
 
 ```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
-/* TK: Needs follow up and vetting before extending it to other languages (e.g., ts-4-9, ts) */
 import Button from './Button.svelte';
 
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
@@ -92,11 +119,38 @@ export default {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly  -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './components/Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      arrow: {
+        options: Object.keys(arrows), // An array of serializable values
+        mapping: arrows, // Maps serializable option values to complex arg values
+        control: {
+          type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+          labels: {
+            // 'labels' maps option values to string labels
+            ArrowUp: 'Up',
+            ArrowDown: 'Down',
+            ArrowLeft: 'Left',
+            ArrowRight: 'Right',
+          },
+        },
+      },
+    },
+  });
+</script>
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
-/* TK */
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -162,11 +216,38 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly  -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './components/Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      arrow: {
+        options: Object.keys(arrows), // An array of serializable values
+        mapping: arrows, // Maps serializable option values to complex arg values
+        control: {
+          type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+          labels: {
+            // 'labels' maps option values to string labels
+            ArrowUp: 'Up',
+            ArrowDown: 'Down',
+            ArrowLeft: 'Left',
+            ArrowRight: 'Right',
+          },
+        },
+      },
+    },
+  });
+</script>
 ```
 
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
-/* TK */
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
diff --git a/docs/_snippets/component-story-disable-controls-alt.md b/docs/_snippets/component-story-disable-controls-alt.md
index 85ccf46b7747..b4b593505bcb 100644
--- a/docs/_snippets/component-story-disable-controls-alt.md
+++ b/docs/_snippets/component-story-disable-controls-alt.md
@@ -17,7 +17,6 @@ export default meta;
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -64,7 +63,6 @@ export default {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -120,7 +118,6 @@ export default meta;
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/component-story-disable-controls-regex.md b/docs/_snippets/component-story-disable-controls-regex.md
index ccc81f8a65e0..69309e6b7720 100644
--- a/docs/_snippets/component-story-disable-controls-regex.md
+++ b/docs/_snippets/component-story-disable-controls-regex.md
@@ -36,7 +36,6 @@ export const RegexExclude: Story = {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -141,7 +140,6 @@ export const RegexExclude = {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -257,7 +255,6 @@ export const RegexExclude: Story = {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/component-story-disable-controls.md b/docs/_snippets/component-story-disable-controls.md
index 7b08f6c6d584..ba68941855f4 100644
--- a/docs/_snippets/component-story-disable-controls.md
+++ b/docs/_snippets/component-story-disable-controls.md
@@ -19,7 +19,6 @@ export default meta;
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -72,7 +71,6 @@ export default {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -134,7 +132,6 @@ export default meta;
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: Vet this against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/component-story-sort-controls.md b/docs/_snippets/component-story-sort-controls.md
index cc41037323e3..5c152e4312a7 100644
--- a/docs/_snippets/component-story-sort-controls.md
+++ b/docs/_snippets/component-story-sort-controls.md
@@ -12,7 +12,6 @@ export default meta;
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: vet against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -44,7 +43,6 @@ export default {
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: vet against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -85,7 +83,6 @@ export default meta;
 ```
 
 ```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: vet against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
index cc1d9c7ba3a7..01c884bcbe2d 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -125,8 +125,6 @@ export const WithAnImage: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -138,12 +136,10 @@ export const WithAnImage: Story = {
 </script>
 
 <Story name="WithAnImage">
-  <div>
-    <MyComponent
-      src="https://storybook.js.org/images/placeholders/350x150.png"
-      alt="My CDN placeholder"
-    />
-  </div>
+  <MyComponent
+    src="https://storybook.js.org/images/placeholders/350x150.png"
+    alt="My CDN placeholder"
+  />
 </Story>
 ```
 
@@ -166,8 +162,6 @@ export const WithAnImage = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -179,12 +173,10 @@ export const WithAnImage = {
 </script>
 
 <Story name="WithAnImage">
-  <div>
-    <MyComponent
-      src="https://storybook.js.org/images/placeholders/350x150.png"
-      alt="My CDN placeholder"
-    />
-  </div>
+  <MyComponent
+    src="https://storybook.js.org/images/placeholders/350x150.png"
+    alt="My CDN placeholder"
+  />
 </Story>
 ```
 
@@ -212,8 +204,6 @@ export const WithAnImage: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -225,12 +215,10 @@ export const WithAnImage: Story = {
 </script>
 
 <Story name="WithAnImage">
-  <div>
-    <MyComponent
-      src="https://storybook.js.org/images/placeholders/350x150.png"
-      alt="My CDN placeholder"
-    />
-  </div>
+  <MyComponent
+    src="https://storybook.js.org/images/placeholders/350x150.png"
+    alt="My CDN placeholder"
+  />
 </Story>
 ```
 
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index 58deb0903147..9469177d2d81 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -163,8 +163,6 @@ export const WithAnImage: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -183,9 +181,7 @@ export const WithAnImage: Story = {
 </script>
 
 <Story name="WithAnImage">
-	<div>
-		<MyComponent {image} />
-	</div>
+  <MyComponent {image} />
 </Story>
 ```
 
@@ -212,8 +208,6 @@ export const WithAnImage = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -232,9 +226,7 @@ export const WithAnImage = {
 </script>
 
 <Story name="WithAnImage">
-	<div>
-		<MyComponent {image} />
-	</div>
+	<MyComponent {image} />
 </Story>
 ```
 
@@ -266,8 +258,6 @@ export const WithAnImage: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -286,9 +276,7 @@ export const WithAnImage: Story = {
 </script>
 
 <Story name="WithAnImage">
-	<div>
-		<MyComponent {image} />
-	</div>
+  <MyComponent {image} />
 </Story>
 ```
 
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index ce94126a3951..9305fffa4afe 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -120,8 +120,6 @@ export const WithAnImage: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -133,9 +131,7 @@ export const WithAnImage: Story = {
 </script>
 
 <Story name="WithAnImage">
-  <div>
-    <MyComponent src="/image.png" alt="my image" />
-  </div>
+  <MyComponent src="/image.png" alt="my image" />
 </Story>
 ```
 
@@ -159,8 +155,6 @@ export const WithAnImage = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -172,9 +166,7 @@ export const WithAnImage = {
 </script>
 
 <Story name="WithAnImage">
-  <div>
-    <MyComponent src="/image.png" alt="my image" />
-  </div>
+  <MyComponent src="/image.png" alt="my image" />
 </Story>
 ```
 
@@ -203,8 +195,6 @@ export const WithAnImage: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -216,9 +206,7 @@ export const WithAnImage: Story = {
 </script>
 
 <Story name="WithAnImage">
-  <div>
-    <MyComponent src="/image.png" alt="my image" />
-  </div>
+  <MyComponent src="/image.png" alt="my image" />
 </Story>
 ```
 
diff --git a/docs/_snippets/gizmo-story-controls-customization.md b/docs/_snippets/gizmo-story-controls-customization.md
index 3383281faaf4..62d00837517c 100644
--- a/docs/_snippets/gizmo-story-controls-customization.md
+++ b/docs/_snippets/gizmo-story-controls-customization.md
@@ -58,7 +58,6 @@ export default meta;
 ```
 
 ```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: Vet against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -228,7 +227,6 @@ export default {
 ```
 
 ```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: Vet against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -407,7 +405,6 @@ export default meta;
 ```
 
 ```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: Vet against recommendation -->
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index 1b859aa445da..bddeb944e4ea 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -238,7 +238,6 @@ export const Default: Story = {
   });
 </script>
 
-
 <Story
   name="Default"
   args={{
@@ -278,7 +277,6 @@ export const Default = {
   });
 </script>
 
-
 <Story
   name="Default"
   args={{
@@ -323,7 +321,6 @@ export const Default: Story = {
   });
 </script>
 
-
 <Story
   name="Default"
   args={{
diff --git a/docs/_snippets/my-component-play-function-with-selectevent.md b/docs/_snippets/my-component-play-function-with-selectevent.md
index ed7d46ffad45..4f29e6795f47 100644
--- a/docs/_snippets/my-component-play-function-with-selectevent.md
+++ b/docs/_snippets/my-component-play-function-with-selectevent.md
@@ -39,8 +39,6 @@ export const ExampleChangeEvent: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -51,9 +49,7 @@ export const ExampleChangeEvent: Story = {
   const { Story } = defineMeta({
     component: MyComponent,
   });
-</script>
 
-<script>
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
@@ -150,8 +146,6 @@ export const ExampleChangeEvent = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -162,9 +156,7 @@ export const ExampleChangeEvent = {
   const { Story } = defineMeta({
     component: MyComponent,
   });
-</script>
 
-<script>
   function sleep(ms: number) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
@@ -272,8 +264,6 @@ export const ExampleChangeEvent: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -284,9 +274,7 @@ export const ExampleChangeEvent: Story = {
   const { Story } = defineMeta({
     component: MyComponent,
   });
-</script>
 
-<script>
   function sleep(ms: number) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
diff --git a/docs/_snippets/my-component-story-basic-and-props.md b/docs/_snippets/my-component-story-basic-and-props.md
index ab7528b7ef22..46e372499122 100644
--- a/docs/_snippets/my-component-story-basic-and-props.md
+++ b/docs/_snippets/my-component-story-basic-and-props.md
@@ -126,8 +126,6 @@ export const WithProp: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -139,15 +137,11 @@ export const WithProp: Story = {
 </script>
 
 <Story name="Basic">
-	<div>
-		<MyComponent />
-	</div>
+  <MyComponent />
 </Story>
 
 <Story name="WithProp">
-	<div>
-		<MyComponent prop="value" />
-	</div>
+  <MyComponent prop="value" />
 </Story>
 ```
 
@@ -176,8 +170,6 @@ export const WithProp = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -189,15 +181,11 @@ export const WithProp = {
 </script>
 
 <Story name="Basic">
-	<div>
-		<MyComponent />
-	</div>
+  <MyComponent />
 </Story>
 
 <Story name="WithProp">
-	<div>
-		<MyComponent prop="value" />
-	</div>
+  <MyComponent prop="value" />
 </Story>
 ```
 
@@ -231,8 +219,6 @@ export const WithProp: Story = {
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -244,15 +230,11 @@ export const WithProp: Story = {
 </script>
 
 <Story name="Basic">
-	<div>
-		<MyComponent />
-	</div>
+  <MyComponent />
 </Story>
 
 <Story name="WithProp">
-	<div>
-		<MyComponent prop="value" />
-	</div>
+  <MyComponent prop="value" />
 </Story>
 ```
 
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index 8c8da393fe1d..6cd36f7f305b 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -172,22 +172,63 @@ export const CustomFooter: Story = {
 ```
 
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!--
-  TK: Needs example and should be replicated to the other languages (e.g., ts, ts-4-9) to ensure the snippets render correctly
-  This is a special case as the CSF JS/TS Storybook versions don't support the component "directive"
-  It's referenced in the following documentation:
-  - Essentials/Controls https://storybook.js.org/docs/essentials/controls#fully-custom-args
-  - Writing Stories/Args https://storybook.js.org/docs/writing-stories/args#args-can-modify-any-aspect-of-your-component
-  - Writing Stories/Typescript (https://storybook.js.org/docs/writing-stories/typescript#typing-custom-args)
--->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page
+  });
+</script>
+
+<Story name="CustomFooter" arg={{ footer: 'Built with Storybook' }}>
+  {#snippet children(args)}
+    <Page {...args} >
+      <footer>{args.footer}</footer>
+    </Page>
+  {/snippet}
+</Story>
 ```
 
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page
+  });
+</script>
+
+<Story name="CustomFooter" arg={{ footer: 'Built with Storybook' }}>
+  {#snippet children(args)}
+    <Page {...args} >
+      <footer>{args.footer}</footer>
+    </Page>
+  {/snippet}
+</Story>
 ```
 
 ```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page
+  });
+</script>
+
+<Story name="CustomFooter" arg={{ footer: 'Built with Storybook' }}>
+  {#snippet children(args)}
+    <Page {...args} >
+      <footer>{args.footer}</footer>
+    </Page>
+  {/snippet}
+</Story>
 ```
 
 ```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="3"
diff --git a/docs/_snippets/storybook-auto-docs-baseline-example.md b/docs/_snippets/storybook-auto-docs-baseline-example.md
index 71f84bec493d..cf9367ae7795 100644
--- a/docs/_snippets/storybook-auto-docs-baseline-example.md
+++ b/docs/_snippets/storybook-auto-docs-baseline-example.md
@@ -1,6 +1,4 @@
-
 ```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="custom-title"
-{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 import { Meta, Controls } from '@storybook/blocks';
 
 <Meta title="Button" />
@@ -24,9 +22,7 @@ Button has the following properties:
 <Controls />
 ```
 
-
 ```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="of-prop"
-{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 import { Meta, Controls } from '@storybook/blocks';
 
 import * as ButtonStories from './Button.stories';
diff --git a/docs/_snippets/storybook-auto-docs-custom-file.md b/docs/_snippets/storybook-auto-docs-custom-file.md
index 542de912800a..62c9f39694db 100644
--- a/docs/_snippets/storybook-auto-docs-custom-file.md
+++ b/docs/_snippets/storybook-auto-docs-custom-file.md
@@ -1,7 +1,4 @@
-
 ```mdx filename="src/components/Select.mdx" renderer="common" language="mdx"
-{/* TK: vet this against recommendation and filter out Svelte CSF */}
-
 # Select
 
 Select is a type of input that allows users to choose one or more options from a list of choices.
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index b24fd47d493f..558eac1a700c 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -243,17 +243,96 @@ export const Combo: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts)
-    If not suuported, adjust documentation to reflect it by making it conditionally render
- -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Button } from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 1 }}
+/>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  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']}>
+  <Button variant={1}>
+  <Button variant={2}>
+</Story>
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Button } from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 1 }}
+/>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  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']}>
+  <Button variant={1}>
+  <Button variant={2}>
+</Story>
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TK: vet this against recommendation and apply it to the other languages (e.g., ts-4-9, ts) -->
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Button } from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 1 }}
+/>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  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']}>
+  <Button variant={1}>
+  <Button variant={2}>
+</Story>
 ```
 
 ```js filename="Button.stories.js" renderer="vue" language="js"
diff --git a/docs/_snippets/tags-docs-only-in-meta.md b/docs/_snippets/tags-docs-only-in-meta.md
index 8aecfde2ecc4..dfadf65125c5 100644
--- a/docs/_snippets/tags-docs-only-in-meta.md
+++ b/docs/_snippets/tags-docs-only-in-meta.md
@@ -16,8 +16,6 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -64,8 +62,6 @@ export default {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -119,8 +115,6 @@ export default meta;
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index e2663d5095bc..5dbf645840ee 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -30,8 +30,6 @@ export const ExperimentalFeatureStory: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -112,8 +110,6 @@ export const ExperimentalFeatureStory = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -205,8 +201,6 @@ export const ExperimentalFeatureStory: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/tags-remove-in-story.md b/docs/_snippets/tags-remove-in-story.md
index e00352ad504b..b124a3f8342f 100644
--- a/docs/_snippets/tags-remove-in-story.md
+++ b/docs/_snippets/tags-remove-in-story.md
@@ -19,8 +19,6 @@ export const ExperimentalFeatureStory: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -68,8 +66,6 @@ export const ExperimentalFeatureStory = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -128,8 +124,6 @@ export const ExperimentalFeatureStory: Story = {
 ```
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
-<!-- TODO: Vet this example against recommendation -->
-
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index 3d095bf8f386..a3b8111e5837 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -183,9 +183,7 @@ export default {
 
   const { Story } = defineMeta({
     component: YourComponent,
-    decorators: [() => ({
-      Component: MarginDecorator,
-    })],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```
@@ -213,9 +211,7 @@ export default meta;
 
   const { Story } = defineMeta({
     component: YourComponent,
-    decorators: [() => ({
-      Component: MarginDecorator,
-    })],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```

From b47f5d213db7980ed9e4ea03645eec1ccdcc28e0 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Wed, 13 Nov 2024 17:02:31 +0000
Subject: [PATCH 11/12] Fixes the MDX examples

---
 ...ybook-auto-docs-mdx-docs-docs-only-page.md | 29 ++++++-
 .../storybook-auto-docs-mdx-docs-dos-donts.md |  1 -
 ...storybook-auto-docs-mdx-docs-meta-block.md | 17 ++++-
 .../storybook-auto-docs-mdx-docs-story.md     | 17 ++++-
 .../_snippets/storybook-auto-docs-mdx-file.md | 76 ++++++++++++++++++-
 .../storybook-auto-docs-starter-example.md    | 40 +++++++++-
 6 files changed, 174 insertions(+), 6 deletions(-)

diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
index ba32208b9bc3..ff0393c83549 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
@@ -1,5 +1,32 @@
 ```mdx filename="ExampleDocumentation.mdx" renderer="common" language="mdx"
-{/* TK: Vet this against recommendation and filter out Svelte CSF */}
+import { Meta } from '@storybook/blocks';
+
+import * as ExampleComponentStories from './ExampleComponent.stories';
+
+{/* 👇 Documentation-only page */}
+
+<Meta title="Documentation" />
+
+{/* 👇 Component documentation page */}
+
+<Meta of={ExampleComponentStories} />
+```
+
+```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Meta } from '@storybook/blocks';
+
+import * as ExampleComponentStories from './ExampleComponent.stories.svelte';
+
+{/* 👇 Documentation-only page */}
+
+<Meta title="Documentation" />
+
+{/* 👇 Component documentation page */}
+
+<Meta of={ExampleComponentStories} />
+```
+
+```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Meta } from '@storybook/blocks';
 
 import * as ExampleComponentStories from './ExampleComponent.stories';
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md b/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
index 1e9952059dfb..31ace25a7efe 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
@@ -1,5 +1,4 @@
 ```mdx filename="Guideline.mdx" renderer="common" language="mdx"
-{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
 <Guidelines>
   <Dos>
     - Use buttons for the main actions on your page
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
index e4ac4cff9e17..1cefe5dbd78c 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
@@ -1,5 +1,20 @@
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
-{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
+import { Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+```
+
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.svelte';
+
+<Meta of={CheckboxStories} />
+```
+
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
index a008b7caf9bc..b0d52e9e6506 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
@@ -1,5 +1,20 @@
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
-{/* TK: vet this against recommendation and filter out if not supported by Svelte's CSF*/}
+import { Canvas } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Canvas of={CheckboxStories.Unchecked} />
+```
+
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.svelte';
+
+<Canvas of={CheckboxStories.Unchecked} />
+```
+
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
diff --git a/docs/_snippets/storybook-auto-docs-mdx-file.md b/docs/_snippets/storybook-auto-docs-mdx-file.md
index 24eaf6724bc9..f6d76fd9bf0a 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-file.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-file.md
@@ -1,6 +1,80 @@
 ```mdx filename="Page.mdx" renderer="common" language="mdx"
-{/* TK: Vet this against recommendation and filter out Svelte CSF */}
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+import * as ListStories from './List.stories';
+
+import * as ListItemStories from './ListItem.stories';
+
+import * as PageStories from './Page.stories';
+
+<Meta of={PageStories} />
+
+# Page
+
+Page is a layout container that is used to position children in predetermined areas.
+
+It's often used to apply consistent positioning for content across pages in an application
+
+## Usage
+
+<Canvas of={PageStories.Basic} />
+
+# List
+
+List is a grouping of related items. List can be ordered with multiple levels of nesting.
+
+## Usage
+
+<Story of={ListStories.Filled} />
+
+# List Item
+
+List items are used to group related content in a list. They must be nested within a List component.
+
+## Usage
+
+<Story of={ListItemStories.Starter} meta={ListItemStories} />
+```
+
+```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+import * as ListStories from './List.stories.svelte';
+
+import * as ListItemStories from './ListItem.stories.svelte';
+
+import * as PageStories from './Page.stories.svelte';
+
+<Meta of={PageStories} />
+
+# Page
+
+Page is a layout container that is used to position children in predetermined areas.
+
+It's often used to apply consistent positioning for content across pages in an application
+
+## Usage
+
+<Canvas of={PageStories.Basic} />
+
+# List
+
+List is a grouping of related items. List can be ordered with multiple levels of nesting.
+
+## Usage
+
+<Story of={ListStories.Filled} />
+
+# List Item
+
+List items are used to group related content in a list. They must be nested within a List component.
+
+## Usage
+
+<Story of={ListItemStories.Starter} meta={ListItemStories} />
+```
 
+```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas, Meta, Story } from '@storybook/blocks';
 
 import * as ListStories from './List.stories';
diff --git a/docs/_snippets/storybook-auto-docs-starter-example.md b/docs/_snippets/storybook-auto-docs-starter-example.md
index 7ad620c62e85..c24c71600cf7 100644
--- a/docs/_snippets/storybook-auto-docs-starter-example.md
+++ b/docs/_snippets/storybook-auto-docs-starter-example.md
@@ -1,6 +1,44 @@
 ```mdx filename="Button.mdx" renderer="common" language="mdx"
-{/* TK: Vet this against recommendation and filter out Svelte CSF */}
+import { Meta, Story } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button is a clickable interactive element that triggers a response.
+
+You can place text and icons inside of a button.
+
+Buttons are often used for form submissions and to toggle elements into view.
+
+## Usage
+
+<Story of={ButtonStories.Basic} />
+```
+
+```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Meta, Story } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories.svelte';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button is a clickable interactive element that triggers a response.
+
+You can place text and icons inside of a button.
+
+Buttons are often used for form submissions and to toggle elements into view.
+
+## Usage
+
+<Story of={ButtonStories.Basic} />
+```
 
+```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Meta, Story } from '@storybook/blocks';
 
 import * as ButtonStories from './Button.stories';

From 8fbaea141d9bff6c7861bc508f3e2916dcf77f85 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Wed, 13 Nov 2024 17:38:13 +0000
Subject: [PATCH 12/12] Remove Svelte conditional rendering on pages without
 template

---
 docs/_snippets/page-story-slots.md |  6 +++---
 docs/essentials/controls.mdx       | 19 ++++++++-----------
 docs/writing-stories/args.mdx      | 14 +++++---------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index 6cd36f7f305b..ed8b9a9b8b66 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -182,7 +182,7 @@ export const CustomFooter: Story = {
   });
 </script>
 
-<Story name="CustomFooter" arg={{ footer: 'Built with Storybook' }}>
+<Story name="CustomFooter" args={{ footer: 'Built with Storybook' }}>
   {#snippet children(args)}
     <Page {...args} >
       <footer>{args.footer}</footer>
@@ -202,7 +202,7 @@ export const CustomFooter: Story = {
   });
 </script>
 
-<Story name="CustomFooter" arg={{ footer: 'Built with Storybook' }}>
+<Story name="CustomFooter" args={{ footer: 'Built with Storybook' }}>
   {#snippet children(args)}
     <Page {...args} >
       <footer>{args.footer}</footer>
@@ -222,7 +222,7 @@ export const CustomFooter: Story = {
   });
 </script>
 
-<Story name="CustomFooter" arg={{ footer: 'Built with Storybook' }}>
+<Story name="CustomFooter" args={{ footer: 'Built with Storybook' }}>
   {#snippet children(args)}
     <Page {...args} >
       <footer>{args.footer}</footer>
diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx
index 3acc38b7a855..211dbe1d6350 100644
--- a/docs/essentials/controls.mdx
+++ b/docs/essentials/controls.mdx
@@ -204,27 +204,24 @@ If you haven't used the CLI to set the configuration, or if you want to define y
 
 {/* prettier-ignore-end */}
 
-<IfRenderer renderer={['angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
-  {/* Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example */}
+## Fully custom args
 
-  ## Fully custom args
+Until now, we only used auto-generated controls based on the component for which we're writing stories. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.mdx), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
 
-  Until now, we only used auto-generated controls based on the component for which we're writing stories. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.mdx), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
-
-  {/* prettier-ignore-start */}
+{/* prettier-ignore-start */}
 
-  <CodeSnippets path="page-story-slots.md"/>
+<CodeSnippets path="page-story-slots.md"/>
 
-  {/* prettier-ignore-end */}
+{/* prettier-ignore-end */}
 
-  By default, Storybook will add controls for all args that:
+By default, Storybook will add controls for all args that:
 
   * It infers from the component definition [if your framework supports it](../configure/integration/frameworks-feature-support.mdx).
 
   * Appear in the list of args for your story.
 
-  Using `argTypes`, you can change the display and behavior of each control.
-</IfRenderer>
+Using `argTypes`, you can change the display and behavior of each control.
+
 
 ### Dealing with complex values
 
diff --git a/docs/writing-stories/args.mdx b/docs/writing-stories/args.mdx
index f23a58d8d007..073638f31e0e 100644
--- a/docs/writing-stories/args.mdx
+++ b/docs/writing-stories/args.mdx
@@ -103,19 +103,15 @@ Args are useful when writing stories for composite components that are assembled
 
 {/* prettier-ignore-end */}
 
-<IfRenderer renderer={[ 'angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
-  {/* Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example */}
+## Args can modify any aspect of your component
 
-  ## Args can modify any aspect of your component
+You can use args in your stories to configure the component's appearance, similar to what you would do in an application. For example, here's how you could use a `footer` arg to populate a child component:
 
-  You can use args in your stories to configure the component's appearance, similar to what you would do in an application. For example, here's how you could use a `footer` arg to populate a child component:
-
-  {/* prettier-ignore-start */}
+{/* prettier-ignore-start */}
 
-  <CodeSnippets path="page-story-slots.md" />
+<CodeSnippets path="page-story-slots.md" />
 
-  {/* prettier-ignore-end */}
-</IfRenderer>
+{/* prettier-ignore-end */}
 
 ## Setting args through the URL