diff --git a/.circleci/config.yml b/.circleci/config.yml
index 6db12bf41959..e3f8ef172a8d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -504,19 +504,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - build
       - build-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 11
+          parallelism: 10
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -524,7 +524,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - bench:
@@ -560,19 +560,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -580,7 +580,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - bench:
@@ -614,22 +614,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 34
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 34
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -637,7 +637,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 29
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca7fcf921544..5ba60ca1636f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 7.6.4
+
+- Angular: Fix CSF Plugin - [#25098](https://github.com/storybookjs/storybook/pull/25098), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Viewport: Fix viewport dts files - [#25107](https://github.com/storybookjs/storybook/pull/25107), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+
 ## 7.6.3
 
 - Next.js: Fix next/font/local usage in babel mode - [#25045](https://github.com/storybookjs/storybook/pull/25045), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index cd767bfa3ead..2b3ffaed914e 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -47,6 +47,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
+    "@storybook/source-loader": "workspace:*",
     "estraverse": "^5.2.0",
     "tiny-invariant": "^1.3.1"
   },
@@ -56,7 +57,6 @@
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/router": "workspace:*",
-    "@storybook/source-loader": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@types/react": "^16.14.34",
     "@types/react-syntax-highlighter": "11.0.5",
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index f17c27d249bd..1d2b96571769 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -30,8 +30,6 @@
       "import": "./dist/index.mjs"
     },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.ts",
