@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/navigation/Sidebar.svelte

@@ -1,35 +1,236 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    open?: boolean;
-    side?: 'left' | 'right';
-    width?: 'sm' | 'md' | 'lg';
-    children?: Snippet;
-  }
-
-  let {
-    open = $bindable(true),
-    side = 'left',
-    width = 'md',
-    children
-  }: Props = $props();
-
-  const widthClasses = {
-    sm: { open: 'w-56', collapsed: 'w-14' },
-    md: { open: 'w-64', collapsed: 'w-16' },
-    lg: { open: 'w-80', collapsed: 'w-20' }
-  };
-
-  const sideClasses = {
-    left: 'left-0',
-    right: 'right-0'
-  };
-
-  const currentWidth = $derived(open ? widthClasses[width].open : widthClasses[width].collapsed);
-  const baseClasses = 'fixed top-0 bottom-0 z-30 glass-panel overflow-y-auto overflow-x-hidden transition-all duration-300 ease-[var(--ease-luxe)]';
-</script>
-
-<aside class="{baseClasses} {sideClasses[side]} {currentWidth}">
-  {@render children?.()}
-</aside>
+<script lang="ts">let { open = $bindable(true), side = 'left', width = 'md', header, children, currentPath } = $props();
+let navbarHeight = $state(0);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    const navbarElement = document.querySelector('[data-navbar]');
+    if (navbarElement) {
+        // Initial height
+        navbarHeight = navbarElement.offsetHeight;
+        // Watch for height changes (responsive behavior, window resize, etc.)
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(() => {
+                navbarHeight = navbarElement.offsetHeight;
+            });
+            resizeObserver.observe(navbarElement);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }
+    else {
+        navbarHeight = 0;
+    }
+});
+// 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);
+        }
+    });
+});
+// Collapsed state icon/text detection
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Reference open to make effect reactive to collapse/expand state changes
+    // This ensures detection runs when sidebar toggles
+    if (open === undefined)
+        return;
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        // Check for icon presence using documented .sidebar-item-icon class
+        const hasIcon = element.querySelector('.sidebar-item-icon');
+        if (hasIcon) {
+            element.setAttribute('data-sidebar-has-icon', 'true');
+            element.removeAttribute('data-sidebar-first-letter');
+        }
+        else {
+            // Extract first letter from .sidebar-item-label or fallback to text content
+            const label = element.querySelector('.sidebar-item-label');
+            const textContent = (label?.textContent || element.textContent)?.trim();
+            const firstChar = textContent?.[0];
+            // Only set first-letter if it's alphanumeric
+            if (firstChar && /[a-zA-Z0-9]/.test(firstChar)) {
+                element.setAttribute('data-sidebar-first-letter', firstChar.toUpperCase());
+                element.removeAttribute('data-sidebar-has-icon');
+            }
+            else {
+                // No valid first letter - don't show anything in collapsed mode
+                element.removeAttribute('data-sidebar-first-letter');
+                element.removeAttribute('data-sidebar-has-icon');
+            }
+        }
+    });
+});
+const widthClasses = {
+    sm: { open: 'w-56', collapsed: 'w-14' },
+    md: { open: 'w-64', collapsed: 'w-16' },
+    lg: { open: 'w-80', collapsed: 'w-20' }
+};
+const sideClasses = {
+    left: 'left-0',
+    right: 'right-0'
+};
+const currentWidth = $derived(open ? widthClasses[width].open : widthClasses[width].collapsed);
+const baseClasses = 'fixed bottom-0 z-[var(--z-40)] glass-panel overflow-y-auto overflow-x-hidden transition-all duration-300 ease-[var(--ease-luxe)]';
+export {};
+</script>
+
+<aside bind:this={rootElement} data-sidebar class="{baseClasses} {sideClasses[side]} {currentWidth}" style="top: {navbarHeight}px">
+  {#if header && open}
+    {@render header()}
+  {/if}
+  {@render children?.()}
+</aside>
+
+<style>
+  /* Header styling */
+  aside :global(.sidebar-header) {
+    padding: 1rem;
+    font-weight: 600;
+    color: var(--color-accent);
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: all 0.2s var(--ease-luxe);
+  }
+
+  /* Collapsed state - center icons and hide text */
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon]),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon]),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon]) {
+    justify-content: center;
+  }
+
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon] .sidebar-item-label) {
+    display: none;
+  }
+
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon] .sidebar-item-icon) {
+    font-size: var(--text-2xl);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* Collapsed state - first letter circle for items without icons */
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon]))::before {
+    content: attr(data-sidebar-first-letter);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent-overlay-20);
+    color: var(--color-accent);
+    font-weight: 600;
+    font-size: var(--text-lg);
+  }
+
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon])),
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon])),
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon])) {
+    justify-content: center;
+  }
+
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label) {
+    display: none;
+  }
+
+  aside :global(a.active),
+  aside :global(button.active) {
+    background: var(--color-accent-overlay-15);
+    color: var(--color-accent);
+    border-left: 3px solid var(--color-accent);
+    font-weight: 600;
+  }
+
+  aside :global(a.active),
+  aside :global(button.active) {
+    box-shadow: var(--shadow-accent-glow);
+  }
+
+  aside :global(a:not(.active):hover),
+  aside :global(button:not(.active):hover) {
+    background: var(--color-base-3);
+    color: var(--color-accent-soft);
+  }
+
+  aside :global(a),
+  aside :global(button) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    margin: 0.25rem 0.5rem;
+    border-radius: var(--radius-md);
+    color: var(--color-text-soft);
+    text-decoration: none;
+    transition: all 0.2s var(--ease-luxe);
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    width: calc(100% - 1rem);
+    text-align: left;
+    font-family: var(--font-body);
+    font-size: 0.875rem;
+  }</style>

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

