From 39fd813c16f1cb67492e6f29849754566f4f2844 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Mon, 4 Dec 2023 21:23:56 +0000
Subject: [PATCH 1/2] Docs: Svelte docs and examples update

---
 docs/addons/addons-api.md                     |  3 +-
 docs/api/csf.md                               | 28 ++++++-
 docs/configure/images-and-assets.md           |  3 +
 docs/essentials/controls.md                   |  7 ++
 docs/essentials/toolbars-and-globals.md       |  2 +
 docs/essentials/viewport.md                   |  1 +
 docs/sharing/design-integrations.md           |  1 +
 ...-component.with-mock-implementation.ts.mdx | 29 +++++++
 docs/snippets/svelte/badge-story.mdx.mdx      | 76 -------------------
 .../snippets/svelte/button-group-story.js.mdx |  9 ---
 .../svelte/button-group-story.ts-4-9.mdx      | 24 ++++++
 .../snippets/svelte/button-group-story.ts.mdx | 24 ++++++
 .../svelte/button-story-auto-docs.js.mdx      |  8 --
 .../svelte/button-story-auto-docs.ts-4-9.mdx  | 33 ++++++++
 .../svelte/button-story-auto-docs.ts.mdx      | 33 ++++++++
 ...button-story-click-handler-args.ts-4-9.mdx | 31 ++++++++
 .../button-story-click-handler-args.ts.mdx    | 31 ++++++++
 ...n-story-click-handler-simplificated.js.mdx | 13 ++++
 ...ory-click-handler-simplificated.ts-4-9.mdx | 18 +++++
 ...n-story-click-handler-simplificated.ts.mdx | 18 +++++
 .../svelte/button-story-click-handler.js.mdx  |  4 +-
 .../button-story-click-handler.ts-4-9.mdx     | 26 +++++++
 .../svelte/button-story-click-handler.ts.mdx  | 27 +++++++
 ...utton-story-component-args-primary.mdx.mdx | 22 ------
 ...on-story-component-args-primary.ts-4-9.mdx | 21 +++++
 ...button-story-component-args-primary.ts.mdx | 21 +++++
 .../button-story-component-decorator.js.mdx   | 18 -----
 .../button-story-component-decorator.mdx.mdx  | 12 ---
 ...utton-story-component-decorator.ts-4-9.mdx | 15 ++++
 .../button-story-component-decorator.ts.mdx   | 15 ++++
 .../svelte/button-story-decorator.js.mdx      |  8 --
 .../svelte/button-story-decorator.mdx.mdx     | 25 ------
 .../svelte/button-story-decorator.ts-4-9.mdx  | 19 +++++
 .../svelte/button-story-decorator.ts.mdx      | 19 +++++
 .../button-story-default-docs-code.mdx.mdx    | 45 -----------
 ...y-default-export-with-component.ts-4-9.mdx | 13 ++++
 ...story-default-export-with-component.ts.mdx | 13 ++++
 .../button-story-rename-story.ts-4-9.mdx      | 30 ++++++++
 .../svelte/button-story-rename-story.ts.mdx   | 30 ++++++++
 .../svelte/button-story-using-args.js.mdx     | 17 -----
 .../svelte/button-story-using-args.ts-4-9.mdx | 36 +++++++++
 .../svelte/button-story-using-args.ts.mdx     | 36 +++++++++
 .../button-story-with-addon-example.js.mdx    | 13 +---
 ...button-story-with-addon-example.ts-4-9.mdx | 27 +++++++
 .../button-story-with-addon-example.ts.mdx    | 27 +++++++
 .../svelte/button-story-with-args.js.mdx      |  9 ---
 .../svelte/button-story-with-args.mdx.mdx     | 26 -------
 .../svelte/button-story-with-args.ts-4-9.mdx  |  9 ---
 .../svelte/button-story-with-args.ts.mdx      |  9 ---
 .../button-story-with-blue-args.mdx.mdx       | 24 ------
 .../button-story-with-blue-args.ts-4-9.mdx    | 23 ++++++
 .../svelte/button-story-with-blue-args.ts.mdx | 23 ++++++
 .../svelte/button-story-with-emojis.mdx.mdx   | 43 -----------
 .../button-story-with-emojis.ts-4-9.mdx       | 49 ++++++++++++
 .../svelte/button-story-with-emojis.ts.mdx    | 49 ++++++++++++
 docs/snippets/svelte/button-story.mdx.mdx     | 27 -------
 docs/snippets/svelte/checkbox-story.mdx.mdx   | 55 --------------
 ...onent-story-custom-args-complex.ts-4-9.mdx | 46 +++++++++++
 ...component-story-custom-args-complex.ts.mdx | 46 +++++++++++
 .../component-story-figma-integration.js.mdx  |  6 +-
 .../component-story-figma-integration.mdx.mdx | 33 --------
 ...mponent-story-figma-integration.ts-4-9.mdx | 24 ++++++
 .../component-story-figma-integration.ts.mdx  | 24 ++++++
 .../component-story-mdx-story-by-name.mdx.mdx | 23 ------
 .../component-story-static-asset-cdn.mdx.mdx  | 25 ------
 ...omponent-story-static-asset-cdn.ts-4-9.mdx | 24 ++++++
 .../component-story-static-asset-cdn.ts.mdx   | 24 ++++++
 ...ent-story-static-asset-with-import.mdx.mdx | 29 -------
 ...-story-static-asset-with-import.ts-4-9.mdx | 28 +++++++
 ...nent-story-static-asset-with-import.ts.mdx | 28 +++++++
 ...-story-static-asset-without-import.mdx.mdx | 21 -----
 ...ory-static-asset-without-import.ts-4-9.mdx | 25 ++++++
 ...t-story-static-asset-without-import.ts.mdx | 25 ++++++
 ...component-story-with-accessibility.mdx.mdx | 51 -------------
 ...ponent-story-with-accessibility.ts-4-9.mdx | 33 ++++++++
 .../component-story-with-accessibility.ts.mdx | 33 ++++++++
 ...component-test-with-testing-library.js.mdx |  2 +-
 .../svelte/csf-2-example-starter.js.mdx       | 16 ++++
 .../svelte/csf-2-example-starter.ts.mdx       | 18 +++++
 .../svelte/csf-2-example-story.js.mdx         |  9 +++
 .../svelte/csf-2-example-story.ts.mdx         |  9 +++
 .../svelte/csf-3-example-render.js.mdx        | 11 +++
 .../svelte/csf-3-example-render.ts.mdx        | 11 +++
 .../svelte/csf-3-example-starter.ts.mdx       | 14 ++++
 .../svelte/document-screen-fetch.js.mdx       |  3 +-
 .../svelte/document-screen-fetch.ts.mdx       | 47 ++++++++++++
 .../document-screen-with-grapqhl.ts.mdx       | 46 +++++++++++
 ...umentscreen-story-msw-graphql-query.js.mdx |  2 +-
 ...tscreen-story-msw-graphql-query.ts-4-9.mdx | 70 +++++++++++++++++
 ...umentscreen-story-msw-graphql-query.ts.mdx | 70 +++++++++++++++++
 docs/snippets/svelte/histogram-story.mdx.mdx  | 30 --------
 docs/snippets/svelte/loader-story.mdx.mdx     | 34 ---------
 docs/snippets/svelte/loader-story.ts-4-9.mdx  | 36 +++++++++
 docs/snippets/svelte/loader-story.ts.mdx      | 36 +++++++++
 .../login-form-with-play-function.js.mdx      | 19 +----
 .../login-form-with-play-function.mdx.mdx     | 53 -------------
 .../login-form-with-play-function.ts-4-9.mdx  | 43 +++++++++++
 .../login-form-with-play-function.ts.mdx      | 43 +++++++++++
 ...rgindecorator.with-margin-component.js.mdx | 13 ++++
 ...rgindecorator.with-margin-component.ts.mdx | 13 ++++
 .../mdx-canvas-multiple-stories.mdx.mdx       | 48 ------------
 .../my-component-story-basic-and-props.js.mdx | 11 +--
 ...component-story-basic-and-props.ts-4-9.mdx | 30 ++++++++
 .../my-component-story-basic-and-props.ts.mdx | 30 ++++++++
 ...component-story-configure-viewports.js.mdx |  3 -
 ...omponent-story-configure-viewports.mdx.mdx | 37 ---------
 ...onent-story-configure-viewports.ts-4-9.mdx | 32 ++++++++
 ...component-story-configure-viewports.ts.mdx | 32 ++++++++
 ...ory-use-globaltype-backwards-compat.js.mdx |  2 +-
 ...use-globaltype-backwards-compat.ts-4-9.mdx | 13 ++++
 ...ory-use-globaltype-backwards-compat.ts.mdx | 13 ++++
 .../my-component-story-use-globaltype.js.mdx  |  2 +-
 .../my-component-story-use-globaltype.mdx.mdx | 38 ----------
 ...-component-story-use-globaltype.ts-4-9.mdx | 41 ++++++++++
 .../my-component-story-use-globaltype.ts.mdx  | 41 ++++++++++
 .../my-component-story-with-nonstory.js.mdx   |  8 --
 ...y-component-story-with-nonstory.ts-4-9.mdx | 33 ++++++++
 .../my-component-story-with-nonstory.ts.mdx   | 33 ++++++++
 .../my-component-with-env-variables.mdx.mdx   | 27 -------
 docs/snippets/svelte/page-story.js.mdx        |  9 ---
 docs/snippets/svelte/page-story.ts-4-9.mdx    | 23 ++++++
 docs/snippets/svelte/page-story.ts.mdx        | 23 ++++++
 .../svelte/simple-page-implementation.ts.mdx  | 20 +++++
 .../storybook-addon-a11y-disable.js.mdx       |  4 -
 .../storybook-addon-a11y-disable.mdx.mdx      | 30 --------
 .../storybook-addon-a11y-disable.ts-4-9.mdx   | 23 ++++++
 .../storybook-addon-a11y-disable.ts.mdx       | 23 ++++++
 .../storybook-addon-a11y-story-config.js.mdx  |  4 -
 ...rybook-addon-a11y-story-config.ts-4-9.mdx} | 33 ++++----
 .../storybook-addon-a11y-story-config.ts.mdx  | 38 ++++++++++
 .../storybook-preview-global-decorator.ts.mdx | 13 ++++
 .../your-component-with-decorator.js.mdx      | 17 -----
 .../your-component-with-decorator.mdx.mdx     | 13 ----
 .../your-component-with-decorator.ts-4-9.mdx  | 15 ++++
 .../your-component-with-decorator.ts.mdx      | 15 ++++
 docs/snippets/svelte/your-component.mdx.mdx   | 20 -----
 docs/writing-docs/autodocs.md                 |  1 +
 docs/writing-stories/args.md                  |  9 +++
 .../build-pages-with-storybook.md             |  5 ++
 docs/writing-stories/decorators.md            | 12 +++
 docs/writing-stories/index.md                 | 11 +++
 docs/writing-stories/loaders.md               |  1 +
 docs/writing-stories/parameters.md            |  1 +
 docs/writing-tests/accessibility-testing.md   |  3 +
 docs/writing-tests/interaction-testing.md     |  1 +
 .../stories-in-end-to-end-tests.md            |  2 +
 146 files changed, 2251 insertions(+), 1065 deletions(-)
 create mode 100644 docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
 delete mode 100644 docs/snippets/svelte/badge-story.mdx.mdx
 create mode 100644 docs/snippets/svelte/button-group-story.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-group-story.ts.mdx
 create mode 100644 docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-auto-docs.ts.mdx
 create mode 100644 docs/snippets/svelte/button-story-click-handler-args.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-click-handler-args.ts.mdx
 create mode 100644 docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx
 create mode 100644 docs/snippets/svelte/button-story-click-handler-simplificated.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx
 create mode 100644 docs/snippets/svelte/button-story-click-handler.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-click-handler.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story-component-args-primary.mdx.mdx
 create mode 100644 docs/snippets/svelte/button-story-component-args-primary.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-component-args-primary.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story-component-decorator.mdx.mdx
 create mode 100644 docs/snippets/svelte/button-story-component-decorator.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-component-decorator.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story-decorator.mdx.mdx
 create mode 100644 docs/snippets/svelte/button-story-decorator.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-decorator.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
 create mode 100644 docs/snippets/svelte/button-story-default-export-with-component.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-default-export-with-component.ts.mdx
 create mode 100644 docs/snippets/svelte/button-story-rename-story.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-rename-story.ts.mdx
 create mode 100644 docs/snippets/svelte/button-story-using-args.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-using-args.ts.mdx
 create mode 100644 docs/snippets/svelte/button-story-with-addon-example.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-with-addon-example.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story-with-args.mdx.mdx
 delete mode 100644 docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
 create mode 100644 docs/snippets/svelte/button-story-with-blue-args.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-with-blue-args.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story-with-emojis.mdx.mdx
 create mode 100644 docs/snippets/svelte/button-story-with-emojis.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/button-story-with-emojis.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story.mdx.mdx
 delete mode 100644 docs/snippets/svelte/checkbox-story.mdx.mdx
 create mode 100644 docs/snippets/svelte/component-story-custom-args-complex.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/component-story-custom-args-complex.ts.mdx
 delete mode 100644 docs/snippets/svelte/component-story-figma-integration.mdx.mdx
 create mode 100644 docs/snippets/svelte/component-story-figma-integration.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/component-story-figma-integration.ts.mdx
 delete mode 100644 docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
 delete mode 100644 docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
 create mode 100644 docs/snippets/svelte/component-story-static-asset-cdn.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx
 delete mode 100644 docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
 create mode 100644 docs/snippets/svelte/component-story-static-asset-with-import.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx
 delete mode 100644 docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
 create mode 100644 docs/snippets/svelte/component-story-static-asset-without-import.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx
 delete mode 100644 docs/snippets/svelte/component-story-with-accessibility.mdx.mdx
 create mode 100644 docs/snippets/svelte/component-story-with-accessibility.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/component-story-with-accessibility.ts.mdx
 create mode 100644 docs/snippets/svelte/csf-2-example-starter.js.mdx
 create mode 100644 docs/snippets/svelte/csf-2-example-starter.ts.mdx
 create mode 100644 docs/snippets/svelte/csf-2-example-story.js.mdx
 create mode 100644 docs/snippets/svelte/csf-2-example-story.ts.mdx
 create mode 100644 docs/snippets/svelte/csf-3-example-render.js.mdx
 create mode 100644 docs/snippets/svelte/csf-3-example-render.ts.mdx
 create mode 100644 docs/snippets/svelte/csf-3-example-starter.ts.mdx
 create mode 100644 docs/snippets/svelte/document-screen-fetch.ts.mdx
 create mode 100644 docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx
 create mode 100644 docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts.mdx
 delete mode 100644 docs/snippets/svelte/histogram-story.mdx.mdx
 delete mode 100644 docs/snippets/svelte/loader-story.mdx.mdx
 create mode 100644 docs/snippets/svelte/loader-story.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/loader-story.ts.mdx
 delete mode 100644 docs/snippets/svelte/login-form-with-play-function.mdx.mdx
 create mode 100644 docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/login-form-with-play-function.ts.mdx
 create mode 100644 docs/snippets/svelte/margindecorator.with-margin-component.js.mdx
 create mode 100644 docs/snippets/svelte/margindecorator.with-margin-component.ts.mdx
 delete mode 100644 docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-basic-and-props.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx
 delete mode 100644 docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-configure-viewports.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx
 delete mode 100644 docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-use-globaltype.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-with-nonstory.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx
 delete mode 100644 docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
 create mode 100644 docs/snippets/svelte/page-story.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/page-story.ts.mdx
 create mode 100644 docs/snippets/svelte/simple-page-implementation.ts.mdx
 delete mode 100644 docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
 create mode 100644 docs/snippets/svelte/storybook-addon-a11y-disable.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx
 rename docs/snippets/svelte/{storybook-addon-a11y-story-config.mdx.mdx => storybook-addon-a11y-story-config.ts-4-9.mdx} (55%)
 create mode 100644 docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx
 create mode 100644 docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx
 delete mode 100644 docs/snippets/svelte/your-component-with-decorator.mdx.mdx
 create mode 100644 docs/snippets/svelte/your-component-with-decorator.ts-4-9.mdx
 create mode 100644 docs/snippets/svelte/your-component-with-decorator.ts.mdx
 delete mode 100644 docs/snippets/svelte/your-component.mdx.mdx

diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index e73907d61c87..41daafbe8009 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -93,7 +93,7 @@ Use the `makeDecorator` API to create decorators in the style of the official ad
 
 <Callout variant="info">
 
- If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.
+If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.
 
 </Callout>
 
@@ -124,6 +124,7 @@ The `selectStory` API method allows you to select a single story. It accepts the
     'vue/button-story-with-addon-example.ts.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
     'svelte/button-story-with-addon-example.js.mdx',
+    'svelte/button-story-with-addon-example.ts.mdx',
     'web-components/button-story-with-addon-example.js.mdx',
     'web-components/button-story-with-addon-example.ts.mdx',
   ]}
diff --git a/docs/api/csf.md b/docs/api/csf.md
index 9e494e151a7a..d5ed3eb7ec40 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -51,6 +51,7 @@ With CSF, every named export in the file represents a story object by default.
     'vue/my-component-story-basic-and-props.js.mdx',
     'vue/my-component-story-basic-and-props.ts.mdx',
     'svelte/my-component-story-basic-and-props.js.mdx',
+    'svelte/my-component-story-basic-and-props.ts.mdx',
     'angular/my-component-story-basic-and-props.ts.mdx',
     'web-components/my-component-story-basic-and-props.js.mdx',
     'web-components/my-component-story-basic-and-props.ts.mdx',
@@ -112,6 +113,7 @@ Consider Storybook’s ["Button" example](../writing-stories/index.md#defining-s
     'vue/button-story-click-handler.3.js.mdx',
     'vue/button-story-click-handler.3.ts.mdx',
     'svelte/button-story-click-handler.js.mdx',
+    'svelte/button-story-click-handler.ts.mdx',
     'angular/button-story-click-handler.ts.mdx',
     'web-components/button-story-click-handler.js.mdx',
     'web-components/button-story-click-handler.ts.mdx',
@@ -138,6 +140,7 @@ Now consider the same example, re-written with args:
     'vue/button-story-click-handler-args.3.ts.mdx',
     'angular/button-story-click-handler-args.ts.mdx',
     'svelte/button-story-click-handler-args.js.mdx',
+    'svelte/button-story-click-handler-args.ts.mdx',
     'web-components/button-story-click-handler-args.js.mdx',
     'web-components/button-story-click-handler-args.ts.mdx',
     'solid/button-story-click-handler-args.js.mdx',
@@ -162,6 +165,8 @@ Or even more simply:
     'vue/button-story-click-handler-simplificated.ts.mdx',
     'web-components/button-story-click-handler-simplificated.js.mdx',
     'web-components/button-story-click-handler-simplificated.ts.mdx',
+    'svelte/button-story-click-handler-simplificated.js.mdx',
+    'svelte/button-story-click-handler-simplificated.ts.mdx',
     'solid/button-story-click-handler-simplificated.js.mdx',
     'solid/button-story-click-handler-simplificated.ts.mdx',
   ]}
@@ -193,6 +198,7 @@ A good use case for the `play` function is a form component. With previous Story
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'svelte/login-form-with-play-function.ts.mdx',
     'solid/login-form-with-play-function.js.mdx',
     'solid/login-form-with-play-function.ts.mdx',
   ]}
@@ -204,6 +210,8 @@ A good use case for the `play` function is a form component. With previous Story
 
 When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction.
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
 ## Custom render functions
 
 Starting in Storybook 6.4, you can write your stories as JavaScript objects, reducing the boilerplate code you need to generate to test your components, thus improving functionality and usability. `Render` functions are helpful methods to give you additional control over how the story renders. For example, if you were writing a story as an object and you wanted to specify how your component should render, you could write the following:
@@ -230,6 +238,8 @@ Starting in Storybook 6.4, you can write your stories as JavaScript objects, red
 
 When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
 
+</IfRenderer>
+
 ## Storybook export vs. name handling
 
 Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?
@@ -271,10 +281,11 @@ Consider the following story file:
     'react/my-component-story-with-nonstory.ts.mdx',
     'vue/my-component-story-with-nonstory.js.mdx',
     'vue/my-component-story-with-nonstory.ts.mdx',
-    'svelte/my-component-story-with-nonstory.js.mdx',
     'angular/my-component-story-with-nonstory.ts.mdx',
     'web-components/my-component-story-with-nonstory.js.mdx',
     'web-components/my-component-story-with-nonstory.ts.mdx',
+    'svelte/my-component-story-with-nonstory.js.mdx',
+    'svelte/my-component-story-with-nonstory.ts.mdx',
     'solid/my-component-story-with-nonstory.js.mdx',
     'solid/my-component-story-with-nonstory.ts.mdx',
   ]}
@@ -316,6 +327,8 @@ In CSF 2, the named exports are always functions that instantiate a component, a
     'web-components/csf-2-example-starter.ts.mdx',
     'solid/csf-2-example-starter.js.mdx',
     'solid/csf-2-example-starter.ts.mdx',
+    'svelte/csf-2-example-starter.js.mdx',
+    'svelte/csf-2-example-starter.ts.mdx',
   ]}
 />
 
@@ -336,6 +349,7 @@ Here's the CSF 3 equivalent:
     'web-components/csf-3-example-starter.js.mdx',
     'web-components/csf-3-example-starter.ts.mdx',
     'solid/csf-3-example-starter.ts.mdx',
+    'svelte/csf-3-example-starter.ts.mdx',
   ]}
 />
 
@@ -399,6 +413,8 @@ Let's start with a simple CSF 2 story function:
     'web-components/csf-2-example-story.ts.mdx',
     'solid/csf-2-example-story.js.mdx',
     'solid/csf-2-example-story.ts.mdx',
+    'svelte/csf-2-example-story.js.mdx',
+    'svelte/csf-2-example-story.ts.mdx',
   ]}
 />
 
@@ -421,11 +437,17 @@ Now, let's rewrite it as a story object in CSF 3 with an explicit `render` funct
     'web-components/csf-3-example-render.ts.mdx',
     'solid/csf-3-example-render.js.mdx',
     'solid/csf-3-example-render.ts.mdx',
+    'svelte/csf-3-example-render.js.mdx',
+    'svelte/csf-3-example-render.ts.mdx',
   ]}
 />
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
 Learn more about [render functions](#custom-render-functions).
 
+</IfRenderer>
+
 <!-- prettier-ignore-end -->
 
 But in CSF 2, a lot of story functions are identical: take the component specified in the default export and spread args into it. What's interesting about these stories is not the function, but the args passed into the function.
@@ -442,8 +464,12 @@ CSF 3 provides default render functions for each renderer. If all you're doing i
 
 <!-- prettier-ignore-end -->
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
 For more information, see the section on [custom render functions](#custom-render-functions).
 
+</IfRenderer>
+
 ### Generate titles automatically
 
 Finally, CSF 3 can automatically generate titles.
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 8325aed14f6e..7b4a0c071ada 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -22,6 +22,7 @@ Afterward, you can use any asset in your stories:
     'vue/component-story-static-asset-with-import.3.ts.mdx',
     'angular/component-story-static-asset-with-import.ts.mdx',
     'svelte/component-story-static-asset-with-import.js.mdx',
+    'svelte/component-story-static-asset-with-import.ts.mdx',
     'web-components/component-story-static-asset-with-import.js.mdx',
     'web-components/component-story-static-asset-with-import.ts.mdx',
     'solid/component-story-static-asset-with-import.js.mdx',
@@ -62,6 +63,7 @@ Here `../public` is your static directory. Now use it in a component or story li
     'vue/component-story-static-asset-without-import.ts.mdx',
     'angular/component-story-static-asset-without-import.ts.mdx',
     'svelte/component-story-static-asset-without-import.js.mdx',
+    'svelte/component-story-static-asset-without-import.ts.mdx',
     'web-components/component-story-static-asset-without-import.js.mdx',
     'web-components/component-story-static-asset-without-import.ts.mdx',
     'solid/component-story-static-asset-without-import.js.mdx',
@@ -117,6 +119,7 @@ Upload your files to an online CDN and reference them. In this example, we’re
     'vue/component-story-static-asset-cdn.ts.mdx',
     'angular/component-story-static-asset-cdn.ts.mdx',
     'svelte/component-story-static-asset-cdn.js.mdx',
+    'svelte/component-story-static-asset-cdn.ts.mdx',
     'web-components/component-story-static-asset-cdn.js.mdx',
     'web-components/component-story-static-asset-cdn.ts.mdx',
     'solid/component-story-static-asset-cdn.js.mdx',
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 2fb67af32861..efff7222f5bd 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -121,6 +121,10 @@ If you haven't used the CLI to setup the configuration, or if you want to define
 
 <!-- prettier-ignore-end -->
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
+<!-- Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example -->
+
 ## Fully custom args
 
 Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), 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:
@@ -155,6 +159,8 @@ By default, Storybook will add controls for all args that:
 
 Using `argTypes`, you can change the display and behavior of each control.
 
+</IfRenderer>
+
 ### Dealing with complex values
 
 When dealing with non-primitive values, you'll notice that you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story).
@@ -171,6 +177,7 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
     'vue/component-story-custom-args-complex.ts.mdx',
     'angular/component-story-custom-args-complex.ts.mdx',
     'svelte/component-story-custom-args-complex.js.mdx',
+    'svelte/component-story-custom-args-complex.ts.mdx',
     'web-components/component-story-custom-args-complex.js.mdx',
     'web-components/component-story-custom-args-complex.ts.mdx',
     'solid/component-story-custom-args-complex.js.mdx',
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index ff169ff91aa8..7acb99956520 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -170,6 +170,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
     'vue/my-component-story-use-globaltype.ts.mdx',
     'angular/my-component-story-use-globaltype.ts.mdx',
     'svelte/my-component-story-use-globaltype.js.mdx',
+    'svelte/my-component-story-use-globaltype.ts.mdx',
     'web-components/my-component-story-use-globaltype.js.mdx',
     'web-components/my-component-story-use-globaltype.ts.mdx',
     'solid/my-component-story-use-globaltype.js.mdx',
@@ -193,6 +194,7 @@ In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwa
     'vue/my-component-story-use-globaltype-backwards-compat.js.mdx',
     'angular/my-component-story-use-globaltype-backwards-compat.ts.mdx',
     'svelte/my-component-story-use-globaltype-backwards-compat.js.mdx',
+    'svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx',
     'web-components/my-component-story-use-globaltype-backwards-compat.js.mdx',
     'web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx',
     'solid/my-component-story-use-globaltype-backwards-compat.js.mdx',
diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
index dd321d9f30ec..90bcae73da0c 100644
--- a/docs/essentials/viewport.md
+++ b/docs/essentials/viewport.md
@@ -132,6 +132,7 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
     'web-components/my-component-story-configure-viewports.js.mdx',
     'web-components/my-component-story-configure-viewports.ts.mdx',
     'svelte/my-component-story-configure-viewports.js.mdx',
+    'svelte/my-component-story-configure-viewports.ts.mdx',
     'solid/my-component-story-configure-viewports.js.mdx',
     'solid/my-component-story-configure-viewports.ts.mdx',
   ]}
diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
index d85530557e9c..ddd320a21ec1 100644
--- a/docs/sharing/design-integrations.md
+++ b/docs/sharing/design-integrations.md
@@ -110,6 +110,7 @@ In Storybook, add a new [parameter](../writing-stories/parameters.md) named `des
     'vue/component-story-figma-integration.ts.mdx',
     'angular/component-story-figma-integration.ts.mdx',
     'svelte/component-story-figma-integration.js.mdx',
+    'svelte/component-story-figma-integration.ts.mdx',
     'web-components/component-story-figma-integration.js.mdx',
     'web-components/component-story-figma-integration.ts.mdx',
     'solid/component-story-figma-integration.js.mdx',
diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
new file mode 100644
index 000000000000..b2cda17845c1
--- /dev/null
+++ b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
@@ -0,0 +1,29 @@
+```html
+<!-- MockApolloWrapperClient.svelte -->
+
+<script lang="ts">
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<div>
+  <slot />
+</div>
+```
diff --git a/docs/snippets/svelte/badge-story.mdx.mdx b/docs/snippets/svelte/badge-story.mdx.mdx
deleted file mode 100644
index f30d432b4d38..000000000000
--- a/docs/snippets/svelte/badge-story.mdx.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
-```md
-<!-- Badge.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Badge from './Badge.svelte';
-
-<Meta title="MDX/Badge" component={Badge} />
-
-# Badge
-
-Let's define a story for our `Badge` component:
-
-<Story
-  name="positive"
-  args={{
-    status: 'positive',
-    label: 'Positive'
-  }} 
-  render={(args) => ({
-    Component: Badge,
-    props: args,
-  })} />
-
-We can drop it in a `Canvas` to get a code snippet:
-
-<Canvas>
-  <Story 
-    name="negative"
-    args={{
-      status: 'negative', 
-      label: 'Negative'
-    }}
-    render={(args) => ({
-      Component: Badge,
-      props: args,
-    })} />
-</Canvas>
-
-We can even preview multiple Stories in a block. This
-gets rendered as a group but defines individual stories
-with unique URLs, which is great for review and testing.
-
-<Canvas>
-  <Story 
-    name="warning"
-    args={{
-      status: 'warning',
-      label: 'Warning' 
-    }} 
-    render={(args) => ({
-      Component: Badge,
-      props: args,
-    })} />
-  <Story 
-    name="neutral" 
-    args={{
-      status: 'neutral', 
-      label: 'Neutral' 
-    }} 
-    render={(args) => ({
-      Component: Badge,
-      props: args,
-    })} />
-  <Story 
-    name="error"
-    args={{
-      status: 'error', 
-      label: 'Error' 
-    }}
-    render={(args) => ({
-      Component: Badge,
-      props: args,
-    })} />
-</Canvas>
-```
diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx
index b40b40322ee9..9304e1bfda12 100644
--- a/docs/snippets/svelte/button-group-story.js.mdx
+++ b/docs/snippets/svelte/button-group-story.js.mdx
@@ -10,16 +10,7 @@ export default {
   component: ButtonGroup,
 };
 
-/*
- *👇 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 Pair = {
-  render: (args) => ({
-    Component: ButtonGroup,
-    props: args,
-  }),
   args: {
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
diff --git a/docs/snippets/svelte/button-group-story.ts-4-9.mdx b/docs/snippets/svelte/button-group-story.ts-4-9.mdx
new file mode 100644
index 000000000000..aab891afac53
--- /dev/null
+++ b/docs/snippets/svelte/button-group-story.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```ts
+// ButtonGroup.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import ButtonGroup from './ButtonGroup.svelte';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = {
+  component: ButtonGroup,
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-group-story.ts.mdx b/docs/snippets/svelte/button-group-story.ts.mdx
new file mode 100644
index 000000000000..d0d9a8989620
--- /dev/null
+++ b/docs/snippets/svelte/button-group-story.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// ButtonGroup.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import ButtonGroup from './ButtonGroup.svelte';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta: Meta<typeof ButtonGroup> = {
+  component: ButtonGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-auto-docs.js.mdx b/docs/snippets/svelte/button-story-auto-docs.js.mdx
index 013999d572dd..b4bed93087ce 100644
--- a/docs/snippets/svelte/button-story-auto-docs.js.mdx
+++ b/docs/snippets/svelte/button-story-auto-docs.js.mdx
@@ -13,10 +13,6 @@ export default {
 };
 
 export const Primary = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     primary: true,
     label: 'Button',
@@ -24,10 +20,6 @@ export const Primary = {
 };
 
 export const Secondary = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     ...Primary.args,
     primary: false,
