From 6a615f78d9a9f27c0c533ec7b033b867944a0ca3 Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Thu, 19 Mar 2026 12:28:51 +0000
Subject: [PATCH 1/8] Update svelte components to accept objects and arrays

---
 packages/stacks-svelte/package.json           |  1 +
 .../ActivityIndicator.stories.svelte          | 17 ++++++-
 .../ActivityIndicator.svelte                  | 30 ++++-------
 .../components/Avatar/Avatar.stories.svelte   | 21 ++++++--
 .../src/components/Avatar/Avatar.svelte       | 20 +++-----
 .../src/components/Badge/Badge.stories.svelte | 12 ++++-
 .../src/components/Badge/Badge.svelte         | 50 +++++++++++--------
 .../src/components/Bling/Bling.stories.svelte | 36 +++++++++----
 .../src/components/Bling/Bling.svelte         | 30 ++++-------
 .../components/Button/Button.stories.svelte   | 15 ++++--
 .../src/components/Button/Button.svelte       | 40 +++++----------
 .../Checkbox/Checkbox.stories.svelte          | 34 +++++++++----
 .../src/components/Checkbox/Checkbox.svelte   | 21 +++-----
 .../src/components/FormGroup/FormGroup.svelte | 21 +++-----
 packages/stacks-svelte/src/storybook-utils.ts | 25 ++++++++++
 15 files changed, 213 insertions(+), 160 deletions(-)
 create mode 100644 packages/stacks-svelte/src/storybook-utils.ts

diff --git a/packages/stacks-svelte/package.json b/packages/stacks-svelte/package.json
index c085ba707e..9c369aae84 100644
--- a/packages/stacks-svelte/package.json
+++ b/packages/stacks-svelte/package.json
@@ -33,6 +33,7 @@
         "svelte": "^5.0.0"
     },
     "dependencies": {
+        "clsx": "^2.1.1",
         "@floating-ui/core": "^1.7.3",
         "@stackoverflow/stacks-icons": "^7.0.0-beta.18",
         "@stackoverflow/stacks-icons-legacy": "npm:@stackoverflow/stacks-icons@^6.9.0",
diff --git a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
index b64849d6dc..8b4d3d4b20 100644
--- a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
+++ b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Icon from "../Icon/Icon.svelte";
     import Button from "../Button/Button.svelte";
     import { IconNotification } from "@stackoverflow/stacks-icons/icons";
@@ -28,11 +29,25 @@
                 control: "select",
                 options: ActivityIndicatorSizes,
             },
+            class: {
+                control: "text",
+            },
+        },
+        args: {
+            label: "New activities",
+            content: 99,
         },
     });
 </script>
 
-<Story name="Base" args={{ label: "New activities", content: 99 }} />
+<Story name="Base">
+    {#snippet template({ class: classArg, ...args })}
+        <ActivityIndicator
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        />
+    {/snippet}
+</Story>
 
 <Story name="Variants" asChild>
     <div class="d-flex fd-column g64">
diff --git a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
index e458c3e2b7..8b442107cf 100644
--- a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
+++ b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
@@ -1,4 +1,7 @@
 <script module lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
+
     export type Variant = "" | "success" | "warning" | "danger";
     export type Size = "" | "sm";
 </script>
@@ -29,7 +32,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -40,27 +43,12 @@
         class: className = "",
     }: Props = $props();
 
-    const getClasses = (
-        className: string,
-        variant: Variant,
-        size: Size
-    ): string => {
+    const getClasses = (className: ClassValue, variant: Variant, size: Size) => {
         const base = "s-activity-indicator";
-        let classes = base;
-
-        if (variant) {
-            classes += ` ${base}__${variant}`;
-        }
-
-        if (size) {
-            classes += ` ${base}__${size}`;
-        }
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        return classes;
+        const classes = [variant, size]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(getClasses(className, variant, size));
diff --git a/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte b/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
index b77285308b..fd61bc8152 100644
--- a/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
+++ b/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
@@ -1,6 +1,8 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Avatar, { type Size } from "./Avatar.svelte";
+
     const AvatarSizes: Size[] = [16, 24, 32, 48, 64, 96, 128];
 
     const { Story } = defineMeta({
@@ -15,14 +17,25 @@
                 control: "select",
                 options: AvatarSizes,
             },
+            class: {
+                control: "text",
+            },
+        },
+        args: {
+            name: "example",
+            src: "https://picsum.photos/128",
         },
     });
 </script>
 
