zabi-components 5.0.11 → 5.0.13

package/dist/atoms/Badge.svelte

@@ -39,21 +39,24 @@
                   ? "px-4 py-2 text-base"
                   : "px-3 py-1 text-sm"; // default md
 
-        // Variant classes - using semantic color system
+        // Variant classes - using semantic color system with improved WCAG contrast
+        // Using colored backgrounds with white text for better contrast ratios (4.5:1+)
+        // Using darker shades for warning and energetic to ensure WCAG AA compliance
+        // Note: Using text-white instead of text-inverse to ensure light text in both light and dark modes
         const variantClass =
             variant === "success"
-                ? "bg-surface-level-1 border-success text-success"
+                ? "bg-[var(--color-success)] border-[var(--color-success)] text-white"
                 : variant === "warning"
-                  ? "bg-surface-level-1 border-secondary text-warning"
+                  ? "bg-[var(--color-warning-weak)] border-[var(--color-warning-weak)] text-white"
                   : variant === "error"
-                    ? "bg-surface-level-1 border-secondary text-error"
+                    ? "bg-[var(--color-error)] border-[var(--color-error)] text-white"
                     : variant === "info"
-                      ? "bg-surface-level-1 border-secondary text-info"
+                      ? "bg-[var(--color-info)] border-[var(--color-info)] text-white"
                       : variant === "neutral"
-                        ? "bg-surface-level-1 border-secondary text-neutral"
+                        ? "bg-[var(--color-neutral)] border-[var(--color-neutral)] text-white"
                         : variant === "energetic"
-                          ? "bg-surface-level-1 border-secondary text-energetic"
-                          : "bg-surface-level-1 border-secondary text-body"; // default
+                          ? "bg-[var(--color-energetic-weak)] border-[var(--color-energetic-weak)] text-white"
+                          : "bg-[var(--color-secondary)] border-[var(--color-secondary)] text-white"; // default
 
         return `${baseClasses} ${sizeClass} ${variantClass}`.trim();
     });
