From 5987b61a5522fff09468bddd586eed4a537edcc8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 19 Mar 2025 12:43:33 -0700
Subject: [PATCH] fix(theme): remove invalid `themes` prop from markup (#2127)

---
 src/Theme/Theme.svelte    | 12 +++++++-----
 tests/Theme/Theme.test.ts | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/Theme/Theme.svelte b/src/Theme/Theme.svelte
index b276b483..e3ae9eda 100644
--- a/src/Theme/Theme.svelte
+++ b/src/Theme/Theme.svelte
@@ -100,16 +100,18 @@
 {/if}
 
 {#if render === "toggle"}
+  {@const { themes: toggleThemes, ...toggleProps } = toggle}
   <Toggle
-    {...toggle}
-    toggled={theme === toggle.themes[1]}
+    {...toggleProps}
+    toggled={theme === toggleThemes[1]}
     on:toggle={({ detail }) => {
-      theme = detail.toggled ? toggle.themes[1] : toggle.themes[0];
+      theme = detail.toggled ? toggleThemes[1] : toggleThemes[0];
     }}
   />
 {:else if render === "select"}
-  <Select {...select} bind:selected={theme}>
-    {#each select.themes as theme (theme)}
+  {@const { themes: selectThemes, ...selectProps } = select}
+  <Select {...selectProps} bind:selected={theme}>
+    {#each selectThemes as theme (theme)}
       <SelectItem value={theme} text={themes[theme]} />
     {/each}
   </Select>
diff --git a/tests/Theme/Theme.test.ts b/tests/Theme/Theme.test.ts
index 9758855a..68cc09ba 100644
--- a/tests/Theme/Theme.test.ts
+++ b/tests/Theme/Theme.test.ts
@@ -130,14 +130,20 @@ describe("Theme", () => {
   it("should render custom toggle when render prop is set to toggle and custom toggle options are provided", async () => {
     render(ThemeToggleCustom);
 
+    const checkbox = screen.getByRole("switch");
+    assert(checkbox);
+    expect(checkbox).not.toBeChecked();
+
     const toggle = screen.getAllByText("Enable dark mode")[0];
     expect(toggle).toBeInTheDocument();
 
     await user.click(toggle);
     expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g80" });
+    expect(checkbox).toBeChecked();
 
     await user.click(toggle);
     expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g10" });
+    expect(checkbox).not.toBeChecked();
   });
 
   it("should render select when render prop is set to select", async () => {
@@ -145,11 +151,17 @@ describe("Theme", () => {
 
     const select = screen.getByLabelText("Themes");
     expect(select).toBeInTheDocument();
+    expect(select).toHaveTextContent("White");
+    expect(select).toHaveValue("white");
 
     await user.selectOptions(select, "g100");
+    expect(select).toHaveTextContent("Gray 100");
+    expect(select).toHaveValue("g100");
     expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" });
 
     await user.selectOptions(select, "white");
+    expect(select).toHaveTextContent("White");
+    expect(select).toHaveValue("white");
     expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" });
   });
 
@@ -158,11 +170,17 @@ describe("Theme", () => {
 
     const select = screen.getByLabelText("Select a theme");
     expect(select).toBeInTheDocument();
+    expect(select).toHaveTextContent("White");
+    expect(select).toHaveValue("white");
 
     await user.selectOptions(select, "g100");
+    expect(select).toHaveTextContent("Gray 100");
+    expect(select).toHaveValue("g100");
     expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" });
 
     await user.selectOptions(select, "white");
+    expect(select).toHaveTextContent("White");
+    expect(select).toHaveValue("white");
     expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" });
   });
 });