@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/navigation/ContextMenu.svelte

@@ -1,83 +1,133 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    open?: boolean;
-    x?: number;
-    y?: number;
-    trigger?: Snippet;
-    children?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    x = $bindable(0),
-    y = $bindable(0),
-    trigger,
-    children
-  }: Props = $props();
-
-  let menuElement = $state<HTMLDivElement>();
-
-  function handleContextMenu(event: MouseEvent) {
-    event.preventDefault();
-    x = event.clientX;
-    y = event.clientY;
-    open = true;
-
-    // Adjust position if menu would overflow viewport
-    requestAnimationFrame(() => {
-      if (menuElement) {
-        const menuRect = menuElement.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        if (x + menuRect.width > viewportWidth) {
-          x = viewportWidth - menuRect.width - 10;
-        }
-
-        if (y + menuRect.height > viewportHeight) {
-          y = viewportHeight - menuRect.height - 10;
-        }
-      }
-    });
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (menuElement && !menuElement.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 oncontextmenu={handleContextMenu} role="presentation" class="contents">
-  {@render trigger?.()}
-</div>
-
-{#if open}
-  <div
-    bind:this={menuElement}
-    class="fixed z-50 glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
-    style="left: {x}px; top: {y}px;"
-  >
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { items, open = $bindable(false), x = $bindable(0), y = $bindable(0), trigger } = $props();
+let menuElement = $state();
+let selectedIndex = $state(0);
+const menuId = createId('context-menu');
+function handleContextMenu(event) {
+    event.preventDefault();
+    x = event.clientX;
+    y = event.clientY;
+    open = true;
+    selectedIndex = 0;
+    // Adjust position if menu would overflow viewport
+    requestAnimationFrame(() => {
+        if (menuElement) {
+            const menuRect = menuElement.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            if (x + menuRect.width > viewportWidth) {
+                x = viewportWidth - menuRect.width - 10;
+            }
+            if (y + menuRect.height > viewportHeight) {
+                y = viewportHeight - menuRect.height - 10;
+            }
+        }
+    });
+}
+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 && !menuElement.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 oncontextmenu={handleContextMenu} role="presentation" class="contents">
+  {@render trigger?.()}
+</div>
+
+{#if open}
+  <div
+    bind:this={menuElement}
+    id={menuId}
+    role="menu"
+    tabindex="-1"
+    onkeydown={handleMenuKeyDown}
+    class="fixed z-[var(--z-50)] glass-panel rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-in_0.15s_var(--ease-luxe)]"
+    style="left: {x}px; top: {y}px;"
+  >
+    {#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}

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

@@ -1,10 +1,17 @@
 import type { Snippet } from 'svelte';
+interface MenuItem {
+    id: string;
+    label: string;
+    onclick?: () => void;
+    disabled?: boolean;
+    icon?: Snippet;
+}
 interface Props {
+    items: MenuItem[];
     open?: boolean;
     x?: number;
     y?: number;
     trigger?: Snippet;
-    children?: Snippet;
 }
 declare const ContextMenu: import("svelte").Component<Props, {}, "open" | "x" | "y">;
 type ContextMenu = ReturnType<typeof ContextMenu>;

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>