zabi-components 5.0.11 → 5.0.13

package/dist/molecules/Modal.svelte

@@ -54,41 +54,45 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-background/50 dark:bg-background/80 flex items-end md:items-center justify-center p-0 md:p-4 z-50"
+        class="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-end md:items-center justify-center p-0 md:p-4 z-modal"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
         aria-modal="true"
+        aria-labelledby={title ? "modal-title" : undefined}
         tabindex="-1"
     >
         <div
-            class="bg-surface-elevated rounded-t-2xl md:rounded-lg shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none"
+            class="bg-surface-elevated 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"
         >
             <!-- Header -->
-            <div
-                class="flex items-center justify-between p-6 border-b border-(--color-border)"
-            >
-                <h2 class="text-xl font-semibold text-headline">{title}</h2>
-                <button
-                    type="button"
-                    onclick={closeModal}
-                    class="text-description hover:text-headline text-2xl cursor-pointer transition-colors"
-                    aria-label="Close"
-                >
-                    ×
-                </button>
-            </div>
+            {#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-surface-hover"
+                        aria-label="Close"
+                    >
+                        ×
+                    </button>
+                </div>
+            {/if}
 
             <!-- Content -->
-            <div class="p-6">
+            <div class="px-6 pb-6 flex-1">
                 {@render children?.()}
             </div>
 
             <!-- Footer -->
             {#if footer}
-                <div
-                    class="flex justify-end gap-3 p-6 border-t border-(--color-border)"
-                >
+                <div class="flex justify-end gap-3 px-6 pb-6 pt-4">
                     {@render footer?.()}
                 </div>
             {/if}

package/dist/molecules/SlideUp.svelte

@@ -13,61 +13,67 @@
         ...restProps
     } = $props<Props & { children?: any }>();
 
-    function closeSlideUp() {
+    function closeSlideUp(event?: Event) {
         isOpen = false;
+        if (onclick && event) {
+            (onclick as (event: Event) => void)(event);
+        }
     }
 
     function handleBackdropClick(event: Event) {
         if (event.target === event.currentTarget) {
-            closeSlideUp();
+            closeSlideUp(event);
         }
     }
 
     function handleKeydown(event: Event) {
         const keyboardEvent = event as KeyboardEvent;
         if (keyboardEvent.key === "Escape") {
-            closeSlideUp();
+            closeSlideUp(event);
+        }
+        if (onkeydown) {
+            (onkeydown as (event: Event) => void)(event);
         }
     }
 </script>
 
 {#if isOpen}
-    <!-- Backdrop -->
     <div
-        class="fixed inset-0 bg-black/50 z-50"
+        class="fixed inset-0 bg-black/50 dark:bg-black/70 z-modal"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
         aria-modal="true"
+        aria-labelledby={title ? "slideup-title" : undefined}
         tabindex="-1"
-    ></div>
-
-    <!-- SlideUp Content -->
-    <div
-        class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 rounded-t-xl shadow-xl z-50 max-h-[80vh] overflow-y-auto"
-        role="dialog"
-        aria-modal="true"
     >
-        <!-- Header -->
-        {#if title}
-            <div
-                class="flex items-center justify-between p-4 border-b border-gray-200"
-            >
-                <h3 class="text-lg font-semibold text-gray-900">{title}</h3>
-                <button
-                    type="button"
-                    class="text-gray-400 hover:text-gray-600 text-2xl"
-                    onclick={closeSlideUp}
-                    aria-label="Close"
-                >
-                    ×
-                </button>
-            </div>
-        {/if}
+        <div
+            class="fixed bottom-0 left-0 right-0 bg-surface-elevated rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
+        >
+            <!-- Header -->
+            {#if title}
+                <div class="flex items-center justify-between px-6 pt-6 pb-4">
+                    <h2
+                        id="slideup-title"
+                        class="text-2xl font-normal leading-8 text-headline tracking-normal"
+                    >
+                        {title}
+                    </h2>
+                    <button
+                        type="button"
+                        onclick={closeSlideUp}
+                        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-surface-hover"
+                        aria-label="Close"
+                    >
+                        ×
+                    </button>
+                </div>
+            {/if}
 
-        <!-- Content -->
-        <div class="p-4">
-            {@render children?.()}
+            <!-- Content -->
+            <div class="px-6 pb-6 flex-1">
+                {@render children?.()}
+            </div>
         </div>
     </div>
 {/if}

package/dist/organisms/Navigation.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
+    import type { Component } from "svelte";
+
+    interface NavigationItem {
+        label: string;
+        href: string;
+        icon?: Component<any>; // Outline icon component
+        iconFilled?: Component<any>; // Filled icon component (for active state)
+    }
+
     interface Props {
         variant?: "header" | "sidebar";
-        items?: Array<{
-            label: string;
-            href: string;
-        }>;
+        items?: NavigationItem[];
         currentPath?: string;
         onclick?: (event: Event) => void;
         className?: string;
@@ -19,41 +25,97 @@
         ...restProps
     }: Props & { children?: any } = $props();
 
-    function handleClick(item: any, event: MouseEvent) {
+    function handleClick(item: NavigationItem, event: MouseEvent) {
         event.preventDefault();
-        // Navigation is now handled by the parent component
-        // through event forwarding
+        if (onclick) {
+            onclick(event as any);
+        }
     }
 
     // Derived class for ul container based on variant
     const ulClasses = $derived(() => {
         return variant === "sidebar"
-            ? "flex flex-col space-y-2"
-            : "flex space-x-6";
+            ? "flex flex-col gap-1"
+            : "flex items-center justify-between gap-1";
     });
 
-    // Function to get link classes based on active state
-    function getLinkClasses(itemHref: string): string {
+    // Function to get nav item classes based on active state
+    function getNavItemClasses(itemHref: string): string {
+        const baseClasses = "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer";
+
+        return baseClasses;
+    }
+
+    // Function to get icon container classes based on active state
+    function getIconContainerClasses(itemHref: string): string {
+        const isActive = currentPath === itemHref;
+        const baseClasses = "flex flex-col items-center justify-center overflow-clip relative rounded-[20px] shrink-0 transition-colors duration-200";
+
+        if (isActive) {
+            return `${baseClasses} bg-[var(--color-action-primary-subtle-hover)]`;
+        }
+        return `${baseClasses}`;
+    }
+
+    // Function to get state layer classes
+    function getStateLayerClasses(): string {
+        return "box-border flex gap-1 h-10 items-center px-4 py-2 relative shrink-0";
+    }
+
+    // Function to get label classes based on active state
+    function getLabelClasses(itemHref: string): string {
+        const isActive = currentPath === itemHref;
+        const baseClasses = "font-medium leading-4 relative shrink-0 text-center text-nowrap tracking-[0.5px] whitespace-pre text-xs";
+
+        if (isActive) {
+            return `${baseClasses} text-link`;
+        }
+        return `${baseClasses} text-description`;
+    }
+
+    // Function to get icon classes based on active state (matches text color)
+    function getIconClasses(itemHref: string): string {
         const isActive = currentPath === itemHref;
-        const baseClasses = "px-3 py-2 text-sm font-medium rounded-md";
 
         if (isActive) {
-            return `${baseClasses} text-body font-semibold`;
+            return "text-link";
         }
-        return `${baseClasses} text-description hover:text-body`;
+        return "text-description";
     }
 </script>
 
 <ul class="{ulClasses()} {className}" {...restProps}>
     {#each items as item}
-        {@const linkClasses = getLinkClasses(item.href)}
-        <li>
+        {@const isActive = currentPath === item.href}
+        {@const navItemClasses = getNavItemClasses(item.href)}
+        {@const iconContainerClasses = getIconContainerClasses(item.href)}
+        {@const labelClasses = getLabelClasses(item.href)}
+        <li class={navItemClasses}>
             <a
                 href={item.href}
-                class={linkClasses}
+                class={iconContainerClasses}
                 onclick={(e) => handleClick(item, e)}
+                role="button"
+                aria-current={isActive ? "page" : undefined}
             >
-                {item.label}
+                <div class={getStateLayerClasses()}>
+                    {#if item.iconFilled && isActive}
+                        {@const iconClasses = getIconClasses(item.href)}
+                        {@const Icon = item.iconFilled}
+                        <div class="overflow-clip relative shrink-0 size-4 {iconClasses}">
+                            <Icon size={16} class="w-4 h-4" />
+                        </div>
+                    {:else if item.icon}
+                        {@const iconClasses = getIconClasses(item.href)}
+                        {@const Icon = item.icon}
+                        <div class="overflow-clip relative shrink-0 size-4 {iconClasses}">
+                            <Icon size={16} class="w-4 h-4" />
+                        </div>
+                    {/if}
+                    <p class={labelClasses}>
+                        {item.label}
+                    </p>
+                </div>
             </a>
         </li>
     {/each}

package/dist/organisms/Navigation.svelte.d.ts

@@ -1,9 +1,13 @@
+import type { Component } from "svelte";
+interface NavigationItem {
+    label: string;
+    href: string;
+    icon?: Component<any>;
+    iconFilled?: Component<any>;
+}
 interface Props {
     variant?: "header" | "sidebar";
-    items?: Array<{
-        label: string;
-        href: string;
-    }>;
+    items?: NavigationItem[];
     currentPath?: string;
     onclick?: (event: Event) => void;
     className?: string;
@@ -11,6 +15,6 @@ interface Props {
 type $$ComponentProps = Props & {
     children?: any;
 };
-declare const Navigation: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Navigation: Component<$$ComponentProps, {}, "">;
 type Navigation = ReturnType<typeof Navigation>;
 export default Navigation;

package/dist/zabi-components.css

@@ -74,6 +74,7 @@
   --color-surface-active: theme(colors.stone.200);
   --color-surface-inverse: theme(colors.stone.900);
   --color-surface-disabled: theme(colors.stone.200);
+  --color-surface-container-high: #ece6f0;
 
   /* Background Colors */
   --color-background: theme(colors.white);
@@ -251,6 +252,7 @@ body {
   --color-surface-active: theme(colors.stone.600);
   --color-surface-inverse: theme(colors.stone.100);
   --color-surface-disabled: theme(colors.stone.700);
+  --color-surface-container-high: theme(colors.stone.700);
 
   /* Background Colors */
   --color-background: theme(colors.stone.900);
@@ -412,10 +414,141 @@ body {
   background-color: var(--color-surface-active);
 }
 
+.bg-surface-container-high {
+  background-color: var(--color-surface-container-high);
+}
+
 .bg-page {
   background-color: var(--color-page);
 }
 
+/* Brand color utilities */
+.bg-brand-50 {
+  background-color: var(--color-brand-50);
+}
+
+.bg-brand-100 {
+  background-color: var(--color-brand-100);
+}
+
+.bg-brand-200 {
+  background-color: var(--color-brand-200);
+}
+
+.bg-brand-300 {
+  background-color: var(--color-brand-300);
+}
+
+.bg-brand-400 {
+  background-color: var(--color-brand-400);
+}
+
+.bg-brand-500 {
+  background-color: var(--color-brand-500);
+}
+
+.bg-brand-600 {
+  background-color: var(--color-brand-600);
+}
+
+.bg-brand-700 {
+  background-color: var(--color-brand-700);
+}
+
+.bg-brand-800 {
+  background-color: var(--color-brand-800);
+}
+
+.bg-brand-900 {
+  background-color: var(--color-brand-900);
+}
+
+.bg-brand-950 {
+  background-color: var(--color-brand-950);
+}
+
+.hover\:bg-brand-50:hover {
+  background-color: var(--color-brand-50);
+}
+
+.hover\:bg-brand-100:hover {
+  background-color: var(--color-brand-100);
+}
+
+.hover\:bg-brand-200:hover {
+  background-color: var(--color-brand-200);
+}
+
+.text-brand-50 {
+  color: var(--color-brand-50);
+}
+
+.text-brand-100 {
+  color: var(--color-brand-100);
+}
+
+.text-brand-200 {
+  color: var(--color-brand-200);
+}
+
+.text-brand-300 {
+  color: var(--color-brand-300);
+}
+
+.text-brand-400 {
+  color: var(--color-brand-400);
+}
+
+.text-brand-500 {
+  color: var(--color-brand-500);
+}
+
+.text-brand-600 {
+  color: var(--color-brand-600);
+}
+
+.text-brand-700 {
+  color: var(--color-brand-700);
+}
+
+.text-brand-800 {
+  color: var(--color-brand-800);
+}
+
+.text-brand-900 {
+  color: var(--color-brand-900);
+}
+
+.text-brand-950 {
+  color: var(--color-brand-950);
+}
+
+.border-brand-50 {
+  border-color: var(--color-brand-50);
+}
+
+.border-brand-100 {
+  border-color: var(--color-brand-100);
+}
+
+.border-brand-500 {
+  border-color: var(--color-brand-500);
+}
+
+.border-brand-600 {
+  border-color: var(--color-brand-600);
+}
+
+.focus\:ring-brand-500:focus {
+  --tw-ring-color: var(--color-brand-500);
+  box-shadow: 0 0 0 2px var(--tw-ring-color);
+}
+
+.focus\:ring-brand-600:focus {
+  --tw-ring-color: var(--color-brand-600);
+  box-shadow: 0 0 0 2px var(--tw-ring-color);
+}
+
 /* Text utilities */
 .text-headline {
   color: var(--color-headline);
@@ -484,6 +617,14 @@ body {
 }
 
 /* Border utilities */
+.border-border {
+  border-color: var(--color-border);
+}
+
+.border-border-medium {
+  border-color: var(--color-border-medium);
+}
+
 .border-primary {
   border-color: var(--color-border);
 }
@@ -615,6 +756,31 @@ body {
   background-color: var(--color-action-danger-subtle-hover);
 }
 
+/* Z-index utilities */
+.z-dropdown {
+  z-index: var(--z-dropdown);
+}
+
+.z-modal {
+  z-index: var(--z-modal);
+}
+
+.z-modal-backdrop {
+  z-index: var(--z-modal-backdrop);
+}
+
+.z-popover {
+  z-index: var(--z-popover);
+}
+
+.z-tooltip {
+  z-index: var(--z-tooltip);
+}
+
+.z-toast {
+  z-index: var(--z-toast);
+}
+
 /* Modal Animation */
 @keyframes slideUp {
   from {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "5.0.11",
+  "version": "5.0.13",
   "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
   "type": "module",
   "main": "dist/index.js",