-<Story
-    name="Base"
-    args={{ name: "example", src: "https://picsum.photos/128" }}
-/>
+<Story name="Base">
+    {#snippet template({ class: classArg, ...args })}
+        <Avatar
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        />
+    {/snippet}
+</Story>
 
 <Story name="Sizes" asChild>
     <div class="d-flex fd-column g64">
diff --git a/packages/stacks-svelte/src/components/Avatar/Avatar.svelte b/packages/stacks-svelte/src/components/Avatar/Avatar.svelte
index f839fbbd02..8e66f5f00a 100644
--- a/packages/stacks-svelte/src/components/Avatar/Avatar.svelte
+++ b/packages/stacks-svelte/src/components/Avatar/Avatar.svelte
@@ -3,10 +3,11 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import Icon from "../Icon/Icon.svelte";
     import ActivityIndicator from "../ActivityIndicator/ActivityIndicator.svelte";
     import { IconShieldXSm } from "@stackoverflow/stacks-icons-legacy/icons";
-    import type { HTMLAnchorAttributes } from "svelte/elements";
+    import type { ClassValue, HTMLAnchorAttributes } from "svelte/elements";
 
     interface Props {
         /**
@@ -47,7 +48,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -63,19 +64,10 @@
         ...restProps
     }: Props & HTMLAnchorAttributes = $props();
 
-    const getClasses = (className: string, size: Size): string => {
+    const getClasses = (className: ClassValue, size: Size) => {
         const base = "s-avatar";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        if (size !== 16) {
-            classes += ` ${base}__${size}`;
-        }
-
-        return classes;
+        const classes = size === 16 ? [] : [`${base}__${size}`];
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(getClasses(className, size));
diff --git a/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte b/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
index 230da4b536..de38e0011b 100644
--- a/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
+++ b/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import {
         IconDocument,
         IconCompose,
@@ -73,13 +74,20 @@
             important: {
                 control: "boolean",
             },
+            class: {
+                control: "text",
+            },
         },
     });
 </script>
 
 <Story name="Base">
-    {#snippet template({ text, ...args })}
-        <Badge text={text ?? "1.23k"} {...args} />
+    {#snippet template({ text, class: classArg, ...args })}
+        <Badge
+            text={text ?? "1.23k"}
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        />
     {/snippet}
 </Story>
 
diff --git a/packages/stacks-svelte/src/components/Badge/Badge.svelte b/packages/stacks-svelte/src/components/Badge/Badge.svelte
index 643964bfe7..5a1250f9d1 100644
--- a/packages/stacks-svelte/src/components/Badge/Badge.svelte
+++ b/packages/stacks-svelte/src/components/Badge/Badge.svelte
@@ -27,8 +27,11 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import Bling from "../Bling/Bling.svelte";
     import Icon from "../Icon/Icon.svelte";
+    import type { ClassValue } from "svelte/elements";
+
     interface Props {
         /**
          * The text content of the badge
@@ -87,7 +90,7 @@
         /**
          * Additional CSS classes added to the badge element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -104,36 +107,39 @@
         class: className = "",
     }: Props = $props();
 
-    const classes = $derived(() => {
+    const getClasses = (
+        className: ClassValue,
+        size: BadgeSize,
+        squared: boolean,
+        important: boolean,
+        type: BadgeType | undefined,
+        state: BadgeState | undefined,
+        userType: UserType | undefined,
+        award: Award | undefined
+    ) => {
         const base = "s-badge";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        if (size) {
-            classes += ` ${base}__${size}`;
-        }
-
+        const classes: string[] = [size]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
         if (squared) {
-            classes += ` ${base}__squared`;
+            classes.push(`${base}__squared`);
         }
-
         if (important) {
-            classes += ` ${base}__important`;
+            classes.push(`${base}__important`);
         }
-
         if (type === "state" && state) {
-            classes += ` ${base}__${state}`;
+            classes.push(`${base}__${state}`);
         } else if (type === "user" && userType) {
-            classes += ` ${base}__${userType}`;
+            classes.push(`${base}__${userType}`);
         } else if (type === "tag" && award) {
-            classes += ` ${base}__${award}`;
+            classes.push(`${base}__${award}`);
         }
+        return clsx(base, className, classes);
+    };
 
-        return classes;
-    });
+    const classes = $derived(
+        getClasses(className, size, squared, important, type, state, userType, award)
+    );
 
     const needsBling = $derived(() => {
         return (
@@ -166,7 +172,7 @@
     });
 </script>
 
-<span class={classes()}>
+<span class={classes}>
     {#if needsBling()}
         <Bling
             type={blingType()}
diff --git a/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte b/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte
index 02f0517269..8a19010c49 100644
--- a/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte
+++ b/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte
@@ -1,6 +1,8 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Bling, { type Type, type Size } from "./Bling.svelte";
+
     const BlingSizes: Size[] = ["sm", "", "lg"];
     const BlingTypes: Type[] = [
         "",
@@ -14,21 +16,33 @@
     const { Story } = defineMeta({
         title: "Components/Bling",
         component: Bling,
+        argTypes: {
+            type: {
+                control: "select",
+                options: BlingTypes,
+            },
+            size: {
+                control: "select",
+                options: BlingSizes,
+            },
+            filled: {
+                control: "boolean",
+            },
+            class: {
+                control: "text",
+            },
+        },
+        args: {
+            name: "Bling",
+        },
     });
 </script>
 
-<Story
-    name="Base"
-    args={{
-        name: "Bling",
-    }}
->
-    {#snippet template(args)}
+<Story name="Base">
+    {#snippet template({ class: classArg, ...args })}
         <Bling
-            type={args.type}
-            name={args.name}
-            size={args.size}
-            filled={args.filled}
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Bling/Bling.svelte b/packages/stacks-svelte/src/components/Bling/Bling.svelte
index 51f956e519..928b9d33f3 100644
--- a/packages/stacks-svelte/src/components/Bling/Bling.svelte
+++ b/packages/stacks-svelte/src/components/Bling/Bling.svelte
@@ -4,6 +4,9 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
+
     interface Props {
         /**
          * The accessible text provided for screen readers
@@ -28,36 +31,25 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const { type, filled, size, name, class: className = "" }: Props = $props();
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         type?: Type,
         size?: Size,
         filled?: boolean
     ) => {
-        let classes = "s-bling";
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        if (type) {
-            classes += " s-bling__" + type;
-        }
-
+        const base = "s-bling";
+        const classes = [type, size]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
         if (filled) {
-            classes += " s-bling__filled";
-        }
-
-        if (size) {
-            classes += " s-bling__" + size;
+            classes.push(`${base}__filled`);
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(getClasses(className, type, size, filled));
diff --git a/packages/stacks-svelte/src/components/Button/Button.stories.svelte b/packages/stacks-svelte/src/components/Button/Button.stories.svelte
index 50181ac6cb..c506bd9621 100644
--- a/packages/stacks-svelte/src/components/Button/Button.stories.svelte
+++ b/packages/stacks-svelte/src/components/Button/Button.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Button from "./Button.svelte";
     import type { Brand, Size, Variant, Weight } from "./Button.svelte";
     import Icon from "../Icon/Icon.svelte";
@@ -39,13 +40,21 @@
             children: {
                 control: "text",
             },
-        },
+            class: {
+                control: "text",
+            },
+        }
     });
 </script>
 
 <Story name="Base">
-    {#snippet template({ children, ...args })}
-        <Button {...args}>{children ?? "Ask question"}</Button>
+    {#snippet template({ children, class: classArg, ...args })}
+        <Button
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        >
+            {children ?? "Ask question"}
+        </Button>
     {/snippet}
 </Story>
 
diff --git a/packages/stacks-svelte/src/components/Button/Button.svelte b/packages/stacks-svelte/src/components/Button/Button.svelte
index dd264e98ae..5d4fb226c7 100644
--- a/packages/stacks-svelte/src/components/Button/Button.svelte
+++ b/packages/stacks-svelte/src/components/Button/Button.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
-    import type { HTMLButtonAttributes } from "svelte/elements";
+    import clsx from "clsx";
+    import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
     import type { Snippet } from "svelte";
     import Loader from "../Loader/Loader.svelte";
 
@@ -83,7 +84,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Snippet for the button content
@@ -119,7 +120,7 @@
     }: Props = $props();
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         branding: Brand,
         size: Size,
         variant: Variant,
@@ -131,40 +132,25 @@
         selected: boolean
     ) => {
         const base = "s-btn";
-        let classes = base;
-        const suffixes = [branding, size, variant, weight];
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        suffixes.forEach((suffix) => {
-            if (suffix) {
-                classes += ` ${base}__${suffix}`;
-            }
-        });
-
+        const classes = [branding, size, variant, weight]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
         if (dropdown) {
-            classes += ` ${base}__dropdown`;
+            classes.push(`${base}__dropdown`);
         }
-
         if (link) {
-            classes += ` ${base}__link`;
+            classes.push(`${base}__link`);
         }
-
         if (icon) {
-            classes += ` ${base}__icon`;
+            classes.push(`${base}__icon`);
         }
-
         if (unset) {
-            classes += ` ${base}__unset`;
+            classes.push(`${base}__unset`);
         }
-
         if (selected) {
-            classes += ` is-selected`;
+            classes.push("is-selected");
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(
diff --git a/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte b/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte
index 67f0910713..dfabcae7d1 100644
--- a/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte
+++ b/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Checkbox, { type Checked, type State } from "./Checkbox.svelte";
     import CheckboxGroup, { type CheckboxOption } from "./CheckboxGroup.svelte";
 
@@ -9,6 +10,23 @@
     const { Story } = defineMeta({
         title: "Components/Checkbox",
         component: Checkbox,
+        argTypes: {
+            checkmark: {
+                control: "boolean",
+            },
+            state: {
+                control: "select",
+                options: CheckboxStates,
+            },
+            class: {
+                control: "text",
+            },
+        },
+        args: {
+            name: "Checkbox",
+            id: "Checkbox-1",
+            label: "Checkbox label",
+        },
     });
 
     // For bindable value and onchange story
@@ -47,17 +65,13 @@
     };
 </script>
 
-<Story
-    name="Base"
-    args={{
-        name: "Checkbox",
-        id: "Checkbox-1",
-        label: "Checkbox label",
-    }}
->
-    {#snippet template(args)}
+<Story name="Base">
+    {#snippet template({ class: classArg, ...args })}
         <div class="wmx2">
-            <Checkbox {...args} />
+            <Checkbox
+                {...args}
+                class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            />
         </div>
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Checkbox/Checkbox.svelte b/packages/stacks-svelte/src/components/Checkbox/Checkbox.svelte
index 659e7abe93..2f6b0d6e6b 100644
--- a/packages/stacks-svelte/src/components/Checkbox/Checkbox.svelte
+++ b/packages/stacks-svelte/src/components/Checkbox/Checkbox.svelte
@@ -4,7 +4,9 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import Label from "../Label/Label.svelte";
+    import type { ClassValue } from "svelte/elements";
 
     export type Props = {
         /**
@@ -60,7 +62,7 @@
         /**
          * Additional CSS classes
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Change event handler
@@ -99,26 +101,19 @@
     });
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         checkmark: boolean,
         state: State
     ) => {
         const base = "s-checkbox";
-        let classes = base;
-
-        if (className) {
-            classes += " " + className;
-        }
-
+        const classes: string[] = [];
         if (checkmark) {
-            classes += ` ${base}__checkmark`;
+            classes.push(`${base}__checkmark`);
         }
-
         if (state) {
-            classes += ` has-${state}`;
+            classes.push(`has-${state}`);
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(getClasses(className, checkmark, state));
diff --git a/packages/stacks-svelte/src/components/FormGroup/FormGroup.svelte b/packages/stacks-svelte/src/components/FormGroup/FormGroup.svelte
index a183b599cd..f7f6862221 100644
--- a/packages/stacks-svelte/src/components/FormGroup/FormGroup.svelte
+++ b/packages/stacks-svelte/src/components/FormGroup/FormGroup.svelte
@@ -4,10 +4,12 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import Checkbox from "../Checkbox/Checkbox.svelte";
     import Radio from "../RadioGroup/Radio.svelte";
     import type { Props as CheckboxProps } from "../Checkbox/Checkbox.svelte";
     import type { Props as RadioProps } from "../RadioGroup/Radio.svelte";
+    import type { ClassValue } from "svelte/elements";
 
     export type CheckboxOption = Omit<CheckboxProps, "name" | "id"> & {
         id?: string;
@@ -60,7 +62,7 @@
         /**
          * Additional CSS classes
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Callback function called when the value changes
@@ -118,26 +120,19 @@
     };
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         horizontal: boolean,
         state: State
     ) => {
         const base = "s-form-group";
-        let classes = base;
-
-        if (className) {
-            classes += " " + className;
-        }
-
+        const classes: string[] = [];
         if (horizontal) {
-            classes += ` ${base}__horizontal`;
+            classes.push(`${base}__horizontal`);
         }
-
         if (state) {
-            classes += ` has-${state}`;
+            classes.push(`has-${state}`);
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(getClasses(className, horizontal, state));
diff --git a/packages/stacks-svelte/src/storybook-utils.ts b/packages/stacks-svelte/src/storybook-utils.ts
new file mode 100644
index 0000000000..c42387a42c
--- /dev/null
+++ b/packages/stacks-svelte/src/storybook-utils.ts
@@ -0,0 +1,25 @@
+import type { ClassValue } from "svelte/elements";
+
+/**
+ * Infers ClassValue from a Storybook control string: JSON array/object → parsed; otherwise string.
+ * Use in story templates so the class control accepts plain strings or JSON (e.g. ["wmx2"] or {"wmx2":true}).
+ */
+export function parseClassValue(input: string | undefined): ClassValue | undefined {
+    const s = typeof input === "string" ? input.trim() : "";
+    if (!s) return undefined;
+    if (s.startsWith("[") && s.endsWith("]")) {
+        try {
+            return JSON.parse(s) as string[];
+        } catch {
+            return s;
+        }
+    }
+    if (s.startsWith("{") && s.endsWith("}")) {
+        try {
+            return JSON.parse(s) as Record<string, boolean>;
+        } catch {
+            return s;
+        }
+    }
+    return s;
+}

From e82ac9a5f02858356255161415ebf34b1b3ccb0f Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Thu, 19 Mar 2026 13:19:10 +0000
Subject: [PATCH 2/8] run format

---
 .../ActivityIndicator.stories.svelte                  |  4 +++-
 .../ActivityIndicator/ActivityIndicator.svelte        |  6 +++++-
 .../src/components/Avatar/Avatar.stories.svelte       |  4 +++-
 .../src/components/Badge/Badge.stories.svelte         |  4 +++-
 .../stacks-svelte/src/components/Badge/Badge.svelte   | 11 ++++++++++-
 .../src/components/Bling/Bling.stories.svelte         |  4 +++-
 .../src/components/Button/Button.stories.svelte       |  6 ++++--
 .../src/components/Checkbox/Checkbox.stories.svelte   |  4 +++-
 packages/stacks-svelte/src/storybook-utils.ts         |  4 +++-
 9 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
index 8b4d3d4b20..9c4cf0f793 100644
--- a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
+++ b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.stories.svelte
@@ -44,7 +44,9 @@
     {#snippet template({ class: classArg, ...args })}
         <ActivityIndicator
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
index 8b442107cf..fc569a5c35 100644
--- a/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
+++ b/packages/stacks-svelte/src/components/ActivityIndicator/ActivityIndicator.svelte
@@ -43,7 +43,11 @@
         class: className = "",
     }: Props = $props();
 
-    const getClasses = (className: ClassValue, variant: Variant, size: Size) => {
+    const getClasses = (
+        className: ClassValue,
+        variant: Variant,
+        size: Size
+    ) => {
         const base = "s-activity-indicator";
         const classes = [variant, size]
             .filter(Boolean)
diff --git a/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte b/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
index fd61bc8152..5130d39835 100644
--- a/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
+++ b/packages/stacks-svelte/src/components/Avatar/Avatar.stories.svelte
@@ -32,7 +32,9 @@
     {#snippet template({ class: classArg, ...args })}
         <Avatar
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte b/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
index de38e0011b..d82df854e8 100644
--- a/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
+++ b/packages/stacks-svelte/src/components/Badge/Badge.stories.svelte
@@ -86,7 +86,9 @@
         <Badge
             text={text ?? "1.23k"}
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Badge/Badge.svelte b/packages/stacks-svelte/src/components/Badge/Badge.svelte
index 5a1250f9d1..195c5678df 100644
--- a/packages/stacks-svelte/src/components/Badge/Badge.svelte
+++ b/packages/stacks-svelte/src/components/Badge/Badge.svelte
@@ -138,7 +138,16 @@
     };
 
     const classes = $derived(
-        getClasses(className, size, squared, important, type, state, userType, award)
+        getClasses(
+            className,
+            size,
+            squared,
+            important,
+            type,
+            state,
+            userType,
+            award
+        )
     );
 
     const needsBling = $derived(() => {
diff --git a/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte b/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte
index 8a19010c49..06e686236c 100644
--- a/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte
+++ b/packages/stacks-svelte/src/components/Bling/Bling.stories.svelte
@@ -42,7 +42,9 @@
     {#snippet template({ class: classArg, ...args })}
         <Bling
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Button/Button.stories.svelte b/packages/stacks-svelte/src/components/Button/Button.stories.svelte
index c506bd9621..df24d614e8 100644
--- a/packages/stacks-svelte/src/components/Button/Button.stories.svelte
+++ b/packages/stacks-svelte/src/components/Button/Button.stories.svelte
@@ -43,7 +43,7 @@
             class: {
                 control: "text",
             },
-        }
+        },
     });
 </script>
 
@@ -51,7 +51,9 @@
     {#snippet template({ children, class: classArg, ...args })}
         <Button
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         >
             {children ?? "Ask question"}
         </Button>
diff --git a/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte b/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte
index dfabcae7d1..fce867cf7d 100644
--- a/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte
+++ b/packages/stacks-svelte/src/components/Checkbox/Checkbox.stories.svelte
@@ -70,7 +70,9 @@
         <div class="wmx2">
             <Checkbox
                 {...args}
-                class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+                class={parseClassValue(
+                    typeof classArg === "string" ? classArg : undefined
+                )}
             />
         </div>
     {/snippet}
diff --git a/packages/stacks-svelte/src/storybook-utils.ts b/packages/stacks-svelte/src/storybook-utils.ts
index c42387a42c..f8225c5527 100644
--- a/packages/stacks-svelte/src/storybook-utils.ts
+++ b/packages/stacks-svelte/src/storybook-utils.ts
@@ -4,7 +4,9 @@ import type { ClassValue } from "svelte/elements";
  * Infers ClassValue from a Storybook control string: JSON array/object → parsed; otherwise string.
  * Use in story templates so the class control accepts plain strings or JSON (e.g. ["wmx2"] or {"wmx2":true}).
  */
-export function parseClassValue(input: string | undefined): ClassValue | undefined {
+export function parseClassValue(
+    input: string | undefined
+): ClassValue | undefined {
     const s = typeof input === "string" ? input.trim() : "";
     if (!s) return undefined;
     if (s.startsWith("[") && s.endsWith("]")) {

From c01d51696a5a8d59186d0b150a3f972d0eaddae6 Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Fri, 20 Mar 2026 15:58:55 +0000
Subject: [PATCH 3/8] update class in svelte components to allow objects and
 arrays

---
 .../src/components/Icon/Icon.stories.svelte   | 16 ++++++++-
 .../src/components/Icon/Icon.svelte           |  9 +++--
 .../src/components/Label/Label.svelte         | 21 +++++------
 .../src/components/Link/Link.stories.svelte   | 13 +++++--
 .../src/components/Link/Link.svelte           | 27 ++++++--------
 .../src/components/Menu/Menu.stories.svelte   | 13 +++++--
 .../src/components/Menu/Menu.svelte           | 14 +++-----
 .../src/components/Modal/Modal.stories.svelte |  8 +++--
 .../src/components/Modal/Modal.svelte         | 14 +++-----
 .../components/Notice/Notice.stories.svelte   | 15 ++++++--
 .../src/components/Notice/Notice.svelte       | 25 +++++--------
 .../components/Popover/PopoverContent.svelte  | 36 +++++++++----------
 .../PostSummary/PostSummary.stories.svelte    | 12 +++++--
 .../components/PostSummary/PostSummary.svelte | 21 +++++------
 .../src/components/RadioGroup/Radio.svelte    | 21 +++++------
 .../RadioGroup/RadioGroup.stories.svelte      | 13 +++++--
 .../src/components/Tag/Tag.stories.svelte     |  7 +++-
 .../src/components/Tag/Tag.svelte             | 30 ++++++----------
 .../TextArea/TextArea.stories.svelte          | 10 +++++-
 .../src/components/TextArea/TextArea.svelte   | 24 +++++--------
 .../TextInput/TextInput.stories.svelte        | 15 +++++++-
 .../src/components/TextInput/TextInput.svelte | 24 +++++--------
 .../UserCard/UserCard.stories.svelte          | 12 +++++--
 .../src/components/UserCard/UserCard.svelte   | 31 ++++++++--------
 .../UserCard/UserCardAdditionalBling.svelte   | 14 +++-----
 .../src/components/Vote/Vote.stories.svelte   | 11 ++++--
 .../src/components/Vote/Vote.svelte           | 30 +++++++---------
 27 files changed, 259 insertions(+), 227 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte b/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte
index 73efd74e57..ec2a21d0f9 100644
--- a/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte
+++ b/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import * as Icons from "@stackoverflow/stacks-icons/icons";
     import * as Spots from "@stackoverflow/stacks-icons/spots";
     import Icon from "./Icon.svelte";
@@ -16,11 +17,24 @@
                 options: [...IconsNames, ...SpotsNames],
                 mapping: { ...Icons, ...Spots },
             },
+            class: {
+                control: "text",
+            },
+        },
+        args: {
+            src: Icons.IconServiceCCPA,
         },
     });
 </script>
 
-<Story name="Base" args={{ src: Icons.IconServiceCCPA }} />
+<Story name="Base">
+    {#snippet template({ class: classArg, ...args })}
+        <Icon
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        />
+    {/snippet}
+</Story>
 <Story name="Title" args={{ src: Icons.IconServiceCCPA, title: "CCPA" }} />
 <Story name="Native" args={{ src: Icons.IconServiceCCPA, native: true }} />
 <Story
diff --git a/packages/stacks-svelte/src/components/Icon/Icon.svelte b/packages/stacks-svelte/src/components/Icon/Icon.svelte
index 7d4d5ab14f..83830fdead 100644
--- a/packages/stacks-svelte/src/components/Icon/Icon.svelte
+++ b/packages/stacks-svelte/src/components/Icon/Icon.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
+
     interface Props {
         /**
          * The source of the SVG
@@ -18,7 +21,7 @@
         /**
          * Additional CSS classes added to the SVG element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -32,7 +35,7 @@
         src: string,
         title: string,
         native: boolean,
-        className: string
+        className: ClassValue
     ) => {
         let svg = src;
 
@@ -49,7 +52,7 @@
 
         // prepend custom classes to the classes the SVG already had
         if (className) {
-            svg = svg.replace(/class="/, 'class="' + className + " ");
+            svg = svg.replace(/class="/, 'class="' + clsx(className) + " ");
         }
 
         return svg;
diff --git a/packages/stacks-svelte/src/components/Label/Label.svelte b/packages/stacks-svelte/src/components/Label/Label.svelte
index ad8fe750bd..6ec08b08f6 100644
--- a/packages/stacks-svelte/src/components/Label/Label.svelte
+++ b/packages/stacks-svelte/src/components/Label/Label.svelte
@@ -4,7 +4,9 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
     import type { BadgeState } from "../Badge/Badge.svelte";
     import Badge from "../Badge/Badge.svelte";
 
@@ -37,7 +39,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Localized translation for the required text
@@ -61,19 +63,12 @@
         children,
     }: Props = $props();
 
-    const getClasses = (className: string, size: Size) => {
+    const getClasses = (className: ClassValue, size: Size) => {
         const base = "s-label";
-        let classes = base;
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        if (size) {
-            classes += ` ${base}__${size}`;
-        }
-
-        return classes;
+        const classes = [size]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(getClasses(className, size));
diff --git a/packages/stacks-svelte/src/components/Link/Link.stories.svelte b/packages/stacks-svelte/src/components/Link/Link.stories.svelte
index b2f6a193b5..ddd4c6cec8 100644
--- a/packages/stacks-svelte/src/components/Link/Link.stories.svelte
+++ b/packages/stacks-svelte/src/components/Link/Link.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Link, { type Variant } from "./Link.svelte";
 
     const LinkVariants: Variant[] = [
@@ -21,13 +22,21 @@
             children: {
                 control: "text",
             },
+            class: {
+                control: "text",
+            },
         },
     });
 </script>
 
 <Story name="Base">
-    {#snippet template({ children, ...args })}
-        <Link {...args}>{children ?? "Click me"}</Link>
+    {#snippet template({ children, class: classArg, ...args })}
+        <Link
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        >
+            {children ?? "Click me"}
+        </Link>
     {/snippet}
 </Story>
 
diff --git a/packages/stacks-svelte/src/components/Link/Link.svelte b/packages/stacks-svelte/src/components/Link/Link.svelte
index fa5ea8ae2e..9761603501 100644
--- a/packages/stacks-svelte/src/components/Link/Link.svelte
+++ b/packages/stacks-svelte/src/components/Link/Link.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";
@@ -41,7 +43,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Snippet for the link content
@@ -61,31 +63,22 @@
     }: Props = $props();
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         variant: Variant,
         dropdown: boolean,
         underlined: boolean
     ) => {
         const base = "s-link";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        if (variant) {
-            classes += ` ${base}__${variant}`;
-        }
-
+        const classes = [variant]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
         if (dropdown) {
-            classes += ` ${base}__dropdown`;
+            classes.push(`${base}__dropdown`);
         }
-
         if (underlined) {
-            classes += ` ${base}__underlined`;
+            classes.push(`${base}__underlined`);
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(
diff --git a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
index f328934358..32c83d7d22 100644
--- a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
+++ b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Menu from "./Menu.svelte";
     import MenuCheckItem from "./MenuCheckItem.svelte";
     import type { Type as MenuCheckItemType } from "./MenuCheckItem.svelte";
@@ -29,6 +30,11 @@
             MenuDivider,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } as any,
+        argTypes: {
+            class: {
+                control: "text",
+            },
+        },
     });
 </script>
 
@@ -39,10 +45,13 @@
 {/snippet}
 
 <Story name="Base">
-    {#snippet template()}
+    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
         <Popover id="base-popover" visible>
             <PopoverContent class="ps-relative is-visible p8 ws2">
-                <Menu>
+                <Menu
+                    {...args}
+                    class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+                >
                     {@render basicChildren()}
                 </Menu>
             </PopoverContent>
diff --git a/packages/stacks-svelte/src/components/Menu/Menu.svelte b/packages/stacks-svelte/src/components/Menu/Menu.svelte
index c94db7399f..dd36633ac1 100644
--- a/packages/stacks-svelte/src/components/Menu/Menu.svelte
+++ b/packages/stacks-svelte/src/components/Menu/Menu.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 is rendered within a fieldset
@@ -24,15 +26,9 @@
 
     let { class: className = "", type = "ul", children }: Props = $props();
 
-    const getClasses = (className: string) => {
+    const getClasses = (className: ClassValue) => {
         const base = "s-menu";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        return classes;
+        return clsx(base, className);
     };
 
     const classes = $derived(getClasses(className));
diff --git a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte
index bf8f680dc1..497f8a2df0 100644
--- a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte
+++ b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Modal, { type State } from "./Modal.svelte";
     import { Button } from "../../components";
 
@@ -13,6 +14,9 @@
                 control: "select",
                 options: ModalState,
             },
+            class: {
+                control: "text",
+            },
         },
     });
 </script>
@@ -23,7 +27,7 @@
 </script>
 
 <Story name="Base" args={{ id: "base-modal" }}>
-    {#snippet template(args)}
+    {#snippet template({ class: classArg, ...args })}
         <div class="hmn4">
             <Button
                 variant={args.state === "danger" ? "danger" : ""}
@@ -36,7 +40,7 @@
             id={args.id}
             visible={visible || args.visible}
             state={args.state}
-            class={args.class}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
             onclose={() => (visible = false)}
             preventCloseOnClickOutside={args.preventCloseOnClickOutside}
             hideCloseButton={args.hideCloseButton}
diff --git a/packages/stacks-svelte/src/components/Modal/Modal.svelte b/packages/stacks-svelte/src/components/Modal/Modal.svelte
index 9a763eaacf..8c2c3994b4 100644
--- a/packages/stacks-svelte/src/components/Modal/Modal.svelte
+++ b/packages/stacks-svelte/src/components/Modal/Modal.svelte
@@ -3,7 +3,9 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
     import { IconCross } from "@stackoverflow/stacks-icons/icons";
 
     import { Button, Icon } from "../../components";
@@ -25,7 +27,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
         /**
          * Localized translation for the close button aria label
          */
@@ -72,14 +74,8 @@
         footer,
     }: Props = $props();
 
-    const getClasses = (className: string) => {
-        let classes = "s-modal--dialog";
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        return classes;
+    const getClasses = (className: ClassValue) => {
+        return clsx("s-modal--dialog", className);
     };
     const modalClasses = $derived(getClasses(className));
 
diff --git a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
index 6a382343e7..4e4ea170f8 100644
--- a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
+++ b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" module>
     import Notice, { type Variant } from "./Notice.svelte";
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import NoticeAction from "./NoticeAction.svelte";
 
     const NoticeVariants: Variant[] = [
@@ -35,6 +36,9 @@
             onDismiss: {
                 control: false,
             },
+            class: {
+                control: "text",
+            },
         },
     });
 </script>
@@ -48,15 +52,20 @@
 {/snippet}
 
 <Story name="Base">
-    {#snippet template(args)}
-        <Notice {...args} children={content} />
+    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
+        <Notice
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            children={content}
+        />
     {/snippet}
 </Story>
 
 <Story name="Dismissible">
-    {#snippet template(args)}
+    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
         <Notice
             {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
             dismissible
             onDismiss={() => {
                 alert("You clicked dismiss");
diff --git a/packages/stacks-svelte/src/components/Notice/Notice.svelte b/packages/stacks-svelte/src/components/Notice/Notice.svelte
index 299832e80a..f9bdde7b3e 100644
--- a/packages/stacks-svelte/src/components/Notice/Notice.svelte
+++ b/packages/stacks-svelte/src/components/Notice/Notice.svelte
@@ -11,7 +11,9 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
+    import type { AriaRole, ClassValue } from "svelte/elements";
     import Icon from "../Icon/Icon.svelte";
     import Link from "../Link/Link.svelte";
     import {
@@ -24,7 +26,6 @@
         IconHelp,
         IconCross,
     } from "@stackoverflow/stacks-icons/icons";
-    import type { AriaRole } from "svelte/elements";
 
     interface Props {
         /**
@@ -51,7 +52,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Whether to include a dismiss button on the notice or not
@@ -100,26 +101,18 @@
     };
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         variant: Variant,
         important: boolean
     ) => {
         const base = "s-notice";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        if (variant) {
-            classes += ` ${base}__${variant}`;
-        }
-
+        const classes = [variant]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
         if (important) {
-            classes += ` ${base}__important`;
+            classes.push(`${base}__important`);
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const getIcon = (variant?: Variant) => {
diff --git a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
index 2d1d6979f2..11dcf180ea 100644
--- a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
+++ b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
     import { usePopoverContext } from "./Popover.svelte";
     import { clickOutside, focusTrap } from "../../actions";
 
@@ -20,11 +22,11 @@
         /**
          * Additional CSS classes added to the s-popover element
          */
-        class?: string;
+        class?: ClassValue;
         /**
          * Additional CSS classes added to the s-popover--content element
          */
-        contentClass?: string;
+        contentClass?: ClassValue;
         /**
          * Children snippet
          */
@@ -42,29 +44,25 @@
 
     let pstate = usePopoverContext("PopoverContent");
 
-    let classes = $derived.by(() => {
-        let result = "s-popover";
+    let popoverClasses = $derived.by(() => {
+        const base = "s-popover";
+        const modifiers: string[] = [];
         if (pstate.tooltip) {
-            result += " s-popover__tooltip";
+            modifiers.push(`${base}__tooltip`);
         }
-        if (className) {
-            result += " " + className;
-        }
-        return result;
+        // Order matches legacy: base → BEM modifiers → user class → visibility
+        return clsx(
+            base,
+            modifiers,
+            className,
+            pstate.visible ? "is-visible" : false
+        );
     });
 
     let contentClasses = $derived.by(() => {
-        let result = "s-popover--content";
-        if (contentClass) {
-            result += " " + contentClass;
-        }
-        return result;
+        return clsx("s-popover--content", contentClass);
     });
 
-    let computedClass = $derived(
-        `${classes}${pstate.visible ? " is-visible" : ""}`
-    );
-
     let computedRole = $derived(
         role || (pstate.tooltip ? "tooltip" : "dialog")
     );
@@ -73,7 +71,7 @@
 <!-- data-popper-placement is needed for compatibility with stacks classic popover styles -->
 <div
     id={`${pstate.id}-popover`}
-    class={computedClass}
+    class={popoverClasses}
     role={computedRole}
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledby}
diff --git a/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte b/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte
index bc5989b1f9..b99d887fce 100644
--- a/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte
+++ b/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import PostSummary from "./PostSummary.svelte";
     import PostSummaryAnswer from "./PostSummaryAnswer.svelte";
     import type {
@@ -115,6 +116,9 @@
                 control: "select",
                 options: StateTypes,
             },
+            class: {
+                control: "text",
+            },
         },
     });
 </script>
@@ -128,8 +132,12 @@
 {/snippet}
 
 <Story name="Base" args={baseArgs}>
-    {#snippet template(args)}
-        <PostSummary {...baseArgs} {...args} />
+    {#snippet template({ class: classArg, ...args })}
+        <PostSummary
+            {...baseArgs}
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        />
     {/snippet}
 </Story>
 
diff --git a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
index bd0e4e8e0e..ba996c4ce2 100644
--- a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
+++ b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
@@ -22,7 +22,9 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
     import type { SvelteDate } from "svelte/reactivity";
     import ContentTypeBadge from "./PostSummaryContentType.svelte";
     import Excerpt from "./PostSummaryExcerpt.svelte";
@@ -195,7 +197,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Snippet for tags
@@ -261,26 +263,19 @@
     );
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         state: State,
         acceptedAnswer: boolean
     ) => {
         const base = "s-post-summary";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
+        const modifiers: string[] = [];
         if (acceptedAnswer) {
-            classes += ` ${base}__answered`;
+            modifiers.push(`${base}__answered`);
         }
-
         if (state === "deleted") {
-            classes += ` ${base}__${state}`;
+            modifiers.push(`${base}__${state}`);
         }
-
-        return classes;
+        return clsx(base, className, modifiers);
     };
 
     const classes = $derived(getClasses(className, state, acceptedAnswer));
diff --git a/packages/stacks-svelte/src/components/RadioGroup/Radio.svelte b/packages/stacks-svelte/src/components/RadioGroup/Radio.svelte
index b8ba5fc148..7730fb31be 100644
--- a/packages/stacks-svelte/src/components/RadioGroup/Radio.svelte
+++ b/packages/stacks-svelte/src/components/RadioGroup/Radio.svelte
@@ -3,7 +3,9 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import Label from "../Label/Label.svelte";
+    import type { ClassValue } from "svelte/elements";
 
     export type Props = {
         /**
@@ -54,7 +56,7 @@
         /**
          * Additional CSS classes
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Change event handler
@@ -79,26 +81,19 @@
     }: Props = $props();
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         checkmark: boolean,
         state: State
     ) => {
         const base = "s-radio";
-        let classes = base;
-
-        if (className) {
-            classes += " " + className;
-        }
-
+        const classes: string[] = [];
         if (checkmark) {
-            classes += ` ${base}__checkmark`;
+            classes.push(`${base}__checkmark`);
         }
-
         if (state) {
-            classes += ` has-${state}`;
+            classes.push(`has-${state}`);
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(getClasses(className, checkmark, state));
diff --git a/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte b/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte
index 3b62f05e86..c828d746a3 100644
--- a/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte
+++ b/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Radio from "./Radio.svelte";
     import RadioGroup, {
         type State,
@@ -11,6 +12,11 @@
     const { Story } = defineMeta({
         title: "Components/RadioGroup",
         component: RadioGroup,
+        argTypes: {
+            class: {
+                control: "text",
+            },
+        },
     });
 
     const baseOptions: RadioOption[] = [
@@ -47,9 +53,12 @@
         options: baseOptions,
     }}
 >
-    {#snippet template(args)}
+    {#snippet template({ class: classArg, ...args })}
         <div class="wmx2">
-            <RadioGroup {...args} />
+            <RadioGroup
+                {...args}
+                class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            />
         </div>
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte b/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte
index 34d590dcc2..cbb03475fe 100644
--- a/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte
+++ b/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import { createRawSnippet, type Snippet } from "svelte";
     import Tag, { type Size, type Variant } from "./Tag.svelte";
     import Icon from "../Icon/Icon.svelte";
@@ -35,6 +36,9 @@
                     "sponsor": IconWave,
                 },
             },
+            class: {
+                control: "text"
+            },
         },
     });
 </script>
@@ -46,11 +50,12 @@
     }}
 >
     {#snippet template(args)}
-        {@const { children, sponsor, ...restArgs } = args}
+        {@const { children, sponsor, class: classArg, ...restArgs } = args}
         <Tag
             sponsor={sponsor && createSnippet(sponsor as unknown as string)}
             children={createSnippet(children as unknown as string)}
             {...restArgs}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Tag/Tag.svelte b/packages/stacks-svelte/src/components/Tag/Tag.svelte
index d221a4327f..a4491ec23e 100644
--- a/packages/stacks-svelte/src/components/Tag/Tag.svelte
+++ b/packages/stacks-svelte/src/components/Tag/Tag.svelte
@@ -4,10 +4,12 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
     import type { Snippet } from "svelte";
     import Icon from "../Icon/Icon.svelte";
     import { IconCross16 } from "@stackoverflow/stacks-icons/icons";
     import type {
+        ClassValue,
         HTMLAnchorAttributes,
         HTMLButtonAttributes,
     } from "svelte/elements";
@@ -79,7 +81,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Callback function to call when the tag is dismissed
@@ -119,35 +121,23 @@
     }: Props & HTMLButtonAttributes & HTMLAnchorAttributes = $props();
 
     const getClasses = (
-        className: string,
+        className: ClassValue,
         size: Size,
         variant: Variant,
         ignored: boolean,
         watched: boolean
     ) => {
         const base = "s-tag";
-        let classes = base;
-        const suffixes = [size, variant];
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        suffixes.forEach((suffix) => {
-            if (suffix) {
-                classes += ` ${base}__${suffix}`;
-            }
-        });
-
+        const classes = [size, variant]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
         if (ignored) {
-            classes += ` ${base}__ignored`;
+            classes.push(`${base}__ignored`);
         }
-
         if (watched) {
-            classes += ` ${base}__watched`;
+            classes.push(`${base}__watched`);
         }
-
-        return classes;
+        return clsx(base, className, classes);
     };
 
     const classes = $derived(
diff --git a/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte b/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
index 602a132317..33c8ba999b 100644
--- a/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
+++ b/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import TextArea from "./TextArea.svelte";
     import type { Size, State } from "./TextArea.svelte";
 
@@ -39,7 +40,14 @@
         placeholder:
             "e.g. The Stack Overflow glyph used to have 6 bars, but now…",
     }}
-/>
+>
+    {#snippet template({ class: classArg, ...args })}
+        <TextArea
+            {...args}
+            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+        />
+    {/snippet}
+</Story>
 
 <Story name="Label visibility" asChild>
     <div class="d-grid g16">
diff --git a/packages/stacks-svelte/src/components/TextArea/TextArea.svelte b/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
index bf4ccdbee8..32bc597a2a 100644
--- a/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
+++ b/packages/stacks-svelte/src/components/TextArea/TextArea.svelte
@@ -4,7 +4,8 @@
 </script>
 
 <script lang="ts">
-    import type { HTMLTextareaAttributes } from "svelte/elements";
+    import clsx from "clsx";
+    import type { ClassValue, HTMLTextareaAttributes } from "svelte/elements";
     import type { Snippet } from "svelte";
     import type { BadgeState } from "../Badge/Badge.svelte";
     import Icon from "../Icon/Icon.svelte";
@@ -15,7 +16,7 @@
         IconCheck,
     } from "@stackoverflow/stacks-icons/icons";
 
-    interface Props extends Omit<HTMLTextareaAttributes, "size"> {
+    interface Props extends Omit<HTMLTextareaAttributes, "size" | "class"> {
         /**
          * `id` attribute of the text input
          */
@@ -68,7 +69,7 @@
         /**
          * Additional CSS classes added to the underlying HTML input element
          */
-        class?: string;
+        class?: ClassValue;
         /**
          * Localized translation for the required label status text
          */
@@ -105,19 +106,12 @@
         ...rest
     }: Props = $props();
 
-    const getClasses = (className: string, size: Size) => {
+    const getClasses = (className: ClassValue, size: Size) => {
         const base = "s-textarea";
-        let classes = base;
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        if (size) {
-            classes += ` ${base}__${size}`;
-        }
-
-        return classes;
+        const classes = [size]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
+        return clsx(base, className, classes);
     };
     let classes = $derived(getClasses(className, size));
 </script>
diff --git a/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte b/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte
index 08568615e1..f1b3f5ab1f 100644
--- a/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte
+++ b/packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import TextInput from "./TextInput.svelte";
     import type { FillSide, Size, State, Type } from "./TextInput.svelte";
 
@@ -51,13 +52,25 @@
                 control: "select",
                 options: TextInputTypes,
             },
+            class: {
+                control: "text",
+            },
         },
     });
 
     let bindableValue = $state("Change me");
 </script>
 
-<Story name="Base" args={{ id: "base-example-input", label: "Username" }} />
+<Story name="Base" args={{ id: "base-example-input", label: "Username" }}>
+    {#snippet template({ class: classArg, ...args })}
+        <TextInput
+            {...args}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
+        />
+    {/snippet}
+</Story>
 
 <Story name="Input fill" asChild>
     <div class="d-grid g16">
diff --git a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
index a20a65031b..2378386769 100644
--- a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
+++ b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
@@ -19,7 +19,8 @@
 </script>
 
 <script lang="ts">
-    import type { HTMLInputAttributes } from "svelte/elements";
+    import clsx from "clsx";
+    import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
     import type { Snippet } from "svelte";
     import type { BadgeState } from "../Badge/Badge.svelte";
     import Icon from "../Icon/Icon.svelte";
@@ -34,7 +35,7 @@
 
     import { IconCreditCard } from "@stackoverflow/stacks-icons-legacy/icons";
 
-    interface Props extends Omit<HTMLInputAttributes, "size" | "type"> {
+    interface Props extends Omit<HTMLInputAttributes, "size" | "type" | "class"> {
         /**
          * `id` attribute of the text input
          */
@@ -108,7 +109,7 @@
         /**
          * Additional CSS classes added to the underlying HTML input element
          */
-        class?: string;
+        class?: ClassValue;
 
         /**
          * Localized translation for the required label status text
@@ -160,19 +161,12 @@
         ...rest
     }: Props = $props();
 
-    const getClasses = (className: string, size: Size) => {
+    const getClasses = (className: ClassValue, size: Size) => {
         const base = "s-input";
-        let classes = base;
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        if (size) {
-            classes += ` ${base}__${size}`;
-        }
-
-        return classes;
+        const classes = [size]
+            .filter(Boolean)
+            .map((modifier) => `${base}__${modifier}`);
+        return clsx(base, className, classes);
     };
     let classes = $derived(getClasses(className, size));
 </script>
diff --git a/packages/stacks-svelte/src/components/UserCard/UserCard.stories.svelte b/packages/stacks-svelte/src/components/UserCard/UserCard.stories.svelte
index c89388f46d..915f8be2a5 100644
--- a/packages/stacks-svelte/src/components/UserCard/UserCard.stories.svelte
+++ b/packages/stacks-svelte/src/components/UserCard/UserCard.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import UserCard, { type Size } from "./UserCard.svelte";
     import UserCardTime from "./UserCardTime.svelte";
     import UserCardBadge from "./UserCardBadge.svelte";
@@ -40,7 +41,7 @@
 </script>
 
 <Story name="Base" args={baseArgs}>
-    {#snippet template(args)}
+    {#snippet template({ class: classArg, ...args })}
         {#snippet time()}
             <UserCardTime
                 text="asked 2 hr ago"
@@ -54,7 +55,14 @@
             <UserCardBling name="silver bling" type="silver" text={8} />
             <UserCardBling name="bronze bling" type="bronze" text={4} />
         {/snippet}
-        <UserCard {...args} {time} {blings} />
+        <UserCard
+            {...args}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
+            {time}
+            {blings}
+        />
     {/snippet}
 </Story>
 
diff --git a/packages/stacks-svelte/src/components/UserCard/UserCard.svelte b/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
index 63fea0fa1b..4dad605a69 100644
--- a/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
+++ b/packages/stacks-svelte/src/components/UserCard/UserCard.svelte
@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
     import Avatar, { type Size as AvatarSize } from "../Avatar/Avatar.svelte";
     import Icon from "../Icon/Icon.svelte";
     import { IconStarVerifiedSm } from "@stackoverflow/stacks-icons-legacy/icons";
@@ -95,7 +97,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -118,23 +120,18 @@
         class: className = "",
     }: Props = $props();
 
-    const getClasses = (className: string, size?: Size, deleted?: boolean) => {
+    const getClasses = (
+        className: ClassValue,
+        size?: Size,
+        deleted?: boolean
+    ) => {
         const base = "s-user-card";
-        let classes = base;
-
-        if (className) {
-            classes += ` ${className}`;
-        }
-
-        if (size) {
-            classes += ` ${base}__${size}`;
-        }
-
-        if (deleted) {
-            classes += ` ${base}__deleted`;
-        }
-
-        return classes;
+        return clsx(
+            base,
+            className,
+            size && `${base}__${size}`,
+            deleted && `${base}__deleted`
+        );
     };
 
     const getAvatarSize = (size?: Size): AvatarSize => {
diff --git a/packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.svelte b/packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.svelte
index 085b1070e9..a0e2453e12 100644
--- a/packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.svelte
+++ b/packages/stacks-svelte/src/components/UserCard/UserCardAdditionalBling.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 Popover from "../Popover/Popover.svelte";
@@ -29,7 +31,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -40,15 +42,9 @@
         class: className = "",
     }: Props = $props();
 
-    const getClasses = (className: string) => {
+    const getClasses = (className: ClassValue) => {
         const base = "s-user-card--group";
-        let classes = base;
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        return classes;
+        return clsx(base, className);
     };
 
     const classes = $derived(getClasses(className));
diff --git a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
index f83720c8d4..ef70d58980 100644
--- a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
+++ b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { parseClassValue } from "../../storybook-utils";
     import Vote, { type Status } from "./Vote.svelte";
     import { createVoteState } from "./vote-state.svelte";
 
@@ -18,8 +19,14 @@
 </script>
 
 <Story name="Base">
-    {#snippet template({ total, ...args })}
-        <Vote total={total ?? 0} {...args} />
+    {#snippet template({ class: classArg, total, ...args })}
+        <Vote
+            total={total ?? 0}
+            {...args}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
+        />
     {/snippet}
 </Story>
 
diff --git a/packages/stacks-svelte/src/components/Vote/Vote.svelte b/packages/stacks-svelte/src/components/Vote/Vote.svelte
index 0c7febd723..b4a42edeb0 100644
--- a/packages/stacks-svelte/src/components/Vote/Vote.svelte
+++ b/packages/stacks-svelte/src/components/Vote/Vote.svelte
@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+    import clsx from "clsx";
+    import type { ClassValue } from "svelte/elements";
     import Icon from "../Icon/Icon.svelte";
     import {
         IconVote16Up,
@@ -90,7 +92,7 @@
         /**
          * Additional CSS classes added to the element
          */
-        class?: string;
+        class?: ClassValue;
     }
 
     const {
@@ -113,25 +115,17 @@
     }: Props = $props();
 
     const getClasses = (
-        className: string,
-        expanded?: boolean,
+        className: ClassValue,
+        expanded: boolean,
         horizontal?: boolean
     ) => {
-        let classes = "s-vote";
-
-        if (className) {
-            classes += " " + className;
-        }
-
-        if (expanded) {
-            classes += " s-vote__expanded";
-        }
-
-        if (horizontal) {
-            classes += " s-vote__horizontal";
-        }
-
-        return classes;
+        const base = "s-vote";
+        return clsx(
+            base,
+            className,
+            expanded && `${base}__expanded`,
+            horizontal && `${base}__horizontal`
+        );
     };
 
     let expanded = $state(false);

From 0528659f2ec674f67f08748e89a6d96448dc7d21 Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Fri, 20 Mar 2026 16:08:41 +0000
Subject: [PATCH 4/8] update vote storybook

---
 packages/stacks-svelte/src/components/Vote/Vote.stories.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
index ef70d58980..393b5de8a2 100644
--- a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
+++ b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
@@ -14,6 +14,9 @@
                 control: { type: "select" },
                 options: VoteStatuses,
             },
+            class: {
+                control: "text"
+            }
         },
     });
 </script>

From e773b38a967dbcc3f6d38b58ec47b9058a07417b Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Fri, 20 Mar 2026 16:16:03 +0000
Subject: [PATCH 5/8] run format

---
 .../stacks-svelte/src/components/Icon/Icon.stories.svelte | 4 +++-
 .../stacks-svelte/src/components/Link/Link.stories.svelte | 4 +++-
 .../stacks-svelte/src/components/Menu/Menu.stories.svelte | 4 +++-
 .../src/components/Modal/Modal.stories.svelte             | 4 +++-
 .../src/components/Notice/Notice.stories.svelte           | 8 ++++++--
 .../src/components/PostSummary/PostSummary.stories.svelte | 4 +++-
 .../src/components/RadioGroup/RadioGroup.stories.svelte   | 4 +++-
 .../stacks-svelte/src/components/Tag/Tag.stories.svelte   | 6 ++++--
 .../src/components/TextArea/TextArea.stories.svelte       | 4 +++-
 .../src/components/TextInput/TextInput.svelte             | 5 ++++-
 .../stacks-svelte/src/components/Vote/Vote.stories.svelte | 4 ++--
 11 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte b/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte
index ec2a21d0f9..015a574227 100644
--- a/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte
+++ b/packages/stacks-svelte/src/components/Icon/Icon.stories.svelte
@@ -31,7 +31,9 @@
     {#snippet template({ class: classArg, ...args })}
         <Icon
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/Link/Link.stories.svelte b/packages/stacks-svelte/src/components/Link/Link.stories.svelte
index ddd4c6cec8..6588ab049a 100644
--- a/packages/stacks-svelte/src/components/Link/Link.stories.svelte
+++ b/packages/stacks-svelte/src/components/Link/Link.stories.svelte
@@ -33,7 +33,9 @@
     {#snippet template({ children, class: classArg, ...args })}
         <Link
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         >
             {children ?? "Click me"}
         </Link>
diff --git a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
index 32c83d7d22..0f5a07d5ee 100644
--- a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
+++ b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
@@ -50,7 +50,9 @@
             <PopoverContent class="ps-relative is-visible p8 ws2">
                 <Menu
                     {...args}
-                    class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+                    class={parseClassValue(
+                        typeof classArg === "string" ? classArg : undefined
+                    )}
                 >
                     {@render basicChildren()}
                 </Menu>
diff --git a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte
index 497f8a2df0..b13250200b 100644
--- a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte
+++ b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte
@@ -40,7 +40,9 @@
             id={args.id}
             visible={visible || args.visible}
             state={args.state}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
             onclose={() => (visible = false)}
             preventCloseOnClickOutside={args.preventCloseOnClickOutside}
             hideCloseButton={args.hideCloseButton}
diff --git a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
index 4e4ea170f8..f85004ea55 100644
--- a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
+++ b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
@@ -55,7 +55,9 @@
     {#snippet template({ class: classArg, children: _storyChildren, ...args })}
         <Notice
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
             children={content}
         />
     {/snippet}
@@ -65,7 +67,9 @@
     {#snippet template({ class: classArg, children: _storyChildren, ...args })}
         <Notice
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
             dismissible
             onDismiss={() => {
                 alert("You clicked dismiss");
diff --git a/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte b/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte
index b99d887fce..1f431f90f6 100644
--- a/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte
+++ b/packages/stacks-svelte/src/components/PostSummary/PostSummary.stories.svelte
@@ -136,7 +136,9 @@
         <PostSummary
             {...baseArgs}
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte b/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte
index c828d746a3..25c6795f85 100644
--- a/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte
+++ b/packages/stacks-svelte/src/components/RadioGroup/RadioGroup.stories.svelte
@@ -57,7 +57,9 @@
         <div class="wmx2">
             <RadioGroup
                 {...args}
-                class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+                class={parseClassValue(
+                    typeof classArg === "string" ? classArg : undefined
+                )}
             />
         </div>
     {/snippet}
diff --git a/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte b/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte
index cbb03475fe..29a9a66216 100644
--- a/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte
+++ b/packages/stacks-svelte/src/components/Tag/Tag.stories.svelte
@@ -37,7 +37,7 @@
                 },
             },
             class: {
-                control: "text"
+                control: "text",
             },
         },
     });
@@ -55,7 +55,9 @@
             sponsor={sponsor && createSnippet(sponsor as unknown as string)}
             children={createSnippet(children as unknown as string)}
             {...restArgs}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte b/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
index 33c8ba999b..1abb217926 100644
--- a/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
+++ b/packages/stacks-svelte/src/components/TextArea/TextArea.stories.svelte
@@ -44,7 +44,9 @@
     {#snippet template({ class: classArg, ...args })}
         <TextArea
             {...args}
-            class={parseClassValue(typeof classArg === "string" ? classArg : undefined)}
+            class={parseClassValue(
+                typeof classArg === "string" ? classArg : undefined
+            )}
         />
     {/snippet}
 </Story>
diff --git a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
index 2378386769..0502cbff84 100644
--- a/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
+++ b/packages/stacks-svelte/src/components/TextInput/TextInput.svelte
@@ -35,7 +35,10 @@
 
     import { IconCreditCard } from "@stackoverflow/stacks-icons-legacy/icons";
 
-    interface Props extends Omit<HTMLInputAttributes, "size" | "type" | "class"> {
+    interface Props extends Omit<
+        HTMLInputAttributes,
+        "size" | "type" | "class"
+    > {
         /**
          * `id` attribute of the text input
          */
diff --git a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
index 393b5de8a2..5b239f2e9c 100644
--- a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
+++ b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte
@@ -15,8 +15,8 @@
                 options: VoteStatuses,
             },
             class: {
-                control: "text"
-            }
+                control: "text",
+            },
         },
     });
 </script>

From 0ba8a1d1d52364093976570311f5c52a0d6b0e77 Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Fri, 20 Mar 2026 16:33:43 +0000
Subject: [PATCH 6/8] add changeset

---
 .changeset/plenty-regions-shake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/plenty-regions-shake.md

diff --git a/.changeset/plenty-regions-shake.md b/.changeset/plenty-regions-shake.md
new file mode 100644
index 0000000000..63b9080e31
--- /dev/null
+++ b/.changeset/plenty-regions-shake.md
@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+Allow class prop to be array or object

From 8c6e44aa5b16afad68bac5927b129a81eb6d4811 Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Fri, 20 Mar 2026 16:33:52 +0000
Subject: [PATCH 7/8] fix linting issue

---
 .../stacks-svelte/src/components/Menu/Menu.stories.svelte     | 2 +-
 .../stacks-svelte/src/components/Notice/Notice.stories.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
index 0f5a07d5ee..63ced93c19 100644
--- a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
+++ b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
@@ -45,7 +45,7 @@
 {/snippet}
 
 <Story name="Base">
-    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
+    {#snippet template({ class: classArg, children: _storyChildren, ...args }) /* eslint-disable-line @typescript-eslint/no-unused-vars */}
         <Popover id="base-popover" visible>
             <PopoverContent class="ps-relative is-visible p8 ws2">
                 <Menu
diff --git a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
index f85004ea55..3e80dbcc6f 100644
--- a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
+++ b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
@@ -52,7 +52,7 @@
 {/snippet}
 
 <Story name="Base">
-    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
+    {#snippet template({ class: classArg, children: _storyChildren, ...args }) /* eslint-disable-line @typescript-eslint/no-unused-vars */}
         <Notice
             {...args}
             class={parseClassValue(
@@ -64,7 +64,7 @@
 </Story>
 
 <Story name="Dismissible">
-    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
+    {#snippet template({ class: classArg, children: _storyChildren, ...args }) /* eslint-disable-line @typescript-eslint/no-unused-vars */}
         <Notice
             {...args}
             class={parseClassValue(

From 3816c3686a97dc2c2f13372f3e0295606ac9e521 Mon Sep 17 00:00:00 2001
From: Tavian Taylor <ttaylor@stackoverflow.com>
Date: Fri, 20 Mar 2026 16:40:07 +0000
Subject: [PATCH 8/8] fix lint issues

---
 .../stacks-svelte/src/components/Menu/Menu.stories.svelte   | 3 ++-
 .../src/components/Notice/Notice.stories.svelte             | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
index 63ced93c19..454deb0d16 100644
--- a/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
+++ b/packages/stacks-svelte/src/components/Menu/Menu.stories.svelte
@@ -45,7 +45,8 @@
 {/snippet}
 
 <Story name="Base">
-    {#snippet template({ class: classArg, children: _storyChildren, ...args }) /* eslint-disable-line @typescript-eslint/no-unused-vars */}
+    <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
         <Popover id="base-popover" visible>
             <PopoverContent class="ps-relative is-visible p8 ws2">
                 <Menu
diff --git a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
index 3e80dbcc6f..1f7d170ec5 100644
--- a/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
+++ b/packages/stacks-svelte/src/components/Notice/Notice.stories.svelte
@@ -52,7 +52,8 @@
 {/snippet}
 
 <Story name="Base">
-    {#snippet template({ class: classArg, children: _storyChildren, ...args }) /* eslint-disable-line @typescript-eslint/no-unused-vars */}
+    <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
         <Notice
             {...args}
             class={parseClassValue(
@@ -64,7 +65,8 @@
 </Story>
 
 <Story name="Dismissible">
-    {#snippet template({ class: classArg, children: _storyChildren, ...args }) /* eslint-disable-line @typescript-eslint/no-unused-vars */}
+    <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+    {#snippet template({ class: classArg, children: _storyChildren, ...args })}
         <Notice
             {...args}
             class={parseClassValue(