@getmicdrop/svelte-components 2.8.1 → 3.1.0

package/dist/components/Drawer/Drawer.svelte

@@ -1,7 +1,5 @@
 <script>
   import { createEventDispatcher, onDestroy } from "svelte";
-  import { fly, fade } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
 
   /** @type {boolean} Whether the drawer is visible */
   export let show = false;
@@ -11,26 +9,36 @@
   export let title = "";
   /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
   export let placement = "left";
-  /** @type {string} Width of the drawer (for left/right placement) */
-  export let width = "320px";
-  /** @type {string} Height of the drawer (for top/bottom placement) */
-  export let height = "auto";
-  /** @type {number} Transition duration in ms */
-  export let duration = 200;
+  /** @type {'sm' | 'md' | 'lg' | 'xl' | 'full'} Width preset for left/right drawers */
+  export let width = "md";
   /** @type {boolean} Whether clicking the backdrop closes the drawer */
   export let closeOnBackdropClick = true;
   /** @type {boolean} Whether pressing Escape closes the drawer */
   export let closeOnEscape = true;
   /** @type {string} Optional id for the drawer element */
   export let id = "";
-  /** @type {object|undefined} Custom transition params (flowbite API) */
-  export let transitionParams = undefined;
+  /** @type {boolean} Whether to show swipeable edge handle (bottom placement only) */
+  export let edge = false;
+  /** @type {number} Offset from bottom for edge handle in pixels */
+  export let edgeOffset = 60;
 
   const dispatch = createEventDispatcher();
 
   // Support both show and hidden props (flowbite uses hidden)
   $: isVisible = show || !hidden;
 
+  // Width classes for left/right drawers
+  const widthClasses = {
+    sm: "w-64",
+    md: "w-80",
+    lg: "w-96",
+    xl: "w-[28rem]",
+    full: "w-full"
+  };
+
+  // Get the appropriate width class
+  $: widthClass = widthClasses[width] || widthClasses.md;
+
   function close() {
     hidden = true;
     show = false;
@@ -49,21 +57,14 @@
     }
   }
 
