fix(svelte): support class objects in subcomponents

Author: dancormier

package-lock.json

@@ -31,7 +31,7 @@
     },
     "peerDependencies": {
         "@stackoverflow/stacks": "^2.0.0 || ^3.0.0-beta.0 || ^3.0.0",
-        "svelte": "^5.0.0"
+        "svelte": "^5.19.0"
     },
     "dependencies": {
         "clsx": "^2.1.1",

packages/stacks-svelte/package.json

@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
     import Checkbox from "../Checkbox/Checkbox.svelte";
     import Radio from "../RadioGroup/Radio.svelte";
     import Icon from "../Icon/Icon.svelte";
@@ -56,7 +58,7 @@
         /**
          * Additional CSS classes added to the check control container
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -72,8 +74,8 @@
         class: className = "",
     }: Props = $props();
 
-    const getItemClasses = (className: string) => {
-        return `s-menu--item${className ? ` ${className}` : ""}`;
+    const getItemClasses = (className: ClassValue) => {
+        return clsx("s-menu--item", className);
     };
 
     const itemClasses = $derived(getItemClasses(className));

packages/stacks-svelte/src/components/Menu/MenuCheckItem.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
+
     interface Props {
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     let { class: className = "" }: Props = $props();
 
-    const getClasses = (className: string) => {
-        const base = "s-menu--divider";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        return classes;
+    const getClasses = (className: ClassValue) => {
+        return clsx("s-menu--divider", className);
     };
 
     const classes = $derived(getClasses(className));

packages/stacks-svelte/src/components/Menu/MenuDivider.svelte

@@ -3,8 +3,10 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
     import type {
+        ClassValue,
         HTMLAnchorAttributes,
         HTMLButtonAttributes,
     } from "svelte/elements";
@@ -37,7 +39,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Snippet for the menu item content
@@ -56,31 +58,21 @@
         ...restProps
     }: Props = $props();
 
-    const getItemClasses = (className: string) => {
-        return `s-menu--item${className ? ` ${className}` : ""}`;
+    const getItemClasses = (className: ClassValue) => {
+        return clsx("s-menu--item", className);
     };
 
     const getLinkClasses = (
-        className: string,
+        className: ClassValue,
         danger: boolean,
         selected: boolean
     ) => {
-        const base = "s-menu--action";
-        let classes = base;
-
-        if (danger) {
-            classes += ` ${base}__danger`;
-        }
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        if (selected) {
-            classes += ` is--selected`;
-        }
-
-        return classes;
+        return clsx(
+            "s-menu--action",
+            danger && "s-menu--action__danger",
+            className,
+            selected && "is--selected"
+        );
     };
 
     const itemClasses = $derived(getItemClasses(className));

packages/stacks-svelte/src/components/Menu/MenuItem.svelte

@@ -3,13 +3,15 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
 
     interface Props {
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Sets whether the menu title is rendered within a fieldset
@@ -24,15 +26,8 @@
 
     let { class: className = "", type = "li", children }: Props = $props();
 
-    const getClasses = (className: string) => {
-        const base = "s-menu--title";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        return classes;
+    const getClasses = (className: ClassValue) => {
+        return clsx("s-menu--title", className);
     };
 
     const classes = $derived(getClasses(className));

packages/stacks-svelte/src/components/Menu/MenuTitle.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
     import Icon from "../Icon/Icon.svelte";
     import { IconCross } from "@stackoverflow/stacks-icons/icons";
     import { usePopoverContext } from "./Popover.svelte";
@@ -11,7 +13,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
         /**
          * Callback fired when the close button is clicked
          */
@@ -30,7 +32,7 @@
 
 <button
     aria-label={label}
-    class={`s-popover--close s-btn s-btn__tonal ps-absolute${className ? ` ${className}` : ""}`}
+    class={clsx("s-popover--close s-btn s-btn__tonal ps-absolute", className)}
     type="button"
     onclick={handleClick}
 >