@@ -72,19 +75,19 @@
 <span class={classes()}>
     {#if showIcon}
         {#if variant === "success"}
-            <Check size={iconSize()} class={iconSpacingClass()} />
+            <Check size={iconSize()} class="{iconSpacingClass()} text-white" />
         {:else if variant === "warning"}
-            <AlertTriangle size={iconSize()} class={iconSpacingClass()} />
+            <AlertTriangle size={iconSize()} class="{iconSpacingClass()} text-white" />
         {:else if variant === "error"}
-            <X size={iconSize()} class={iconSpacingClass()} />
+            <X size={iconSize()} class="{iconSpacingClass()} text-white" />
         {:else if variant === "info"}
-            <Info size={iconSize()} class={iconSpacingClass()} />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
         {:else if variant === "neutral"}
-            <Info size={iconSize()} class={iconSpacingClass()} />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
         {:else if variant === "energetic"}
-            <Info size={iconSize()} class={iconSpacingClass()} />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
         {:else}
-            <Info size={iconSize()} class={iconSpacingClass()} />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
         {/if}
     {/if}
     {text}

package/dist/atoms/Button.svelte

@@ -22,34 +22,62 @@
         ...restProps
     }: Props = $props();
 
-    // Size classes using full class names
+    // Size classes matching M3 design specifications
     const sizeClass = $derived(() => {
-        return size === "sm"
-            ? "px-3 py-1.5 text-sm font-medium"
-            : size === "lg"
-              ? "px-6 py-3 text-base font-semibold"
-              : "px-4 py-2 text-sm font-medium"; // default md
+        if (size === "sm") {
+            return {
+                padding: "px-4 py-2.5",
+                text: "text-sm",
+                font: "font-medium",
+                leading: "leading-5",
+                tracking: "tracking-[0.1px]",
+                radius: "rounded-lg",
+                gap: "gap-2"
+            };
+        } else if (size === "lg") {
+            return {
+                padding: "px-12 py-8",
+                text: "text-2xl",
+                font: "font-normal",
+                leading: "leading-8",
+                tracking: "tracking-normal",
+                radius: "rounded-2xl",
+                gap: "gap-3"
+            };
+        } else {
+            // default md
+            return {
+                padding: "px-6 py-4",
+                text: "text-base",
+                font: "font-medium",
+                leading: "leading-6",
+                tracking: "tracking-[0.15px]",
+                radius: "rounded-lg",
+                gap: "gap-2"
+            };
+        }
     });
 
     // Variant classes using semantic action colors
     const variantClass = $derived(() => {
         return variant === "primary"
-            ? "bg-action-primary text-inverse focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+            ? "bg-action-primary text-inverse hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
             : variant === "secondary"
-              ? "border border-secondary text-description hover:border-secondary-hover focus:ring-2 focus:ring-stone-500 focus:ring-offset-2"
+              ? "bg-brand-100 text-brand-800 hover:bg-brand-200 active:bg-brand-300 focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
               : variant === "danger"
-                ? "bg-action-danger text-inverse focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                 : variant === "ghost"
                   ? "bg-transparent text-headline hover:bg-surface-hover active:bg-surface-active focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 disabled:text-disabled"
-                  : "bg-action-primary text-inverse focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"; // default primary
+                  : "bg-action-primary text-inverse hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"; // default primary
     });
 
-    // Button classes using Badge pattern
+    // Button classes matching M3 design pattern
     const buttonClasses = $derived(() => {
+        const sizeStyles = sizeClass();
         const baseClasses =
-            "inline-flex items-center justify-center rounded-md transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 active:scale-95 transform-gpu";
+            "inline-flex items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none focus:outline-none";
 
-        return `${baseClasses} ${sizeClass()} ${variantClass()}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.font} ${sizeStyles.leading} ${sizeStyles.tracking} ${sizeStyles.radius} ${sizeStyles.gap} ${variantClass()}`.trim();
     });
 </script>
 

package/dist/atoms/Card.svelte

@@ -3,6 +3,7 @@
 
     interface Props {
         title?: string;
+        description?: string;
         image?: string;
         onclick?: (event: MouseEvent) => void | Promise<void>;
         size?: "sm" | "md" | "lg";
@@ -12,6 +13,7 @@
 
     let {
         title = "",
+        description = "",
         image = "",
         onclick,
         size = "md",
@@ -21,23 +23,41 @@
     }: Props = $props();
 
     const sizeClass = $derived(() => {
-        return size === "sm" ? "p-3" : size === "lg" ? "p-6" : "p-4"; // default md
+        return size === "sm" ? "p-4" : size === "lg" ? "p-8" : "p-6"; // default md
     });
 
     const cardClasses = $derived(() => {
         const baseClasses =
-            "rounded-lg transition-all duration-200 min-w-64 bg-surface-level-0";
+            "rounded-lg transition-all duration-200 min-w-64 bg-surface-elevated shadow-sm";
         const interactiveClasses = onclick
-            ? "cursor-pointer hover:shadow-adaptive-md hover:bg-surface-hover hover:border-focus"
+            ? "cursor-pointer hover:shadow-lg hover:bg-surface-hover"
             : "";
         const widthClasses = fullWidth ? "w-full" : "";
 
         return `${baseClasses} ${interactiveClasses} ${widthClasses} ${sizeClass()}`.trim();
     });
 
-    const titleClasses = $derived(
-        () => "text-lg font-semibold mb-2 text-headline",
-    );
+    const titleClasses = $derived(() => {
+        if (size === "sm") {
+            return "text-lg font-medium mb-2 text-headline";
+        } else if (size === "lg") {
+            return "text-2xl font-medium mb-4 text-headline";
+        } else {
+            // default md
+            return "text-xl font-medium mb-3 text-headline";
+        }
+    });
+
+    const descriptionClasses = $derived(() => {
+        if (size === "sm") {
+            return "text-xs text-description mb-3";
+        } else if (size === "lg") {
+            return "text-base text-description mb-5";
+        } else {
+            // default md
+            return "text-sm text-description mb-4";
+        }
+    });
 </script>
 
 <div class={cardClasses()} {onclick} {...restProps}>
@@ -45,7 +65,7 @@
         <img
             src={image}
             alt={title}
-            class="w-full h-48 object-cover rounded-md mb-4"
+            class="w-full h-48 object-cover rounded-lg mb-4"
         />
     {/if}
 
@@ -53,6 +73,10 @@
         <h3 class={titleClasses()}>{title}</h3>
     {/if}
 
+    {#if description}
+        <p class={descriptionClasses()}>{description}</p>
+    {/if}
+
     {#if children}
         {@render children()}
     {/if}

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

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 interface Props {
     title?: string;
+    description?: string;
     image?: string;
     onclick?: (event: MouseEvent) => void | Promise<void>;
     size?: "sm" | "md" | "lg";

package/dist/atoms/Checkbox.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onMount } from "svelte";
     // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
@@ -22,39 +21,82 @@
         name = "",
         disabled = false,
         label = "",
+        onchange,
         ...restProps
     }: Props = $props();
 
     // Generate unique ID - SSR safe (call directly, not in $state)
     const checkboxId = generateId("checkbox");
 
-    // Checkbox classes using Badge pattern
-    const checkboxClasses = $derived(
-        () =>
-            "w-4 h-4 text-brand-600 bg-gray-100 border-gray-300 rounded focus:ring-brand-500 focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed",
-    );
+    // Checkbox container classes matching M3 design
+    const checkboxContainerClasses = $derived(() => {
+        const baseClasses = "relative inline-flex items-center justify-center w-5 h-5 rounded transition-all duration-200";
+        
+        if (disabled) {
+            return `${baseClasses} opacity-50 cursor-not-allowed`;
+        }
+        return `${baseClasses} cursor-pointer`;
+    });
+
+    // Checkbox border and background classes matching M3 design
+    const checkboxBoxClasses = $derived(() => {
+        if (checked) {
+            return disabled 
+                ? "border-0 bg-brand-300"
+                : "border-0 bg-brand-600";
+        }
+        return disabled
+            ? "border-2 border-stone-400 bg-transparent"
+            : "border-2 border-stone-400 bg-transparent";
+    });
 
     function handleChange(event: Event) {
+        if (disabled) return;
         const target = event.target as HTMLInputElement;
         checked = target.checked;
+        if (onchange) {
+            onchange(event);
+        }
     }
 </script>
 
 <div class="flex items-center gap-2">
-    <input
-        type="checkbox"
-        id={checkboxId}
-        {name}
-        {checked}
-        {disabled}
-        class={checkboxClasses()}
-        onchange={handleChange}
-        {...restProps}
-    />
-    {#if label}
-        <label
-            for={checkboxId}
-            class="text-sm font-medium cursor-pointer text-label">{label}</label
-        >
-    {/if}
+    <label
+        for={checkboxId}
+        class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    >
+        <div class={checkboxContainerClasses()}>
+            <input
+                type="checkbox"
+                id={checkboxId}
+                {name}
+                {checked}
+                {disabled}
+                class="sr-only"
+                onchange={handleChange}
+                {...restProps}
+            />
+            <div class="absolute inset-0 {checkboxBoxClasses()} rounded"></div>
+            {#if checked}
+                <svg 
+                    class="absolute w-3 h-3 text-white pointer-events-none z-10" 
+                    fill="none" 
+                    stroke="currentColor" 
+                    viewBox="0 0 24 24"
+                >
+                    <path 
+                        stroke-linecap="round" 
+                        stroke-linejoin="round" 
+                        stroke-width="2.5" 
+                        d="M5 13l4 4L19 7"
+                    />
+                </svg>
+            {/if}
+        </div>
+        {#if label}
+            <span class="text-sm font-medium text-label">
+                {label}
+            </span>
+        {/if}
+    </label>
 </div>

package/dist/atoms/Input.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
+    
     // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
@@ -17,6 +19,7 @@
         disabled?: boolean;
         size?: "sm" | "md" | "lg";
         variant?: "default" | "success" | "warning" | "error";
+        message?: string;
         oninput?: (event: Event) => void;
     }
 
@@ -29,6 +32,7 @@
         disabled = false,
         size = "md",
         variant = "default",
+        message = "",
         oninput,
         ...restProps
     }: Props = $props();
@@ -36,13 +40,28 @@
     // Generate unique ID - SSR safe (call directly, not in $state)
     const inputId = generateId("input");
 
-    // Size classes using full class names
+    // Size classes matching M3 design specifications
     const sizeClass = $derived(() => {
-        return size === "sm"
-            ? "px-3 py-1.5 text-sm"
-            : size === "lg"
-              ? "px-5 py-3 text-base"
-              : "px-4 py-2 text-sm"; // default md
+        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 {
+            // default md
+            return {
+                padding: "px-4 py-2.5",
+                text: "text-base",
+                leading: "leading-6"
+            };
+        }
     });
 
     // Variant classes using semantic colors
@@ -53,15 +72,16 @@
               ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
                 ? "border-error focus:border-error focus:ring-error"
-                : "border-border focus:border-focus focus:ring-focus"; // default
+                : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
     });
 
-    // Input classes using Badge pattern
+    // Input classes matching M3 design
     const inputClasses = $derived(() => {
+        const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full border rounded-md transition-colors duration-200 placeholder:text-input-placeholder focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled";
+            "w-full bg-brand-100 rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
 
-        return `${baseClasses} ${sizeClass()} ${variantClass()}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
 
     // Label classes using semantic text colors
@@ -69,6 +89,26 @@
         () => "block text-sm font-medium text-label mb-1",
     );
 
+    // Message classes based on variant
+    const messageClasses = $derived(() => {
+        if (variant === "error") {
+            return "text-error text-sm mt-1 flex items-center gap-1.5";
+        } else if (variant === "success") {
+            return "text-success text-sm mt-1 flex items-center gap-1.5";
+        } else if (variant === "warning") {
+            return "text-warning text-sm mt-1 flex items-center gap-1.5";
+        }
+        return "text-description text-sm mt-1 flex items-center gap-1.5";
+    });
+
+    // Get icon component based on variant
+    const getIcon = $derived(() => {
+        if (variant === "error") return AlertCircle;
+        if (variant === "success") return CheckCircle;
+        if (variant === "warning") return AlertTriangle;
+        return null;
+    });
+
     function handleInput(event: Event) {
         const target = event.target as HTMLInputElement;
         value = target.value;
@@ -93,6 +133,17 @@
         {disabled}
         class={inputClasses()}
         oninput={handleInput}
+        aria-invalid={variant === "error" ? "true" : undefined}
+        aria-describedby={message ? `${inputId}-message` : undefined}
         {...restProps}
     />
+    {#if message && variant !== "default"}
+        <p id={`${inputId}-message`} class={messageClasses()} role="alert">
+            {#if getIcon()}
+                {@const Icon = getIcon()}
+                <Icon size={14} class="shrink-0" />
+            {/if}
+            <span>{message}</span>
+        </p>
+    {/if}
 </div>

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

@@ -7,6 +7,7 @@ interface Props {
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "success" | "warning" | "error";
+    message?: string;
     oninput?: (event: Event) => void;
 }
 declare const Input: import("svelte").Component<Props, {}, "">;