zabi-components 5.0.18 → 5.0.20

package/dist/atoms/Select.svelte

@@ -45,6 +45,7 @@
     }: Props = $props();
 
     let isOpen = $state(false);
+    let selectContainer: HTMLDivElement;
 
     const sizeClass = $derived(() => {
         if (size === "sm") {
@@ -146,9 +147,15 @@
     }
 
     function handleClickOutside(event: MouseEvent) {
+        if (!isOpen) return;
+
+        const target = event.target as HTMLElement;
+        const clickedSelectContainer = target.closest(".select-container");
+
+        // Close if clicking outside any select container, or clicking on a different select
         if (
-            isOpen &&
-            !(event.target as HTMLElement).closest(".select-container")
+            !clickedSelectContainer ||
+            clickedSelectContainer !== selectContainer
         ) {
             isOpen = false;
         }
@@ -163,12 +170,18 @@
 
 <svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
 
-<div class="w-full select-container">
+<div bind:this={selectContainer} class="w-full select-container">
     {#if label}
         <label for={selectId} class={labelClasses()}>{label}</label>
     {/if}
 
-    <Dropdown {isOpen} placement="bottom-start">
+    <Dropdown
+        {isOpen}
+        placement="bottom-start"
+        selectedValue={value}
+        {options}
+        onOptionClick={handleOptionClick}
+    >
         {#snippet trigger()}
             <button
                 type="button"
@@ -198,24 +211,6 @@
                 />
             </button>
         {/snippet}
-        {#snippet children()}
-            <div class="px-2 py-2">
-                {#each options as option (option.value)}
-                    <button
-                        type="button"
-                        class="w-full text-left px-4 py-2 text-body hover:bg-base-100 transition-colors rounded-md my-0.5 {option.disabled
-                            ? 'opacity-50 cursor-not-allowed'
-                            : 'cursor-pointer'} {value === option.value
-                            ? 'bg-base-100'
-                            : ''}"
-                        onclick={() => handleOptionClick(option.value)}
-                        disabled={option.disabled}
-                    >
-                        {option.label}
-                    </button>
-                {/each}
-            </div>
-        {/snippet}
     </Dropdown>
     {#if message && variant !== "default"}
         <p id={`${selectId}-message`} class={messageClasses()} role="alert">

package/dist/atoms/Skeleton.svelte

@@ -3,18 +3,28 @@
         width?: string;
         height?: string;
         className?: string;
+        "aria-label"?: string;
     }
 
     let {
         width = "100%",
         height = "1rem",
         className = "",
+        "aria-label": ariaLabel = "Loading...",
         ...restProps
     }: Props = $props();
+
+    const classes = $derived(
+        `animate-pulse bg-action-secondary rounded${className ? ` ${className}` : ""}`,
+    );
+    const styles = $derived(`width: ${width}; height: ${height};`);
 </script>
 
 <div
-    class="animate-pulse bg-base-200 rounded {className}"
-    style="width: {width}; height: {height};"
+    class={classes}
+    style={styles}
+    aria-busy="true"
+    aria-label={ariaLabel}
+    role="status"
     {...restProps}
 ></div>

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

@@ -2,6 +2,7 @@ interface Props {
     width?: string;
     height?: string;
     className?: string;
+    "aria-label"?: string;
 }
 declare const Skeleton: import("svelte").Component<Props, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;

package/dist/atoms/Tooltip.svelte

@@ -77,7 +77,11 @@
     onfocusout={handleBlur}
     {...restProps}
 >
-    <div bind:this={triggerElement} id={triggerId} aria-describedby={isVisible ? tooltipId : undefined}>
+    <div
+        bind:this={triggerElement}
+        id={triggerId}
+        aria-describedby={isVisible ? tooltipId : undefined}
+    >
         {@render children?.()}
     </div>
 
@@ -97,10 +101,10 @@
 
 <style>
     :root {
-        --tooltip-bg: #1f2937;
-        --tooltip-color: white;
+        --tooltip-bg: var(--color-base-800);
+        --tooltip-color: var(--color-base-50);
         --tooltip-padding: 0.5rem 0.75rem;
-        --tooltip-radius: 0.375rem;
+        --tooltip-radius: 0.5rem;
         --tooltip-font-size: 0.875rem;
         --tooltip-line-height: 1.25rem;
         --tooltip-max-width: 200px;
@@ -243,16 +247,6 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
-        :root {
-            --tooltip-bg: #374151;
-        }
-    }
-
-    .dark :root {
-        --tooltip-bg: #374151;
-    }
-
     @media (prefers-contrast: high) {
         :root {
             --tooltip-bg: #000000;
@@ -263,16 +257,20 @@
 
     @media (prefers-reduced-motion: reduce) {
         .tooltip {
-            transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
+            transition:
+                opacity 0.1s ease-in-out,
+                visibility 0.1s ease-in-out;
         }
 
         .tooltip-container[data-placement="top"] .tooltip[data-visible="true"],
-        .tooltip-container[data-placement="bottom"] .tooltip[data-visible="true"] {
+        .tooltip-container[data-placement="bottom"]
+            .tooltip[data-visible="true"] {
             transform: translateX(-50%) !important;
         }
 
         .tooltip-container[data-placement="left"] .tooltip[data-visible="true"],
-        .tooltip-container[data-placement="right"] .tooltip[data-visible="true"] {
+        .tooltip-container[data-placement="right"]
+            .tooltip[data-visible="true"] {
             transform: translateY(-50%) !important;
         }
     }

package/dist/atoms/index.d.ts

@@ -5,8 +5,6 @@ export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
-export { default as CardTitle } from './CardTitle.svelte';
-export { default as CardDescription } from './CardDescription.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';

package/dist/atoms/index.js

@@ -5,8 +5,6 @@ export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
-export { default as CardTitle } from './CardTitle.svelte';
-export { default as CardDescription } from './CardDescription.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';

package/dist/components/atoms/index.d.ts

@@ -5,8 +5,6 @@ export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
-export { default as CardTitle } from './CardTitle.svelte';
-export { default as CardDescription } from './CardDescription.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/molecules/index.d.ts

@@ -5,6 +5,13 @@ export { default as Dropdown } from './Dropdown.svelte';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { default as NavigationMenuList } from './NavigationMenuList.svelte';
+export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
+export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
+export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/molecules/Dropdown.svelte

@@ -1,27 +1,45 @@
 <script lang="ts">
+    import Button from "../atoms/Button.svelte";
+
     interface Props {
         isOpen?: boolean;
         placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
         ariaLabel?: string;
+        selectedValue?: string | number | null;
+        options?: Array<{
+            value: string | number;
+            label: string;
+            disabled?: boolean;
+        }>;
+        onOptionClick?: (value: string | number) => void;
     }
 
     let {
         isOpen = false,
         placement = "bottom-start",
         ariaLabel = "Menu",
+        selectedValue = null,
+        options = [],
+        onOptionClick,
         children,
         trigger,
         ...restProps
     }: Props & { children?: any; trigger?: any } = $props();
 
     let dropdownId = `dropdown-${Math.random().toString(36).substr(2, 9)}`;
-    let triggerElement: HTMLElement | null = null;
-    let menuElement: HTMLElement | null = null;
+    let triggerElement = $state<HTMLElement | null>(null);
+    let menuElement = $state<HTMLElement | null>(null);
+    let openedViaKeyboard = $state(false);
 
     function handleKeydown(event: KeyboardEvent) {
         if (!isOpen) {
-            if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+            if (
+                event.key === "Enter" ||
+                event.key === " " ||
+                event.key === "ArrowDown"
+            ) {
                 event.preventDefault();
+                openedViaKeyboard = true;
                 isOpen = true;
             }
             return;
@@ -58,21 +76,29 @@
     function getMenuItems(): HTMLElement[] {
         if (!menuElement) return [];
         return Array.from(
-            menuElement.querySelectorAll<HTMLElement>('[role="menuitem"], button, a')
+            menuElement.querySelectorAll<HTMLElement>(
+                '[role="menuitem"], button, a',
+            ),
         );
     }
 
     function focusNextItem() {
         const items = getMenuItems();
-        const currentIndex = items.findIndex((item) => item === document.activeElement);
-        const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        const currentIndex = items.findIndex(
+            (item) => item === document.activeElement,
+        );
+        const nextIndex =
+            currentIndex < items.length - 1 ? currentIndex + 1 : 0;
         items[nextIndex]?.focus();
     }
 
     function focusPreviousItem() {
         const items = getMenuItems();
-        const currentIndex = items.findIndex((item) => item === document.activeElement);
-        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        const currentIndex = items.findIndex(
+            (item) => item === document.activeElement,
+        );
+        const prevIndex =
+            currentIndex > 0 ? currentIndex - 1 : items.length - 1;
         items[prevIndex]?.focus();
     }
 
@@ -86,11 +112,41 @@
         items[items.length - 1]?.focus();
     }
 
-    // Focus first item when dropdown opens
+    // Focus first item when dropdown opens via keyboard
     $effect(() => {
-        if (isOpen && menuElement) {
+        if (isOpen && menuElement && openedViaKeyboard) {
             setTimeout(() => {
                 focusFirstItem();
+                openedViaKeyboard = false;
+            }, 0);
+        } else if (!isOpen) {
+            openedViaKeyboard = false;
+        }
+    });
+
+    // Mark selected items
+    $effect(() => {
+        if (isOpen && menuElement) {
+            // Small delay to ensure DOM is ready
+            setTimeout(() => {
+                const items = getMenuItems();
+                items.forEach((item) => {
+                    if (selectedValue !== null && selectedValue !== undefined) {
+                        const itemValue =
+                            item.getAttribute("data-value") ||
+                            item.textContent?.trim();
+                        if (String(itemValue) === String(selectedValue)) {
+                            item.setAttribute("data-selected", "true");
+                            item.setAttribute("aria-selected", "true");
+                        } else {
+                            item.removeAttribute("data-selected");
+                            item.removeAttribute("aria-selected");
+                        }
+                    } else {
+                        item.removeAttribute("data-selected");
+                        item.removeAttribute("aria-selected");
+                    }
+                });
             }, 0);
         }
     });
@@ -137,8 +193,8 @@
     });
 </script>
 
-<div 
-    class="relative inline-block" 
+<div
+    class="relative inline-block"
     data-placement={placement}
     onkeydown={handleKeydown}
     {...restProps}
@@ -148,7 +204,7 @@
     </div>
 
     {#if isOpen}
-        <div 
+        <div
             bind:this={menuElement}
             id={dropdownId}
             class={dropdownContentClasses()}
@@ -156,7 +212,38 @@
             aria-label={ariaLabel}
             tabindex="-1"
         >
-            {@render children?.()}
+            {#if options.length > 0}
+                <div class="px-2 py-2">
+                    {#each options as option (option.value)}
+                        {@const buttonRestProps = {
+                            "data-value": String(option.value),
+                        } as any}
+                        <div class="w-full my-0.5">
+                            <Button
+                                variant={selectedValue === option.value
+                                    ? "outline"
+                                    : "ghost"}
+                                size="sm"
+                                isFullWidth={true}
+                                disabled={option.disabled}
+                                onclick={() => onOptionClick?.(option.value)}
+                                {...buttonRestProps}
+                            >
+                                {option.label}
+                            </Button>
+                        </div>
+                    {/each}
+                </div>
+            {:else if children}
+                {@render children?.()}
+            {/if}
         </div>
     {/if}
 </div>
+
+<style>
+    :global([role="menu"] button) {
+        justify-content: flex-start;
+        text-align: left;
+    }
+</style>

package/dist/molecules/Dropdown.svelte.d.ts

@@ -2,6 +2,13 @@ interface Props {
     isOpen?: boolean;
     placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
     ariaLabel?: string;
+    selectedValue?: string | number | null;
+    options?: Array<{
+        value: string | number;
+        label: string;
+        disabled?: boolean;
+    }>;
+    onOptionClick?: (value: string | number) => void;
 }
 type $$ComponentProps = Props & {
     children?: any;

package/dist/molecules/ImageUpload.svelte

@@ -57,10 +57,10 @@
             <img
                 src={value}
                 alt=""
-                class="w-full h-32 object-cover rounded-lg border-0"
+                class="w-full h-32 min-w-64 object-cover rounded-2xl border-0"
             />
             <div
-                class="absolute inset-0 bg-black/50 dark:bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"
+                class="absolute inset-0 bg-input min-w-64 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl flex items-center justify-center"
             >
                 <div class="flex gap-2">
                     <Button
@@ -84,7 +84,7 @@
         </div>
     {:else}
         <div
-            class="border-2 border-dashed border-base-200 rounded-lg p-6 text-center hover:border-brand-500 transition-colors {disabled
+            class="border-2 border-dashed border-input rounded-2xl min-w-64 p-6 text-center hover:border-brand-500 transition-colors {disabled
                 ? 'cursor-not-allowed opacity-50'
                 : 'cursor-pointer'}"
             onclick={triggerFileSelect}
@@ -96,7 +96,7 @@
         >
             <div class="space-y-3">
                 <div
-                    class="w-12 h-12 mx-auto bg-base-100 rounded-lg flex items-center justify-center"
+                    class="w-12 h-12 mx-auto bg-action-secondary rounded-lg flex items-center justify-center"
                 >
                     <Image size={24} class="text-description" />
                 </div>

package/dist/molecules/Modal.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-    import { trapFocus, saveFocus, returnFocus, focusFirstElement } from "../../routes/lib/focus-utils.js";
+    import { trapFocus, saveFocus, returnFocus, focusFirstElement } from "../routes/lib/focus-utils.js";
+    import Card from "../atoms/Card.svelte";
+    import CardHeader from "../atoms/CardHeader.svelte";
+    import CardContent from "../atoms/CardContent.svelte";
+    import CardFooter from "../atoms/CardFooter.svelte";
 
     type Size = "sm" | "md" | "lg";
 
     interface Props {
         isOpen?: boolean;
         title?: string;
+        description?: string;
         size?: Size;
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
@@ -15,6 +19,7 @@
     let {
         isOpen = false,
         title = "",
+        description = "",
         size = "md",
         onclick,
         onkeydown,
@@ -88,38 +93,49 @@
         aria-labelledby={title ? "modal-title" : undefined}
         tabindex="-1"
     >
-        <div
+        <Card
             bind:this={modalContainer}
-            class="bg-card rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col"
+            variant="default"
+            fullWidth={false}
+            class="bg-card rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col p-0"
         >
-            {#if title}
-                <div class="flex items-center justify-between px-6 pt-6 pb-4">
-                    <h2
-                        id="modal-title"
-                        class="text-2xl font-normal leading-8 text-headline tracking-normal"
-                    >
-                        {title}
-                    </h2>
-                    <button
-                        type="button"
-                        onclick={closeModal}
-                        class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-100"
-                        aria-label="Close"
-                    >
-                        ×
-                    </button>
-                </div>
+            {#if title || description}
+                <CardHeader
+                    {description}
+                    className="px-6 pt-6 pb-4"
+                >
+                    {#if title}
+                        <div class="flex items-center justify-between">
+                            <h2
+                                id="modal-title"
+                                class="text-2xl font-normal leading-8 text-headline tracking-normal"
+                            >
+                                {title}
+                            </h2>
+                            <button
+                                type="button"
+                                onclick={closeModal}
+                                class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-100"
+                                aria-label="Close"
+                            >
+                                ×
+                            </button>
+                        </div>
+                    {/if}
+                </CardHeader>
             {/if}
 
-            <div class="px-6 pb-6 flex-1">
-                {@render children?.()}
-            </div>
+            {#if children}
+                <CardContent className="flex-1">
+                    {@render children?.()}
+                </CardContent>
+            {/if}
 
             {#if footer}
-                <div class="flex justify-end gap-3 px-6 pb-6 pt-4">
+                <CardFooter className="flex justify-end gap-3 pt-4">
                     {@render footer?.()}
-                </div>
+                </CardFooter>
             {/if}
-        </div>
+        </Card>
     </div>
 {/if}

package/dist/molecules/Modal.svelte.d.ts

@@ -2,6 +2,7 @@ type Size = "sm" | "md" | "lg";
 interface Props {
     isOpen?: boolean;
     title?: string;
+    description?: string;
     size?: Size;
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;