@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/primitives/Drawer/Drawer.svelte

@@ -59,35 +59,35 @@
   };
 
   let widthClass = $derived(widthClasses[width] || widthClasses.md);
-
-  // Compute fly transition direction based on placement
-  let flyParams = $derived.by(() => {
-    const distance = 400;
-    switch (placement) {
-      case 'left': return { x: -distance, duration: 300 };
-      case 'right': return { x: distance, duration: 300 };
-      case 'top': return { y: -distance, duration: 300 };
-      case 'bottom': return { y: distance, duration: 300 };
-      default: return { x: -distance, duration: 300 };
-    }
-  });
-
-  // Placement classes (without transform - we use Svelte transitions now)
-  let placementClasses = $derived.by(() => {
-    switch (placement) {
-      case 'left':
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
-      case 'right':
-        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700`;
-      case 'top':
-        return `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700`;
-      case 'bottom':
-        return `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700`;
-      default:
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
-    }
-  });
-
+
+  // Compute fly transition direction based on placement
+  let flyParams = $derived.by(() => {
+    const distance = 400;
+    switch (placement) {
+      case 'left': return { x: -distance, duration: 300 };
+      case 'right': return { x: distance, duration: 300 };
+      case 'top': return { y: -distance, duration: 300 };
+      case 'bottom': return { y: distance, duration: 300 };
+      default: return { x: -distance, duration: 300 };
+    }
+  });
+
+  // Placement classes (without transform - we use Svelte transitions now)
+  let placementClasses = $derived.by(() => {
+    switch (placement) {
+      case 'left':
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+      case 'right':
+        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700`;
+      case 'top':
+        return `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700`;
+      case 'bottom':
+        return `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700`;
+      default:
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+    }
+  });
+
   function close() {
     hidden = true;
     show = false;
@@ -125,15 +125,15 @@
       }
     }
   }