-  // Calculate transition params based on placement (use custom if provided)
-  $: computedTransitionParams = transitionParams || (() => {
-    switch (placement) {
-      case "left":
-        return { x: -320, duration, easing: cubicOut };
-      case "right":
-        return { x: 320, duration, easing: cubicOut };
-      case "top":
-        return { y: -320, duration, easing: cubicOut };
-      case "bottom":
-        return { y: 320, duration, easing: cubicOut };
-      default:
-        return { x: -320, duration, easing: cubicOut };
+  // Handle edge swipe to open drawer
+  function handleEdgeClick() {
+    if (edge && placement === "bottom") {
+      hidden = false;
+      show = true;
+      dispatch("open");
     }
-  })();
+  }
 
   // Lock body scroll when drawer is open
   $: if (typeof document !== "undefined") {
@@ -83,125 +84,69 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-{#if isVisible}
+<!-- Swipeable Edge Handle (bottom placement only) -->
+{#if edge && placement === "bottom" && !isVisible}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class="drawer-backdrop"
-    on:click={handleBackdropClick}
-    transition:fade={{ duration: 150 }}
+    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"
+    on:click={handleEdgeClick}
   >
-    <div
-      {id}
-      class="drawer drawer--{placement}"
-      style="--drawer-width: {width}; --drawer-height: {height};"
-      on:click|stopPropagation
-      transition:fly={computedTransitionParams}
-    >
-      <!-- Optional header with title -->
-      {#if title || $$slots.header}
-        <div class="drawer__header">
-          {#if $$slots.header}
-            <slot name="header" />
-          {:else}
-            <h3 class="drawer__title">{title}</h3>
-          {/if}
-        </div>
-      {/if}
-
-      <!-- Content slot -->
-      <div class="drawer__content">
-        <slot />
-      </div>
-
-      <!-- Actions slot (optional) -->
-      {#if $$slots.actions}
-        <div class="drawer__actions">
-          <slot name="actions" />
-        </div>
-      {/if}
-    </div>
+    <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}
 
-<style>
-  .drawer-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: var(--z-modal, 50);
-    display: flex;
-    touch-action: none;
-  }
-
-  .drawer {
-    position: absolute;
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  /* Placement variants */
-  .drawer--left {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: var(--drawer-width, 320px);
-    max-width: 100vw;
-  }
-
-  .drawer--right {
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: var(--drawer-width, 320px);
-    max-width: 100vw;
-  }
-
-  .drawer--top {
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--drawer-height, auto);
-    max-height: 100vh;
-  }
-
-  .drawer--bottom {
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: var(--drawer-height, auto);
-    max-height: 100vh;
-  }
-
-  .drawer__header {
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    flex-shrink: 0;
-  }
+<!-- Backdrop -->
+{#if isVisible}
+  <!-- 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"
+    on:click={handleBackdropClick}
+  ></div>
+{/if}
 
-  .drawer__title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: hsl(var(--Text-Primary, 220 13% 13%));
-    margin: 0;
-  }
+<!-- Drawer -->
+<div
+  {id}
+  class="
+    fixed z-40 overflow-y-auto bg-white dark:bg-gray-800
+    transition-transform duration-300 ease-in-out
+    {placement === 'left' ? `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700 ${isVisible ? 'translate-x-0' : '-translate-x-full'}` : ''}
+    {placement === 'right' ? `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700 ${isVisible ? 'translate-x-0' : 'translate-x-full'}` : ''}
+    {placement === 'top' ? `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700 ${isVisible ? 'translate-y-0' : '-translate-y-full'}` : ''}
+    {placement === 'bottom' ? `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700 ${isVisible ? 'translate-y-0' : 'translate-y-full'}` : ''}
+  "
+  tabindex="-1"
+  aria-labelledby={title ? `${id}-label` : undefined}
+  aria-hidden={!isVisible}
+>
+  <!-- Optional header with title -->
+  {#if title || $$slots.header}
+    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+      {#if $$slots.header}
+        <slot name="header" />
+      {:else}
+        <h5
+          id={id ? `${id}-label` : undefined}
+          class="text-lg font-semibold text-gray-900 dark:text-white"
+        >
+          {title}
+        </h5>
+      {/if}
+    </div>
+  {/if}
 
-  .drawer__content {
-    flex: 1;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-  }
+  <!-- Content slot -->
+  <div class="flex-1 overflow-y-auto overscroll-contain p-4">
+    <slot />
+  </div>
 
-  .drawer__actions {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-</style>
+  <!-- Actions slot (optional) -->
+  {#if $$slots.actions}
+    <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
+      <slot name="actions" />
+    </div>
+  {/if}
+</div>

package/dist/components/Drawer/Drawer.svelte.d.ts

@@ -1,23 +1,22 @@
 export default Drawer;
 type Drawer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    duration?: number | undefined;
     title?: string | undefined;
     show?: boolean | undefined;
     hidden?: boolean | undefined;
     placement?: "left" | "right" | "top" | "bottom" | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
+    width?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
     closeOnBackdropClick?: boolean | undefined;
     closeOnEscape?: boolean | undefined;
     id?: string | undefined;
-    transitionParams?: object | undefined;
+    edge?: boolean | undefined;
+    edgeOffset?: number | undefined;
 }, {
     header: {};
     default: {};
     actions: {};
 }>, {
-    click: PointerEvent;
     close: CustomEvent<any>;
+    open: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -28,24 +27,23 @@ type Drawer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    duration?: number | undefined;
     title?: string | undefined;
     show?: boolean | undefined;
     hidden?: boolean | undefined;
     placement?: "left" | "right" | "top" | "bottom" | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
+    width?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
     closeOnBackdropClick?: boolean | undefined;
     closeOnEscape?: boolean | undefined;
     id?: string | undefined;
-    transitionParams?: object | undefined;
+    edge?: boolean | undefined;
+    edgeOffset?: number | undefined;
 }, {
     header: {};
     default: {};
     actions: {};
 }>, {
-    click: PointerEvent;
     close: CustomEvent<any>;
+    open: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {

package/dist/components/Drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Drawer/Drawer.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;;;;;;;;;;;uBAfW,MAAM,GAAC,SAAS;;;;;;;;;;;;;;eAe+N;sCATpN,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Drawer/Drawer.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwKA;;;;;;;;;;;;;;;;;;;;;;;;eAAuO;sCATjM,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Dropdown/Dropdown.svelte

@@ -5,8 +5,8 @@
   export let open = false;
   /** @type {string} Current active URL for highlighting (flowbite API) */
   export let activeUrl = "";
-  /** @type {'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top'} Placement */
-  export let placement = "bottom-start";
+  /** @type {'bottom' | 'top' | 'left' | 'right'} Placement relative to trigger */
+  export let placement = "bottom";
   /** @type {string} Additional CSS classes */
   let className = "";
   export { className as class };
@@ -16,6 +16,7 @@
   const dispatch = createEventDispatcher();
 
   let dropdownRef;
+  let containerRef;
   let focusedIndex = -1;
   let menuItems = [];
 
@@ -36,27 +37,37 @@
     menuItems[focusedIndex]?.focus();
   }
 
-  // Get trigger element (previous sibling)
+  // Get trigger element (previous sibling of the container)
   function getTriggerElement() {
-    const parent = dropdownRef?.parentElement;
+    const parent = containerRef?.parentElement;
     if (parent) {
       const siblings = Array.from(parent.children);
-      const dropdownIndex = siblings.indexOf(dropdownRef);
-      if (dropdownIndex > 0) {
-        return siblings[dropdownIndex - 1];
+      const containerIndex = siblings.indexOf(containerRef);
+      if (containerIndex > 0) {
+        return siblings[containerIndex - 1];
       }
     }
     return null;
   }
 
+  // CRITICAL FIX: Click-outside detection using mousedown for reliable detection
   function handleClickOutside(event) {
-    if (dropdownRef && !dropdownRef.contains(event.target)) {
-      const trigger = getTriggerElement();
-      if (trigger?.contains(event.target)) {
-        return; // Let the trigger handle toggling
-      }
-      open = false;
+    if (!open) return;
+
+    // Check if click is inside the dropdown menu
+    if (dropdownRef && dropdownRef.contains(event.target)) {
+      return;
+    }
+
+    // Check if click is on the trigger element
+    const trigger = getTriggerElement();
+    if (trigger && trigger.contains(event.target)) {
+      return; // Let the trigger handle toggling
     }
+
+    // Click was outside - close the dropdown
+    open = false;
+    dispatch("close");
   }
 
   function handleKeydown(event) {
@@ -73,6 +84,7 @@
         open = false;
         trigger?.focus();
         event.preventDefault();
+        dispatch("close");
         break;
       case "ArrowDown":
         focusItem(focusedIndex + 1);
@@ -92,6 +104,7 @@
         break;
       case "Tab":
         open = false;
+        dispatch("close");
         break;
     }
   }
@@ -103,13 +116,14 @@
   }
 
   onMount(() => {
-    document.addEventListener("click", handleClickOutside, true);
+    // Use mousedown for click-outside to capture before click completes
+    document.addEventListener("mousedown", handleClickOutside, true);
     document.addEventListener("keydown", handleKeydown);
   });
 
   onDestroy(() => {
     if (typeof document !== "undefined") {
-      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("mousedown", handleClickOutside, true);
       document.removeEventListener("keydown", handleKeydown);
     }
   });
@@ -118,76 +132,33 @@
   import { setContext } from "svelte";
   setContext("dropdown", {
     activeUrl,
-    close: () => { open = false; }
+    close: () => {
+      open = false;
+      dispatch("close");
+    }
   });
-</script>
-
-{#if open}
-  <div
-    bind:this={dropdownRef}
-    class="dropdown dropdown--{placement} {className}"
-    role="menu"
-    aria-label={ariaLabel}
-    {...$$restProps}
-  >
-    <slot />
-  </div>
-{/if}
-
-<style>
-  .dropdown {
-    position: absolute;
-    z-index: 50;
-    min-width: 10rem;
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    border-radius: 0.5rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    padding: 0.25rem 0;
-    margin-top: 0.25rem;
-  }
 
-  .dropdown--bottom-start {
-    top: 100%;
-    left: 0;
-  }
-
-  .dropdown--bottom-end {
-    top: 100%;
-    right: 0;
-  }
-
-  .dropdown--bottom {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .dropdown--top-start {
-    bottom: 100%;
-    left: 0;
-    margin-top: 0;
-    margin-bottom: 0.25rem;
-  }
-
-  .dropdown--top-end {
-    bottom: 100%;
-    right: 0;
-    margin-top: 0;
-    margin-bottom: 0.25rem;
-  }
-
-  .dropdown--top {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-top: 0;
-    margin-bottom: 0.25rem;
-  }
+  // Placement classes following Flowbite patterns
+  const placementClasses = {
+    bottom: "top-full left-0 mt-1",
+    top: "bottom-full left-0 mb-1",
+    left: "right-full top-0 mr-1",
+    right: "left-full top-0 ml-1"
+  };
+</script>
 
-  /* Dark mode */
-  :global(.dark) .dropdown {
-    background-color: hsl(var(--BG-Primary, 220 13% 15%));
-    border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
-  }
-</style>
+<div bind:this={containerRef} class="relative inline-block">
+  {#if open}
+    <div
+      bind:this={dropdownRef}
+      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 {placementClasses[placement] || placementClasses.bottom} {className}"
+      role="menu"
+      aria-label={ariaLabel}
+      {...$$restProps}
+    >
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        <slot />
+      </ul>
+    </div>
+  {/if}
+</div>

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

@@ -3,12 +3,14 @@ type Dropdown = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;
     class?: string | undefined;
     open?: boolean | undefined;
-    placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+    placement?: "left" | "right" | "top" | "bottom" | undefined;
     activeUrl?: string | undefined;
     ariaLabel?: string | undefined;
 }, {
     default: {};
 }>, {
+    close: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -19,12 +21,14 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     [x: string]: any;
     class?: string | undefined;
     open?: boolean | undefined;
-    placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+    placement?: "left" | "right" | "top" | "bottom" | undefined;
     activeUrl?: string | undefined;
     ariaLabel?: string | undefined;
 }, {
     default: {};
 }>, {
+    close: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgKA;;;;;;;;;;;;;eAAyL;sCATnJ,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA2LA;;;;;;;;;;;;;;;eAAyL;sCATnJ,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Dropdown/DropdownItem.svelte

@@ -31,81 +31,39 @@
       handleClick(event);
     }
   }
+
+  // Flowbite dropdown item classes
+  const baseClasses = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white";
+  const activeClasses = "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white";
+  const disabledClasses = "opacity-50 cursor-not-allowed";
+  const defaultClasses = "text-gray-700 dark:text-gray-200";
 </script>
 
 {#if href}
-  <a
-    {href}
-    class="dropdown-item {className}"
-    class:dropdown-item--active={isActive}
-    class:dropdown-item--disabled={disabled}
-    role="menuitem"
-    tabindex={disabled ? -1 : 0}
-    on:click={handleClick}
-    on:keydown={handleKeydown}
-  >
-    <slot />
-  </a>
+  <li>
+    <a
+      {href}
+      class="{baseClasses} {isActive ? activeClasses : defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      on:click={handleClick}
+      on:keydown={handleKeydown}
+    >
+      <slot />
+    </a>
+  </li>
 {:else}
-  <button
-    type="button"
-    class="dropdown-item {className}"
-    class:dropdown-item--disabled={disabled}
-    role="menuitem"
-    tabindex={disabled ? -1 : 0}
-    {disabled}
-    on:click={handleClick}
-    on:keydown={handleKeydown}
-  >
-    <slot />
-  </button>
+  <li>
+    <button
+      type="button"
+      class="{baseClasses} {defaultClasses} {disabled ? disabledClasses : 'cursor-pointer'} {className}"
+      role="menuitem"
+      tabindex={disabled ? -1 : 0}
+      {disabled}
+      on:click={handleClick}
+      on:keydown={handleKeydown}
+    >
+      <slot />
+    </button>
+  </li>
 {/if}
-
-<style>
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-    color: hsl(var(--Text-Primary, 220 13% 13%));
-    background: transparent;
-    border: none;
-    text-align: left;
-    cursor: pointer;
-    text-decoration: none;
-    transition: background-color 0.15s ease;
-  }
-
-  .dropdown-item:hover:not(.dropdown-item--disabled) {
-    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
-  }
-
-  .dropdown-item:focus {
-    outline: none;
-    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
-  }
-
-  .dropdown-item--active {
-    background-color: hsl(var(--Brand-Primary, 221 83% 53%) / 0.1);
-    color: hsl(var(--Brand-Primary, 221 83% 53%));
-  }
-
-  .dropdown-item--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Dark mode */
-  :global(.dark) .dropdown-item {
-    color: hsl(var(--Text-Primary, 0 0% 95%));
-  }
-
-  :global(.dark) .dropdown-item:hover:not(.dropdown-item--disabled) {
-    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
-  }
-
-  :global(.dark) .dropdown-item:focus {
-    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
-  }
-</style>