zabi-components 5.0.15 → 5.0.18

package/dist/atoms/index.d.ts

@@ -2,6 +2,11 @@ export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
 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

@@ -1,8 +1,12 @@
-// Export atom components - All SSR-safe components
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
 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

@@ -2,6 +2,11 @@ export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
 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":"AACA,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,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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAMpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAM1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAOtE,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAMhD,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAGtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGrE,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAE7C,CAAC;AAGF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAKlD,CAAC;AAMF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,QAAQ,EACX,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEtE,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAMhD,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAEtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGrE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAE7C,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAKlD,CAAC;AAEF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,QAAQ,EACX,MAAM,gBAAgB,CAAC"}

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":"AACA,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,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -1,9 +1,3 @@
-// Zabi Components - Clean & Simple Svelte Component Library
-// Main library entry point - All components in one place
-// ============================================================================
-// ATOM COMPONENTS - Basic UI building blocks
-// ============================================================================
-// Form Controls - All SSR-safe components
 export { default as Toggle } from './atoms/Toggle.svelte';
 export { default as Badge } from './atoms/Badge.svelte';
 export { default as Button } from './atoms/Button.svelte';
@@ -14,9 +8,6 @@ export { default as Select } from './atoms/Select.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
-// ============================================================================
-// MOLECULE COMPONENTS - Composite UI elements
-// ============================================================================
 export { default as Alert } from './molecules/Alert.svelte';
 export { default as ComponentDemo } from './molecules/ComponentDemo.svelte';
 export { default as ContactForm } from './molecules/ContactForm.svelte';
@@ -26,15 +17,8 @@ export { default as ImageUpload } from './molecules/ImageUpload.svelte';
 export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
-// ============================================================================
-// ORGANISM COMPONENTS - Complex UI sections
-// ============================================================================
 export { default as Navbar } from './organisms/Navbar.svelte';
 export { default as Navigation } from './organisms/Navigation.svelte';
