@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/overlays/Modal.svelte

@@ -1,130 +1,125 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    open?: boolean;
-    title?: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    closeOnBackdrop?: boolean;
-    closeOnEscape?: boolean;
-    children?: Snippet;
-    footer?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    title,
-    size = 'md',
-    closeOnBackdrop = true,
-    closeOnEscape = true,
-    children,
-    footer
-  }: Props = $props();
-
-  let modalElement = $state<HTMLDivElement>();
-  let previousFocus = $state<HTMLElement | null>(null);
-
-  const sizeClasses = {
-    sm: 'max-w-[28rem]',
-    md: 'max-w-[36rem]',
-    lg: 'max-w-[48rem]',
-    xl: 'max-w-[64rem]'
-  };
-
-  const titleId = createId('modal-title');
-
-  function handleClose() {
-    open = false;
-  }
-
-  function handleBackdropClick(event: MouseEvent) {
-    if (closeOnBackdrop && event.target === event.currentTarget) {
-      handleClose();
-    }
-  }
-
-  function handleEscape(event: KeyboardEvent) {
-    if (closeOnEscape && event.key === 'Escape') {
-      handleClose();
-    }
-  }
-
-  $effect(() => {
-    if (typeof document === 'undefined') return;
-    
-    if (open) {
-      // Store previous focus
-      previousFocus = document.activeElement as HTMLElement;
-
-      // Prevent body scroll
-      document.body.style.overflow = 'hidden';
-
-      // Add event listeners
-      document.addEventListener('keydown', handleEscape);
-
-      // Focus first interactive element
-      requestAnimationFrame(() => {
-        const firstInteractive = modalElement?.querySelector<HTMLElement>(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        firstInteractive?.focus();
-      });
-
-      return () => {
-        // Restore body scroll
-        document.body.style.overflow = '';
-
-        // Remove event listeners
-        document.removeEventListener('keydown', handleEscape);
-
-        // Restore previous focus
-        previousFocus?.focus();
-      };
-    }
-  });
-</script>
-
-{#if open}
-  <div
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
-    onclick={handleBackdropClick}
-    role="presentation"
-  >
-    <div
-      bind:this={modalElement}
-      class="glass-panel rounded-xl shadow-deep w-full {sizeClasses[size]} animate-[fade-up_0.3s_var(--ease-luxe)] flex flex-col max-h-[90vh]"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={title ? titleId : undefined}
-    >
-      {#if title}
-        <div class="flex items-center justify-between p-6 border-b border-border">
-          <h2 id={titleId} class="text-xl font-semibold text-text">
-            {title}
-          </h2>
-          <button
-            type="button"
-            onclick={handleClose}
-            class="text-text-soft hover:text-text transition-colors"
-            aria-label="Close modal"
-          >
-            <svg class="w-6 h-6" 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>
-        </div>
-      {/if}
-
-      <div class="flex-1 overflow-y-auto p-6 max-h-[70vh]" style="scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-base-3);">
-        {@render children?.()}
-      </div>
-
-      {#if footer}
-        <div class="flex items-center justify-end gap-3 p-6 border-t border-border">
-          {@render footer?.()}
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open = $bindable(false), title, size = 'md', closeOnBackdrop = true, closeOnEscape = true, children, footer, iconBefore, class: className = '' } = $props();
+let modalElement = $state();
+let previousFocus = $state(null);
+const sizeClasses = {
+    sm: 'max-w-[28rem]',
+    md: 'max-w-[36rem]',
+    lg: 'max-w-[48rem]',
+    xl: 'max-w-[64rem]'
+};
+const titleId = createId('modal-title');
+const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"], summary, details, audio[controls], video[controls]';
+function handleClose() {
+    open = false;
+}
+function handleBackdropClick(event) {
+    if (closeOnBackdrop && event.target === event.currentTarget) {
+        handleClose();
+    }
+}
+function handleEscape(event) {
+    if (closeOnEscape && event.key === 'Escape') {
+        handleClose();
+    }
+}
+function handleFocusTrap(event) {
+    if (event.key !== 'Tab' || !modalElement)
+        return;
+    const focusableElements = Array.from(modalElement.querySelectorAll(focusableSelector));
+    if (focusableElements.length === 0)
+        return;
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+    if (event.shiftKey) {
+        // Shift+Tab: moving backwards
+        if (document.activeElement === firstFocusable) {
+            event.preventDefault();
+            lastFocusable.focus();
+        }
+    }
+    else {
+        // Tab: moving forwards
+        if (document.activeElement === lastFocusable) {
+            event.preventDefault();
+            firstFocusable.focus();
+        }
+    }
+}
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (open) {
+        // Store previous focus
+        previousFocus = document.activeElement;
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        // Add event listeners
+        document.addEventListener('keydown', handleEscape);
+        document.addEventListener('keydown', handleFocusTrap);
+        // Focus first interactive element
+        requestAnimationFrame(() => {
+            const firstInteractive = modalElement?.querySelector(focusableSelector);
+            firstInteractive?.focus();
+        });
+        return () => {
+            // Restore body scroll
+            document.body.style.overflow = '';
+            // Remove event listeners
+            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener('keydown', handleFocusTrap);
+            // Restore previous focus
+            previousFocus?.focus();
+        };
+    }
+});
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-[var(--z-50)] flex items-center justify-center p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      bind:this={modalElement}
+      class="panel-floating rounded-[var(--radius-lg)] shadow-deep w-full {sizeClasses[size]} {className} animate-[fade-up_0.3s_var(--ease-luxe)] flex flex-col max-h-[90vh]"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {#if title}
+        <div class="flex items-center justify-between p-8 border-b border-border">
+          <h2 id={titleId} class="text-xl font-semibold text-text flex items-center gap-3">
+            {#if iconBefore}
+              <span class="inline-flex items-center justify-center">
+                {@render iconBefore()}
+              </span>
+            {/if}
+            {title}
+          </h2>
+          <button
+            type="button"
+            onclick={handleClose}
+            class="text-text-soft hover:text-text transition-colors"
+            aria-label="Close modal"
+          >
+            <svg class="w-6 h-6" 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>
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-y-auto p-8 max-h-[70vh]" style="scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-base-3);">
+        {@render children?.()}
+      </div>
+
+      {#if footer}
+        <div class="flex items-center justify-end gap-4 p-8 border-t border-border">
+          {@render footer?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface Props {
     open?: boolean;
     title?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -7,6 +7,8 @@ interface Props {
     closeOnEscape?: boolean;
     children?: Snippet;
     footer?: Snippet;
+    iconBefore?: Snippet;
+    class?: string;
 }
 declare const Modal: import("svelte").Component<Props, {}, "open">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/overlays/Popover.svelte

@@ -1,131 +1,106 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { createId } from '../../lib/internal/id.js';
-
-  interface Props {
-    open?: boolean;
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
-    closeOnClickOutside?: boolean;
-    trigger?: Snippet;
-    children?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    placement = 'bottom',
-    closeOnClickOutside = true,
-    trigger,
-    children
-  }: Props = $props();
-
-  let popoverElement = $state<HTMLDivElement>();
-  let wrapperElement = $state<HTMLDivElement>();
-  let actualPlacement = $state(placement);
-
-  const popoverId = createId('popover');
-
-  const placementClasses = {
-    'top': 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-    'top-start': 'bottom-full left-0 mb-2',
-    'top-end': 'bottom-full right-0 mb-2',
-    'bottom': 'top-full left-1/2 -translate-x-1/2 mt-2',
-    'bottom-start': 'top-full left-0 mt-2',
-    'bottom-end': 'top-full right-0 mt-2',
-    'left': 'right-full top-1/2 -translate-y-1/2 mr-2',
-    'right': 'left-full top-1/2 -translate-y-1/2 ml-2'
-  };
-
-  const oppositePlacement = {
-    'top': 'bottom',
-    'top-start': 'bottom-start',
-    'top-end': 'bottom-end',
-    'bottom': 'top',
-    'bottom-start': 'top-start',
-    'bottom-end': 'top-end',
-    'left': 'right',
-    'right': 'left'
-  } as const;
-
-  function toggleOpen() {
-    open = !open;
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (closeOnClickOutside && popoverElement && wrapperElement && !wrapperElement.contains(event.target as Node)) {
-      open = false;
-    }
-  }
-
-  function handleEscape(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      open = false;
-    }
-  }
-
-  // Reset actualPlacement when visibility changes
-  $effect(() => {
-    if (!open) {
-      actualPlacement = placement;
-    }
-  });
-
-  // Check viewport bounds and flip placement if needed
-  $effect(() => {
-    if (typeof window === 'undefined') return;
-    
-    if (open && popoverElement) {
-      const rect = popoverElement.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      // Determine if current placement overflows and flip if needed
-      if (actualPlacement.startsWith('top') && rect.top < 0) {
-        actualPlacement = oppositePlacement[actualPlacement] || placement;
-      } else if (actualPlacement.startsWith('bottom') && rect.bottom > viewportHeight) {
-        actualPlacement = oppositePlacement[actualPlacement] || placement;
-      } else if (actualPlacement === 'left' && rect.left < 0) {
-        actualPlacement = 'right';
-      } else if (actualPlacement === 'right' && rect.right > viewportWidth) {
-        actualPlacement = 'left';
-      }
-    }
-  });
-
-  $effect(() => {
-    if (typeof document === 'undefined') return;
-    
-    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 inline-block">
-  <button
-    type="button"
-    onclick={toggleOpen}
-    aria-haspopup="true"
-    aria-expanded={open}
-    aria-controls={open ? popoverId : undefined}
-    class="bg-transparent border-none p-0 cursor-pointer"
-  >
-    {@render trigger?.()}
-  </button>
-
-  {#if open}
-    <div
-      bind:this={popoverElement}
-      id={popoverId}
-      class="absolute {placementClasses[actualPlacement]} z-50 glass-panel rounded-lg shadow-deep animate-[fade-up_0.2s_var(--ease-luxe)]"
-      role="dialog"
-    >
-      {@render children?.()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open = $bindable(false), placement = 'bottom', closeOnClickOutside = true, trigger, children } = $props();
+let popoverElement = $state();
+let wrapperElement = $state();
+let actualPlacement = $state(placement);
+const popoverId = createId('popover');
+const placementClasses = {
+    'top': 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2',
+    'bottom': 'top-full left-1/2 -translate-x-1/2 mt-2',
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 mt-2',
+    'left': 'right-full top-1/2 -translate-y-1/2 mr-2',
+    'right': 'left-full top-1/2 -translate-y-1/2 ml-2'
+};
+const oppositePlacement = {
+    'top': 'bottom',
+    'top-start': 'bottom-start',
+    'top-end': 'bottom-end',
+    'bottom': 'top',
+    'bottom-start': 'top-start',
+    'bottom-end': 'top-end',
+    'left': 'right',
+    'right': 'left'
+};
+function toggleOpen() {
+    open = !open;
+}
+function handleClickOutside(event) {
+    if (closeOnClickOutside && popoverElement && wrapperElement && !wrapperElement.contains(event.target)) {
+        open = false;
+    }
+}
+function handleEscape(event) {
+    if (event.key === 'Escape') {
+        open = false;
+    }
+}
+// Reset actualPlacement when visibility changes
+$effect(() => {
+    if (!open) {
+        actualPlacement = placement;
+    }
+});
+// Check viewport bounds and flip placement if needed
+$effect(() => {
+    if (typeof window === 'undefined')
+        return;
+    if (open && popoverElement) {
+        const rect = popoverElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Determine if current placement overflows and flip if needed
+        if (actualPlacement.startsWith('top') && rect.top < 0) {
+            actualPlacement = oppositePlacement[actualPlacement] || placement;
+        }
+        else if (actualPlacement.startsWith('bottom') && rect.bottom > viewportHeight) {
+            actualPlacement = oppositePlacement[actualPlacement] || placement;
+        }
+        else if (actualPlacement === 'left' && rect.left < 0) {
+            actualPlacement = 'right';
+        }
+        else if (actualPlacement === 'right' && rect.right > viewportWidth) {
+            actualPlacement = 'left';
+        }
+    }
+});
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    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 inline-block">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    onclick={toggleOpen}
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleOpen(); } }}
+    aria-haspopup="true"
+    aria-expanded={open}
+    aria-controls={open ? popoverId : undefined}
+    class="inline-block"
+  >
+    {@render trigger?.()}
+  </div>
+
+  {#if open}
+    <div
+      bind:this={popoverElement}
+      id={popoverId}
+      class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-lg)] shadow-deep p-4 animate-[fade-up_0.2s_var(--ease-luxe)]"
+      role="dialog"
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

package/dist/components/overlays/ProgressBar.svelte

@@ -1,45 +1,29 @@
-<script lang="ts">
-  interface Props {
-    value: number;
-    max?: number;
-    size?: 'sm' | 'md' | 'lg';
-    showLabel?: boolean;
-    label?: string;
-  }
-
-  let {
-    value,
-    max = 100,
-    size = 'md',
-    showLabel = false,
-    label
-  }: Props = $props();
-
-  const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
-
-  const heightClasses = {
-    sm: 'h-2',
-    md: 'h-3',
-    lg: 'h-4'
-  };
-</script>
-
-<div
-  class="relative bg-[var(--color-base-3)] border border-[var(--color-border)] rounded-[var(--radius-pill)] overflow-hidden shadow-[var(--shadow-deep)] {heightClasses[size]}"
-  role="progressbar"
-  aria-valuenow={value}
-  aria-valuemin="0"
-  aria-valuemax={max}
-  aria-label={label || `${percentage.toFixed(0)}% complete`}
->
-  <div
-    class="h-full bg-[var(--color-accent)] accent-glow transition-all duration-500 ease-[var(--ease-luxe)]"
-    style="width: {percentage}%"
-  />
-
-  {#if showLabel}
-    <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-[var(--color-text)] text-glow">
-      {label || `${percentage.toFixed(0)}%`}
-    </div>
-  {/if}
-</div>
+<script lang="ts">"use strict";
+let { value, max = 100, size = 'md', showLabel = false, label } = $props();
+const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+const heightClasses = {
+    sm: 'h-2',
+    md: 'h-3',
+    lg: 'h-4'
+};
+</script>
+
+<div
+  class="relative bg-[var(--color-base-3)] border border-[var(--color-border)] rounded-[var(--radius-pill)] overflow-hidden shadow-[var(--shadow-deep)] {heightClasses[size]}"
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin="0"
+  aria-valuemax={max}
+  aria-label={label || `${percentage.toFixed(0)}% complete`}
+>
+  <div
+    class="h-full bg-[var(--color-accent)] accent-glow transition-all duration-500 ease-[var(--ease-luxe)]"
+    style="width: {percentage}%"
+  />
+
+  {#if showLabel}
+    <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-[var(--color-text)] text-glow">
+      {label || `${percentage.toFixed(0)}%`}
+    </div>
+  {/if}
+</div>