@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/navigation/DropdownMenu.svelte

@@ -1,80 +1,139 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    open?: boolean;
-    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-    trigger?: Snippet;
-    children?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    placement = 'bottom-start',
-    trigger,
-    children
-  }: Props = $props();
-
-  let menuElement: HTMLDivElement;
-  let wrapperElement: HTMLDivElement;
-
-  const placementClasses = {
-    'bottom-start': 'top-full left-0 mt-2',
-    'bottom-end': 'top-full right-0 mt-2',
-    'top-start': 'bottom-full left-0 mb-2',
-    'top-end': 'bottom-full right-0 mb-2'
-  };
-
-  function toggleMenu() {
-    open = !open;
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (menuElement && !wrapperElement.contains(event.target as Node)) {
-      open = false;
-    }
-  }
-
-  function handleEscape(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      open = false;
-    }
-  }
-
-  $effect(() => {
-    if (open) {
-      document.addEventListener('click', handleClickOutside);
-      document.addEventListener('keydown', handleEscape);
-
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }
-  });
-</script>
-
-<div bind:this={wrapperElement} class="relative">
-  <button
-    type="button"
-    onclick={toggleMenu}
-    onkeydown={(e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        toggleMenu();
-      }
-    }}
-    class="bg-transparent border-none p-0 cursor-pointer"
-  >
-    {@render trigger?.()}
-  </button>
-
-  {#if open}
-    <div
-      bind:this={menuElement}
-      class="absolute {placementClasses[placement]} z-50 glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
-    >
-      {@render children?.()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { items, open = $bindable(false), placement = 'bottom-start', trigger } = $props();
+let menuElement = $state();
+let wrapperElement;
+let selectedIndex = $state(0);
+const menuId = createId('dropdown-menu');
+const placementClasses = {
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 mt-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2'
+};
+function toggleMenu() {
+    open = !open;
+    if (open) {
+        selectedIndex = 0;
+    }
+}
+function handleItemClick(item) {
+    if (item.disabled)
+        return;
+    item.onclick?.();
+    open = false;
+}
+function handleMenuKeyDown(event) {
+    // Derive current index from focused element to stay in sync
+    const focusedElement = document.activeElement;
+    const dataIndex = focusedElement?.getAttribute('data-index');
+    if (dataIndex !== null) {
+        const currentFocusedIndex = parseInt(dataIndex || '0', 10);
+        if (!isNaN(currentFocusedIndex) && currentFocusedIndex >= 0 && currentFocusedIndex < items.length) {
+            selectedIndex = currentFocusedIndex;
+        }
+    }
+    const enabledItems = items.filter(item => !item.disabled);
+    const currentEnabledIndex = enabledItems.findIndex(item => item.id === items[selectedIndex]?.id);
+    let nextIndex = currentEnabledIndex;
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex < enabledItems.length - 1 ? currentEnabledIndex + 1 : 0;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledItems.length - 1;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'Home':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[0]?.id);
+            break;
+        case 'End':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[enabledItems.length - 1]?.id);
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault();
+            if (items[selectedIndex] && !items[selectedIndex].disabled) {
+                handleItemClick(items[selectedIndex]);
+            }
+            break;
+        case 'Escape':
+            event.preventDefault();
+            open = false;
+            break;
+    }
+}
+function handleClickOutside(event) {
+    if (menuElement && !wrapperElement.contains(event.target)) {
+        open = false;
+    }
+}
+$effect(() => {
+    if (open) {
+        document.addEventListener('click', handleClickOutside);
+        requestAnimationFrame(() => {
+            const firstItem = menuElement?.querySelector('[role="menuitem"]');
+            if (firstItem) {
+                const dataIndex = firstItem.getAttribute('data-index');
+                if (dataIndex !== null) {
+                    selectedIndex = parseInt(dataIndex, 10);
+                }
+                firstItem.focus();
+            }
+        });
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }
+});
+</script>
+
+<div bind:this={wrapperElement} class="relative">
+  <button
+    type="button"
+    onclick={toggleMenu}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleMenu();
+      }
+    }}
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={menuId}
+    class="bg-transparent border-none p-0 cursor-pointer"
+  >
+    {@render trigger?.()}
+  </button>
+
+  {#if open}
+    <div
+      bind:this={menuElement}
+      id={menuId}
+      role="menu"
+      tabindex="-1"
+      onkeydown={handleMenuKeyDown}
+      class="absolute {placementClasses[placement]} z-[var(--z-50)] glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+    >
+      {#each items as item, index}
+        <button
+          role="menuitem"
+          data-index={index}
+          tabindex={index === selectedIndex ? 0 : -1}
+          onclick={() => handleItemClick(item)}
+          disabled={item.disabled}
+          class="w-full text-left px-4 py-2 text-sm text-text hover:bg-base-3 transition-colors duration-200 flex items-center gap-2 {item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+        >
+          {#if item.icon}
+            {@render item.icon()}
+          {/if}
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/navigation/DropdownMenu.svelte.d.ts

@@ -1,9 +1,16 @@
 import type { Snippet } from 'svelte';
+interface MenuItem {
+    id: string;
+    label: string;
+    onclick?: () => void;
+    disabled?: boolean;
+    icon?: Snippet;
+}
 interface Props {
+    items: MenuItem[];
     open?: boolean;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     trigger?: Snippet;
-    children?: Snippet;
 }
 declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/components/navigation/Menu.svelte

@@ -1,48 +1,72 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface MenuItem {
-    id: string;
-    label: string;
-    icon?: Snippet;
-    disabled?: boolean;
-    onclick?: () => void;
-  }
-
-  interface Props {
-    items?: MenuItem[];
-    children?: Snippet;
-  }
-
-  let {
-    items,
-    children
-  }: Props = $props();
-
-  function handleItemClick(item: MenuItem) {
-    if (!item.disabled && item.onclick) {
-      item.onclick();
-    }
-  }
-</script>
-
-<div role="menu" class="glass-panel rounded-[var(--radius-lg)] p-2 shadow-[var(--shadow-deep)]">
-  {#if children}
-    {@render children()}
-  {:else if items}
-    {#each items as item}
-      <button
-        role="menuitem"
-        aria-disabled={item.disabled}
-        onclick={() => handleItemClick(item)}
-        disabled={item.disabled}
-        class="flex items-center gap-2 w-full px-3 py-2 rounded-[var(--radius-md)] text-[var(--color-text)] text-sm font-[var(--font-body)] hover:bg-[var(--color-base-3)] transition-all duration-200 ease-[var(--ease-luxe)] {item.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
-      >
-        {#if item.icon}
-          {@render item.icon()}
-        {/if}
-        <span>{item.label}</span>
-      </button>
-    {/each}
-  {/if}
-</div>
+<script lang="ts">let { items, children } = $props();
+let selectedIndex = $state(0);
+let menuContainer;
+function handleItemClick(item) {
+    if (!item.disabled && item.onclick) {
+        item.onclick();
+    }
+}
+function handleMenuKeyDown(event) {
+    if (!items)
+        return;
+    const enabledItems = items.filter(item => !item.disabled);
+    const currentEnabledIndex = enabledItems.findIndex(item => item.id === items[selectedIndex]?.id);
+    let nextIndex = currentEnabledIndex;
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex < enabledItems.length - 1 ? currentEnabledIndex + 1 : 0;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            nextIndex = currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledItems.length - 1;
+            selectedIndex = items.findIndex(item => item.id === enabledItems[nextIndex]?.id);
+            break;
+        case 'Home':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[0]?.id);
+            break;
+        case 'End':
+            event.preventDefault();
+            selectedIndex = items.findIndex(item => item.id === enabledItems[enabledItems.length - 1]?.id);
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault();
+            if (items[selectedIndex] && !items[selectedIndex].disabled) {
+                handleItemClick(items[selectedIndex]);
+            }
+            break;
+    }
+}
+$effect(() => {
+    if (items && selectedIndex >= 0 && menuContainer) {
+        const selectedButton = menuContainer.querySelector(`[role="menuitem"][tabindex="0"]`);
+        selectedButton?.focus();
+    }
+});
+export {};
+</script>
+
+<div bind:this={menuContainer} role="menu" tabindex="-1" onkeydown={handleMenuKeyDown} class="glass-panel rounded-[var(--radius-lg)] p-3 shadow-[var(--shadow-deep)]">
+  {#if children}
+    {@render children()}
+  {:else if items}
+    {#each items as item, index}
+      <button
+        role="menuitem"
+        aria-disabled={item.disabled}
+        tabindex={index === selectedIndex ? 0 : -1}
+        onclick={() => handleItemClick(item)}
+        disabled={item.disabled}
+        class="flex items-center gap-2 w-full px-4 py-3 rounded-[var(--radius-md)] text-[var(--color-text)] text-sm font-[var(--font-body)] hover:bg-[var(--color-base-3)] hover-lift transition-all duration-200 ease-[var(--ease-luxe)] {item.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+      >
+        {#if item.icon}
+          {@render item.icon()}
+        {/if}
+        <span>{item.label}</span>
+      </button>
+    {/each}
+  {/if}
+</div>

package/dist/components/navigation/Navbar.svelte

@@ -1,32 +1,111 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    position?: 'sticky' | 'fixed';
-    height?: 'sm' | 'md' | 'lg';
-    children?: Snippet;
-  }
-
-  let {
-    position = 'sticky',
-    height = 'md',
-    children
-  }: Props = $props();
-
-  const positionClasses = {
-    sticky: 'sticky top-0',
-    fixed: 'fixed top-0 left-0 right-0'
-  };
-
-  const heightClasses = {
-    sm: 'h-14',
-    md: 'h-16',
-    lg: 'h-20'
-  };
-
-  const baseClasses = 'z-40 glass-panel flex items-center justify-between px-4 md:px-6 lg:px-8 transition-all duration-300 ease-[var(--ease-luxe)]';
-</script>
-
-<nav class="{baseClasses} {positionClasses[position]} {heightClasses[height]}">
-  {@render children?.()}
-</nav>
+<script lang="ts">let { position = 'sticky', height = 'md', navigationAlign = 'center', toggleButton, logo, navigation, actions, children, currentPath } = $props();
+const positionClasses = {
+    sticky: 'sticky top-0',
+    fixed: 'fixed top-0 left-0 right-0'
+};
+const heightClasses = {
+    sm: 'h-16',
+    md: 'h-18',
+    lg: 'h-24'
+};
+const baseClasses = 'z-[var(--z-50)] glass-panel flex items-center justify-between px-4 md:px-6 lg:px-8 transition-all duration-300 ease-[var(--ease-luxe)]';
+// Track elements modified by the effect to preserve manual .active classes
+let autoManagedElements = $state(new Set());
+let rootElement = $state(null);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Clear auto-managed active classes when currentPath becomes falsy
+    if (!currentPath) {
+        autoManagedElements.forEach((element) => {
+            element.classList.remove('active');
+        });
+        autoManagedElements.clear();
+        return;
+    }
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        const href = element.getAttribute('href');
+        const dataHref = element.getAttribute('data-href');
+        const targetPath = href || dataHref;
+        // Match exact path or nested routes (e.g., /buttons matches /buttons/icon-button)
+        const isActive = targetPath === currentPath ||
+            (targetPath && currentPath.startsWith(targetPath + '/'));
+        if (isActive) {
+            // Only add to autoManagedElements if we're adding the class ourselves
+            if (!element.classList.contains('active')) {
+                element.classList.add('active');
+                autoManagedElements.add(element);
+            }
+        }
+        else if (autoManagedElements.has(element)) {
+            element.classList.remove('active');
+            autoManagedElements.delete(element);
+        }
+    });
+});
+export {};
+</script>
+
+<nav bind:this={rootElement} data-navbar class="{baseClasses} {positionClasses[position]} {heightClasses[height]}">
+  <!-- Left Section: Toggle Button and Logo -->
+  <div class="flex items-center gap-3">
+    {#if toggleButton}
+      {@render toggleButton()}
+    {/if}
+    {#if logo}
+      {@render logo()}
+    {/if}
+  </div>
+  
+  <!-- Center Section: Navigation Links -->
+  {#if navigation}
+    <div class="flex-1 flex items-center {navigationAlign === 'center' ? 'justify-center' : ''} gap-6 {logo ? 'ml-4' : ''}">
+      {@render navigation()}
+    </div>
+  {:else if children}
+    <div class="flex-1 flex items-center {navigationAlign === 'center' ? 'justify-center' : ''} gap-4 {logo ? 'ml-4' : ''}">
+      {@render children()}
+    </div>
+  {/if}
+  
+  <!-- Right Section: Actions -->
+  {#if actions}
+    <div class="flex items-center gap-3">
+      {@render actions()}
+    </div>
+  {/if}
+</nav>
+
+<style>
+  nav :global(.navbar-logo) {
+    color: var(--color-accent);
+    font-weight: 600;
+    font-size: var(--text-lg);
+  }
+
+  nav :global(a.active),
+  nav :global(button.active) {
+    color: var(--color-accent);
+    font-weight: 600;
+    position: relative;
+  }
+
+  nav :global(a.active::after),
+  nav :global(button.active::after) {
+    content: '';
+    position: absolute;
+    bottom: -0.5rem;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+  }
+
+  nav :global(a:not(.active):hover),
+  nav :global(button:not(.active):hover) {
+    color: var(--color-accent-soft);
+  }</style>

package/dist/components/navigation/Navbar.svelte.d.ts

@@ -2,7 +2,13 @@ import type { Snippet } from 'svelte';
 interface Props {
     position?: 'sticky' | 'fixed';
     height?: 'sm' | 'md' | 'lg';
+    navigationAlign?: 'left' | 'center';
+    toggleButton?: Snippet;
+    logo?: Snippet;
+    navigation?: Snippet;
+    actions?: Snippet;
     children?: Snippet;
+    currentPath?: string;
 }
 declare const Navbar: import("svelte").Component<Props, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;