zabi-components 7.0.1 → 8.0.0

package/dist/atoms/Select.svelte

@@ -8,8 +8,11 @@
         AlertCircle,
     } from "@lucide/svelte";
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         value?: string | number | undefined;
         options?: Array<{
             value: string | number;
@@ -28,6 +31,8 @@
         emptyStateActionLabel?: string;
         placeholder?: string;
         label?: string;
+        /** When set, a hidden input submits the selected value with native forms. */
+        name?: string;
         required?: boolean;
         disabled?: boolean;
         size?: "sm" | "md" | "lg";
@@ -38,6 +43,7 @@
     }
 
     let {
+        class: className = "",
         value = $bindable(undefined),
         options = [],
         searchable = true,
@@ -52,6 +58,7 @@
         emptyStateActionLabel = "",
         placeholder = "Select an option",
         label = "",
+        name = "",
         required = false,
         disabled = false,
         size = "md",
@@ -66,26 +73,11 @@
     let selectContainer: HTMLDivElement;
     let searchQuery = $state("");
 
+    // Same fixed height scale as Button, IconButton and Input (32 / 40 / 48).
     const sizeClass = $derived(() => {
-        if (size === "sm") {
-            return {
-                padding: "px-4 py-2",
-                text: "text-sm",
-                leading: "leading-5",
-            };
-        } else if (size === "lg") {
-            return {
-                padding: "px-4 py-3",
-                text: "text-base",
-                leading: "leading-6",
-            };
-        } else {
-            return {
-                padding: "px-4 py-2.5",
-                text: "text-base",
-                leading: "leading-6",
-            };
-        }
+        if (size === "sm") return { box: "h-8 px-3", text: "text-sm" };
+        if (size === "lg") return { box: "h-12 px-4", text: "text-base" };
+        return { box: "h-10 px-3", text: "text-sm" };
     });
 
     const variantClass = $derived(() => {
@@ -101,24 +93,24 @@
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "focus-ring flex w-full cursor-pointer items-center justify-between rounded-lg border bg-input text-body transition-all duration-200 hover:bg-input-hover active:bg-input-focus focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:opacity-50";
+            "focus-ring flex w-full cursor-pointer items-center justify-between gap-2 rounded-control border bg-input text-body transition-colors duration-150 hover:bg-input-hover active:bg-input-focus focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text";
 
-        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
+        return cn(`${baseClasses} ${sizeStyles.box} ${sizeStyles.text} ${variantClass()}`);
     });
 
     const labelClasses = $derived(
-        () => "block text-sm font-medium text-label mb-1",
+        () => "block text-sm font-medium text-label mb-2",
     );
 
     const messageClasses = $derived(() => {
         if (variant === "error") {
-            return "text-error text-sm mt-1 flex items-center gap-1.5 w-full";
+            return "text-error text-sm mt-1 flex items-center gap-2 w-full";
         } else if (variant === "success") {
-            return "text-success text-sm mt-1 flex items-center gap-1.5 w-full";
+            return "text-success text-sm mt-1 flex items-center gap-2 w-full";
         } else if (variant === "warning") {
-            return "text-warning text-sm mt-1 flex items-center gap-1.5 w-full";
+            return "text-warning text-sm mt-1 flex items-center gap-2 w-full";
         }
-        return "text-description text-sm mt-1 flex items-center gap-1.5 w-full";
+        return "text-description text-sm mt-1 flex items-center gap-2 w-full";
     });
 
     const getIcon = $derived(() => {
@@ -130,25 +122,24 @@
 
     const selectId = generateId("select");
 
-    const selectedLabel = $derived(() => {
-        if (isEmpty()) {
-            return String(placeholder || "Select an option");
-        }
-        const selected = options.find((opt) => opt.value === value);
-        return selected?.label
-            ? String(selected.label)
-            : String(placeholder || "Select an option");
-    });
-
     const isEmpty = $derived(() => {
         return value === undefined || value === null || value === "";
     });
 
-    const normalizedOptions = $derived(() => {
-        const fallbackOptions = (restProps as { options?: Props["options"] })
-            .options;
-        return Array.from(options ?? fallbackOptions ?? []);
-    });
+    /** String comparison so `"2"` and `2` match — same rule as Dropdown's `selectedValue`. */
+    function isSameValue(
+        a: string | number | null | undefined,
+        b: string | number | null | undefined,
+    ): boolean {
+        if (a === undefined || a === null || b === undefined || b === null) {
+            return false;
+        }
+        return String(a) === String(b);
+    }
+
+    const selectedOption = $derived.by(() =>
+        options.find((opt) => isSameValue(opt.value, value)),
+    );
 
     const hasSearchQuery = $derived(() => {
         return searchQuery.trim().length > 0;
@@ -156,7 +147,7 @@
 
     const filteredOptions = $derived(() => {
         const query = searchQuery.trim().toLowerCase();
-        const availableOptions = normalizedOptions();
+        const availableOptions = options;
         if (!searchable || query.length === 0) {
             return availableOptions;
         }
@@ -215,7 +206,7 @@
 
 <svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
 
-<div bind:this={selectContainer} class="w-full select-container">
+<div bind:this={selectContainer} class={cn("w-full select-container", className)}>
     {#if label}
         <label for={selectId} class={labelClasses()}>{label}</label>
     {/if}
@@ -250,8 +241,7 @@
                     {:else}
                         {isEmpty()
                         ? placeholder
-                        : options.find((opt) => opt.value === value)?.label ||
-                          placeholder}
+                        : selectedOption?.label || placeholder}
                     {/if}
                 </span>
                 <ChevronDown
@@ -262,29 +252,32 @@
                 />
             </button>
         {/snippet}
+        {#snippet header()}
+            {#if searchable && !isLoading}
+                <!-- Outside role="listbox": a textbox is not a valid listbox child. -->
+                <div class="px-3 pb-2 pt-1" style:width={menuWidth}>
+                    <Input
+                        type="text"
+                        size="sm"
+                        class="min-w-0"
+                        placeholder={searchPlaceholder}
+                        bind:value={searchQuery}
+                        aria-label={searchPlaceholder}
+                        {disabled}
+                    />
+                </div>
+            {/if}
+        {/snippet}
         {#snippet children()}
             <div class="px-2 pb-2 pt-1" style:width={menuWidth}>
-                {#if searchable && !isLoading}
-                    <div class="px-1 pb-2">
-                        <Input
-                            type="text"
-                            size="sm"
-                            class="min-w-0"
-                            placeholder={searchPlaceholder}
-                            bind:value={searchQuery}
-                            aria-label={searchPlaceholder}
-                            {disabled}
-                        />
-                    </div>
-                {/if}
                 <div
                     class="overflow-y-auto px-1"
                     style:max-height={maxMenuHeight}
                 >
                     {#if isLoading}
                         <div class="space-y-2 px-2 py-2" role="status" aria-live="polite">
-                            <div class="h-8 w-full animate-pulse rounded-md bg-base-200"></div>
-                            <div class="h-8 w-full animate-pulse rounded-md bg-base-200"></div>
+                            <div class="h-8 w-full animate-pulse rounded-control bg-base-200"></div>
+                            <div class="h-8 w-full animate-pulse rounded-control bg-base-200"></div>
                             <p class="text-xs text-description">{loadingText}</p>
                         </div>
                     {:else if filteredOptions().length > 0}
@@ -292,17 +285,19 @@
                             {@const buttonRestProps = {
                                 "data-value": String(option.value),
                             } as Record<string, string>}
-                            <div class="w-full my-0.5">
+                            <div class="w-full my-1">
                                 <button
                                     type="button"
                                     role="option"
-                                    aria-selected={value === option.value
+                                    aria-selected={isSameValue(value, option.value)
                                         ? true
                                         : undefined}
-                                    class="focus-ring flex w-full items-center justify-start rounded-md border-2 px-3 py-2 text-left text-sm font-medium transition-colors focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {value ===
-                                    option.value
+                                    class="focus-ring flex w-full items-center justify-start rounded-control border-2 px-3 py-2 text-left text-sm font-medium transition-colors focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {isSameValue(
+                                        value,
+                                        option.value,
+                                    )
                                         ? 'border-action-primary bg-transparent text-headline'
-                                        : 'border-transparent bg-transparent text-body hover:bg-base-100'}"
+                                        : 'border-transparent bg-transparent text-body hover:bg-surface-overlay-hover'}"
                                     disabled={option.disabled}
                                     {...buttonRestProps}
                                     onclick={() =>
@@ -317,13 +312,13 @@
                             {noResultsText}
                         </div>
                     {:else}
-                        <div class="rounded-md border border-border bg-base-50 px-3 py-3 text-sm">
+                        <div class="rounded-control border border-border bg-surface-overlay-hover px-3 py-3 text-sm">
                             <p class="font-medium text-headline">{emptyStateTitle}</p>
                             <p class="mt-1 text-description">{emptyStateDescription}</p>
                             {#if emptyStateActionLabel && onEmptyStateAction}
                                 <button
                                     type="button"
-                                    class="mt-3 inline-flex min-h-11 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary"
+                                    class="mt-3 inline-flex min-h-11 cursor-pointer items-center rounded-control bg-action-primary px-3 py-2 text-sm text-action-primary"
                                     onclick={onEmptyStateAction}
                                 >
                                     {emptyStateActionLabel}
@@ -335,6 +330,9 @@
             </div>
         {/snippet}
     </Dropdown>
+    {#if name}
+        <input type="hidden" {name} value={isEmpty() ? "" : String(value)} />
+    {/if}
     {#if message && variant !== "default"}
         <p
             id={`${selectId}-message`}

package/dist/atoms/Select.svelte.d.ts

@@ -1,4 +1,6 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     value?: string | number | undefined;
     options?: Array<{
         value: string | number;
@@ -17,6 +19,8 @@ interface Props {
     emptyStateActionLabel?: string;
     placeholder?: string;
     label?: string;
+    /** When set, a hidden input submits the selected value with native forms. */
+    name?: string;
     required?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";

package/dist/atoms/SelectionControl.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
     import {
         SELECTION_CONTROL_LABEL_ROW,
         selectionControlRingOverlayClasses,
@@ -17,6 +18,8 @@
     };
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         id?: string;
         type: SelectionControlType;
         shape: SelectionControlShape;
@@ -33,6 +36,7 @@
     }
 
     let {
+        class: className = "",
         id: idProp,
         type,
         shape,
@@ -69,7 +73,7 @@
     }
 </script>
 
-<div class="flex items-center gap-2">
+<div class={cn("flex items-center gap-2", className)}>
     <label for={controlId} class={labelWrapperClasses}>
         <span class={controlContainerClasses}>
             <input

package/dist/atoms/SelectionControl.svelte.d.ts

@@ -7,6 +7,8 @@ export type SelectionControlMarkProps = {
     disabled: boolean;
 };
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     id?: string;
     type: SelectionControlType;
     shape: SelectionControlShape;

package/dist/atoms/Skeleton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { cn } from "../util/cn.js";
+
     type Variant = "text" | "circle" | "block";
 
     interface Props {
@@ -20,9 +22,9 @@
     }: Props = $props();
 
     const radius: Record<Variant, string> = {
-        text: "rounded-md",
+        text: "rounded-control",
         circle: "rounded-full",
-        block: "rounded-lg",
+        block: "rounded-control",
     };
 
     const defaultShape: Record<Variant, string> = {
@@ -46,7 +48,7 @@
 </script>
 
 <div
-    class="animate-pulse bg-surface-2 {defaultShape[variant]} {radius[variant]} {className}"
+    class={cn("animate-pulse bg-surface-2", defaultShape[variant], radius[variant], className)}
     style={inlineStyle || undefined}
     role="status"
     aria-busy="true"

package/dist/atoms/Table.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import { cn } from "../util/cn.js";
 
     interface Props {
         /** Visible `<caption>` when set. */
@@ -12,7 +13,7 @@
 </script>
 
 <div
-    class="overflow-x-auto rounded-lg border border-border shadow-sm {className}"
+    class={cn("overflow-x-auto rounded-control border border-border shadow-sm", className)}
 >
     <table class="w-full min-w-[20rem] border-collapse text-left text-sm text-body">
         {#if caption}

package/dist/atoms/Text.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
 
+    import { cn } from "../util/cn.js";
     type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
-    type Size = 'sm' | 'md' | 'lg';
+    type Size = 'xs' | 'sm' | 'md' | 'lg';
+    type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
 
     interface Props {
         as?: 'p' | 'span' | 'div';
         tone?: Tone;
         size?: Size;
+        /**
+         * Overrides the weight the tone implies — `label` sets `medium`,
+         * every other tone sets `normal`.
+         */
+        weight?: Weight;
         class?: string;
         children?: Snippet;
     }
@@ -16,6 +23,7 @@
         as: Tag = 'p',
         tone = 'body',
         size = 'md',
+        weight,
         class: className = '',
         children,
     }: Props = $props();
@@ -29,16 +37,37 @@
         error: 'text-error',
     };
 
+    /**
+     * The bottom of the same ramp `Heading` sits on, so the two components
+     * share one scale rather than each carrying its own. `md` matches the
+     * metrics of an `h6` (text-base/leading-6) and `lg` those of an `h5`
+     * (text-lg/leading-7) — a Text set at that size lands on the same line
+     * box as the heading above it. Leading is stated rather than inherited
+     * from Tailwind's defaults so the shared steps stay locked together if
+     * the type scale is retuned.
+     */
     const sizeClass: Record<Size, string> = {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        xs: 'text-xs leading-4',
+        sm: 'text-sm leading-5',
+        md: 'text-base leading-6',
+        lg: 'text-lg leading-7',
     };
+
+    const weightClass: Record<Weight, string> = {
+        normal: 'font-normal',
+        medium: 'font-medium',
+        semibold: 'font-semibold',
+        bold: 'font-bold',
+    };
+
+    /** Labels read as labels by default; callers can still override. */
+    const defaultWeight: Weight = $derived(tone === 'label' ? 'medium' : 'normal');
+    const resolvedWeight = $derived(weight ?? defaultWeight);
 </script>
 
 <svelte:element
     this={Tag}
-    class={[toneClass[tone], sizeClass[size], className].filter(Boolean).join(' ')}
+    class={cn(toneClass[tone], sizeClass[size], weightClass[resolvedWeight], className)}
 >
     {#if children}
         {@render children()}

package/dist/atoms/Text.svelte.d.ts

@@ -1,10 +1,16 @@
 import type { Snippet } from 'svelte';
 type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
-type Size = 'sm' | 'md' | 'lg';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
 interface Props {
     as?: 'p' | 'span' | 'div';
     tone?: Tone;
     size?: Size;
+    /**
+     * Overrides the weight the tone implies — `label` sets `medium`,
+     * every other tone sets `normal`.
+     */
+    weight?: Weight;
     class?: string;
     children?: Snippet;
 }

package/dist/atoms/Textarea.svelte

@@ -2,6 +2,7 @@
     import { CheckCircle, AlertTriangle, AlertCircle } from '@lucide/svelte';
     import type { SemanticVariant, SizeVariant } from '../types/variants.js';
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         id?: string;
@@ -56,9 +57,9 @@
 
     const textareaClasses = $derived(() => {
         const baseClasses =
-            'focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6';
+            'focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-control transition-colors duration-150 placeholder:text-input-placeholder text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed resize-y px-3 py-2 text-sm leading-6';
 
-        return `${baseClasses} ${variantClass()} ${className}`.trim();
+        return cn(`${baseClasses} ${variantClass()} ${className}`);
     });
 
     const labelClasses = $derived(
@@ -67,13 +68,13 @@
 
     const messageClasses = $derived(() => {
         if (variant === 'error') {
-            return 'mt-1 flex items-center gap-1.5 text-sm text-error';
+            return 'mt-1 flex items-center gap-2 text-sm text-error';
         } else if (variant === 'success') {
-            return 'mt-1 flex items-center gap-1.5 text-sm text-success';
+            return 'mt-1 flex items-center gap-2 text-sm text-success';
         } else if (variant === 'warning') {
-            return 'mt-1 flex items-center gap-1.5 text-sm text-warning';
+            return 'mt-1 flex items-center gap-2 text-sm text-warning';
         }
-        return 'mt-1 flex items-center gap-1.5 text-sm text-description';
+        return 'mt-1 flex items-center gap-2 text-sm text-description';
     });
 
     const getIcon = $derived(() => {

package/dist/atoms/ThemeToggle.svelte

@@ -2,6 +2,7 @@
     import { onMount } from "svelte";
     import { Sun, Moon } from "@lucide/svelte";
     import { FOCUS_BRAND_CLASS } from "../util/focus-utils.js";
+    import { cn } from "../util/cn.js";
     
     function safeLocalStorage(): Storage | undefined {
         return typeof window !== "undefined" ? localStorage : undefined;
@@ -12,6 +13,8 @@
     }
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         size?: "sm" | "md" | "lg";
         variant?: "default" | "ghost" | "outline";
         disabled?: boolean;
@@ -19,9 +22,11 @@
     }
 
     let {
+        class: className = "",
         size = "md",
         variant = "default",
         disabled = false,
+        onclick,
         ...restProps
     }: Props = $props();
 
@@ -57,10 +62,8 @@
         if (mounted && storage) {
             storage.setItem("theme", isDark ? "dark" : "light");
         }
-        
-        if (onclick) {
-            (onclick as (event: Event) => void)(event);
-        }
+
+        onclick?.(event);
     }
 
     function updateTheme() {
@@ -97,20 +100,20 @@
 
     const variantClass = $derived(() => {
         if (variant === "ghost") {
-            return "bg-transparent hover:bg-base-100 active:bg-base-200 border-0";
+            return "bg-transparent hover:bg-surface-hover active:bg-surface-active border-0";
         } else if (variant === "outline") {
-            return "bg-base-50 hover:bg-base-100 active:bg-base-200 border border-border";
+            return "bg-action-secondary hover:bg-action-secondary-hover active:bg-action-secondary-active border border-border";
         } else {
-            return "bg-base-50 hover:bg-base-100 active:bg-base-200 border-0";
+            return "bg-action-secondary hover:bg-action-secondary-hover active:bg-action-secondary-active border-0";
         }
     });
 
     const buttonClasses = $derived(() => {
         const sizeStyles = sizeClass();
-        return `
+        return cn(`
             ${sizeStyles.button}
             ${variantClass()}
-            rounded-lg
+            rounded-control
             flex
             items-center
             justify-center
@@ -122,16 +125,16 @@
             disabled:opacity-50
             disabled:cursor-not-allowed
             disabled:active:scale-100
-            disabled:hover:bg-base-50
+            disabled:hover:bg-action-disabled
             ${FOCUS_BRAND_CLASS}
-        `.trim().replace(/\s+/g, " ");
+        `).replace(/\s+/g, " ");
     });
 </script>
 
 {#if mounted}
     <button
         onclick={toggleTheme}
-        class={buttonClasses()}
+        class="{buttonClasses()} {className}"
         aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
         aria-pressed={isDark}
         type="button"
@@ -146,12 +149,12 @@
     </button>
 {:else}
     <button
-        class="w-10 h-10 bg-base-50 rounded-lg flex items-center justify-center text-label cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        class="{sizeClass().button} {variantClass()} rounded-control flex items-center justify-center text-label cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
         aria-label="Theme toggle"
         type="button"
         {disabled}
         {...restProps}
     >
-        <Sun size={20} class="text-label" />
+        <Sun size={sizeClass().icon} class="text-label" />
     </button>
 {/if}

package/dist/atoms/ThemeToggle.svelte.d.ts

@@ -1,4 +1,6 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "ghost" | "outline";
     disabled?: boolean;

package/dist/atoms/Toast.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { cn } from "../util/cn.js";
+
     interface Props {
         message?: string;
         type?: 'success' | 'error' | 'warning' | 'info';
@@ -22,14 +24,14 @@
     let isVisible = $state(true);
 
     const typeClasses: Record<NonNullable<Props['type']>, string> = {
-        success: 'border-success bg-card text-success',
-        error: 'border-error bg-card text-error',
-        warning: 'border-warning bg-card text-warning',
-        info: 'border-border bg-card text-body',
+        success: 'border-success bg-surface-overlay text-success',
+        error: 'border-error bg-surface-overlay text-error',
+        warning: 'border-warning bg-surface-overlay text-warning',
+        info: 'border-border bg-surface-overlay text-body',
     };
 
     const cardClasses =
-        'box-border w-full min-w-[18rem] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-lg border p-4 shadow-lg';
+        'box-border w-full min-w-[18rem] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-control border p-4 shadow-lg';
 
     function closeToast(event: Event) {
         isVisible = false;
@@ -46,7 +48,7 @@
         {#if closable}
             <button
                 type="button"
-                class="focus-ring shrink-0 cursor-pointer rounded-md text-description hover:text-headline focus:outline-none"
+                class="focus-ring shrink-0 cursor-pointer rounded-control text-description hover:text-headline focus:outline-none"
                 onclick={closeToast}
                 aria-label="Close notification"
             >
@@ -62,7 +64,7 @@
             class="pointer-events-none fixed top-4 right-4 left-4 z-toast flex justify-end sm:left-auto"
         >
             <div
-                class="pointer-events-auto {cardClasses} {typeClasses[type]} {className}"
+                class={cn("pointer-events-auto", cardClasses, typeClasses[type], className)}
                 role="alert"
                 {...restProps}
             >
@@ -71,7 +73,7 @@
         </div>
     {:else}
         <div
-            class="relative z-toast mx-auto {cardClasses} {typeClasses[type]} {className}"
+            class={cn("relative z-toast mx-auto", cardClasses, typeClasses[type], className)}
             role="alert"
             {...restProps}
         >