@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/overlays/Drawer.svelte

@@ -1,167 +1,158 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { createId } from '../../lib/internal/id.js';
-  import ScrollArea from '../utilities/ScrollArea.svelte';
-
-  interface Props {
-    open?: boolean;
-    side?: 'left' | 'right' | 'top' | 'bottom';
-    size?: 'sm' | 'md' | 'lg';
-    title?: string;
-    closeOnBackdrop?: boolean;
-    closeOnEscape?: boolean;
-    children?: Snippet;
-    footer?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    side = 'right',
-    size = 'md',
-    title,
-    closeOnBackdrop = true,
-    closeOnEscape = true,
-    children,
-    footer
-  }: Props = $props();
-
-  let drawerElement = $state<HTMLDivElement>();
-  let previousFocus = $state<HTMLElement | null>(null);
-
-  const titleId = createId('drawer-title');
-
-  const sizeClasses = {
-    left: {
-      sm: 'max-w-[20rem]',
-      md: 'max-w-[28rem]',
-      lg: 'max-w-[36rem]'
-    },
-    right: {
-      sm: 'max-w-[20rem]',
-      md: 'max-w-[28rem]',
-      lg: 'max-w-[36rem]'
-    },
-    top: {
-      sm: 'max-h-[20rem]',
-      md: 'max-h-[28rem]',
-      lg: 'max-h-[36rem]'
-    },
-    bottom: {
-      sm: 'max-h-[20rem]',
-      md: 'max-h-[28rem]',
-      lg: 'max-h-[36rem]'
-    }
-  };
-
-  const positionClasses = {
-    left: 'left-0 top-0 h-full',
-    right: 'right-0 top-0 h-full',
-    top: 'top-0 left-0 w-full',
-    bottom: 'bottom-0 left-0 w-full'
-  };
-
-  const animationClasses = {
-    left: 'animate-[slide-in-left_0.3s_var(--ease-luxe)]',
-    right: 'animate-[slide-in-right_0.3s_var(--ease-luxe)]',
-    top: 'animate-[slide-in-top_0.3s_var(--ease-luxe)]',
-    bottom: 'animate-[slide-in-bottom_0.3s_var(--ease-luxe)]'
-  };
-
-  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 = drawerElement?.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 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
-    onclick={handleBackdropClick}
-    role="presentation"
-  >
-    <div
-      bind:this={drawerElement}
-      class="glass-panel shadow-deep fixed {positionClasses[side]} {sizeClasses[side][size]} {animationClasses[side]} flex flex-col"
-      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 drawer"
-          >
-            <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-hidden">
-        <ScrollArea height="100%">
-          <div class="p-6">
-            {@render children?.()}
-          </div>
-        </ScrollArea>
-      </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';
+import ScrollArea from '../utilities/ScrollArea.svelte';
+let { open = $bindable(false), side = 'right', size = 'md', title, closeOnBackdrop = true, closeOnEscape = true, children, footer, iconBefore, class: className = '' } = $props();
+let drawerElement = $state();
+let previousFocus = $state(null);
+const titleId = createId('drawer-title');
+const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"], summary, details, audio[controls], video[controls]';
+const sizeClasses = {
+    left: {
+        sm: 'max-w-[20rem]',
+        md: 'max-w-[28rem]',
+        lg: 'max-w-[36rem]'
+    },
+    right: {
+        sm: 'max-w-[20rem]',
+        md: 'max-w-[28rem]',
+        lg: 'max-w-[36rem]'
+    },
+    top: {
+        sm: 'max-h-[20rem]',
+        md: 'max-h-[28rem]',
+        lg: 'max-h-[36rem]'
+    },
+    bottom: {
+        sm: 'max-h-[20rem]',
+        md: 'max-h-[28rem]',
+        lg: 'max-h-[36rem]'
+    }
+};
+const positionClasses = {
+    left: 'left-0 top-0 h-full',
+    right: 'right-0 top-0 h-full',
+    top: 'top-0 left-0 w-full',
+    bottom: 'bottom-0 left-0 w-full'
+};
+const animationClasses = {
+    left: 'animate-[slide-in-left_0.3s_var(--ease-luxe)]',
+    right: 'animate-[slide-in-right_0.3s_var(--ease-luxe)]',
+    top: 'animate-[slide-in-top_0.3s_var(--ease-luxe)]',
+    bottom: 'animate-[slide-in-bottom_0.3s_var(--ease-luxe)]'
+};
+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' || !drawerElement)
+        return;
+    const focusableElements = Array.from(drawerElement.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 = drawerElement?.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)] bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      bind:this={drawerElement}
+      class="panel-floating shadow-deep fixed {positionClasses[side]} {sizeClasses[side][size]} {animationClasses[side]} {className} flex flex-col"
+      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 drawer"
+          >
+            <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-hidden">
+        <ScrollArea height="100%">
+          <div class="p-8">
+            {@render children?.()}
+          </div>
+        </ScrollArea>
+      </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/Drawer.svelte.d.ts

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

package/dist/components/overlays/Dropdown.svelte

@@ -1,30 +1,62 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    open?: boolean;
-    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-    children?: Snippet;
-  }
-
-  let {
-    open = $bindable(false),
-    placement = 'bottom-start',
-    children
-  }: Props = $props();
-
-  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'
-  };
-</script>
-
-{#if open}
-  <div
-    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}
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open = $bindable(false), placement = 'bottom-start', closeOnClickOutside = true, trigger, children } = $props();
+let dropdownElement = $state();
+let wrapperElement = $state();
+const dropdownId = createId('dropdown');
+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 toggleOpen() {
+    open = !open;
+}
+function handleClickOutside(event) {
+    if (closeOnClickOutside && dropdownElement && wrapperElement && !wrapperElement.contains(event.target)) {
+        open = false;
+    }
+}
+function handleEscape(event) {
+    if (event.key === 'Escape') {
+        open = false;
+    }
+}
+$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 ? dropdownId : undefined}
+    class="inline-block"
+  >
+    {@render trigger?.()}
+  </div>
+
+  {#if open}
+    <div
+      bind:this={dropdownElement}
+      id={dropdownId}
+      class="absolute {placementClasses[placement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-lg)] shadow-[var(--shadow-deep)] min-w-[12rem] animate-[fade-up_0.2s_var(--ease-luxe)]"
+      role="menu"
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

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

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 interface Props {
     open?: boolean;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    closeOnClickOutside?: boolean;
+    trigger?: Snippet;
     children?: Snippet;
 }
 declare const Dropdown: import("svelte").Component<Props, {}, "open">;