@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Dropdown/Dropdown.spec.js

@@ -0,0 +1,366 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
+import Dropdown from './Dropdown.svelte';
+
+describe('Dropdown Component', () => {
+  test('does not render when open is false', () => {
+    const { container } = render(Dropdown, { props: { open: false } });
+    expect(container.querySelector('[role="menu"]')).not.toBeInTheDocument();
+  });
+
+  test('renders when open is true', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+
+  test('has role="menu"', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toBeInTheDocument();
+  });
+
+  test('applies default ariaLabel', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveAttribute('aria-label', 'Menu');
+  });
+
+  test('applies custom ariaLabel', () => {
+    const { container } = render(Dropdown, { props: { open: true, ariaLabel: 'Options' } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveAttribute('aria-label', 'Options');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Dropdown, { props: { open: true, class: 'custom-dropdown' } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('custom-dropdown');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Dropdown, { props: { open: true, 'data-testid': 'my-dropdown' } });
+    const menu = container.querySelector('[data-testid="my-dropdown"]');
+    expect(menu).toBeInTheDocument();
+  });
+});
+
+describe('Dropdown Styling', () => {
+  test('has absolute positioning', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('absolute');
+  });
+
+  test('has z-10 for stacking', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('z-10');
+  });
+
+  test('has bg-white background', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('bg-white');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('has rounded-lg border radius', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('rounded-lg');
+  });
+
+  test('has shadow-lg for elevation', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('shadow-lg');
+  });
+
+  test('has w-44 default width', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('w-44');
+  });
+
+  test('has divider classes', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('divide-y');
+    expect(menu).toHaveClass('divide-gray-100');
+  });
+});
+
+describe('Dropdown List', () => {
+  test('contains ul element', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toBeInTheDocument();
+  });
+
+  test('ul has py-2 padding', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('py-2');
+  });
+
+  test('ul has text-sm sizing', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('text-sm');
+  });
+
+  test('ul has text-gray-700 color', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('text-gray-700');
+  });
+
+  test('ul has dark mode text color', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('dark:text-gray-200');
+  });
+});
+
+describe('Dropdown Props', () => {
+  test('open defaults to false', () => {
+    const { container } = render(Dropdown);
+    expect(container.querySelector('[role="menu"]')).not.toBeInTheDocument();
+  });
+
+  test('placement defaults to bottom', () => {
+    // Placement affects positioning classes
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    // Default bottom placement should exist without explicit placement classes from other positions
+    expect(menu).toBeInTheDocument();
+  });
+
+  test('activeUrl can be set', () => {
+    // activeUrl is passed via context to child items
+    const { container } = render(Dropdown, { props: { open: true, activeUrl: '/test' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+});
+
+describe('Dropdown Callbacks', () => {
+  test('onclose callback prop is accepted', () => {
+    const onclose = vi.fn();
+    const { container } = render(Dropdown, { props: { open: true, onclose } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+    // The onclose callback is triggered by keyboard/click events, tested in integration
+  });
+});
+
+describe('Dropdown Keyboard Navigation', () => {
+  let cleanup;
+
+  beforeEach(() => {
+    // Clean up any existing event listeners
+    cleanup = null;
+  });
+
+  afterEach(() => {
+    if (cleanup) {
+      cleanup();
+    }
+  });
+
+  test('Escape key closes dropdown and calls onclose', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    expect(ul).toBeInTheDocument();
+
+    // Simulate Escape key from within the dropdown ul (dropdownRef)
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    document.dispatchEvent(event);
+
+    expect(onclose).toHaveBeenCalled();
+  });
+
+  test('Tab key closes dropdown and calls onclose', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+
+    // Simulate Tab key from within the dropdown ul (dropdownRef)
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    document.dispatchEvent(event);
+
+    expect(onclose).toHaveBeenCalled();
+  });
+
+  test('ArrowDown key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('ArrowUp key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('Home key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('End key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('keyboard events do not trigger when dropdown is closed', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: false, onclose } });
+    cleanup = result.unmount;
+
+    // Simulate Escape key when closed
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    document.dispatchEvent(event);
+
+    // onclose should not be called when dropdown is already closed
+    expect(onclose).not.toHaveBeenCalled();
+  });
+});
+
+describe('Dropdown Click Outside', () => {
+  let cleanup;
+
+  afterEach(() => {
+    if (cleanup) {
+      cleanup();
+    }
+  });
+
+  test('clicking outside closes dropdown and calls onclose', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const menu = result.container.querySelector('[role="menu"]');
+    expect(menu).toBeInTheDocument();
+
+    // Click outside the dropdown
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+
+    const clickEvent = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: outsideElement, enumerable: true });
+    document.dispatchEvent(clickEvent);
+
+    expect(onclose).toHaveBeenCalled();
+
+    document.body.removeChild(outsideElement);
+  });
+
+  test('clicking inside dropdown does not close it', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+
+    // Click inside the dropdown (on the ul element which is a child)
+    const clickEvent = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: ul, enumerable: true });
+    document.dispatchEvent(clickEvent);
+
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  test('does not handle click outside when dropdown is closed', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: false, onclose } });
+    cleanup = result.unmount;
+
+    // Click outside
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+
+    const clickEvent = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: outsideElement, enumerable: true });
+    document.dispatchEvent(clickEvent);
+
+    expect(onclose).not.toHaveBeenCalled();
+
+    document.body.removeChild(outsideElement);
+  });
+});
+
+describe('Dropdown Context', () => {
+  test('sets up dropdown context with activeUrl', () => {
+    const { container } = render(Dropdown, { props: { open: true, activeUrl: '/test-url' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+
+  test('context close function calls onclose', () => {
+    const onclose = vi.fn();
+    render(Dropdown, { props: { open: true, onclose } });
+    // Context is tested through integration with child components
+    expect(onclose).not.toHaveBeenCalled(); // Not called until context.close() is invoked
+  });
+});
+
+describe('Dropdown Lifecycle', () => {
+  test('cleans up event listeners on destroy', () => {
+    const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
+    const result = render(Dropdown, { props: { open: true } });
+
+    result.unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('mousedown', expect.any(Function), true);
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+
+    removeEventListenerSpy.mockRestore();
+  });
+});

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}

package/dist/primitives/Dropdown/DropdownItem.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DropdownItem.spec.d.ts.map

package/dist/primitives/Dropdown/DropdownItem.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItem.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/DropdownItem.spec.js"],"names":[],"mappings":""}