zabi-components 5.0.17 → 5.0.18

package/dist/atoms/Toggle.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
             return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
@@ -8,7 +7,6 @@
         }
     }
 
-    // Props using Svelte 5 runes
     interface Props {
         checked?: boolean;
         disabled?: boolean;
@@ -26,15 +24,12 @@
         ...restProps
     }: Props = $props();
 
-    // SSR-safe ID generation (call directly, not in onMount)
     const toggleId = generateId("toggle");
 
-    // Handle click
     function handleClick(event: MouseEvent) {
         if (disabled) return;
         checked = !checked;
 
-        // Call parent handlers if provided
         if (onclick) onclick(event);
         if (onchange) onchange({ checked });
     }
@@ -57,7 +52,6 @@
         return `${baseClasses} ${positionClasses}`.trim();
     });
 
-    // Handle keyboard
     function handleKeydown(event: KeyboardEvent) {
         if (disabled) return;
         if (event.key === " " || event.key === "Enter") {

package/dist/atoms/Tooltip.svelte

@@ -22,7 +22,6 @@
     let isVisible = $state(false);
     let triggerElement: HTMLElement | null = $state(null);
 
-    // Handle keyboard events
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === "Escape" && isVisible) {
             isVisible = false;
@@ -30,7 +29,6 @@
         }
     }
 
-    // Handle focus events for accessibility
     function handleFocus() {
         if (!disabled && content) {
             isVisible = true;
@@ -38,7 +36,6 @@
     }
 
     function handleBlur() {
-        // Delay hiding to allow clicking on tooltip content if needed
         setTimeout(() => {
             isVisible = false;
         }, 100);
@@ -136,7 +133,6 @@
         pointer-events: none;
     }
 
-    /* Simplified positioning using CSS custom properties and logical properties */
     .tooltip-container[data-placement="top"] .tooltip {
         inset-block-end: 100%;
         inset-inline-start: 50%;
@@ -189,7 +185,6 @@
         transform: translateY(-50%) translateX(0) scale(1);
     }
 
-    /* Modern arrow implementation using CSS clip-path for better performance */
     .tooltip::before {
         content: "";
         position: absolute;
@@ -226,12 +221,10 @@
         clip-path: polygon(0 50%, 100% 0, 100% 100%);
     }
 
-    /* Delay support using CSS custom properties */
     .tooltip-container[data-delay] .tooltip {
         transition-delay: calc(var(--tooltip-delay, 0) * 1ms);
     }
 
-    /* Responsive design with modern CSS */
     @media (max-width: 640px) {
         .tooltip {
             --tooltip-max-width: calc(100vw - 2rem);
@@ -250,19 +243,16 @@
         }
     }
 
-    /* Dark mode support */
     @media (prefers-color-scheme: dark) {
         :root {
             --tooltip-bg: #374151;
         }
     }
 
-    /* Use CSS color-scheme for better dark mode support */
     .dark :root {
         --tooltip-bg: #374151;
     }
 
-    /* High contrast mode support */
     @media (prefers-contrast: high) {
         :root {
             --tooltip-bg: #000000;
@@ -271,7 +261,6 @@
         }
     }
 
-    /* Reduced motion support */
     @media (prefers-reduced-motion: reduce) {
         .tooltip {
             transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
@@ -288,7 +277,6 @@
         }
     }
 
-    /* Focus-visible for better keyboard navigation */
     .tooltip-container:focus-visible {
         outline: 2px solid var(--color-focus, #8fa8ff);
         outline-offset: 2px;

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,12 +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;
@@ -26,7 +22,6 @@
     }: Props & { children?: any } = $props();
 
     function handleDismiss(event: MouseEvent) {
-        // Call the parent's onclick handler if provided
         if (onclick) {
             onclick(event);
         }
@@ -78,7 +73,6 @@
     aria-atomic="true"
     {...restProps}
 >
-    <!-- Dismiss button (X in top right) -->
     {#if closable}
         <button
             onclick={handleDismiss}
@@ -102,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">
@@ -121,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

@@ -32,7 +32,6 @@
         className="overflow-hidden {className}"
         {...restProps}
     >
-        <!-- Toggle Button positioned absolutely -->
         <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"
@@ -77,7 +76,6 @@
             {/if}
         </button>
 
-        <!-- Content -->
         {#if showCode}
             <CodeBlock {code} {language} />
         {:else}

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,7 +119,6 @@
         return "opacity-100 visible translate-y-0";
     });
 
-    // Get dropdown content classes
     const dropdownContentClasses = $derived(() => {
         return `
             ${placementClasses()}
@@ -57,11 +137,25 @@
     });
 </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,7 +83,6 @@
             </div>
         </div>
     {:else}
-        <!-- Empty State -->
         <div
             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'
@@ -113,7 +110,6 @@
         </div>
     {/if}
 
-    <!-- Hidden File Input -->
     <input
         bind:this={fileInput}
         type="file"