-
-  function handleEdgeClick() {
-    if (edge && placement === "bottom") {
-      hidden = false;
-      show = true;
-      onopen?.();
-    }
-  }
-
+
+  function handleEdgeClick() {
+    if (edge && placement === "bottom") {
+      hidden = false;
+      show = true;
+      onopen?.();
+    }
+  }
+
   // Lock body scroll when drawer is open
   $effect(() => {
     if (typeof document !== "undefined") {
@@ -152,85 +152,85 @@
       }
     }
   });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- Edge trigger for bottom placement -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-{#if edge && placement === "bottom" && !isVisible}
-  <div
-    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
-    style="bottom: {edgeOffset}px"
-    onclick={handleEdgeClick}
-  >
-    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
-  </div>
-{/if}
-
-<!-- Only render when visible - no transform issues with portals! -->
-{#if isVisible}
-  <!-- Backdrop -->
-  {#if backdrop}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
-      onclick={handleBackdropClick}
-      transition:fade={{ duration: 200 }}
-      role="presentation"
-    ></div>
-  {/if}
-
-  <!-- Drawer panel - proper dialog with focus trap -->
-  <aside
-    bind:this={drawerElement}
-    {id}
-    class="
-      fixed z-40 flex flex-col bg-white dark:bg-gray-800
-      {placementClasses}
-      {className}
-    "
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby={title ? `${id}-label` : undefined}
-    tabindex="-1"
-    transition:fly={flyParams}
-    {...restProps}
-  >
-    <!-- Header (sticky) -->
-    {#if title || header}
-      <header class="shrink-0 p-4 border-b border-gray-200 dark:border-gray-700">
-        {#if header}
-          {@render header()}
-        {:else}
-          <h5
-            id={id ? `${id}-label` : undefined}
-            class={typography.h3}
-          >
-            {title}
-          </h5>
-        {/if}
-      </header>
-    {/if}
-
-    <!-- Content (single scrollable area) -->
-    <div class="flex-1 overflow-y-auto overscroll-contain">
-      {#if children}{@render children()}{/if}
-    </div>
-
-    <!-- Actions (sticky footer) -->
-    {#if actions}
-      <footer class="shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
-        {@render actions()}
-      </footer>
-    {/if}
-  </aside>
-{/if}
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- Edge trigger for bottom placement -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#if edge && placement === "bottom" && !isVisible}
+  <div
+    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
+    style="bottom: {edgeOffset}px"
+    onclick={handleEdgeClick}
+  >
+    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
+  </div>
+{/if}
+
+<!-- Only render when visible - no transform issues with portals! -->
+{#if isVisible}
+  <!-- Backdrop -->
+  {#if backdrop}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
+      onclick={handleBackdropClick}
+      transition:fade={{ duration: 200 }}
+      role="presentation"
+    ></div>
+  {/if}
+
+  <!-- Drawer panel - proper dialog with focus trap -->
+  <aside
+    bind:this={drawerElement}
+    {id}
+    class="
+      fixed z-40 flex flex-col bg-white dark:bg-gray-800
+      {placementClasses}
+      {className}
+    "
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={title ? `${id}-label` : undefined}
+    tabindex="-1"
+    transition:fly={flyParams}
+    {...restProps}
+  >
+    <!-- Header (sticky) -->
+    {#if title || header}
+      <header class="shrink-0 p-4 border-b border-gray-200 dark:border-gray-700">
+        {#if header}
+          {@render header()}
+        {:else}
+          <h5
+            id={id ? `${id}-label` : undefined}
+            class={typography.h3}
+          >
+            {title}
+          </h5>
+        {/if}
+      </header>
+    {/if}
+
+    <!-- Content (single scrollable area) -->
+    <div class="flex-1 overflow-y-auto overscroll-contain">
+      {#if children}{@render children()}{/if}
+    </div>
+
+    <!-- Actions (sticky footer) -->
+    {#if actions}
+      <footer class="shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
+        {@render actions()}
+      </footer>
+    {/if}
+  </aside>
+{/if}

package/dist/primitives/Dropdown/Dropdown.stories.svelte

@@ -1,137 +1,137 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Dropdown from './Dropdown.svelte';
-  import DropdownItem from './DropdownItem.svelte';
-  import Button from '../Button/Button.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Dropdown',
-    component: Dropdown,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Dropdown menu component for actions and navigation.',
-        },
-      },
-    },
-  });
-
-  let open1 = $state(false);
-  let open2 = $state(false);
-  let open3 = $state(false);
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="relative inline-block">
-      <Button onclick={() => open1 = !open1}>
-        Options ▼
-      </Button>
-      {#if open1}
-        <Dropdown class="absolute mt-1 z-10">
-          <DropdownItem onclick={() => { console.log('Edit'); open1 = false; }}>Edit</DropdownItem>
-          <DropdownItem onclick={() => { console.log('Duplicate'); open1 = false; }}>Duplicate</DropdownItem>
-          <DropdownItem onclick={() => { console.log('Archive'); open1 = false; }}>Archive</DropdownItem>
-        </Dropdown>
-      {/if}
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Dividers">
-  {#snippet template()}
-    <div class="relative inline-block">
-      <Button onclick={() => open2 = !open2}>
-        Actions ▼
-      </Button>
-      {#if open2}
-        <Dropdown class="absolute mt-1 z-10">
-          <DropdownItem onclick={() => open2 = false}>View Details</DropdownItem>
-          <DropdownItem onclick={() => open2 = false}>Edit</DropdownItem>
-          <div class="border-t my-1"></div>
-          <DropdownItem onclick={() => open2 = false}>Share</DropdownItem>
-          <DropdownItem onclick={() => open2 = false}>Export</DropdownItem>
-          <div class="border-t my-1"></div>
-          <DropdownItem onclick={() => open2 = false} class="text-red-600">Delete</DropdownItem>
-        </Dropdown>
-      {/if}
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Right Aligned">
-  {#snippet template()}
-    <div class="flex justify-end">
-      <div class="relative inline-block">
-        <Button onclick={() => open3 = !open3}>
-          Menu ▼
-        </Button>
-        {#if open3}
-          <Dropdown class="absolute mt-1 right-0 z-10">
-            <DropdownItem onclick={() => open3 = false}>Profile</DropdownItem>
-            <DropdownItem onclick={() => open3 = false}>Settings</DropdownItem>
-            <DropdownItem onclick={() => open3 = false}>Help</DropdownItem>
-            <div class="border-t my-1"></div>
-            <DropdownItem onclick={() => open3 = false}>Sign Out</DropdownItem>
-          </Dropdown>
-        {/if}
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Icons">
-  {#snippet template()}
-    <div class="relative inline-block">
-      <Button onclick={() => open1 = !open1}>
-        User Menu ▼
-      </Button>
-      {#if open1}
-        <Dropdown class="absolute mt-1 z-10 min-w-[180px]">
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">👤</span> Profile
-          </DropdownItem>
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">⚙️</span> Settings
-          </DropdownItem>
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">📊</span> Analytics
-          </DropdownItem>
-          <div class="border-t my-1"></div>
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">🚪</span> Sign Out
-          </DropdownItem>
-        </Dropdown>
-      {/if}
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="In Card Context">
-  {#snippet template()}
-    <div class="border rounded-lg p-4 max-w-sm">
-      <div class="flex justify-between items-center mb-4">
-        <h3 class="font-medium">Card Title</h3>
-        <div class="relative">
-          <button
-            class="p-1 hover:bg-gray-100 rounded"
-            onclick={() => open1 = !open1}
-          >
-            ⋮
-          </button>
-          {#if open1}
-            <Dropdown class="absolute mt-1 right-0 z-10">
-              <DropdownItem onclick={() => open1 = false}>Edit</DropdownItem>
-              <DropdownItem onclick={() => open1 = false}>Share</DropdownItem>
-              <DropdownItem onclick={() => open1 = false} class="text-red-600">Delete</DropdownItem>
-            </Dropdown>
-          {/if}
-        </div>
-      </div>
-      <p class="text-gray-600 text-sm">
-        This is a card with a dropdown menu in the header for common actions.
-      </p>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Dropdown from './Dropdown.svelte';
+  import DropdownItem from './DropdownItem.svelte';
+  import Button from '../Button/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Dropdown menu component for actions and navigation.',
+        },
+      },
+    },
+  });
+
+  let open1 = $state(false);
+  let open2 = $state(false);
+  let open3 = $state(false);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        Options ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => { console.log('Edit'); open1 = false; }}>Edit</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Duplicate'); open1 = false; }}>Duplicate</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Archive'); open1 = false; }}>Archive</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Dividers">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open2 = !open2}>
+        Actions ▼
+      </Button>
+      {#if open2}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => open2 = false}>View Details</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Edit</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false}>Share</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Export</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false} class="text-red-600">Delete</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Right Aligned">
+  {#snippet template()}
+    <div class="flex justify-end">
+      <div class="relative inline-block">
+        <Button onclick={() => open3 = !open3}>
+          Menu ▼
+        </Button>
+        {#if open3}
+          <Dropdown class="absolute mt-1 right-0 z-10">
+            <DropdownItem onclick={() => open3 = false}>Profile</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Settings</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Help</DropdownItem>
+            <div class="border-t my-1"></div>
+            <DropdownItem onclick={() => open3 = false}>Sign Out</DropdownItem>
+          </Dropdown>
+        {/if}
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Icons">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        User Menu ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10 min-w-[180px]">
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">👤</span> Profile
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">⚙️</span> Settings
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">📊</span> Analytics
+          </DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">🚪</span> Sign Out
+          </DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="In Card Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4 max-w-sm">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="font-medium">Card Title</h3>
+        <div class="relative">
+          <button
+            class="p-1 hover:bg-gray-100 rounded"
+            onclick={() => open1 = !open1}
+          >
+            ⋮
+          </button>
+          {#if open1}
+            <Dropdown class="absolute mt-1 right-0 z-10">
+              <DropdownItem onclick={() => open1 = false}>Edit</DropdownItem>
+              <DropdownItem onclick={() => open1 = false}>Share</DropdownItem>
+              <DropdownItem onclick={() => open1 = false} class="text-red-600">Delete</DropdownItem>
+            </Dropdown>
+          {/if}
+        </div>
+      </div>
+      <p class="text-gray-600 text-sm">
+        This is a card with a dropdown menu in the header for common actions.
+      </p>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -144,17 +144,17 @@
     right: "left-full top-0 ml-1"
   };
 </script>
-
-{#if open}
-  <div
-    bind:this={containerRef}
-    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
-    role="menu"
-    aria-label={ariaLabel}
-    {...restProps}
-  >
-    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </ul>
-  </div>
-{/if}
+
+{#if open}
+  <div
+    bind:this={containerRef}
+    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
+    role="menu"
+    aria-label={ariaLabel}
+    {...restProps}
+  >
+    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </ul>
+  </div>
+{/if}