diff --git a/docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx
new file mode 100644
index 000000000000..a15d00516058
--- /dev/null
+++ b/docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx
@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} 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,
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-auto-docs.ts.mdx b/docs/snippets/svelte/button-story-auto-docs.ts.mdx
new file mode 100644
index 000000000000..26248d745aff
--- /dev/null
+++ b/docs/snippets/svelte/button-story-auto-docs.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+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,
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-click-handler-args.ts-4-9.mdx b/docs/snippets/svelte/button-story-click-handler-args.ts-4-9.mdx
new file mode 100644
index 000000000000..ff23875fed16
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler-args.ts-4-9.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { action } from '@storybook/addon-actions';
+
+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 = {
+  render: ({ label, click }) => ({
+    Component: Button,
+    props: {
+      label,
+    },
+    on: {
+      click,
+    },
+  }),
+  args: {
+    label: 'Hello',
+    click: action('clicked'),
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-click-handler-args.ts.mdx b/docs/snippets/svelte/button-story-click-handler-args.ts.mdx
new file mode 100644
index 000000000000..0601a77f56e7
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler-args.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  render: ({ label, click }) => ({
+    Component: Button,
+    props: {
+      label,
+    },
+    on: {
+      click,
+    },
+  }),
+  args: {
+    label: 'Hello',
+    click: action('clicked'),
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx
new file mode 100644
index 000000000000..8f6a170584d3
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx
@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Text = {
+  args: {...},
+};
+```
diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.ts-4-9.mdx
new file mode 100644
index 000000000000..13eeb3c3b7c6
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler-simplificated.ts-4-9.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+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 Text: Story = {
+  args: {...},
+};
+```
diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx
new file mode 100644
index 000000000000..860f8e586456
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+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 meta>;
+
+export const Text: Story = {
+  args: {...},
+};
+```
diff --git a/docs/snippets/svelte/button-story-click-handler.js.mdx b/docs/snippets/svelte/button-story-click-handler.js.mdx
index ff58c6e44a2c..06f272af6ca6 100644
--- a/docs/snippets/svelte/button-story-click-handler.js.mdx
+++ b/docs/snippets/svelte/button-story-click-handler.js.mdx
@@ -1,10 +1,10 @@
 ```js
 // Button.stories.js
 
-import Button from './Button.svelte';
-
 import { action } from '@storybook/addon-actions';
 
+import Button from './Button.svelte';
+
 export default {
   component: Button,
 };
diff --git a/docs/snippets/svelte/button-story-click-handler.ts-4-9.mdx b/docs/snippets/svelte/button-story-click-handler.ts-4-9.mdx
new file mode 100644
index 000000000000..16db58d0a779
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler.ts-4-9.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { action } from '@storybook/addon-actions';
+
+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 = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-click-handler.ts.mdx b/docs/snippets/svelte/button-story-click-handler.ts.mdx
new file mode 100644
index 000000000000..f5e8c397eba5
--- /dev/null
+++ b/docs/snippets/svelte/button-story-click-handler.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  render: () => ({
+    Component: Button,
+    props: {
+      label: 'Hello',
+    },
+    on: {
+      click: action('clicked'),
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx b/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx
deleted file mode 100644
index 8dcda41aff7a..000000000000
--- a/docs/snippets/svelte/button-story-component-args-primary.mdx.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<!-- 👇 Creates specific argTypes and turns all stories into primary -->
-
-<Meta title="Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: { 
-      control: 'color',
-    },
-  }},
-  args={{
-    primary: true,
-  }}/>
-
-<!-- Remainder story implementation -->
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/svelte/button-story-component-args-primary.ts-4-9.mdx
new file mode 100644
index 000000000000..7c83e880ac7f
--- /dev/null
+++ b/docs/snippets/svelte/button-story-component-args-primary.ts-4-9.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-component-args-primary.ts.mdx b/docs/snippets/svelte/button-story-component-args-primary.ts.mdx
new file mode 100644
index 000000000000..2b5e54a6ea2d
--- /dev/null
+++ b/docs/snippets/svelte/button-story-component-args-primary.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-component-decorator.js.mdx b/docs/snippets/svelte/button-story-component-decorator.js.mdx
index 75984c49a1ea..d777e387143f 100644
--- a/docs/snippets/svelte/button-story-component-decorator.js.mdx
+++ b/docs/snippets/svelte/button-story-component-decorator.js.mdx
@@ -8,22 +8,4 @@ export default {
   component: Button,
   decorators: [() => MarginDecorator],
 };
-
-// Your stories here.
-
-// Don't forget to use the component you're testing and not the MarginDecorator component
-```
-
-```html
-<!-- MarginDecorator.svelte -->
-
-<div>
-  <slot />
-</div>
-
-<style>
-  div {
-    margin: 3em;
-  }
-</style>
 ```
diff --git a/docs/snippets/svelte/button-story-component-decorator.mdx.mdx b/docs/snippets/svelte/button-story-component-decorator.mdx.mdx
deleted file mode 100644
index 843ae3a43f4c..000000000000
--- a/docs/snippets/svelte/button-story-component-decorator.mdx.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Story, Meta } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-import MarginDecorator from './MarginDecorator.svelte';
-
-<Meta title="Button" component={Button} decorators={[() => MarginDecorator]}/>
-
-<!-- Remainder story implementation -->
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/svelte/button-story-component-decorator.ts-4-9.mdx
new file mode 100644
index 000000000000..badb749d2732
--- /dev/null
+++ b/docs/snippets/svelte/button-story-component-decorator.ts-4-9.mdx
@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+import MarginDecorator from './MarginDecorator.svelte';
+
+const meta = {
+  component: Button,
+  decorators: [() => MarginDecorator],
+};
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-component-decorator.ts.mdx b/docs/snippets/svelte/button-story-component-decorator.ts.mdx
new file mode 100644
index 000000000000..67c72b7cc899
--- /dev/null
+++ b/docs/snippets/svelte/button-story-component-decorator.ts.mdx
@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+import MarginDecorator from './MarginDecorator.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  decorators: [() => MarginDecorator],
+};
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-decorator.js.mdx b/docs/snippets/svelte/button-story-decorator.js.mdx
index 30413fa807b4..94378724bb4d 100644
--- a/docs/snippets/svelte/button-story-decorator.js.mdx
+++ b/docs/snippets/svelte/button-story-decorator.js.mdx
@@ -8,15 +8,7 @@ export default {
   component: Button,
 };
 
-/*
- *👇 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,
-  }),
   decorators: [() => MarginDecorator],
 };
 ```
diff --git a/docs/snippets/svelte/button-story-decorator.mdx.mdx b/docs/snippets/svelte/button-story-decorator.mdx.mdx
deleted file mode 100644
index 5abb2d2bf697..000000000000
--- a/docs/snippets/svelte/button-story-decorator.mdx.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-import MarginDecorator from './MarginDecorator.svelte';
-
-<Meta title="Button" component={Button}/>
-
-<!--
- 👇 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.
--->
-
-<Story
-  name="Primary"
-  args={{}}
-  decorators={[() => MarginDecorator]}
-  render={(args) => ({
-    Component: Badge,
-    props: args,
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-decorator.ts-4-9.mdx b/docs/snippets/svelte/button-story-decorator.ts-4-9.mdx
new file mode 100644
index 000000000000..94567b8b9ec1
--- /dev/null
+++ b/docs/snippets/svelte/button-story-decorator.ts-4-9.mdx
@@ -0,0 +1,19 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+import MarginDecorator from './MarginDecorator.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  decorators: [() => MarginDecorator],
+};
+```
diff --git a/docs/snippets/svelte/button-story-decorator.ts.mdx b/docs/snippets/svelte/button-story-decorator.ts.mdx
new file mode 100644
index 000000000000..22ba3a40c092
--- /dev/null
+++ b/docs/snippets/svelte/button-story-decorator.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+import MarginDecorator from './MarginDecorator.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  decorators: [() => MarginDecorator],
+};
+```
diff --git a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx b/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
deleted file mode 100644
index 410d3fc6b0c1..000000000000
--- a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<!-- 👇 Creates specific argTypes -->
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: {
-      control: 'color',
-    },
-  }}
-/>
-
-<!-- 👇 Some function to demonstrate the behavior -->
-export const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-
-<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
-<Story
-  name="ExampleStory"
-  args={{
-    primary: true,
-    size: 'small',
-    label: "button",
-  }}>
-  {(args) => {
-    const { label } = args;
-    const functionResult = someFunction(label);
-    return {
-      Component: Button,
-      props: {
-        ...args,
-        label: functionResult,
-      },
-    };
-  }}
-</Story>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/svelte/button-story-default-export-with-component.ts-4-9.mdx
new file mode 100644
index 000000000000..62d8e08df1b7
--- /dev/null
+++ b/docs/snippets/svelte/button-story-default-export-with-component.ts-4-9.mdx
@@ -0,0 +1,13 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx b/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx
new file mode 100644
index 000000000000..d0bf35d7af69
--- /dev/null
+++ b/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-rename-story.ts-4-9.mdx b/docs/snippets/svelte/button-story-rename-story.ts-4-9.mdx
new file mode 100644
index 000000000000..2bb5d69c5565
--- /dev/null
+++ b/docs/snippets/svelte/button-story-rename-story.ts-4-9.mdx
@@ -0,0 +1,30 @@
+```ts
+// Button.stories.ts
+
+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>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = ({
+  name: 'I am the primary',
+  render: () => ({
+    Component: Button,
+    props: {
+      primary: true,
+      label: 'Button',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/button-story-rename-story.ts.mdx b/docs/snippets/svelte/button-story-rename-story.ts.mdx
new file mode 100644
index 000000000000..ad254c10b73d
--- /dev/null
+++ b/docs/snippets/svelte/button-story-rename-story.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// Button.stories.ts
+
+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 meta>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = ({
+  name: 'I am the primary',
+  render: () => ({
+    Component: Button,
+    props: {
+      primary: true,
+      label: 'Button',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/button-story-using-args.js.mdx b/docs/snippets/svelte/button-story-using-args.js.mdx
index 64dd4cd5f58b..8be69a92c46f 100644
--- a/docs/snippets/svelte/button-story-using-args.js.mdx
+++ b/docs/snippets/svelte/button-story-using-args.js.mdx
@@ -7,16 +7,7 @@ export default {
   component: Button,
 };
 
-/*
- *👇 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: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     backgroundColor: '#ff0',
     label: 'Button',
@@ -24,10 +15,6 @@ export const Primary = {
 };
 
 export const Secondary = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     ...Primary.args,
     label: '😄👍😍💯',
@@ -35,10 +22,6 @@ export const Secondary = {
 };
 
 export const Tertiary = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     ...Primary.args,
     label: '📚📕📈🤓',
diff --git a/docs/snippets/svelte/button-story-using-args.ts-4-9.mdx b/docs/snippets/svelte/button-story-using-args.ts-4-9.mdx
new file mode 100644
index 000000000000..e5d5dc11f72d
--- /dev/null
+++ b/docs/snippets/svelte/button-story-using-args.ts-4-9.mdx
@@ -0,0 +1,36 @@
+```ts
+// Button.stories.ts
+
+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>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-using-args.ts.mdx b/docs/snippets/svelte/button-story-using-args.ts.mdx
new file mode 100644
index 000000000000..edcd9995e364
--- /dev/null
+++ b/docs/snippets/svelte/button-story-using-args.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// Button.stories.ts
+
+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,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
+```
diff --git a/docs/snippets/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
index d96a3c9c2cba..e1fcca24d96d 100644
--- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
@@ -9,6 +9,7 @@ export default {
    * to learn how to generate automatic titles
    */
   title: 'Button',
+  component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
     myAddon: {
@@ -17,15 +18,5 @@ export default {
   },
 };
 
-/*
- *👇 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 Basic = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
-};
+export const Basic = {};
 ```
diff --git a/docs/snippets/svelte/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/svelte/button-story-with-addon-example.ts-4-9.mdx
new file mode 100644
index 000000000000..697c27744174
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-addon-example.ts-4-9.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  /* 👇 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 parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'this data is passed to the addon',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+```
diff --git a/docs/snippets/svelte/button-story-with-addon-example.ts.mdx b/docs/snippets/svelte/button-story-with-addon-example.ts.mdx
new file mode 100644
index 000000000000..53aa9fe085fd
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-addon-example.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 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 parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'this data is passed to the addon',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+```
diff --git a/docs/snippets/svelte/button-story-with-args.js.mdx b/docs/snippets/svelte/button-story-with-args.js.mdx
index 652c4b59d0d0..58cf0732e6be 100644
--- a/docs/snippets/svelte/button-story-with-args.js.mdx
+++ b/docs/snippets/svelte/button-story-with-args.js.mdx
@@ -7,16 +7,7 @@ export default {
   component: Button,
 };
 
-/*
- *👇 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: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     primary: true,
     label: 'Button',
diff --git a/docs/snippets/svelte/button-story-with-args.mdx.mdx b/docs/snippets/svelte/button-story-with-args.mdx.mdx
deleted file mode 100644
index 365def163b33..000000000000
--- a/docs/snippets/svelte/button-story-with-args.mdx.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<Meta title="Button" component={Button} />
-
-<!--
- 👇 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.
--->
-
-<Story
-  name="Primary"
-  args={{
-    primary: true,
-    label: 'Button',
-  }} 
-  render={(args) => ({
-    Component: Button,
-    props: args,
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-args.ts-4-9.mdx b/docs/snippets/svelte/button-story-with-args.ts-4-9.mdx
index 045361662c3e..059ecc250092 100644
--- a/docs/snippets/svelte/button-story-with-args.ts-4-9.mdx
+++ b/docs/snippets/svelte/button-story-with-args.ts-4-9.mdx
@@ -12,16 +12,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 Primary: Story = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     primary: true,
     label: 'Button',
diff --git a/docs/snippets/svelte/button-story-with-args.ts.mdx b/docs/snippets/svelte/button-story-with-args.ts.mdx
index ee49e33b2069..0c481911787c 100644
--- a/docs/snippets/svelte/button-story-with-args.ts.mdx
+++ b/docs/snippets/svelte/button-story-with-args.ts.mdx
@@ -12,16 +12,7 @@ const meta: Meta<typeof Button> = {
 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 Primary: Story = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     primary: true,
     label: 'Button',
diff --git a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
deleted file mode 100644
index c6d410ddc632..000000000000
--- a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<!-- 👇 Creates specific parameters for the story -->
-<Meta
-  title="Button"
-  component={Button}
-  parameters={{
-    backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
-    },
-  }}
-/>
-
-<!-- Your story implementation -->
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-blue-args.ts-4-9.mdx b/docs/snippets/svelte/button-story-with-blue-args.ts-4-9.mdx
new file mode 100644
index 000000000000..c45a9dcd99ab
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-blue-args.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-with-blue-args.ts.mdx b/docs/snippets/svelte/button-story-with-blue-args.ts.mdx
new file mode 100644
index 000000000000..4e2960f81120
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-blue-args.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
deleted file mode 100644
index 00fa74f2c06f..000000000000
--- a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<Meta title="Button" component={Button} />
-
-<!--
- 👇 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.
--->
-
-<Story 
-  name="Primary"
-  render={() => ({
-    Component: Button,
-    props: {
-      backgroundColor: '#ff0',
-      label: 'Button',
-    }
-  })} />
-<Story 
-  name="Secondary"
-  render={() => ({
-    Component: Button,
-    props: {
-      background: '#ff0',
-      label: '😄👍😍💯',
-    },
-  })} />
-<Story 
-  name="Tertiary"
-  render={() => ({
-    Component: Button,
-    props: {
-      background: '#ff0',
-      label: '📚📕📈🤓',
-    },
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/svelte/button-story-with-emojis.ts-4-9.mdx
new file mode 100644
index 000000000000..61c72830fa8f
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-emojis.ts-4-9.mdx
@@ -0,0 +1,49 @@
+```ts
+// Button.stories.ts
+
+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>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: 'Button',
+    },
+  }),
+};
+
+export const Secondary: Story = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: '😄👍😍💯',
+    },
+  }),
+};
+
+export const Tertiary: Story = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: '📚📕📈🤓',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/button-story-with-emojis.ts.mdx b/docs/snippets/svelte/button-story-with-emojis.ts.mdx
new file mode 100644
index 000000000000..8bcc1bd7c66a
--- /dev/null
+++ b/docs/snippets/svelte/button-story-with-emojis.ts.mdx
@@ -0,0 +1,49 @@
+```ts
+// Button.stories.ts
+
+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 meta>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/svelte/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: 'Button',
+    },
+  }),
+};
+
+export const Secondary: Story = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: '😄👍😍💯',
+    },
+  }),
+};
+
+export const Tertiary: Story = {
+  render: () => ({
+    Component: Button,
+    props: {
+      backgroundColor: '#ff0',
+      label: '📚📕📈🤓',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/button-story.mdx.mdx b/docs/snippets/svelte/button-story.mdx.mdx
deleted file mode 100644
index 863161bf7248..000000000000
--- a/docs/snippets/svelte/button-story.mdx.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```md
-<!-- Button.stories.mdx-->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<Meta title="Button" component={Button}/>
-
-# Button
-
-<!--
- 👇 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.
--->
-
-<Story 
-  name="Primary"
-  render={() => ({
-    Component:Button,
-    props: {
-      primary: true,
-      label: 'Button',
-    },
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/checkbox-story.mdx.mdx b/docs/snippets/svelte/checkbox-story.mdx.mdx
deleted file mode 100644
index 7359621ab606..000000000000
--- a/docs/snippets/svelte/checkbox-story.mdx.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
-```md
-<!-- Checkbox.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Checkbox from './Checkbox.svelte';
-
-<Meta title="MDX/Checkbox" component={Checkbox} />
-
-<!--
- 👇 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.
--->
-
-# Checkbox
-
-With `MDX`, we can define a story for `Checkbox` right in the middle of our
-Markdown documentation.
-
-<Canvas>
-  <Story 
-    name="Unchecked"
-    args={{ 
-      label: 'Unchecked',
-    }}
-    render={(args) => ({
-      Component: Checkbox,
-      props: args
-    })} />
-
-  <Story 
-    name="Checked"
-    args={{ 
-      label: 'Unchecked', 
-      checked: true,
-    }}
-    render={(args) => ({
-      Component: Checkbox,
-      props: args
-    })} />
-
-  <Story 
-    name="Secondary"
-    args={{
-      label: 'Secondary', 
-      checked: true, 
-      appearance: 'secondary',
-    }}
-    render={(args) => ({
-      Component: Checkbox,
-      props: args
-    })} />
-</Canvas>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/svelte/component-story-custom-args-complex.ts-4-9.mdx
new file mode 100644
index 000000000000..e32f516fb01b
--- /dev/null
+++ b/docs/snippets/svelte/component-story-custom-args-complex.ts-4-9.mdx
@@ -0,0 +1,46 @@
+```ts
+// YourComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  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'],
+    },
+  },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Do some logic here
+};
+
+export const ExampleStory: Story = {
+  render: ({ propertyA, propertyB }) => {
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+    return {
+      Component: YourComponent,
+      props: {
+        ...args,
+        someProperty: someFunctionResult,
+      },
+    };
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+};
+```
diff --git a/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx b/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx
new file mode 100644
index 000000000000..eb0a45d9a1db
--- /dev/null
+++ b/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx
@@ -0,0 +1,46 @@
+```ts
+// YourComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  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'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Do some logic here
+};
+
+export const ExampleStory: Story = {
+  render: ({ propertyA, propertyB }) => {
+    //👇 Assigns the function result to a variable
+    const someFunctionResult = someFunction(propertyA, propertyB);
+    return {
+      Component: YourComponent,
+      props: {
+        ...args,
+        someProperty: someFunctionResult,
+      },
+    };
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+};
+```
diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx
index f77576417513..f6781fe6fe61 100644
--- a/docs/snippets/svelte/component-story-figma-integration.js.mdx
+++ b/docs/snippets/svelte/component-story-figma-integration.js.mdx
@@ -5,14 +5,10 @@ import MyComponent from './MyComponent.svelte';
 
 // More on default export: https://storybook.js.org/docs/writing-stories/#default-export
 export default {
-  component: { MyComponent },
+  component: MyComponent,
 };
 
 export const Example = {
-  render: () => ({
-    Component: MyComponent,
-    props: {},
-  }),
   parameters: {
     design: {
       type: 'figma',
diff --git a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
deleted file mode 100644
index f28ee0608e39..000000000000
--- a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-<Meta
-  title="FigmaExample"
-  component={MyComponent}
-/>
-
-<!--
- 👇 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.
--->
-
-<Canvas>
-  <Story
-    name="Example"
-     parameters={{
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/file/Sample-File',
-      },
-    }}
-    render={() => ({
-      Component: MyComponent,
-      props: {}
-    })} />
-</Canvas>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/svelte/component-story-figma-integration.ts-4-9.mdx
new file mode 100644
index 000000000000..bf5c42c553f4
--- /dev/null
+++ b/docs/snippets/svelte/component-story-figma-integration.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```
diff --git a/docs/snippets/svelte/component-story-figma-integration.ts.mdx b/docs/snippets/svelte/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..799438a116eb
--- /dev/null
+++ b/docs/snippets/svelte/component-story-figma-integration.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```
diff --git a/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
deleted file mode 100644
index 449383141f75..000000000000
--- a/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<Meta title="Button" component={Button}/>
-
-<!--
- 👇 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.
--->
-
-<Story 
-  name="Basic" 
-  args={{ label: 'hello' }}
-  render={(args) => ({
-    Component: Button,
-    props: args,
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
deleted file mode 100644
index c2704b49bbd4..000000000000
--- a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-```md
-<!-- MyComponent.stories.js -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-<Meta title="img" component={MyComponent} />
-
-<!--
- 👇 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.
--->
-
-<Story 
-  name="WithAnImage"
-  render={() => ({
-    Component: MyComponent,
-    props: {
-      src: 'https://storybook.js.org/images/placeholders/350x150.png',
-      alt: 'my image',
-    },
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.ts-4-9.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.ts-4-9.mdx
new file mode 100644
index 000000000000..542c6ccefb33
--- /dev/null
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts
+
+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 WithAnImage: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      src: 'https://storybook.js.org/images/placeholders/350x150.png',
+      alt: 'My CDN placeholder',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx
new file mode 100644
index 000000000000..3b21d2eed894
--- /dev/null
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts
+
+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 meta>;
+
+export const WithAnImage: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      src: 'https://storybook.js.org/images/placeholders/350x150.png',
+      alt: 'My CDN placeholder',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
deleted file mode 100644
index 0b688fa554de..000000000000
--- a/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-import imageFile from './static/image.png';
-
-<Meta title="img" component={MyComponent} />
-
-<!--
- 👇 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 image = {
-  src: imageFile,
-  alt: 'my image',
-};
-
-<Story 
-  name="WithAnImage"
-  render={() => ({
-    Component: MyComponent,
-    props: image
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.ts-4-9.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.ts-4-9.mdx
new file mode 100644
index 000000000000..bc8eb9d4688c
--- /dev/null
+++ b/docs/snippets/svelte/component-story-static-asset-with-import.ts-4-9.mdx
@@ -0,0 +1,28 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+import imageFile from './static/image.png';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: image,
+  }),
+};
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx
new file mode 100644
index 000000000000..9014220f808c
--- /dev/null
+++ b/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx
@@ -0,0 +1,28 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+import imageFile from './static/image.png';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+export const WithAnImage: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: image,
+  }),
+};
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
deleted file mode 100644
index 5d7141fd087e..000000000000
--- a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte0;
-
-<Meta title="img" component={MyComponent} />
-
-<!-- Assume image.png is located in the "public" directory. -->
-
-<Story 
-  name="withAnImage"
-  render={() => ({
-    Component: MyComponent,
-    props: {
-      src: '/image.png',
-      alt: 'my image',
-    },
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.ts-4-9.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.ts-4-9.mdx
new file mode 100644
index 000000000000..894af1a2f567
--- /dev/null
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.ts-4-9.mdx
@@ -0,0 +1,25 @@
+```ts
+// MyComponent.stories.ts
+
+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>;
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      src: '/image.png',
+      alt: 'my image',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx
new file mode 100644
index 000000000000..cfc54fb20623
--- /dev/null
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// MyComponent.stories.ts
+
+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 meta>;
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      src: '/image.png',
+      alt: 'my image',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/component-story-with-accessibility.mdx.mdx b/docs/snippets/svelte/component-story-with-accessibility.mdx.mdx
deleted file mode 100644
index 173dc60e1691..000000000000
--- a/docs/snippets/svelte/component-story-with-accessibility.mdx.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import Button from './Button.svelte';
-
-<Meta 
-  title="Accessibility testing" 
-  component={Button} 
-  argTypes={{
-    backgroundColor: {
-      control: {
-        type: 'color',
-      }
-    }
-  }} />
-
-<!--
- 👇 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.
--->
-
-## This is an accessible story
-
-<Story
-  name="Accessible"
-  args={{
-    primary: false, 
-    label: 'Button'
-  }}
-  render={(args) => ({
-    Component: Button,
-    props: args,
-  })} />
- 
-## This is not
-
-<Story
-  name="Inaccessible"
-  args={{
-    primary: false,
-    label: 'Button',
-    backgroundColor: 'red'
-  }}
-  render={(args) => ({
-    Component: Button,
-    props: args,
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-with-accessibility.ts-4-9.mdx b/docs/snippets/svelte/component-story-with-accessibility.ts-4-9.mdx
new file mode 100644
index 000000000000..fd54dd1393c1
--- /dev/null
+++ b/docs/snippets/svelte/component-story-with-accessibility.ts-4-9.mdx
@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// This is an accessible story
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible: Story = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
diff --git a/docs/snippets/svelte/component-story-with-accessibility.ts.mdx b/docs/snippets/svelte/component-story-with-accessibility.ts.mdx
new file mode 100644
index 000000000000..c66dc1afb6e3
--- /dev/null
+++ b/docs/snippets/svelte/component-story-with-accessibility.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// This is an accessible story
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible: Story = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
diff --git a/docs/snippets/svelte/component-test-with-testing-library.js.mdx b/docs/snippets/svelte/component-test-with-testing-library.js.mdx
index f7e1702c3451..cd3da15a6bfc 100644
--- a/docs/snippets/svelte/component-test-with-testing-library.js.mdx
+++ b/docs/snippets/svelte/component-test-with-testing-library.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Form.test.js
+// Form.test.js|ts
 
 import { render, fireEvent } from '@testing-library/svelte';
 
diff --git a/docs/snippets/svelte/csf-2-example-starter.js.mdx b/docs/snippets/svelte/csf-2-example-starter.js.mdx
new file mode 100644
index 000000000000..025761271718
--- /dev/null
+++ b/docs/snippets/svelte/csf-2-example-starter.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import Button from './Button.svelte';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Primary = (args) => ({
+  Component: Button,
+  props: args,
+});
+Primary.args = { primary: true };
+```
diff --git a/docs/snippets/svelte/csf-2-example-starter.ts.mdx b/docs/snippets/svelte/csf-2-example-starter.ts.mdx
new file mode 100644
index 000000000000..67f72c6419ce
--- /dev/null
+++ b/docs/snippets/svelte/csf-2-example-starter.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryFn } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+export default {
+  title: 'Button',
+  component: Button,
+} as Meta<typeof Button>;
+
+export const Primary: StoryFn<typeof Button> = (args) => ({
+  Component: Button,
+  props: args,
+});
+Primary.args = { primary: true };
+```
diff --git a/docs/snippets/svelte/csf-2-example-story.js.mdx b/docs/snippets/svelte/csf-2-example-story.js.mdx
new file mode 100644
index 000000000000..31654612ae2b
--- /dev/null
+++ b/docs/snippets/svelte/csf-2-example-story.js.mdx
@@ -0,0 +1,9 @@
+```js
+// CSF 2
+
+// Other imports and story implementation
+export const Default = (args) => ({
+  Component: Button,
+  props: args,
+});
+```
diff --git a/docs/snippets/svelte/csf-2-example-story.ts.mdx b/docs/snippets/svelte/csf-2-example-story.ts.mdx
new file mode 100644
index 000000000000..3d479ca132fc
--- /dev/null
+++ b/docs/snippets/svelte/csf-2-example-story.ts.mdx
@@ -0,0 +1,9 @@
+```ts
+// CSF 2
+
+// Other imports and story implementation
+export const Primary: StoryFn<typeof Button> = (args) => ({
+  Component: Button,
+  props: args,
+});
+```
diff --git a/docs/snippets/svelte/csf-3-example-render.js.mdx b/docs/snippets/svelte/csf-3-example-render.js.mdx
new file mode 100644
index 000000000000..bf3cd564a422
--- /dev/null
+++ b/docs/snippets/svelte/csf-3-example-render.js.mdx
@@ -0,0 +1,11 @@
+```js
+// CSF 3 - explicit render function
+
+// Other imports and story implementation
+export const Default = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  });
+};
+```
diff --git a/docs/snippets/svelte/csf-3-example-render.ts.mdx b/docs/snippets/svelte/csf-3-example-render.ts.mdx
new file mode 100644
index 000000000000..ea8603bdcf9a
--- /dev/null
+++ b/docs/snippets/svelte/csf-3-example-render.ts.mdx
@@ -0,0 +1,11 @@
+```ts
+// CSF 3 - explicit render function
+
+// Other imports and story implementation
+export const Default: Story = {
+  render: (args) => ({
+    Component: Button,
+    props: args,
+  }),
+};
+```
diff --git a/docs/snippets/svelte/csf-3-example-starter.ts.mdx b/docs/snippets/svelte/csf-3-example-starter.ts.mdx
new file mode 100644
index 000000000000..70a4585e5192
--- /dev/null
+++ b/docs/snippets/svelte/csf-3-example-starter.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// Button.stories.ts
+
+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 meta>;
+
+export const Primary: Story = { args: { primary: true } };
+```
diff --git a/docs/snippets/svelte/document-screen-fetch.js.mdx b/docs/snippets/svelte/document-screen-fetch.js.mdx
index b50d0bc021bd..e36bec8be30b 100644
--- a/docs/snippets/svelte/document-screen-fetch.js.mdx
+++ b/docs/snippets/svelte/document-screen-fetch.js.mdx
@@ -7,6 +7,7 @@
   import PageLayout from './PageLayout.svelte';
   import DocumentHeader from './DocumentHeader.svelte';
   import DocumentList from './DocumentList.svelte';
+
   export let user = {};
   export let document = {};
   export let subdocuments = [];
@@ -35,7 +36,7 @@
 
 {#if status === "error"}
 <p>There was an error fetching the data!</p>
-{/if} {#if status === "loading"}
+{:else if status === "loading"}
 <p>Loading...</p>
 {:else}
 <PageLayout {user}>
diff --git a/docs/snippets/svelte/document-screen-fetch.ts.mdx b/docs/snippets/svelte/document-screen-fetch.ts.mdx
new file mode 100644
index 000000000000..a64fa476ccad
--- /dev/null
+++ b/docs/snippets/svelte/document-screen-fetch.ts.mdx
@@ -0,0 +1,47 @@
+```html
+<!-- YourPage.svelte -->
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  export let user: Record<string, unknown> = {};
+  export let document: Record<string, unknown> = {};
+  export let subdocuments: Record<string, unknown>[] = [];
+  export let status: 'error' | 'loading' | 'success' = 'loading';
+
+  onMount(async () => {
+    await fetch('https://your-restful-endpoint')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(res.statusText);
+        }
+        return res;
+      })
+      .then((res) => res.json())
+      .then((data) => {
+        user = data.user;
+        status = 'success';
+        document = data.document;
+        subdocuments = data.subdocuments;
+      })
+      .catch(() => {
+        status = 'error';
+      });
+  });
+</script>
+
+{#if status === "error"}
+<p>There was an error fetching the data!</p>
+{:else if status === "loading"}
+<p>Loading...</p>
+{:else}
+<PageLayout {user}>
+  <DocumentHeader {document} />
+  <DocumentList documents="{subdocuments}" />
+</PageLayout>
+{/if}
+```
diff --git a/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx b/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx
new file mode 100644
index 000000000000..df975e9da4b3
--- /dev/null
+++ b/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx
@@ -0,0 +1,46 @@
+```html
+<!-- YourPage.svelte -->
+
+<script lang="ts">
+  import gql from 'graphql-tag';
+  import { query } from 'svelte-apollo';
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  const AllInfoQuery = gql`
+    query AllInfoQuery {
+      user {
+        userID
+        name
+      }
+      document {
+        id
+        userID
+        title
+        brief
+        status
+      }
+      subdocuments {
+        id
+        userID
+        title
+        content
+        status
+      }
+    }
+  `;
+  const infoResult = query(AllInfoQuery);
+</script>
+
+{#if $infoResult.loading}
+<p>Loading...</p>
+{:else if $infoResult.error}
+<p>There was an error fetching the data!</p>
+{:else}
+<PageLayout {$infoResult.data.user}>
+  <DocumentHeader {$infoResult.data.document} />
+  <DocumentList {$infoResult.data.subdocuments} />
+</PageLayout>
+{/if}
+```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
index 7f44a194d27d..2ef38ef65b84 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
@@ -8,7 +8,7 @@ import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
 
 export default {
   component: DocumentScreen,
-  decorators: [() => MockGraphqlProvider],
+  decorators: [() => MockApolloWrapperClient],
 };
 
 //👇The mocked data that will be used in the story
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts-4-9.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts-4-9.mdx
new file mode 100644
index 000000000000..ab72000499cd
--- /dev/null
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts-4-9.mdx
@@ -0,0 +1,70 @@
+```ts
+// YourPage.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { graphql } from 'msw';
+
+import DocumentScreen from './YourPage.svelte';
+import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
+
+const meta = {
+  component: DocumentScreen,
+  decorators: [() => MockApolloWrapperClient],
+} satisfies Meta<typeof DocumentScreen>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+export const MockedSuccess: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(ctx.data(TestData));
+      }),
+    ],
+  },
+};
+
+export const MockedError: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
+};
+```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts.mdx
new file mode 100644
index 000000000000..c61204cfd1ab
--- /dev/null
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts.mdx
@@ -0,0 +1,70 @@
+```ts
+// YourPage.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { graphql } from 'msw';
+
+import DocumentScreen from './YourPage.svelte';
+import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
+
+const meta: Meta<typeof DocumentScreen> = {
+  component: DocumentScreen,
+  decorators: [() => MockApolloWrapperClient],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+
+export const MockedSuccess: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(ctx.data(TestData));
+      }),
+    ],
+  },
+};
+
+export const MockedError: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
+};
+```
diff --git a/docs/snippets/svelte/histogram-story.mdx.mdx b/docs/snippets/svelte/histogram-story.mdx.mdx
deleted file mode 100644
index c17806227f8d..000000000000
--- a/docs/snippets/svelte/histogram-story.mdx.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```md
-<!-- Histogram.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Histogram from './Histogram.svelte';
-
-<Meta title="Histogram" 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.
--->
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      dataType: 'latency',
-      showHistogramLabels: true,
-      histogramAccentColor: '#1EA7FD',
-      label: 'Latency distribution',
-    }}
-    render={(args) => ({
-      Component: Histogram,
-      props: args,
-    })} />
-</Canvas>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.mdx.mdx b/docs/snippets/svelte/loader-story.mdx.mdx
deleted file mode 100644
index d6cc1e15fb76..000000000000
--- a/docs/snippets/svelte/loader-story.mdx.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-```md
-<!-- TodoItem.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import TodoItem from './TodoItem.svelte';
-
-import fetch from 'node-fetch';
-
-<Meta title="Examples/Loader" component={TodoItem} />
-
-<!--
- 👇 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.
--->
-
-<Story
-  name="Primary"
-  loaders={[
-    async () => ({
-      todo: await (
-        await fetch('https://jsonplaceholder.typicode.com/todos/1')
-      ).json(),
-    }),
-  ]}
-  render={(args, { loaded: { todo } }) => ({
-    Component: TodoItem,
-    props: {
-      ...args,
-      todo,
-    },
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.ts-4-9.mdx b/docs/snippets/svelte/loader-story.ts-4-9.mdx
new file mode 100644
index 000000000000..3a0c52903ec4
--- /dev/null
+++ b/docs/snippets/svelte/loader-story.ts-4-9.mdx
@@ -0,0 +1,36 @@
+```ts
+// TodoItem.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import fetch from 'node-fetch';
+
+import TodoItem from './TodoItem.svelte';
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/svelte/api/csf
+ * to learn how to use render functions.
+ */
+const meta = {
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => ({
+    Component: TodoItem,
+    props: {
+      ...args,
+      ...todo,
+    },
+  }),
+} satisfies Meta<typeof TodoItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/svelte/loader-story.ts.mdx b/docs/snippets/svelte/loader-story.ts.mdx
new file mode 100644
index 000000000000..5bea2892ef0c
--- /dev/null
+++ b/docs/snippets/svelte/loader-story.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// TodoItem.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import fetch from 'node-fetch';
+
+import TodoItem from './TodoItem.svelte';
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/svelte/api/csf
+ * to learn how to use render functions.
+ */
+const meta: Meta<typeof TodoItem> = {
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => ({
+    Component: TodoItem,
+    props: {
+      ...args,
+      ...todo,
+    },
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx
index c0fbce4a48fc..a73d16222c61 100644
--- a/docs/snippets/svelte/login-form-with-play-function.js.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -1,7 +1,8 @@
 ```js
 // LoginForm.stories.js
 
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.svelte';
 
@@ -9,27 +10,13 @@ export default {
   component: LoginForm,
 };
 
-/*
- *👇 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 EmptyForm = {
-  render: (args) => ({
-    Component: LoginForm,
-    props: args,
-  }),
-};
+export const 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
  */
 export const FilledForm = {
-  render: (args) => ({
-    Component: LoginForm,
-    props: args,
-  }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
deleted file mode 100644
index bc4fca63ad11..000000000000
--- a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-```md
-<!-- LoginForm.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import { within, userEvent } from '@storybook/testing-library';
-
-import { expect } from '@storybook/jest';
-
-import LoginForm from './LoginForm.svelte';
-
-<Meta title="Form" component={LoginForm} />
-
-<!--
- 👇 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.
--->
-
-<Canvas>
-  <Story 
-  name="Empty Form"
-  render={(args) => ({
-    Component: LoginForm,
-    props: args,
-  })} />
-  <Story
-    name="Filled Form"
-    render={(args) => ({
-      Component: LoginForm,
-      props: args,
-    })} 
-    play={ async ({ canvasElement }) => {
-      // Starts querying the component from its root element
-      const canvas = within(canvasElement);
-
-      // 👇 Simulate interactions
-      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();
-    }} />
-</Canvas>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx
new file mode 100644
index 000000000000..6b4da3545731
--- /dev/null
+++ b/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx
@@ -0,0 +1,43 @@
+```ts
+// LoginForm.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+import LoginForm from './LoginForm.svelte';
+
+const meta = {
+  component: LoginForm,
+} satisfies Meta<typeof LoginForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EmptyForm: Story = {};
+
+/*
+ * 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);
+
+    // 👇 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();
+  },
+};
+```
diff --git a/docs/snippets/svelte/login-form-with-play-function.ts.mdx b/docs/snippets/svelte/login-form-with-play-function.ts.mdx
new file mode 100644
index 000000000000..c89d3591d6d8
--- /dev/null
+++ b/docs/snippets/svelte/login-form-with-play-function.ts.mdx
@@ -0,0 +1,43 @@
+```ts
+// LoginForm.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+import LoginForm from './LoginForm.svelte';
+
+const meta: Meta<typeof LoginForm> = {
+  component: LoginForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EmptyForm: Story = {};
+
+/*
+ * 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);
+
+    // 👇 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();
+  },
+};
+```
diff --git a/docs/snippets/svelte/margindecorator.with-margin-component.js.mdx b/docs/snippets/svelte/margindecorator.with-margin-component.js.mdx
new file mode 100644
index 000000000000..c7a129062935
--- /dev/null
+++ b/docs/snippets/svelte/margindecorator.with-margin-component.js.mdx
@@ -0,0 +1,13 @@
+```html
+<!-- MarginDecorator.svelte -->
+
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    margin: 3em;
+  }
+</style>
+```
diff --git a/docs/snippets/svelte/margindecorator.with-margin-component.ts.mdx b/docs/snippets/svelte/margindecorator.with-margin-component.ts.mdx
new file mode 100644
index 000000000000..c7a129062935
--- /dev/null
+++ b/docs/snippets/svelte/margindecorator.with-margin-component.ts.mdx
@@ -0,0 +1,13 @@
+```html
+<!-- MarginDecorator.svelte -->
+
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    margin: 3em;
+  }
+</style>
+```
diff --git a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
deleted file mode 100644
index 09c2626f435f..000000000000
--- a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-```md
-<!-- Badge.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Badge from './Badge.svelte';
-
-<Meta title="MDX/Badge" component={Badge} />
-
-<!--
- 👇 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.
--->
-
-<Canvas>
-  <Story 
-    name="warning"
-    args={{
-      status: 'warning',
-      label: 'Warning',
-    }}
-    render={(args) => ({
-      Component: Badge,
-      props: args,
-    })} />
-  <Story 
-    name="neutral"
-    args={{
-      status: 'neutral',
-      label: 'Neutral',
-    }}
-    render={(args) => ({
-      Component: Badge,
-      props: args,
-    })} />
-  <Story 
-    name="error"
-    args={{
-      status: 'error',
-      label: 'Error',
-    }}
-    render={(args) => ({
-      Component: Badge,
-      props: args,
-    })} />
-</Canvas>
-```
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
index baaf11c2767c..42e11888b759 100644
--- a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
@@ -7,12 +7,13 @@ export default {
   component: MyComponent,
 };
 
-export const Basic = {
-  render: () => ({
-    Component: MyComponent,
-  }),
-};
+export const Basic = {};
 
+/*
+ *👇 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 WithProp = {
   render: () => ({
     Component: MyComponent,
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.ts-4-9.mdx
new file mode 100644
index 000000000000..486fd96d1ceb
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.ts-4-9.mdx
@@ -0,0 +1,30 @@
+```ts
+// MyComponent.stories.ts
+
+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 Basic: Story = {};
+
+/*
+ *👇 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 WithProp: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      prop: 'value',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx
new file mode 100644
index 000000000000..ad985f99262e
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// MyComponent.stories.ts
+
+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 meta>;
+
+export const Basic: Story = {};
+
+/*
+ *👇 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 WithProp: Story = {
+  render: () => ({
+    Component: MyComponent,
+    props: {
+      prop: 'value',
+    },
+  }),
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
index 075779bbb1bb..856aed93e83b 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
@@ -19,9 +19,6 @@ export default {
 };
 
 export const MyStory = {
-  render: () => ({
-    Component: MyComponent,
-  }),
   parameters: {
     viewport: {
       defaultViewport: 'iphonex',
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
deleted file mode 100644
index b3b0ee79076e..000000000000
--- a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.svelte';
-
-<Meta
-  title="MyComponent"
-  parameters={{
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-      defaultViewport: 'iphone6',
-    },
-  }}
-  component={MyComponent} />
-
-<!--
- 👇 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.
--->
-
-<Story
-  name="MyStory"
-  parameters={{
-    viewport: {
-      defaultViewport: 'iphonex',
-    }
-  }}
-  render={(args) => ({
-    Component: MyComponent,
-    props: {},
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.ts-4-9.mdx
new file mode 100644
index 000000000000..2395d688fb55
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.ts-4-9.mdx
@@ -0,0 +1,32 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+  parameters: {
+    //👇 The viewports object from the Essentials addon
+    viewport: {
+      //👇 The viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      //👇 Your own default viewport
+      defaultViewport: 'iphone6',
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MyStory: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
+  },
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx
new file mode 100644
index 000000000000..93ab5bcf7ae0
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx
@@ -0,0 +1,32 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  parameters: {
+    //👇 The viewports object from the Essentials addon
+    viewport: {
+      //👇 The viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      //👇 Your own default viewport
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MyStory: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
+  },
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
index 8ee73b34422d..c25aa876eb7d 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -4,7 +4,7 @@
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
   return {
-    component: MyComponent,
+    Component: MyComponent,
     props: {
       locale: caption,
     },
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts-4-9.mdx
new file mode 100644
index 000000000000..f48fa95463e0
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts-4-9.mdx
@@ -0,0 +1,13 @@
+```ts
+// MyComponent.stories.ts
+
+export const StoryWithLocale: Story = ({ globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    Component: MyComponent,
+    props: {
+      locale: caption,
+    },
+  };
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx
new file mode 100644
index 000000000000..f48fa95463e0
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// MyComponent.stories.ts
+
+export const StoryWithLocale: Story = ({ globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return {
+    Component: MyComponent,
+    props: {
+      locale: caption,
+    },
+  };
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
index 176e9cae2381..8542b37240a7 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
@@ -26,7 +26,7 @@ export const StoryWithLocale = {
   render: (args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
-      component: MyComponent,
+      Component: MyComponent,
       props: {
         locale: caption,
       },
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
deleted file mode 100644
index 56de0d43fdc5..000000000000
--- a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-<Meta title="MyComponent" component={MyComponent} />
-
-export const getCaptionForLocale = (locale) => {
-  switch(locale) {
-    case 'es': return 'Hola!';
-    case 'fr': return 'Bonjour!';
-    case 'kr': return '안녕하세요!';
-    case 'zh': return '你好!';
-    default:
-      return 'Hello!';
-  }
-};
-
-<!--
- 👇 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.
--->
-
-<Story 
-  name="StoryWithLocale"
-  render={(args, { globals: { locale } }) => {
-    const caption = getCaptionForLocale(locale);
-    return {
-      component: MyComponent,
-      props: {
-        locale: caption,
-      },
-    };
-  }} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.ts-4-9.mdx
new file mode 100644
index 000000000000..59e0feecc847
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.ts-4-9.mdx
@@ -0,0 +1,41 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './YourComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale: Story = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      Component: MyComponent,
+      props: {
+        locale: caption,
+      },
+    };
+  },
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx
new file mode 100644
index 000000000000..88847d3d9011
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+export const StoryWithLocale: Story = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return {
+      Component: MyComponent,
+      props: {
+        locale: caption,
+      },
+    };
+  },
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
index a1d49428d9fa..0ca9319f8737 100644
--- a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
@@ -15,20 +15,12 @@ export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
 export const SimpleStory = {
-  render: (args) => ({
-    Component: MyComponent,
-    props: args,
-  }),
   args: {
     data: simpleData,
   },
 };
 
 export const ComplexStory = {
-  render: (args) => ({
-    Component: MyComponent,
-    props: args,
-  }),
   args: {
     data: complexData,
   },
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.ts-4-9.mdx
new file mode 100644
index 000000000000..9bf8759217e1
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.ts-4-9.mdx
@@ -0,0 +1,33 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+import someData from './data.json';
+
+const meta = {
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
+  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory: Story = {
+  args: {
+    data: simpleData,
+  },
+};
+
+export const ComplexStory: Story = {
+  args: {
+    data: complexData,
+  },
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx
new file mode 100644
index 000000000000..97c183896eb9
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+import someData from './data.json';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
+  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory: Story = {
+  args: {
+    data: simpleData,
+  },
+};
+
+export const ComplexStory: Story = {
+  args: {
+    data: complexData,
+  },
+};
+```
diff --git a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
deleted file mode 100644
index 75d7cbe6b30a..000000000000
--- a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-<Meta title="MyComponent" component={MyComponent}/>
-
-<!--
- 👇 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.
--->
-
-<Canvas>
-  <Story
-    name="ExampleStory"
-    args={{
-      propertyA: process.env.STORYBOOK_DATA_KEY,
-    }}
-    render={(args) => ({
-      Component: MyComponent,
-      props: args,
-    })} />
-</Canvas>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/page-story.js.mdx b/docs/snippets/svelte/page-story.js.mdx
index 287abf710838..ec72dc32448c 100644
--- a/docs/snippets/svelte/page-story.js.mdx
+++ b/docs/snippets/svelte/page-story.js.mdx
@@ -10,16 +10,7 @@ export default {
   component: Page,
 };
 
-/*
- *👇 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 LoggedIn = {
-  render: (args) => ({
-    Component: Page,
-    props: args,
-  }),
   args: {
     ...HeaderStories.LoggedIn.args,
   },
diff --git a/docs/snippets/svelte/page-story.ts-4-9.mdx b/docs/snippets/svelte/page-story.ts-4-9.mdx
new file mode 100644
index 000000000000..7184cc7ce31f
--- /dev/null
+++ b/docs/snippets/svelte/page-story.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```ts
+// Page.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Page from './Page.svelte';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = {
+  component: Page,
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+```
diff --git a/docs/snippets/svelte/page-story.ts.mdx b/docs/snippets/svelte/page-story.ts.mdx
new file mode 100644
index 000000000000..897a7f6db039
--- /dev/null
+++ b/docs/snippets/svelte/page-story.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Page.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Page from './Page.svelte';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta: Meta<typeof Page> = {
+  component: Page,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+```
diff --git a/docs/snippets/svelte/simple-page-implementation.ts.mdx b/docs/snippets/svelte/simple-page-implementation.ts.mdx
new file mode 100644
index 000000000000..95fb6c5b988a
--- /dev/null
+++ b/docs/snippets/svelte/simple-page-implementation.ts.mdx
@@ -0,0 +1,20 @@
+```html
+<!-- YourPage.svelte -->
+
+<script lang="ts">
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  export let user: Record<string, unknown> = {};
+  export let document: Record<string, unknown> = {};
+  export let subdocuments: Record<string, unknown>[] = [];
+</script>
+
+<div>
+  <PageLayout {user}>
+    <DocumentHeader {document} />
+    <DocumentList documents="{subdocuments}" />
+  </PageLayout>
+</div>
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
index 448436303a53..7ddea5b9cef4 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
@@ -8,10 +8,6 @@ export default {
 };
 
 export const NonA11yStory = {
-  render: (args) => ({
-    Component: MyComponent,
-    props: args,
-  }),
   parameters: {
     a11y: {
       // This option disables all a11y checks on this story
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
deleted file mode 100644
index c2e5d4ff3ee5..000000000000
--- a/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-<Meta 
-  title="Disable a11y addon" 
-  component={MyComponent} />
-
-<!--
- 👇 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.
--->
-
-<Story
-  name="NonA11yStory"
-  parameters={{
-    a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
-    },
-  }}
-  render={() => ({
-    Component: MyComponent,
-    props: {},
-  })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.ts-4-9.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.ts-4-9.mdx
new file mode 100644
index 000000000000..a88af48d41e6
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```ts
+// MyComponent.stories.ts
+
+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 NonA11yStory: Story = {
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
+  },
+};
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx
new file mode 100644
index 000000000000..d9b1abb6a04e
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// MyComponent.stories.ts
+
+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 meta>;
+
+export const NonA11yStory: Story = {
+  parameters: {
+    a11y: {
+      // This option disables all a11y checks on this story
+      disable: true,
+    },
+  },
+};
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
index 65635998e178..d26c9049ae24 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
@@ -8,10 +8,6 @@ export default {
 };
 
 export const ExampleStory = {
-  render: (args) => ({
-    Component: MyComponent,
-    props: args,
-  }),
   parameters: {
     a11y: {
       element: '#storybook-root',
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts-4-9.mdx
similarity index 55%
rename from docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
rename to docs/snippets/svelte/storybook-addon-a11y-story-config.ts-4-9.mdx
index 503c7230d71f..405228dd4df8 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts-4-9.mdx
@@ -1,23 +1,19 @@
-```md
-<!-- MyComponent.stories.mdx -->
+```ts
+// MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/addon-docs';
+import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
 
-<Meta 
-  title="Configure a11y addon" 
-  component={MyComponent} />
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
 
-<!--
- 👇 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 default meta;
+type Story = StoryObj<typeof meta>;
 
-<Story
-  name="ExampleStory"
-  parameters={{
+export const ExampleStory: Story = {
+  parameters: {
     a11y: {
       element: '#storybook-root',
       config: {
@@ -37,9 +33,6 @@ import MyComponent from './MyComponent.svelte';
       options: {},
       manual: true,
     },
-  }}
-  render={() => ({
-    Component: MyComponent,
-    props: {},
-  })} />
-```
\ No newline at end of file
+  },
+};
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx
new file mode 100644
index 000000000000..a2516ffa6464
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx
@@ -0,0 +1,38 @@
+```ts
+// MyComponent.stories.ts
+
+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 meta>;
+
+export const ExampleStory: Story = {
+  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,
+    },
+  },
+};
+```
diff --git a/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx b/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx
new file mode 100644
index 000000000000..9e6cf557f9c3
--- /dev/null
+++ b/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// .storybook/preview.ts
+
+import type { Preview } from '@storybook/svelte';
+
+import MarginDecorator from './MarginDecorator.svelte';
+
+const preview: Preview = {
+  decorators: [() => MarginDecorator],
+};
+
+export default preview;
+```
diff --git a/docs/snippets/svelte/your-component-with-decorator.js.mdx b/docs/snippets/svelte/your-component-with-decorator.js.mdx
index a5dfce20e711..c9d943052349 100644
--- a/docs/snippets/svelte/your-component-with-decorator.js.mdx
+++ b/docs/snippets/svelte/your-component-with-decorator.js.mdx
@@ -9,21 +9,4 @@ export default {
   component: YourComponent,
   decorators: [() => MarginDecorator],
 };
-
-// Your templates and stories here.
-// Don't forget to use the component you're testing and not the MarginDecorator component
-```
-
-```html
-<!-- MarginDecorator.svelte -->
-
-<div>
-  <slot />
-</div>
-
-<style>
-  div {
-    margin: 3em;
-  }
-</style>
 ```
diff --git a/docs/snippets/svelte/your-component-with-decorator.mdx.mdx b/docs/snippets/svelte/your-component-with-decorator.mdx.mdx
deleted file mode 100644
index 8cc0313e5d30..000000000000
--- a/docs/snippets/svelte/your-component-with-decorator.mdx.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-```md
-<!-- YourComponent.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import YourComponent from './YourComponent.svelte';
-import MarginDecorator from './MarginDecorator.svelte';
-
-<Meta 
-  title="YourComponent"
-  component={YourComponent} 
-  decorators={[() => MarginDecorator]}/>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/svelte/your-component-with-decorator.ts-4-9.mdx
new file mode 100644
index 000000000000..b840eb852abe
--- /dev/null
+++ b/docs/snippets/svelte/your-component-with-decorator.ts-4-9.mdx
@@ -0,0 +1,15 @@
+```ts
+// YourComponent.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+import MarginDecorator from './MarginDecorator.svelte';
+
+const meta = {
+  component: Button,
+  decorators: [() => MarginDecorator],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/your-component-with-decorator.ts.mdx b/docs/snippets/svelte/your-component-with-decorator.ts.mdx
new file mode 100644
index 000000000000..d7698d42c35d
--- /dev/null
+++ b/docs/snippets/svelte/your-component-with-decorator.ts.mdx
@@ -0,0 +1,15 @@
+```ts
+// YourComponent.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+import MarginDecorator from './MarginDecorator.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+  decorators: [() => MarginDecorator],
+};
+
+export default meta;
+```
diff --git a/docs/snippets/svelte/your-component.mdx.mdx b/docs/snippets/svelte/your-component.mdx.mdx
deleted file mode 100644
index 8f63ceffc626..000000000000
--- a/docs/snippets/svelte/your-component.mdx.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-```md
-<!-- YourComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import YourComponent from './YourComponent.svelte';
-
-<!--👇 The title prop determines where your story goes in the story list -->
-
-<Meta title="YourComponent" component={YourComponent} />
-
-<!-- 👇 The args you need here will depend on your component -->
-<Story
-  name="FirstStory"
-  args={{}}
-  render={(args) => ({
-    component: YourComponent,
-    props: args,
-  })} />
-```
\ No newline at end of file
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index 61026e2d981b..96c42c8ba831 100644
--- a/docs/writing-docs/autodocs.md
+++ b/docs/writing-docs/autodocs.md
@@ -20,6 +20,7 @@ To enable auto-generated documentation for your stories, you'll need to add the
     'vue/button-story-auto-docs.ts.mdx',
     'angular/button-story-auto-docs.ts.mdx',
     'svelte/button-story-auto-docs.js.mdx',
+    'svelte/button-story-auto-docs.ts.mdx',
     'web-components/button-story-auto-docs.js.mdx',
     'web-components/button-story-auto-docs.ts.mdx',
   ]}
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index c4595f31c783..5a3d7cbd14a6 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -32,6 +32,7 @@ To define the args of a single story, use the `args` CSF story key:
     'web-components/button-story-with-args.js.mdx',
     'web-components/button-story-with-args.ts.mdx',
     'svelte/button-story-with-args.js.mdx',
+    'svelte/button-story-with-args.ts.mdx',
     'html/button-story-with-args.ts.mdx',
     'html/button-story-with-args.js.mdx',
     'solid/button-story-with-args.js.mdx',
@@ -80,6 +81,7 @@ You can also define args at the component level; they will apply to all the comp
     'web-components/button-story-component-args-primary.js.mdx',
     'web-components/button-story-component-args-primary.ts.mdx',
     'svelte/button-story-component-args-primary.js.mdx',
+    'svelte/button-story-component-args-primary.ts.mdx',
     'solid/button-story-component-args-primary.js.mdx',
     'solid/button-story-component-args-primary.ts.mdx',
   ]}
@@ -152,6 +154,7 @@ Args are useful when writing stories for composite components that are assembled
     'web-components/page-story.js.mdx',
     'web-components/page-story.ts.mdx',
     'svelte/page-story.js.mdx',
+    'svelte/page-story.ts.mdx',
     'solid/page-story.js.mdx',
     'solid/page-story.ts.mdx',
   ]}
@@ -161,6 +164,10 @@ Args are useful when writing stories for composite components that are assembled
 
 <!-- prettier-ignore-end -->
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
+<!-- Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example -->
+
 ## 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:
@@ -187,6 +194,8 @@ You can use args in your stories to configure the component's appearance, simila
 
 <!-- prettier-ignore-end -->
 
+</IfRenderer>
+
 ## Setting args through the URL
 
 You can also override the set of initial args for the active story by adding an `args` query parameter to the URL. Typically you would use the [Controls addon](../essentials/controls.md) to handle this. For example, here's how you could set a `size` and `style` arg in the Storybook's URL:
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index d8c1b8f5b3b7..fecddea8921a 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -44,6 +44,7 @@ When you are building screens in this way, it is typical that the inputs of a co
     'web-components/simple-page-implementation.js.mdx',
     'web-components/simple-page-implementation.ts.mdx',
     'svelte/simple-page-implementation.js.mdx',
+    'svelte/simple-page-implementation.ts.mdx',
     'solid/simple-page-implementation.js.mdx',
     'solid/simple-page-implementation.ts.mdx',
   ]}
@@ -146,6 +147,7 @@ If you're working with pure presentational screens, adding stories through [args
     'vue/document-screen-fetch.3.ts.mdx',
     'angular/document-screen-fetch.ts.mdx',
     'svelte/document-screen-fetch.js.mdx',
+    'svelte/document-screen-fetch.ts.mdx',
     'web-components/document-screen-fetch.js.mdx',
     'solid/document-screen-fetch.js.mdx',
   ]}
@@ -193,6 +195,7 @@ In addition to mocking RESTful requests, the other noteworthy feature of the [MS
     'vue/document-screen-with-graphql.3.ts.mdx',
     'angular/document-screen-with-graphql.ts.mdx',
     'svelte/document-screen-with-grapqhl.js.mdx',
+    'svelte/document-screen-with-grapqhl.ts.mdx',
   ]}
 />
 
@@ -212,7 +215,9 @@ To test your screen with the GraphQL mocked data, you could write the following
     'angular/apollo-module.mock-apollo-module.ts.mdx',
     'angular/documentscreen-story-msw-graphql-query.ts.mdx',
     'svelte/documentscreen-story-msw-graphql-query.js.mdx',
+    'svelte/documentscreen-story-msw-graphql-query.ts.mdx',
     'svelte/apollo-wrapper-component.with-mock-implementation.js.mdx',
+    'svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-graphql-query"
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index f6c5305877cd..3f213ca28058 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -26,6 +26,9 @@ Some components require a “harness” to render in a useful way. For instance,
     'web-components/your-component-with-decorator.js.mdx',
     'web-components/your-component-with-decorator.ts.mdx',
     'svelte/your-component-with-decorator.js.mdx',
+    'svelte/your-component-with-decorator.ts.mdx',
+    'svelte/margindecorator.with-margin-component.js.mdx',
+    'svelte/margindecorator.with-margin-component.ts.mdx',
     'solid/your-component-with-decorator.js.mdx',
     'solid/your-component-with-decorator.ts.mdx'
   ]}
@@ -103,6 +106,9 @@ To define a decorator for a single story, use the `decorators` key on a named ex
     'web-components/button-story-decorator.js.mdx',
     'web-components/button-story-decorator.ts.mdx',
     'svelte/button-story-decorator.js.mdx',
+    'svelte/button-story-decorator.ts.mdx',
+    'svelte/margindecorator.with-margin-component.js.mdx',
+    'svelte/margindecorator.with-margin-component.ts.mdx',
     'solid/button-story-decorator.js.mdx',
     'solid/button-story-decorator.ts.mdx',
   ]}
@@ -131,6 +137,9 @@ To define a decorator for all stories of a component, use the `decorators` key o
     'web-components/button-story-component-decorator.js.mdx',
     'web-components/button-story-component-decorator.ts.mdx',
     'svelte/button-story-component-decorator.js.mdx',
+    'svelte/button-story-component-decorator.ts.mdx',
+    'svelte/margindecorator.with-margin-component.js.mdx',
+    'svelte/margindecorator.with-margin-component.ts.mdx',
     'solid/button-story-component-decorator.js.mdx',
     'solid/button-story-component-decorator.ts.mdx',
   ]}
@@ -153,6 +162,9 @@ We can also set a decorator for **all stories** via the `decorators` export of y
     'angular/storybook-preview-global-decorator.ts.mdx',
     'web-components/storybook-preview-global-decorator.js.mdx',
     'svelte/storybook-preview-global-decorator.js.mdx',
+    'svelte/storybook-preview-global-decorator.ts.mdx',
+    'svelte/margindecorator.with-margin-component.js.mdx',
+    'svelte/margindecorator.with-margin-component.ts.mdx',
     'solid/storybook-preview-global-decorator.js.mdx',
     'solid/storybook-preview-global-decorator.ts.mdx',
   ]}
diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md
index e7dab69ec876..c938a3f60929 100644
--- a/docs/writing-stories/index.md
+++ b/docs/writing-stories/index.md
@@ -37,6 +37,7 @@ The _default_ export metadata controls how Storybook lists your stories and prov
     'vue/button-story-default-export-with-component.ts.mdx',
     'angular/button-story-default-export-with-component.ts.mdx',
     'svelte/button-story-default-export-with-component.js.mdx',
+    'svelte/button-story-default-export-with-component.ts.mdx',
     'web-components/button-story-default-export-with-component.js.mdx',
     'html/button-story-default-export.js.mdx',
     'html/button-story-default-export.ts.mdx',
@@ -69,6 +70,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'web-components/button-story.js.mdx',
     'web-components/button-story.ts.mdx',
     'svelte/button-story.js.mdx',
+    'svelte/button-story.ts.mdx',
     'html/button-story.js.mdx',
     'html/button-story.ts.mdx',
     'solid/button-story.js.mdx',
@@ -150,6 +152,7 @@ You can rename any particular story you need. For instance, to give it a more ac
     'web-components/button-story-rename-story.js.mdx',
     'web-components/button-story-rename-story.ts.mdx',
     'svelte/button-story-rename-story.js.mdx',
+    'svelte/button-story-rename-story.ts.mdx',
     'html/button-story-rename-story.js.mdx',
     'html/button-story-rename-story.ts.mdx',
     'solid/button-story-rename-story.js.mdx',
@@ -179,6 +182,7 @@ A story is a function that describes how to render a component. You can have mul
     'web-components/button-story-with-emojis.js.mdx',
     'web-components/button-story-with-emojis.ts.mdx',
     'svelte/button-story-with-emojis.js.mdx',
+    'svelte/button-story-with-emojis.ts.mdx',
     'html/button-story-with-emojis.js.mdx',
     'html/button-story-with-emojis.ts.mdx',
     'solid/button-story-with-emojis.js.mdx',
@@ -210,6 +214,7 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
     'web-components/button-story-using-args.js.mdx',
     'web-components/button-story-using-args.ts.mdx',
     'svelte/button-story-using-args.js.mdx',
+    'svelte/button-story-using-args.ts.mdx',
     'html/button-story-using-args.js.mdx',
     'html/button-story-using-args.ts.mdx',
     'solid/button-story-using-args.js.mdx',
@@ -239,6 +244,7 @@ What’s more, you can import `args` to reuse when writing stories for other com
     'web-components/button-group-story.js.mdx',
     'web-components/button-group-story.ts.mdx',
     'svelte/button-group-story.js.mdx',
+    'svelte/button-group-story.ts.mdx',
     'solid/button-group-story.js.mdx',
     'solid/button-group-story.ts.mdx',
   ]}
@@ -285,6 +291,7 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'svelte/login-form-with-play-function.ts.mdx',
     'solid/login-form-with-play-function.js.mdx',
     'solid/login-form-with-play-function.ts.mdx',
   ]}
@@ -312,6 +319,7 @@ For instance, suppose you wanted to test your Button component against a differe
     'web-components/button-story-with-blue-args.js.mdx',
     'web-components/button-story-with-blue-args.ts.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
+    'svelte/button-story-with-blue-args.ts.mdx',
     'html/button-story-with-blue-args.js.mdx',
     'html/button-story-with-blue-args.ts.mdx',
     'solid/button-story-with-blue-args.js.mdx',
@@ -343,6 +351,9 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'web-components/button-story-component-decorator.js.mdx',
     'web-components/button-story-component-decorator.ts.mdx',
     'svelte/button-story-component-decorator.js.mdx',
+    'svelte/button-story-component-decorator.ts.mdx',
+    'svelte/margindecorator.with-margin-component.js.mdx',
+    'svelte/margindecorator.with-margin-component.ts.mdx',
     'html/button-story-component-decorator.js.mdx',
     'html/button-story-component-decorator.ts.mdx',
     'solid/button-story-component-decorator.js.mdx',
diff --git a/docs/writing-stories/loaders.md b/docs/writing-stories/loaders.md
index b0b5c11fd123..663670d6e1e9 100644
--- a/docs/writing-stories/loaders.md
+++ b/docs/writing-stories/loaders.md
@@ -26,6 +26,7 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
     'web-components/loader-story.js.mdx',
     'web-components/loader-story.ts.mdx',
     'svelte/loader-story.js.mdx',
+    'svelte/loader-story.ts.mdx',
     'solid/loader-story.js.mdx',
     'solid/loader-story.ts.mdx',
   ]}
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index b697330ec848..9ec6b5c73225 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -44,6 +44,7 @@ We can set the parameters for all stories of a component using the `parameters`
     'web-components/button-story-with-blue-args.js.mdx',
     'web-components/button-story-with-blue-args.ts.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
+    'svelte/button-story-with-blue-args.ts.mdx',
     'solid/button-story-with-blue-args.js.mdx',
     'solid/button-story-with-blue-args.ts.mdx',
   ]}
diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md
index 4285fa95eaa8..14506ae979e2 100644
--- a/docs/writing-tests/accessibility-testing.md
+++ b/docs/writing-tests/accessibility-testing.md
@@ -70,6 +70,7 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
     'vue/component-story-with-accessibility.3.js.mdx',
     'vue/component-story-with-accessibility.3.ts.mdx',
     'svelte/component-story-with-accessibility.js.mdx',
+    'svelte/component-story-with-accessibility.ts.mdx',
     'web-components/component-story-with-accessibility.js.mdx',
     'web-components/component-story-with-accessibility.ts.mdx',
   ]}
@@ -134,6 +135,7 @@ Customize the a11y ruleset at the story level by updating your story to include
     'vue/storybook-addon-a11y-story-config.js.mdx',
     'vue/storybook-addon-a11y-story-config.ts.mdx',
     'svelte/storybook-addon-a11y-story-config.js.mdx',
+    'svelte/storybook-addon-a11y-story-config.ts.mdx',
     'web-components/storybook-addon-a11y-story-config.js.mdx',
     'web-components/storybook-addon-a11y-story-config.ts.mdx',
   ]}
@@ -157,6 +159,7 @@ Disable accessibility testing for stories or components by adding the following
    'vue/storybook-addon-a11y-disable.js.mdx',
    'vue/storybook-addon-a11y-disable.ts.mdx',
    'svelte/storybook-addon-a11y-disable.js.mdx',
+   'svelte/storybook-addon-a11y-disable.ts.mdx',
    'web-components/storybook-addon-a11y-disable.js.mdx',
    'web-components/storybook-addon-a11y-disable.ts.mdx',
   ]}
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 90c7e2fc8a06..4cc94872b15f 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -71,6 +71,7 @@ The test itself is defined inside a `play` function connected to a story. Here's
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'svelte/login-form-with-play-function.ts.mdx',
     'solid/login-form-with-play-function.js.mdx',
     'solid/login-form-with-play-function.ts.mdx',
   ]}
diff --git a/docs/writing-tests/stories-in-end-to-end-tests.md b/docs/writing-tests/stories-in-end-to-end-tests.md
index 50fa58ae0688..6699ea352cbe 100644
--- a/docs/writing-tests/stories-in-end-to-end-tests.md
+++ b/docs/writing-tests/stories-in-end-to-end-tests.md
@@ -22,6 +22,7 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'svelte/login-form-with-play-function.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function"
@@ -69,6 +70,7 @@ A real-life scenario of user flow testing with Playwright would be how to test a
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'svelte/login-form-with-play-function.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function"

From 825b0ad1414b57c1f4e348f8db7f2bad0a29dd77 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Wed, 6 Dec 2023 14:28:38 +0000
Subject: [PATCH 2/2] Fix wrapper snippets

---
 .../apollo-wrapper-component.with-mock-implementation.js.mdx  | 4 +---
 .../apollo-wrapper-component.with-mock-implementation.ts.mdx  | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx
index 2793daec07b6..d43181fd25da 100644
--- a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx
+++ b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx
@@ -23,7 +23,5 @@
   setClient(mockedClient);
 </script>
 
-<div>
-  <slot />
-</div>
+<slot />
 ```
diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
index b2cda17845c1..3e2c29cb660b 100644
--- a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
+++ b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
@@ -23,7 +23,5 @@
   setClient(mockedClient);
 </script>
 
-<div>
-  <slot />
-</div>
+<slot />
 ```