-// ============================================================================
-// UTILITIES - Helper functions and utilities
-// ============================================================================
-// Simple utility functions
 export const createId = (prefix = 'id') => {
     if (typeof window !== 'undefined') {
         return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -44,12 +28,10 @@ export const createId = (prefix = 'id') => {
     }
 };
 export const cn = (...classes) => classes.filter(Boolean).join(' ');
-// Form utilities
 export const getFormData = (form) => {
     const formData = new FormData(form);
     return Object.fromEntries(formData.entries());
 };
-// Validation utilities
 export const validateEmail = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
@@ -57,7 +39,6 @@ export const validateEmail = (email) => {
 export const validateRequired = (value) => {
     return value !== null && value !== undefined && value !== '';
 };
-// SSR-safe utilities
 export const isBrowser = () => {
     return typeof window !== 'undefined';
 };
@@ -70,14 +51,10 @@ export const safeDocument = () => {
 export const safeLocalStorage = () => {
     return typeof window !== 'undefined' ? localStorage : undefined;
 };
-// Alias for backward compatibility - separate function to avoid initialization issues
 export const generateId = (prefix = 'id') => {
     if (typeof window !== 'undefined') {
         return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
     }
     return `${prefix}-ssr-${Date.now()}`;
 };
-// ============================================================================
-// ICONS - Re-export commonly used Lucide icons
-// ============================================================================
 export { Sun, Moon, Monitor, Grip, GripVertical, ChevronUp, ChevronDown, ChevronRight, Zap, Briefcase, Clipboard, Settings } from '@lucide/svelte';

package/dist/molecules/Alert.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+    import type { ExtendedSemanticVariant } from "../../types/variants.js";
+
     interface Props {
-        variant?: "info" | "success" | "warning" | "error" | "neutral" | "energetic";
+        variant?: ExtendedSemanticVariant;
         title?: string;
         message?: string;
         closable?: boolean;
@@ -20,19 +22,18 @@
     }: Props & { children?: any } = $props();
 
     function handleDismiss(event: MouseEvent) {
-        // Call the parent's onclick handler if provided
         if (onclick) {
             onclick(event);
         }
     }
 
     let alertClasses = $derived({
-        info: "bg-surface-level-1 text-info border border-info",
-        success: "bg-surface-level-1 text-success border border-success",
-        warning: "bg-surface-level-1 text-warning border border-warning",
-        error: "bg-surface-level-1 text-error border border-error",
-        neutral: "bg-surface-level-1 text-neutral border border-neutral",
-        energetic: "bg-surface-level-1 text-energetic border border-energetic",
+        info: "text-info border border-info",
+        success: "text-success border border-success",
+        warning: "text-warning border border-warning",
+        error: "text-error border border-error",
+        neutral: "text-neutral border border-neutral",
+        energetic: "text-energetic border border-energetic",
     });
 
     let alertRole = $derived(
@@ -72,7 +73,6 @@
     aria-atomic="true"
     {...restProps}
 >
-    <!-- Dismiss button (X in top right) -->
     {#if closable}
         <button
             onclick={handleDismiss}
@@ -96,14 +96,11 @@
         </button>
     {/if}
 
-    <!-- Content -->
     <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
-        <!-- Icon -->
         <div class="shrink-0 mt-0.5">
             {@html iconSvg[variant]}
         </div>
 
-        <!-- Text content -->
         <div class="flex-1 min-w-0">
             {#if title}
                 <h4 class="font-semibold text-sm mb-1 text-headline">
@@ -115,7 +112,6 @@
                     {message}
                 </p>
             {/if}
-            <!-- Default slot for custom content -->
             {@render children?.()}
         </div>
     </div>

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

@@ -1,5 +1,6 @@
+import type { ExtendedSemanticVariant } from "../../types/variants.js";
 interface Props {
-    variant?: "info" | "success" | "warning" | "error" | "neutral" | "energetic";
+    variant?: ExtendedSemanticVariant;
     title?: string;
     message?: string;
     closable?: boolean;

package/dist/molecules/ComponentDemo.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import CodeBlock from "../atoms/CodeBlock.svelte";
+    import Card from "../atoms/Card.svelte";
 
     interface Props {
         title: string;
@@ -22,75 +23,65 @@
     let showCode = $state(false);
 </script>
 
-<div
-    class="component-demo bg-surface-level-0 border border-border rounded-lg overflow-hidden {className}"
-    {...restProps}
->
-    <!-- Header -->
-    <div class="px-6 py-4 border-b border-border bg-surface-level-1">
-        <div class="flex items-center justify-between">
-            <div>
-                <h3 class="text-lg font-semibold text-text">{title}</h3>
-                {#if description}
-                    <p class="text-sm text-text-secondary mt-1">
-                        {description}
-                    </p>
-                {/if}
-            </div>
-            <button
-                onclick={() => (showCode = !showCode)}
-                class="flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text hover:bg-surface-level-0 rounded-md transition-colors duration-200"
-                aria-label={showCode ? "Show preview" : "Show code"}
-            >
-                {#if showCode}
-                    <svg
-                        class="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                        />
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                        />
-                    </svg>
-                    Preview
-                {:else}
-                    <svg
-                        class="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-                        />
-                    </svg>
-                    Code
-                {/if}
-            </button>
-        </div>
-    </div>
+<div class="relative">
+    <Card
+        size="lg"
+        fullWidth={true}
+        {title}
+        {description}
+        className="overflow-hidden {className}"
+        {...restProps}
+    >
+        <button
+            onclick={() => (showCode = !showCode)}
+            class="absolute top-8 right-8 flex items-center gap-2 px-3 py-1.5 text-sm text-description hover:text-body hover:bg-base-50 rounded-md transition-colors duration-200 z-10"
+            aria-label={showCode ? "Show preview" : "Show code"}
+        >
+            {#if showCode}
+                <svg
+                    class="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                    />
+                </svg>
+                Preview
+            {:else}
+                <svg
+                    class="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+                    />
+                </svg>
+                Code
+            {/if}
+        </button>
 
-    <!-- Content -->
-    <div class="p-6">
         {#if showCode}
             <CodeBlock {code} {language} />
         {:else}
-            <div class="min-h-[100px] flex items-center justify-center">
+            <div class="min-h-[100px] flex items-center justify-center w-full">
                 {@render children?.()}
             </div>
         {/if}
-    </div>
+    </Card>
 </div>

package/dist/molecules/ContactForm.svelte

@@ -4,6 +4,7 @@
     import Textarea from "../atoms/Textarea.svelte";
     import Checkbox from "../atoms/Checkbox.svelte";
     import Button from "../atoms/Button.svelte";
+    import Card from "../atoms/Card.svelte";
     import type { ContactFormData } from "../../types/page.types";
 
     interface Props {
@@ -33,21 +34,11 @@
             subscribe: formData.get("subscribe") === "on" || false,
         };
 
-        // Form submission is now handled by the parent component
-        // through event forwarding. The data is available for processing.
         console.log("Form submitted with data:", data);
     }
 </script>
 
-<div class="max-w-md mx-auto {className}">
-    <div class="mb-6">
-        <h2 class="text-2xl font-bold text-headline mb-2">Get in Touch</h2>
-        <p class="text-description">
-            We'd love to hear from you. Send us a message and we'll respond as
-            soon as possible.
-        </p>
-    </div>
-
+<Card size="md" fullWidth={true} title="Get in Touch">
     <Form onsubmit={handleFormSubmit} className="space-y-4">
         <div class="space-y-4">
             <Input
@@ -68,6 +59,24 @@
                 oninput={(e) =>
                     (formData.email = (e.target as HTMLInputElement).value)}
             />
+            <Input
+                type="email"
+                name="email"
+                label="Email"
+                placeholder="Enter your email"
+                value={formData.email}
+                oninput={(e) =>
+                    (formData.email = (e.target as HTMLInputElement).value)}
+            />
+            <Input
+                type="email"
+                name="email"
+                label="Email"
+                placeholder="Enter your email"
+                value={formData.email}
+                oninput={(e) =>
+                    (formData.email = (e.target as HTMLInputElement).value)}
+            />
             <Textarea
                 name="message"
                 label="Message"
@@ -95,4 +104,4 @@
             </Button>
         </div>
     </Form>
-</div>
+</Card>

package/dist/molecules/Dropdown.svelte

@@ -2,17 +2,99 @@
     interface Props {
         isOpen?: boolean;
         placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+        ariaLabel?: string;
     }
 
     let {
         isOpen = false,
         placement = "bottom-start",
+        ariaLabel = "Menu",
         children,
         trigger,
         ...restProps
     }: Props & { children?: any; trigger?: any } = $props();
 
-    // Get positioning classes based on placement
+    let dropdownId = `dropdown-${Math.random().toString(36).substr(2, 9)}`;
+    let triggerElement: HTMLElement | null = null;
+    let menuElement: HTMLElement | null = null;
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (!isOpen) {
+            if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+                event.preventDefault();
+                isOpen = true;
+            }
+            return;
+        }
+
+        switch (event.key) {
+            case "Escape":
+                event.preventDefault();
+                isOpen = false;
+                triggerElement?.focus();
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                focusNextItem();
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                focusPreviousItem();
+                break;
+            case "Home":
+                event.preventDefault();
+                focusFirstItem();
+                break;
+            case "End":
+                event.preventDefault();
+                focusLastItem();
+                break;
+            case "Tab":
+                isOpen = false;
+                break;
+        }
+    }
+
+    function getMenuItems(): HTMLElement[] {
+        if (!menuElement) return [];
+        return Array.from(
+            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;
+        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;
+        items[prevIndex]?.focus();
+    }
+
+    function focusFirstItem() {
+        const items = getMenuItems();
+        items[0]?.focus();
+    }
+
+    function focusLastItem() {
+        const items = getMenuItems();
+        items[items.length - 1]?.focus();
+    }
+
+    // Focus first item when dropdown opens
+    $effect(() => {
+        if (isOpen && menuElement) {
+            setTimeout(() => {
+                focusFirstItem();
+            }, 0);
+        }
+    });
+
     const placementClasses = $derived(() => {
         const base = "absolute z-dropdown min-w-[12rem]";
         const positioning = {
@@ -24,7 +106,6 @@
         return `${base} ${positioning[placement]}`;
     });
 
-    // Get transform classes based on placement and open state
     const transformClasses = $derived(() => {
         if (!isOpen) {
             const hiddenTransform = {
@@ -38,11 +119,10 @@
         return "opacity-100 visible translate-y-0";
     });
 
-    // Get dropdown content classes
     const dropdownContentClasses = $derived(() => {
         return `
             ${placementClasses()}
-            bg-brand-100
+            bg-input
             rounded-lg
             shadow-lg
             border-0
@@ -51,15 +131,31 @@
             duration-200
             ease-in-out
             ${transformClasses()}
-        `.trim().replace(/\s+/g, " ");
+        `
+            .trim()
+            .replace(/\s+/g, " ");
     });
 </script>
 
-<div class="relative inline-block" data-placement={placement}>
-    {@render trigger?.()}
+<div 
+    class="relative inline-block" 
+    data-placement={placement}
+    onkeydown={handleKeydown}
+    {...restProps}
+>
+    <div bind:this={triggerElement}>
+        {@render trigger?.()}
+    </div>
 
     {#if isOpen}
-        <div class={dropdownContentClasses()}>
+        <div 
+            bind:this={menuElement}
+            id={dropdownId}
+            class={dropdownContentClasses()}
+            role="menu"
+            aria-label={ariaLabel}
+            tabindex="-1"
+        >
             {@render children?.()}
         </div>
     {/if}

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

@@ -1,6 +1,7 @@
 interface Props {
     isOpen?: boolean;
     placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    ariaLabel?: string;
 }
 type $$ComponentProps = Props & {
     children?: any;

package/dist/molecules/Form.svelte

@@ -19,7 +19,6 @@
         const formData = new FormData(event.target as HTMLFormElement);
         const data = Object.fromEntries(formData.entries());
 
-        // Call the parent's onsubmit handler if provided
         if (onsubmit) {
             onsubmit(event);
         }

package/dist/molecules/ImageUpload.svelte

@@ -30,7 +30,6 @@
 
         const file = input.files[0];
 
-        // SSR-safe URL creation
         if (typeof URL !== "undefined" && URL.createObjectURL) {
             const url = URL.createObjectURL(file);
             value = url;
@@ -54,7 +53,6 @@
 
 <div class="space-y-3">
     {#if value}
-        <!-- Image Display -->
         <div class="relative group">
             <img
                 src={value}
@@ -85,9 +83,8 @@
             </div>
         </div>
     {:else}
-        <!-- Empty State -->
         <div
-            class="border-2 border-dashed border-stone-200 rounded-lg p-6 text-center hover:border-brand-500 transition-colors {disabled
+            class="border-2 border-dashed border-base-200 rounded-lg p-6 text-center hover:border-brand-500 transition-colors {disabled
                 ? 'cursor-not-allowed opacity-50'
                 : 'cursor-pointer'}"
             onclick={triggerFileSelect}
@@ -99,7 +96,7 @@
         >
             <div class="space-y-3">
                 <div
-                    class="w-12 h-12 mx-auto bg-surface-level-1 rounded-lg flex items-center justify-center"
+                    class="w-12 h-12 mx-auto bg-base-100 rounded-lg flex items-center justify-center"
                 >
                     <Image size={24} class="text-description" />
                 </div>
@@ -113,7 +110,6 @@
         </div>
     {/if}
 
-    <!-- Hidden File Input -->
     <input
         bind:this={fileInput}
         type="file"