Fixes based on feedback

docs/snippets/svelte/button-implementation.js.mdx

@@ -21,7 +21,7 @@
    */
   export let label = '';
 
-  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
 
   const dispatch = createEventDispatcher();
 

docs/snippets/svelte/button-story-click-handler.js.mdx

@@ -11,6 +11,7 @@ export default {
 };
 
 export const Text = () =>({
+  //👇 This is the same component as the one used in the default export and it's optional
   Component:Button,
   props:{
     label:'Hello',

docs/snippets/svelte/button-story-click-handler.native-format.mdx

@@ -2,7 +2,7 @@
 <-- Button.stories.svelte -->
 
 <script>
-  import { Meta, Story } from '../src/index.js';
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
   import { action } from '@storybook/addon-actions';
   import Button from './Button.svelte';
 </script>

docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx

@@ -4,7 +4,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
   
-  import YourComponent from "./YourComponent.svelte';
+  import YourComponent from './YourComponent.svelte';
 
   //👇 Some function to demonstrate the behavior
   function someFunction(valuePropertyA, valuePropertyB) {

docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx

@@ -20,7 +20,7 @@
 />
 
 <Template >
-  <MyComponent image={image} />
+  <MyComponent {image} />
 </Template>
 
 <Story name="WithAnImage" />

docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx

@@ -6,7 +6,7 @@
   import MyComponent from './MyComponent.svelte';
 </script>
 
-<Story name="Basic" template="BasicTemplate">
+<Story name="Basic">
     <MyComponent />
 </Story>
 

docs/snippets/svelte/my-component-story-with-nonstory.js.mdx

@@ -13,7 +13,7 @@ export default {
 };
 
 export const simpleData = { foo: 1, bar: 'baz' };
-export const complexData = { foo: 1, foobar: { bar: 'baz", baz: someData } };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
 export const SimpleStory = () => ({
   Component: MyComponent,

docs/workflows/build-pages-with-storybook.md

@@ -41,7 +41,7 @@ When you are building screens in this way, it is typical that the inputs of a co
     'vue/simple-page-implementation.2.mdx',
     'vue/simple-page-implementation.3.mdx',
     'angular/simple-page-implementation.ts.mdx',
-    'svelte/simple-page-implementation.js'
+    'svelte/simple-page-implementation.js',
   ]}
 />