@@ -3,7 +3,9 @@ interface Props {
     open?: boolean;
     side?: 'left' | 'right';
     width?: 'sm' | 'md' | 'lg';
+    header?: Snippet;
     children?: Snippet;
+    currentPath?: string;
 }
 declare const Sidebar: import("svelte").Component<Props, {}, "open">;
 type Sidebar = ReturnType<typeof Sidebar>;

package/dist/components/navigation/Tabs.svelte

@@ -1,54 +1,86 @@
-<script lang="ts">
-
-  interface Tab {
-    id: string;
-    label: string;
-    disabled?: boolean;
-  }
-
-  interface Props {
-    tabs: Tab[];
-    activeTab?: string;
-    orientation?: 'horizontal' | 'vertical';
-    variant?: 'default' | 'pills';
-    onTabChange?: (tabId: string) => void;
-  }
-
-  let {
-    tabs,
-    activeTab = $bindable(''),
-    orientation = 'horizontal',
-    variant = 'default',
-    onTabChange
-  }: Props = $props();
-
-  function handleTabClick(tabId: string, disabled?: boolean) {
-    if (disabled) return;
-    activeTab = tabId;
-    if (onTabChange) {
-      onTabChange(tabId);
-    }
-  }
-
-  const orientationClasses = {
-    horizontal: 'flex flex-row',
-    vertical: 'flex flex-col'
-  };
-
-  const radiusClass = variant === 'pills' ? 'rounded-pill' : 'rounded-md';
-</script>
-
-<div role="tablist" class="{orientationClasses[orientation]} gap-1 p-1">
-  {#each tabs as tab}
-    <button
-      role="tab"
-      aria-selected={activeTab === tab.id}
-      aria-disabled={tab.disabled}
-      onclick={() => handleTabClick(tab.id, tab.disabled)}
-      disabled={tab.disabled}
-      class="px-4 py-2 {radiusClass} font-body text-sm transition-all duration-300 ease-luxe {activeTab === tab.id ? 'bg-accent text-text accent-glow' : 'text-text-soft hover:bg-base-3'} {tab.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
-    >
-      {tab.label}
-    </button>
-  {/each}
-</div>
+<script lang="ts">let { tabs, activeTab = $bindable(''), orientation = 'horizontal', variant = 'default', onTabChange, ontabchange, class: className = '' } = $props();
+const onTabChangeCallback = $derived(onTabChange ?? ontabchange);
+function handleTabClick(tabId, disabled) {
+    if (disabled)
+        return;
+    activeTab = tabId;
+    onTabChangeCallback?.(tabId);
+}
+function handleKeyDown(event, currentTabId) {
+    const enabledTabs = tabs.filter(tab => !tab.disabled);
+    const currentIndex = enabledTabs.findIndex(tab => tab.id === currentTabId);
+    let nextIndex = currentIndex;
+    switch (event.key) {
+        case 'ArrowLeft':
+            if (orientation !== 'horizontal')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
+            break;
+        case 'ArrowRight':
+            if (orientation !== 'horizontal')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
+            break;
+        case 'ArrowUp':
+            if (orientation !== 'vertical')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;
+            break;
+        case 'ArrowDown':
+            if (orientation !== 'vertical')
+                return;
+            event.preventDefault();
+            nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;
+            break;
+        case 'Home':
+            event.preventDefault();
+            nextIndex = 0;
+            break;
+        case 'End':
+            event.preventDefault();
+            nextIndex = enabledTabs.length - 1;
+            break;
+        default:
+            return;
+    }
+    const nextTab = enabledTabs[nextIndex];
+    if (nextTab) {
+        handleTabClick(nextTab.id);
+        requestAnimationFrame(() => {
+            const button = document.querySelector(`[role="tab"][aria-selected="true"]`);
+            button?.focus();
+        });
+    }
+}
+const orientationClasses = {
+    horizontal: 'flex flex-row',
+    vertical: 'flex flex-col'
+};
+const radiusClass = variant === 'pills' ? 'rounded-pill' : 'rounded-[var(--radius-md)]';
+export {};
+</script>
+
+<div role="tablist" class="{orientationClasses[orientation]} gap-1 p-1 {className}">
+  {#each tabs as tab}
+    <button
+      role="tab"
+      aria-selected={activeTab === tab.id}
+      aria-disabled={tab.disabled}
+      tabindex={activeTab === tab.id ? 0 : -1}
+      onclick={() => handleTabClick(tab.id, tab.disabled)}
+      onkeydown={(e) => handleKeyDown(e, tab.id)}
+      disabled={tab.disabled}
+      class="flex items-center gap-2 px-6 py-3 {radiusClass} font-body text-sm transition-all duration-300 ease-luxe {activeTab === tab.id ? 'bg-accent text-text accent-glow' : 'text-text-soft hover:bg-base-3'} {tab.disabled ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}"
+    >
+      {#if tab.iconBefore}
+        <span class="inline-flex items-center justify-center">
+          {@render tab.iconBefore()}
+        </span>
+      {/if}
+      {tab.label}
+    </button>
+  {/each}
+</div>

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

@@ -1,14 +1,18 @@
 interface Tab {
     id: string;
     label: string;
+    iconBefore?: import('svelte').Snippet;
     disabled?: boolean;
 }
-interface Props {
+export interface Props {
     tabs: Tab[];
     activeTab?: string;
     orientation?: 'horizontal' | 'vertical';
     variant?: 'default' | 'pills';
     onTabChange?: (tabId: string) => void;
+    /** @deprecated Use onTabChange */
+    ontabchange?: (tabId: string) => void;
+    class?: string;
 }
 declare const Tabs: import("svelte").Component<Props, {}, "activeTab">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/components/overlays/Alert.svelte

@@ -1,99 +1,81 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    title?: string;
-    dismissible?: boolean;
-    onclose?: () => void;
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'info',
-    title,
-    dismissible = false,
-    onclose,
-    children
-  }: Props = $props();
-
-  let visible = $state(true);
-
-  const variantClasses = {
-    info: 'border-l-4 border-accent',
-    success: 'border-l-4 border-success',
-    warning: 'border-l-4 border-warning',
-    error: 'border-l-4 border-error'
-  };
-
-  const variantTextClasses = {
-    info: 'text-accent-soft',
-    success: 'text-success',
-    warning: 'text-warning',
-    error: 'text-error'
-  };
-
-  const variantIcons = {
-    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
-    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
-    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
-    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
-  };
-
-  const roleMap = {
-    info: 'status',
-    success: 'status',
-    warning: 'alert',
-    error: 'alert'
-  };
-
-  const ariaLiveMap = {
-    info: 'polite',
-    success: 'polite',
-    warning: 'polite',
-    error: 'assertive'
-  } satisfies Record<'info' | 'success' | 'warning' | 'error', 'polite' | 'assertive'>;
-
-  function handleClose() {
-    visible = false;
-    onclose?.();
-  }
-</script>
-
-{#if visible}
-  <div
-    class="glass-panel rounded-lg p-4 flex gap-3 {variantClasses[variant]} animate-[fade-in_0.2s_var(--ease-luxe)]"
-    role={roleMap[variant]}
-    aria-live={ariaLiveMap[variant]}
-  >
-    <div class="shrink-0 {variantTextClasses[variant]}">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={variantIcons[variant]} />
-      </svg>
-    </div>
-
-    <div class="flex-1 min-w-0">
-      {#if title}
-        <h4 class="font-semibold text-text mb-1">
-          {title}
-        </h4>
-      {/if}
-      <div class="text-sm text-text-soft">
-        {@render children?.()}
-      </div>
-    </div>
-
-    {#if dismissible}
-      <button
-        type="button"
-        onclick={handleClose}
-        class="shrink-0 text-text-soft hover:text-text transition-colors"
-        aria-label="Dismiss alert"
-      >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
-    {/if}
-  </div>
-{/if}
+<script lang="ts">let { variant = 'info', title, dismissible = false, iconBefore, onClose, onclose, children, class: className = '' } = $props();
+const onCloseCallback = $derived(onClose ?? onclose);
+let visible = $state(true);
+const variantClasses = {
+    info: 'border-l-4 border-accent',
+    success: 'border-l-4 border-success',
+    warning: 'border-l-4 border-warning',
+    error: 'border-l-4 border-error'
+};
+const variantTextClasses = {
+    info: 'text-accent-soft',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error'
+};
+const variantIcons = {
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
+};
+const roleMap = {
+    info: 'status',
+    success: 'status',
+    warning: 'alert',
+    error: 'alert'
+};
+const ariaLiveMap = {
+    info: 'polite',
+    success: 'polite',
+    warning: 'polite',
+    error: 'assertive'
+};
+function handleClose() {
+    visible = false;
+    onCloseCallback?.();
+}
+export {};
+</script>
+
+{#if visible}
+  <div
+    class="glass-panel rounded-[var(--radius-lg)] p-4 flex gap-3 {variantClasses[variant]} {className} animate-[fade-in_0.2s_var(--ease-sharp)]"
+    role={roleMap[variant]}
+    aria-live={ariaLiveMap[variant]}
+  >
+    <div class="shrink-0 {variantTextClasses[variant]}">
+      {#if iconBefore}
+        {@render iconBefore()}
+      {:else}
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={variantIcons[variant]} />
+        </svg>
+      {/if}
+    </div>
+
+    <div class="flex-1 min-w-0">
+      {#if title}
+        <h4 class="font-semibold text-text mb-1">
+          {title}
+        </h4>
+      {/if}
+      <div class="text-sm text-text-soft">
+        {@render children?.()}
+      </div>
+    </div>
+
+    {#if dismissible}
+      <button
+        type="button"
+        onclick={handleClose}
+        class="shrink-0 text-text-soft hover:text-text transition-colors"
+        aria-label="Dismiss alert"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+{/if}

package/dist/components/overlays/Alert.svelte.d.ts

@@ -1,10 +1,14 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface Props {
     variant?: 'info' | 'success' | 'warning' | 'error';
     title?: string;
     dismissible?: boolean;
+    iconBefore?: Snippet;
+    onClose?: () => void;
+    /** @deprecated Use onClose */
     onclose?: () => void;
     children?: Snippet;
+    class?: string;
 }
 declare const Alert: import("svelte").Component<Props, {}, "">;
 type Alert = ReturnType<typeof Alert>;