-    "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -73,9 +71,6 @@
     ],
     "managerEntries": [
       "./src/manager.tsx"
-    ],
-    "previewEntries": [
-      "./src/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
diff --git a/code/addons/viewport/src/index.ts b/code/addons/viewport/src/index.ts
index 341f696ad7b5..79e0216d7923 100644
--- a/code/addons/viewport/src/index.ts
+++ b/code/addons/viewport/src/index.ts
@@ -1,3 +1,2 @@
-export * from './constants';
 export * from './defaults';
-export * from './shortcuts';
+export type * from './models';
diff --git a/code/addons/viewport/src/models/index.ts b/code/addons/viewport/src/models/index.ts
index 0cc15c61f914..7eb7ed1a6942 100644
--- a/code/addons/viewport/src/models/index.ts
+++ b/code/addons/viewport/src/models/index.ts
@@ -1,2 +1,2 @@
-export * from './Viewport';
-export * from './ViewportAddonParameter';
+export type * from './Viewport';
+export type * from './ViewportAddonParameter';
diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
deleted file mode 100644
index 05f32144967d..000000000000
--- a/code/addons/viewport/src/preview.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from './defaults';
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index b40bdb4f22f8..6a6aaa78b1d6 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -107,17 +107,6 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
-  'nextjs/12-js': {
-    name: 'Next.js v12 (Webpack | JavaScript)',
-    script:
-      'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-12-3-2/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^12.2.0" && yarn && git add . && git commit --amend --no-edit && cd ..',
-    expected: {
-      framework: '@storybook/nextjs',
-      renderer: '@storybook/react',
-      builder: '@storybook/builder-webpack5',
-    },
-    skipTasks: ['e2e-tests-dev', 'bench'],
-  },
   'nextjs/default-js': {
     name: 'Next.js Latest (Webpack | JavaScript)',
     script:
@@ -391,18 +380,6 @@ const baseTemplates = {
     // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
-  'vue-cli/vue2-default-js': {
-    name: 'Vue CLI v2 (Webpack | JavaScript)',
-    script:
-      'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge --preset="Default (Vue 2)" && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
-    expected: {
-      framework: '@storybook/vue-webpack5',
-      renderer: '@storybook/vue',
-      builder: '@storybook/builder-webpack5',
-    },
-    // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
-    skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
-  },
   'preact-webpack5/default-js': {
     name: 'Preact CLI Latest (Webpack | JavaScript)',
     script:
@@ -567,7 +544,6 @@ export const normal: TemplateKey[] = [
   'react-vite/default-ts',
   'angular-cli/default-ts',
   'vue3-vite/default-ts',
-  'vue-cli/vue2-default-js',
   'lit-vite/default-ts',
   'svelte-vite/default-ts',
   'svelte-kit/skeleton-ts',
@@ -599,7 +575,6 @@ export const daily: TemplateKey[] = [
   'lit-vite/default-js',
   'svelte-kit/skeleton-js',
   'svelte-vite/default-js',
-  'nextjs/12-js',
   'nextjs/default-js',
   'nextjs/prerelease',
   'qwik-vite/default-ts',
diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index aed7a531ee32..ec0aaa1d52a9 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -12,15 +12,18 @@ const logger = console;
 export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
-    enforce: 'pre',
-    loadInclude(id) {
+    transformInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    async load(fname) {
-      const code = await fs.readFile(fname, 'utf-8');
+    async transform(code, id) {
+      const sourceCode = await fs.readFile(id, 'utf-8');
       try {
-        const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
-        enrichCsf(csf, options);
+        const makeTitle = (userTitle: string) => userTitle || 'default';
+        const csf = loadCsf(code, { makeTitle }).parse();
+        const csfSource = loadCsf(sourceCode, {
+          makeTitle,
+        }).parse();
+        enrichCsf(csf, csfSource, options);
         return formatCsf(csf, { sourceMaps: true });
       } catch (err: any) {
         // This can be called on legacy storiesOf files, so just ignore
diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index a8f5f3aaa09c..d793f730cecc 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -11,11 +11,16 @@ expect.addSnapshotSerializer({
   test: (val) => true,
 });
 
-const enrich = (code: string, options?: EnrichCsfOptions) => {
+const enrich = (code: string, originalCode: string, options?: EnrichCsfOptions) => {
   // we don't actually care about the title
 
-  const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
-  enrichCsf(csf, options);
+  const csf = loadCsf(code, {
+    makeTitle: (userTitle) => userTitle || 'default',
+  }).parse();
+  const csfSource = loadCsf(originalCode, {
+    makeTitle: (userTitle) => userTitle || 'default',
+  }).parse();
+  enrichCsf(csf, csfSource, options);
   return formatCsf(csf);
 };
 
@@ -23,17 +28,28 @@ describe('enrichCsf', () => {
   describe('source', () => {
     it('csf1', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+          // compiled code
           export default {
            title: 'Button',
           }
-          export const Basic = () => <Button />
-        `)
+          export const Basic = () => React.createElement(Button)
+        `,
+          dedent`
+        // original code
+        export default {
+         title: 'Button',
+        }
+        export const Basic = () => <Button />
+      `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -48,19 +64,32 @@ describe('enrichCsf', () => {
     });
     it('csf2', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+          title: 'Button',
+        }
+        const Template = (args) => React.createElement(Button, args);
+        export const Basic = Template.bind({});
+        Basic.parameters = { foo: 'bar' }
+      `,
+          dedent`
+          // original code
           export default {
             title: 'Button',
           }
           const Template = (args) => <Button {...args} />
           export const Basic = Template.bind({});
           Basic.parameters = { foo: 'bar' }
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        const Template = args => <Button {...args} />;
+        const Template = args => React.createElement(Button, args);
         export const Basic = Template.bind({});
         Basic.parameters = {
           foo: 'bar'
@@ -79,15 +108,26 @@ describe('enrichCsf', () => {
     });
     it('csf3', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+          title: 'Button',
+        }
+        export const Basic = { parameters: { foo: 'bar' } }
+      `,
+          dedent`
+          // original code
           export default {
             title: 'Button',
           }
           export const Basic = {
             parameters: { foo: 'bar' }
           }
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
@@ -110,14 +150,26 @@ describe('enrichCsf', () => {
     });
     it('multiple stories', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+          title: 'Button',
+        }
+        export const A = {}
+        export const B = {}
+      `,
+          dedent`
+          // original code
           export default {
             title: 'Button',
           }
           export const A = {}
           export const B = {}
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
@@ -150,19 +202,31 @@ describe('enrichCsf', () => {
   describe('story descriptions', () => {
     it('skips inline comments', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+         title: 'Button',
+        }
+        // The most basic button
+        export const Basic = () => React.createElement(Button);
+      `,
+          dedent`
+          // original code
           export default {
            title: 'Button',
           }
           // The most basic button
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
         // The most basic button
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -178,19 +242,29 @@ describe('enrichCsf', () => {
 
     it('skips blocks without jsdoc', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+          // compiled code
+          export default {
+           title: 'Button',
+          }
+          export const Basic = () => React.createElement(Button)
+        `,
+          dedent`
+          // original code
           export default {
            title: 'Button',
           }
           /* The most basic button */
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        /* The most basic button */
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -206,19 +280,29 @@ describe('enrichCsf', () => {
 
     it('JSDoc single-line', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+          // compiled code
+          export default {
+           title: 'Button',
+          }
+          export const Basic = () => React.createElement(Button);
+        `,
+          dedent`
+          // original code
           export default {
            title: 'Button',
           }
           /** The most basic button */
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        /** The most basic button */
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -238,7 +322,16 @@ describe('enrichCsf', () => {
 
     it('JSDoc multi-line', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+         title: 'Button',
+        }
+        export const Basic = () => React.createElement(Button);
+      `,
+          dedent`
+          // original code
           export default {
            title: 'Button',
           }
@@ -248,17 +341,14 @@ describe('enrichCsf', () => {
            * In a block!
            */
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        /**
-         * The most basic button
-         * 
-         * In a block!
-         */
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -278,27 +368,33 @@ describe('enrichCsf', () => {
 
     it('preserves indentation', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+          // compiled code
           export default {
            title: 'Button',
           }
-          /**
-           * - A bullet list
-           *   - A sub-bullet
-           * - A second bullet
-           */
-          export const Basic = () => <Button />
-        `)
-      ).toMatchInlineSnapshot(`
+          export const Basic = () => React.createElement(Button);
+        `,
+          dedent`
+        // original code
         export default {
-          title: 'Button'
-        };
+         title: 'Button',
+        }
         /**
          * - A bullet list
          *   - A sub-bullet
          * - A second bullet
          */
-        export const Basic = () => <Button />;
+        export const Basic = () => <Button />
+      `
+        )
+      ).toMatchInlineSnapshot(`
+        // compiled code
+        export default {
+          title: 'Button'
+        };
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -320,19 +416,29 @@ describe('enrichCsf', () => {
   describe('meta descriptions', () => {
     it('skips inline comments', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+          title: 'Button',
+        }
+        export const Basic = () => React.createElement(Button);
+        `,
+          dedent`
+        // original code
         // The most basic button
         export default {
-           title: 'Button',
-          }
-          export const Basic = () => <Button />
-        `)
+          title: 'Button',
+        }
+        export const Basic = () => <Button />
+        `
+        )
       ).toMatchInlineSnapshot(`
-        // The most basic button
+        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -348,19 +454,29 @@ describe('enrichCsf', () => {
 
     it('skips blocks without jsdoc', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+         title: 'Button',
+        }
+        export const Basic = () => React.createElement();
+      `,
+          dedent`
+          // original code
           /* The most basic button */
           export default {
            title: 'Button',
           }
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
-        /* The most basic button */
+        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement();
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -376,15 +492,25 @@ describe('enrichCsf', () => {
 
     it('JSDoc single-line', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+          // compiled code
+          export default {
+           title: 'Button'
+          }
+          export const Basic = () => React.createElement(Button)
+        `,
+          dedent`
+          // original code
           /** The most basic button */
           export default {
            title: 'Button'
           }
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
-        /** The most basic button */
+        // compiled code
         export default {
           title: 'Button',
           parameters: {
@@ -395,7 +521,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -411,7 +537,16 @@ describe('enrichCsf', () => {
 
     it('JSDoc multi-line', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+         title: 'Button',
+        }
+        export const Basic = () => React.createElement();
+      `,
+          dedent`
+          // original code
           /**
            * The most basic button
            * 
@@ -421,13 +556,10 @@ describe('enrichCsf', () => {
            title: 'Button',
           }
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
-        /**
-         * The most basic button
-         * 
-         * In a block!
-         */
+        // compiled code
         export default {
           title: 'Button',
           parameters: {
@@ -438,7 +570,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement();
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -454,7 +586,16 @@ describe('enrichCsf', () => {
 
     it('preserves indentation', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+         title: 'Button',
+        }
+        export const Basic = () => React.createElement(Button);
+      `,
+          dedent`
+          // original code
           /**
            * - A bullet list
            *   - A sub-bullet
@@ -464,13 +605,10 @@ describe('enrichCsf', () => {
            title: 'Button',
           }
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
-        /**
-         * - A bullet list
-         *   - A sub-bullet
-         * - A second bullet
-         */
+        // compiled code
         export default {
           title: 'Button',
           parameters: {
@@ -481,7 +619,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -497,7 +635,19 @@ describe('enrichCsf', () => {
 
     it('correctly interleaves parameters', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+          title: 'Button',
+          parameters: {
+            foo: 'bar',
+            docs: { inlineStories: true }
+          }
+        }
+        export const Basic = () => React.createElement(Button);
+      `,
+          dedent`
           /** The most basic button */
           export default {
             title: 'Button',
@@ -507,9 +657,10 @@ describe('enrichCsf', () => {
             }
           }
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
-        /** The most basic button */
+        // compiled code
         export default {
           title: 'Button',
           parameters: {
@@ -522,7 +673,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -538,7 +689,23 @@ describe('enrichCsf', () => {
 
     it('respects user component description', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        export default {
+          title: 'Button',
+          parameters: {
+            docs: {
+              description: {
+                component: 'hahaha'
+              }
+            }
+          }
+        }
+        export const Basic = () => React.createElement(Button);
+      `,
+          dedent`
+          // original code
           /** The most basic button */
           export default {
             title: 'Button',
@@ -551,9 +718,10 @@ describe('enrichCsf', () => {
             }
           }
           export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
-        /** The most basic button */
+        // compiled code
         export default {
           title: 'Button',
           parameters: {
@@ -564,7 +732,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -580,7 +748,17 @@ describe('enrichCsf', () => {
 
     it('respects meta variables', () => {
       expect(
-        enrich(dedent`
+        enrich(
+          dedent`
+        // compiled code
+        const meta = {
+          title: 'Button'
+        }
+        export default meta;
+        export const Basic = () => React.createElement(Button);
+        `,
+          dedent`
+        // original code
         /** The most basic button */
         const meta = {
           title: 'Button'
@@ -588,9 +766,10 @@ describe('enrichCsf', () => {
         /** This should be ignored */
         export default meta;
         export const Basic = () => <Button />
-        `)
+        `
+        )
       ).toMatchInlineSnapshot(`
-        /** The most basic button */
+        // compiled code
         const meta = {
           title: 'Button',
           parameters: {
@@ -601,9 +780,8 @@ describe('enrichCsf', () => {
             }
           }
         };
-        /** This should be ignored */
         export default meta;
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -623,6 +801,14 @@ describe('enrichCsf', () => {
       expect(
         enrich(
           dedent`
+          // compiled code
+          export default {
+           title: 'Button',
+          }
+          export const Basic = () => React.createElement(Button);
+        `,
+          dedent`
+          // original code
           export default {
            title: 'Button',
           }
@@ -632,11 +818,11 @@ describe('enrichCsf', () => {
           { disableSource: true }
         )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        /** The most basic button */
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -654,6 +840,14 @@ describe('enrichCsf', () => {
       expect(
         enrich(
           dedent`
+          // compiled code
+          export default {
+           title: 'Button',
+          }
+          export const Basic = () => React.createElement(Button);
+        `,
+          dedent`
+          // original code
           export default {
            title: 'Button',
           }
@@ -663,11 +857,11 @@ describe('enrichCsf', () => {
           { disableDescription: true }
         )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        /** The most basic button */
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -685,6 +879,14 @@ describe('enrichCsf', () => {
       expect(
         enrich(
           dedent`
+          // compiled code
+          export default {
+           title: 'Button',
+          }
+          export const Basic = () => React.createElement(Button);
+        `,
+          dedent`
+          // original code
           export default {
            title: 'Button',
           }
@@ -694,11 +896,11 @@ describe('enrichCsf', () => {
           { disableSource: true, disableDescription: true }
         )
       ).toMatchInlineSnapshot(`
+        // compiled code
         export default {
           title: 'Button'
         };
-        /** The most basic button */
-        export const Basic = () => <Button />;
+        export const Basic = () => React.createElement(Button);
       `);
     });
   });
diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index dae96aa85c57..8744b8359eaa 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -9,10 +9,16 @@ export interface EnrichCsfOptions {
   disableDescription?: boolean;
 }
 
-export const enrichCsfStory = (csf: CsfFile, key: string, options?: EnrichCsfOptions) => {
-  const storyExport = csf.getStoryExport(key);
+export const enrichCsfStory = (
+  csf: CsfFile,
+  csfSource: CsfFile,
+  key: string,
+  options?: EnrichCsfOptions
+) => {
+  const storyExport = csfSource.getStoryExport(key);
   const source = !options?.disableSource && extractSource(storyExport);
-  const description = !options?.disableDescription && extractDescription(csf._storyStatements[key]);
+  const description =
+    !options?.disableDescription && extractDescription(csfSource._storyStatements[key]);
   const parameters = [];
   const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
   parameters.push(t.spreadElement(originalParameters));
@@ -111,8 +117,8 @@ const addComponentDescription = (
   addComponentDescription(subNode, rest, value);
 };
 
-export const enrichCsfMeta = (csf: CsfFile, options?: EnrichCsfOptions) => {
-  const description = !options?.disableDescription && extractDescription(csf._metaStatement);
+export const enrichCsfMeta = (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
+  const description = !options?.disableDescription && extractDescription(csfSource._metaStatement);
   // docs: { description: { component: %%description%% } },
   if (description) {
     const metaNode = csf._metaNode;
@@ -126,10 +132,10 @@ export const enrichCsfMeta = (csf: CsfFile, options?: EnrichCsfOptions) => {
   }
 };
 
-export const enrichCsf = (csf: CsfFile, options?: EnrichCsfOptions) => {
-  enrichCsfMeta(csf, options);
+export const enrichCsf = (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
+  enrichCsfMeta(csf, csfSource, options);
   Object.keys(csf._storyExports).forEach((key) => {
-    enrichCsfStory(csf, key, options);
+    enrichCsfStory(csf, csfSource, key, options);
   });
 };
 
diff --git a/code/package.json b/code/package.json
index fb486db5dcae..b2f504409b9a 100644
--- a/code/package.json
+++ b/code/package.json
@@ -328,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.4"
 }
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index 42a3ccdbc24d..c7f9cd195832 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/builders/vite.md b/docs/builders/vite.md
index 2302191fcae3..5a2025ed0a51 100644
--- a/docs/builders/vite.md
+++ b/docs/builders/vite.md
@@ -114,7 +114,7 @@ If you need to override it, you can use the `viteFinal` function and adjust it.
 
 ### ArgTypes are not generated automatically
 
-Currently, [automatic argType inference](../api/argtypes.md#automatic-argtype-inference) is only available for React, Vue3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows:
+Currently, [automatic argType inference](../api/arg-types.md#automatic-argtype-inference) is only available for React, Vue3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows:
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/configure/compilers.md b/docs/configure/compilers.md
index fc18eac310aa..96d9cb75f64a 100644
--- a/docs/configure/compilers.md
+++ b/docs/configure/compilers.md
@@ -21,7 +21,7 @@ SWC is a fast, highly extensible tool for compiling and bundling modern JavaScri
 
 <Callout variant="info">
 
-Support for the SWC builder is currently experimental for Next.js projects, and it's not enabled by default. It requires you to opt in to use it.
+Support for the SWC builder is currently experimental for Next.js projects, and it's not enabled by default. It requires you to opt in to use it. For more information on configuring SWC with the supported frameworks, see the [SWC API](../api/main-config-swc.md) documentation.
 
 </Callout>
 
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/actions.md b/docs/essentials/actions.md
index 31ae0f5d5c60..99f56c1d7905 100644
--- a/docs/essentials/actions.md
+++ b/docs/essentials/actions.md
@@ -41,7 +41,7 @@ When Storybook sees this argType, it will create an arg set to a special “acti
 
 ### Automatically matching args
 
-Another option is to use a global parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)).
+Another option is to use a global parameter to match all [argTypes](../api/arg-types.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/arg-types.md#automatic-argtype-inference)).
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 131a38be6b8c..efff7222f5bd 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -19,7 +19,7 @@ Controls do not require any modification to your components. Stories for control
 - Portable. Reuse your interactive stories in documentation, tests, and even in designs.
 - Rich. Customize the controls and interactive data to suit your exact needs.
 
-To use the Controls addon, you need to write your stories using [args](../writing-stories/args.md). Storybook will automatically generate UI controls based on your args and what it can infer about your component. Still, you can configure the controls further using [argTypes](../api/argtypes.md), see below.
+To use the Controls addon, you need to write your stories using [args](../writing-stories/args.md). Storybook will automatically generate UI controls based on your args and what it can infer about your component. Still, you can configure the controls further using [argTypes](../api/arg-types.md), see below.
 
 <Callout variant="info" icon="💡">
 
@@ -70,7 +70,7 @@ By default, Storybook will render a free text input for the `variant` arg:
 
 It works as long as you type a valid string into the auto-generated text control. Still, it's not the best UI for our scenario, given that the component only accepts `primary` or `secondary` as variants. Let’s replace it with Storybook’s radio component.
 
-We can specify which controls get used by declaring a custom [argType](../api/argtypes.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs.
+We can specify which controls get used by declaring a custom [argType](../api/arg-types.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs.
 
 `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a property of the component, let's put that annotation on the default export.
 
@@ -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',
@@ -209,7 +216,7 @@ The Controls addon can be configured in two ways:
 
 ### Annotation
 
-As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes.md) field of either a component or story. Below is a condensed example and table featuring all available controls.
+As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/arg-types.md) field of either a component or story. Below is a condensed example and table featuring all available controls.
 
 | Data Type   | Control        | Description                                                                                                                                                                                                               |
 | ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
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/common/storybook-addon-a11y-component-config.ts-4-9.mdx b/docs/snippets/common/storybook-addon-a11y-component-config.ts-4-9.mdx
index b35a73f6be28..052bff290c02 100644
--- a/docs/snippets/common/storybook-addon-a11y-component-config.ts-4-9.mdx
+++ b/docs/snippets/common/storybook-addon-a11y-component-config.ts-4-9.mdx
@@ -4,8 +4,6 @@
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
-import { userEvent, within } from '@storybook/testing-library';
-
 import { MyComponent } from './MyComponent';
 
 const meta = {
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
new file mode 100644
index 000000000000..3e2c29cb660b
--- /dev/null
+++ b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
@@ -0,0 +1,27 @@
+```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>
+
+<slot />
+```
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 ea1f9a1bec3c..a73d16222c61 100644
--- a/docs/snippets/svelte/login-form-with-play-function.js.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -2,7 +2,6 @@
 // LoginForm.stories.js
 
 import { userEvent, within } from '@storybook/testing-library';
-
 import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.svelte';
@@ -11,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/versions/latest.json b/docs/versions/latest.json
index 5f5127853d08..8709dd57de6e 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"7.6.3","info":{"plain":"- Next.js: Fix next/font/local usage in babel mode - [#25045](https://github.com/storybookjs/storybook/pull/25045), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React-Docgen: Make error-handling more gentle - [#25055](https://github.com/storybookjs/storybook/pull/25055), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}}
+{"version":"7.6.4","info":{"plain":"- Angular: Fix CSF Plugin - [#25098](https://github.com/storybookjs/storybook/pull/25098), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Viewport: Fix viewport dts files - [#25107](https://github.com/storybookjs/storybook/pull/25107), thanks [@kasperpeulen](https://github.com/kasperpeulen)!"}}
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index 427db5c7e79b..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',
   ]}
@@ -29,7 +30,7 @@ To enable auto-generated documentation for your stories, you'll need to add the
 
 ![Storybook autodocs](./autodocs.png)
 
-Once the story loads, Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/argtypes.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar.
+Once the story loads, Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/arg-types.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar.
 
 ### Configure
 
@@ -78,7 +79,7 @@ Going over the code snippet in more detail. When Storybook starts up, it will ov
 
 1. A header with the component's metadata retrieved by the `Title`, `Subtitle`, and `Description` Doc Blocks.
 2. The first story defined in the file via the `Primary` Doc Block with a handy set of UI controls to zoom in and out of the component.
-3. An interactive table with all the relevant [`args`](../writing-stories/args.md) and [`argTypes`](../api/argtypes.md) defined in the story via the `Controls` Doc Block.
+3. An interactive table with all the relevant [`args`](../writing-stories/args.md) and [`argTypes`](../api/arg-types.md) defined in the story via the `Controls` Doc Block.
 4. A overview of the remaining stories via the `Stories` Doc Block.
 
 #### With MDX
diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md
index faacdf5fa588..12cfaee8317b 100644
--- a/docs/writing-docs/doc-blocks.md
+++ b/docs/writing-docs/doc-blocks.md
@@ -135,7 +135,7 @@ Accepts parameters in the namespace `parameters.docs.argTypes`.
 
 </Callout>
 
-The `ArgTypes` block can be used to show a static table of [arg types](../api/argtypes.md) for a given component as a way to document its interface.
+The `ArgTypes` block can be used to show a static table of [arg types](../api/arg-types.md) for a given component as a way to document its interface.
 
 ![Screenshot of ArgTypes block](../api/doc-block-argtypes.png)
 
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 d80bf565afe4..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'
   ]}
@@ -71,7 +74,7 @@ In the example above, the values provided are hardcoded. Still, you may want to
 The second argument to a decorator function is the **story context** which in particular contains the keys:
 
 - `args` - the story arguments. You can use some [`args`](./args.md) in your decorators and drop them in the story implementation itself.
-- `argTypes`- Storybook's [argTypes](../api/argtypes.md) allow you to customize and fine-tune your stories [`args`](./args.md).
+- `argTypes`- Storybook's [argTypes](../api/arg-types.md) allow you to customize and fine-tune your stories [`args`](./args.md).
 - `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.md#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.md#global-types-toolbar-annotations) to allow you to change these values using Storybook’s UI.
 - `hooks` - Storybook's API hooks (e.g., useArgs).
 - `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons.
@@ -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 02841adcd480..50a36f3670b7 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"