From 5de7c3ee7a6082c91985337ca66cb3c7f41211fc Mon Sep 17 00:00:00 2001
From: Grant Ralls <grantsralls@gmail.com>
Date: Mon, 7 Jul 2025 15:53:21 -0400
Subject: [PATCH 1/7] removing labels from type unions

---
 code/renderers/svelte/src/extractArgTypes.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/renderers/svelte/src/extractArgTypes.ts b/code/renderers/svelte/src/extractArgTypes.ts
index 4843773864f7..475a050e26c7 100644
--- a/code/renderers/svelte/src/extractArgTypes.ts
+++ b/code/renderers/svelte/src/extractArgTypes.ts
@@ -119,7 +119,6 @@ const parseTypeToControl = (type: JSDocType | undefined): any => {
       return {
         control: {
           type: 'radio',
-          labels: options.map(String),
         },
         options,
       };

From f532b918ce93f3e16197cce9263acef873ce79d9 Mon Sep 17 00:00:00 2001
From: Grant Ralls <grantsralls@gmail.com>
Date: Mon, 7 Jul 2025 16:11:21 -0400
Subject: [PATCH 2/7] adding union type to button for manual tests

---
 .../template/cli/ts/Button.stories.svelte     |  4 ++--
 .../sveltekit/template/cli/ts/Button.svelte   | 20 +++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
index 718708998f62..35f124ee4c91 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
@@ -17,12 +17,12 @@
     },
     args: {
       onclick: fn(),
-    }
+    },
   });
 </script>
 
 <!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
-<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+<Story name="Primary" args={{ variant: 'primary', label: 'Button' }} />
 
 <Story name="Secondary" args={{ label: 'Button' }} />
 
diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
index c34befec5be5..dfde4b12e84a 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
@@ -3,7 +3,7 @@
 
   interface Props {
     /** Is this the principal call to action on the page? */
-    primary?: boolean;
+    variant?: 'primary' | 'secondary' | 'flat';
     /** What background color to use */
     backgroundColor?: string;
     /** How large should the button be? */
@@ -14,9 +14,21 @@
     onclick?: () => void;
   }
 
-  const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props();
-  
-  let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
+  const {
+    variant = 'primary',
+    backgroundColor,
+    size = 'medium',
+    label,
+    ...props
+  }: Props = $props();
+
+  const variantToClass = {
+    primary: 'storybook-button--primary',
+    secondary: 'storybook-button--secondary',
+    flat: '',
+  };
+
+  let mode = $derived(variantToClass[variant]);
   let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
 </script>
 

From cea8ce19fec6f630a8bd9aba4a307f89bee13171 Mon Sep 17 00:00:00 2001
From: Grant Ralls <grantsralls@gmail.com>
Date: Mon, 7 Jul 2025 16:12:36 -0400
Subject: [PATCH 3/7] remove trailing comma

---
 code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
index 35f124ee4c91..e66ef2000f74 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
@@ -17,7 +17,7 @@
     },
     args: {
       onclick: fn(),
-    },
+    }
   });
 </script>
 

From 6b63b02ce80164b618e26b6b9ba05277a165ff0c Mon Sep 17 00:00:00 2001
From: Grant Ralls <grantsralls@gmail.com>
Date: Mon, 7 Jul 2025 16:27:27 -0400
Subject: [PATCH 4/7] adding comments and fixing secondary story

---
 .../sveltekit/template/cli/ts/Button.stories.svelte         | 2 +-
 code/frameworks/sveltekit/template/cli/ts/Button.svelte     | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
index 35f124ee4c91..081847154f52 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
@@ -24,7 +24,7 @@
 <!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
 <Story name="Primary" args={{ variant: 'primary', label: 'Button' }} />
 
-<Story name="Secondary" args={{ label: 'Button' }} />
+<Story name="Secondary" args={{ variant: 'secondary', label: 'Button' }} />
 
 <Story name="Large" args={{ size: 'large', label: 'Button' }} />
 
diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
index dfde4b12e84a..2526ed68b531 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
@@ -2,7 +2,11 @@
   import './button.css';
 
   interface Props {
-    /** Is this the principal call to action on the page? */
+    /**
+     * The variant of the button
+     *
+     * @default primary
+     */
     variant?: 'primary' | 'secondary' | 'flat';
     /** What background color to use */
     backgroundColor?: string;

From f27837d32627107a024e26dc3e8c4e347b5d300b Mon Sep 17 00:00:00 2001
From: Grant Ralls <grantsralls@gmail.com>
Date: Tue, 8 Jul 2025 12:18:12 -0400
Subject: [PATCH 5/7] adding explanation for empty flat mapping

---
 code/frameworks/sveltekit/template/cli/ts/Button.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
index 2526ed68b531..b08db9443977 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
@@ -29,6 +29,7 @@
   const variantToClass = {
     primary: 'storybook-button--primary',
     secondary: 'storybook-button--secondary',
+    // Flat only exists to verify type inference for the control creation works
     flat: '',
   };
 

From b7d3a49765cdb4ffde1bc2959025511019c7ac5b Mon Sep 17 00:00:00 2001
From: Grant Ralls <grantsralls@gmail.com>
Date: Wed, 16 Jul 2025 10:51:18 -0400
Subject: [PATCH 6/7] reverting component & story changes

---
 .../template/cli/ts/Button.stories.svelte     |  6 ++---
 .../sveltekit/template/cli/ts/Button.svelte   | 25 +++----------------
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
index 38ce0bfd97cf..8b8e2cfd536b 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
@@ -17,14 +17,14 @@
     },
     args: {
       onclick: fn(),
-    }
+    },
   });
 </script>
 
 <!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
-<Story name="Primary" args={{ variant: 'primary', label: 'Button' }} />
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
 
-<Story name="Secondary" args={{ variant: 'secondary', label: 'Button' }} />
+<Story name="Secondary" args={{ label: 'Button' }} />
 
 <Story name="Large" args={{ size: 'large', label: 'Button' }} />
 
diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
index b08db9443977..e6332a53cf08 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
@@ -2,12 +2,8 @@
   import './button.css';
 
   interface Props {
-    /**
-     * The variant of the button
-     *
-     * @default primary
-     */
-    variant?: 'primary' | 'secondary' | 'flat';
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
     /** What background color to use */
     backgroundColor?: string;
     /** How large should the button be? */
@@ -18,22 +14,9 @@
     onclick?: () => void;
   }
 
-  const {
-    variant = 'primary',
-    backgroundColor,
-    size = 'medium',
-    label,
-    ...props
-  }: Props = $props();
+  const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props();
 
-  const variantToClass = {
-    primary: 'storybook-button--primary',
-    secondary: 'storybook-button--secondary',
-    // Flat only exists to verify type inference for the control creation works
-    flat: '',
-  };
-
-  let mode = $derived(variantToClass[variant]);
+  let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
   let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
 </script>
 

From 477ca9e2dd3c94b9cb4aaf6ef4691de003685169 Mon Sep 17 00:00:00 2001
From: Grant Ralls <grantsralls@gmail.com>
Date: Wed, 16 Jul 2025 10:54:06 -0400
Subject: [PATCH 7/7] reverting component & story changes

---
 code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte | 2 +-
 code/frameworks/sveltekit/template/cli/ts/Button.svelte         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
index 8b8e2cfd536b..718708998f62 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte
@@ -17,7 +17,7 @@
     },
     args: {
       onclick: fn(),
-    },
+    }
   });
 </script>
 
diff --git a/code/frameworks/sveltekit/template/cli/ts/Button.svelte b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
index e6332a53cf08..c34befec5be5 100644
--- a/code/frameworks/sveltekit/template/cli/ts/Button.svelte
+++ b/code/frameworks/sveltekit/template/cli/ts/Button.svelte
@@ -15,7 +15,7 @@
   }
 
   const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props();
-
+  
   let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
   let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
 </script>