flowbite-svelte 1.5.2 → 1.5.3

package/dist/forms/textarea/Textarea.svelte

@@ -48,7 +48,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L907)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L908)
 ## Props
 @prop header
 @prop footer

package/dist/forms/textarea/Textarea.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TextareaProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L907)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L908)
  * ## Props
  * @prop header
  * @prop footer

package/dist/forms/timepicker/Timepicker.svelte

@@ -220,7 +220,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L879)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L880)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L879)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L880)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"

package/dist/forms/toggle/Toggle.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L927)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L928)
 ## Props
 @prop children
 @prop size = "default"

package/dist/forms/toggle/Toggle.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ToggleProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L927)
+ * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L928)
  * ## Props
  * @prop children
  * @prop size = "default"

package/dist/gallery/Gallery.svelte

@@ -35,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L944)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L945)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

@@ -2,7 +2,7 @@ import { type GalleryProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L944)
+ * [GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L945)
  * ## Props
  * @prop children
  * @prop figure

package/dist/indicator/Indicator.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L955)
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L956)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/indicator/Indicator.svelte.d.ts

@@ -2,7 +2,7 @@ import { type IndicatorProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L955)
+ * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L956)
  * ## Props
  * @prop children
  * @prop color = "primary"

package/dist/kbd/Kbd.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L966)
+[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L967)
 ## Props
 @prop children
 @prop class: className

package/dist/kbd/Kbd.svelte.d.ts

@@ -2,7 +2,7 @@ import { type KbdProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L966)
+ * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L967)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/list-group/Listgroup.svelte

@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L985)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L986)
 ## Props
 @prop children
 @prop items

package/dist/list-group/Listgroup.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ListgroupProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L985)
+ * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L986)
  * ## Props
  * @prop children
  * @prop items

package/dist/list-group/ListgroupItem.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L996)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L997)
 ## Props
 @prop children
 @prop active

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ListgroupItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L996)
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L997)
  * ## Props
  * @prop children
  * @prop active

package/dist/mega-menu/MegaMenu.svelte

@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1008)
 ## Props
 @prop children
 @prop extra

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -2,7 +2,7 @@ import { type MegaMenuProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1008)
  * ## Props
  * @prop children
  * @prop extra

package/dist/modal/Modal.svelte

@@ -91,7 +91,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1018)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1019)
 ## Props
 @prop children
 @prop oncancel

package/dist/modal/Modal.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ModalProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1018)
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1019)
  * ## Props
  * @prop children
  * @prop oncancel

package/dist/navbar/Menu.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1036)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

package/dist/navbar/Menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1036)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1055)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
 ## Props
 @prop children
 @prop class: className

package/dist/navbar/NavBrand.svelte.d.ts

@@ -2,7 +2,7 @@ import type { NavBrandProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1055)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/navbar/NavContainer.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
 ## Props
 @prop children
 @prop fluid

package/dist/navbar/NavContainer.svelte.d.ts

@@ -2,7 +2,7 @@ import type { NavContainerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/navbar/NavHamburger.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1061)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1063)
 ## Props
 @prop children
 @prop onclick

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -2,7 +2,7 @@ import clsx from "clsx";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1061)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1063)
  * ## Props
  * @prop children
  * @prop onclick

package/dist/navbar/NavLi.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1075)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1083)
 ## Props
 @prop children
 @prop activeClass

package/dist/navbar/NavLi.svelte.d.ts

@@ -2,7 +2,7 @@ import type { NavLiProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1075)
+ * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1083)
  * ## Props
  * @prop children
  * @prop activeClass

package/dist/navbar/NavUl.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { getContext, setContext } from "svelte";
   import { sineIn } from "svelte/easing";
+  import { prefersReducedMotion } from "svelte/motion";
   import { writable } from "svelte/store";
-  import { slide } from "svelte/transition";
+  import { slide, fly, fade, scale } from "svelte/transition";
   import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { navbar_ul } from "./theme";
@@ -10,10 +11,28 @@
 
   let navState = getContext<NavbarState>("navState");
 
-  let { children, activeUrl, ulClass, slideParams, activeClass, nonActiveClass, class: clasName, ...restProps }: NavUlProps = $props();
+  let { children, activeUrl, ulClass, slideParams, transition = slide, transitionParams, activeClass, nonActiveClass, respectMotionPreference = true, class: clasName, ...restProps }: NavUlProps = $props();
 
-  const slideParamsDefault = { delay: 250, duration: 500, easing: sineIn };
-  const slideParamsOptions = $derived(slideParams ?? slideParamsDefault);
+  // Default parameters for different transitions
+  const getDefaultParams = (transitionFn: any) => {
+    if (transitionFn === slide) return { delay: 0, duration: 200, easing: sineIn };
+    if (transitionFn === fly) return { delay: 0, duration: 200, y: -10, easing: sineIn };
+    if (transitionFn === fade) return { delay: 0, duration: 200, easing: sineIn };
+    if (transitionFn === scale) return { delay: 0, duration: 200, start: 0.95, easing: sineIn };
+    return { delay: 0, duration: 200, easing: sineIn };
+  };
+
+  // Support legacy slideParams prop
+  const defaultParams = $derived(getDefaultParams(transition));
+  const finalParams = $derived(transitionParams ?? slideParams ?? defaultParams);
+
+  // Create motion-aware parameters
+  const transitionOptions = $derived(() => {
+    if (respectMotionPreference && prefersReducedMotion.current) {
+      return { ...finalParams, duration: 0, delay: 0 };
+    }
+    return finalParams;
+  });
 
   const activeUrlStore = writable<string>("");
 
@@ -22,7 +41,6 @@
   let { base, ul, active, nonActive } = $derived(navbar_ul({ hidden }));
 
   $effect(() => {
-    // setContext<NavbarLiType>("navbarContext", { activeClass: active({ class: activeClass }), nonActiveClass: nonActive({ class: nonActiveClass }) });
     navState.activeClass = twMerge(active(), clsx(activeClass));
     navState.nonActiveClass = twMerge(nonActive(), clsx(nonActiveClass));
   });
@@ -32,16 +50,14 @@
   });
   setContext("activeUrl", activeUrlStore);
 
-  let divCls: string = $derived(twMerge(base(), clsx(clsx(clasName))));
+  let divCls: string = $derived(twMerge(base(), clsx(clasName)));
   let ulCls: string = $derived(twMerge(ul(), clsx(ulClass)));
 </script>
 
 {#if !hidden}
-  <div {...restProps} class={divCls} transition:slide={slideParamsOptions}>
-    <!-- onclick -->
+  <div {...restProps} class={divCls} transition:transition={transitionOptions()}>
     <ul class={ulCls}>
       {@render children?.()}
-      <ul></ul>
     </ul>
   </div>
 {:else}
@@ -56,14 +72,17 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1066)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1068)
 ## Props
 @prop children
 @prop activeUrl
 @prop ulClass
 @prop slideParams
+@prop transition = slide
+@prop transitionParams
 @prop activeClass
 @prop nonActiveClass
+@prop respectMotionPreference = true
 @prop class: clasName
 @prop ...restProps
 -->

package/dist/navbar/NavUl.svelte.d.ts

@@ -2,14 +2,17 @@ import type { NavUlProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1066)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1068)
  * ## Props
  * @prop children
  * @prop activeUrl
  * @prop ulClass
  * @prop slideParams
+ * @prop transition = slide
+ * @prop transitionParams
  * @prop activeClass
  * @prop nonActiveClass
+ * @prop respectMotionPreference = true
  * @prop class: clasName
  * @prop ...restProps
  */

package/dist/navbar/Navbar.svelte

@@ -8,17 +8,30 @@
 
   // propagate props type from underlying Frame
 
-  let { children, fluid, navContainerClass, class: className, ...restProps }: NavbarProps = $props();
+  let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, ...restProps }: NavbarProps = $props();
 
   let navState = $state({ hidden: true });
   setContext<NavbarState>("navState", navState);
 
+  // Add reference to the navbar element
+  let navbarElement: HTMLElement;
+
   let toggle = () => {
     navState.hidden = !navState.hidden;
   };
+
+  function handleDocumentClick(event: MouseEvent) {
+    if (!closeOnClickOutside) return;
+    // Check if the click was outside the navbar AND the dropdown is open
+    if (!navState.hidden && navbarElement && !navbarElement.contains(event.target as Node)) {
+      navState.hidden = true;
+    }
+  }
 </script>
 
-<nav>
+<svelte:document onclick={handleDocumentClick} />
+
+<nav bind:this={navbarElement}>
   <div {...restProps} class={twMerge(navbar(), clsx(className))}>
     <NavContainer {fluid} class={clsx(navContainerClass)}>
       {@render children({ hidden: navState.hidden, toggle, NavContainer })}
@@ -30,11 +43,12 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1049)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1050)
 ## Props
 @prop children
 @prop fluid
 @prop navContainerClass
 @prop class: className
+@prop closeOnClickOutside = true
 @prop ...restProps
 -->

package/dist/navbar/Navbar.svelte.d.ts

@@ -2,12 +2,13 @@ import type { NavbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1049)
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1050)
  * ## Props
  * @prop children
  * @prop fluid
  * @prop navContainerClass
  * @prop class: className
+ * @prop closeOnClickOutside = true
  * @prop ...restProps
  */
 declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;

package/dist/navbar/theme.d.ts

@@ -1,4 +1,4 @@
-export declare const navbar: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full px-2 py-2.5 sm:px-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "w-full px-2 py-2.5 sm:px-4", unknown, unknown, undefined>>;
+export declare const navbar: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full px-2 py-2.5 sm:px-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative w-full px-2 py-2.5 sm:px-4", unknown, unknown, undefined>>;
 export declare const navbar_brand: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center", unknown, unknown, undefined>>;
 export declare const navbar_container: import("tailwind-variants").TVReturnType<{
     fluid: {
@@ -19,6 +19,7 @@ export declare const navbar_container: import("tailwind-variants").TVReturnType<
 export declare const navbar_ul: import("tailwind-variants").TVReturnType<{
     hidden: {
         false: {
+            base: string;
             ul: string;
         };
         true: {
@@ -33,6 +34,7 @@ export declare const navbar_ul: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     hidden: {
         false: {
+            base: string;
             ul: string;
         };
         true: {
@@ -47,6 +49,7 @@ export declare const navbar_ul: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnType<{
     hidden: {
         false: {
+            base: string;
             ul: string;
         };
         true: {

package/dist/navbar/theme.js

@@ -1,6 +1,6 @@
 import { tv } from "tailwind-variants";
 export const navbar = tv({
-    base: "w-full px-2 py-2.5 sm:px-4"
+    base: "relative w-full px-2 py-2.5 sm:px-4"
 });
 export const navbar_brand = tv({
     base: "flex items-center"
@@ -14,16 +14,20 @@ export const navbar_container = tv({
 export const navbar_ul = tv({
     slots: {
         base: "w-full md:block md:w-auto",
-        ul: "flex flex-col p-4 mt-4 md:flex-row rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium",
+        ul: "flex flex-col p-4 mt-0 md:flex-row rtl:space-x-reverse md:text-sm md:font-medium",
         active: "text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent",
         nonActive: "hover:text-primary-500 text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 dark:md:text-white md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
     },
     variants: {
         hidden: {
             false: {
-                ul: "border rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700 text-gray-700 dark:text-gray-400 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 sm:border-none sm:rounded-none sm:bg-inherit dark:sm:bg-inherit"
+                // Add absolute positioning and overlay styles for mobile
+                base: "absolute top-full left-0 right-0 z-50 w-full md:block md:w-auto md:static md:z-auto",
+                ul: "border rounded-lg bg-white shadow-lg dark:bg-gray-800 dark:border-gray-700 text-gray-700 dark:text-gray-400 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 md:border-none md:rounded-none md:bg-inherit dark:md:bg-inherit md:shadow-none"
             },
-            true: { base: "hidden" }
+            true: {
+                base: "hidden"
+            }
         }
     },
     defaultVariants: {}

package/dist/pagination/Pagination.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1148)
 ## Props
 @prop pages = []
 @prop previous

package/dist/pagination/Pagination.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaginationProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
+ * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1148)
  * ## Props
  * @prop pages = []
  * @prop previous

package/dist/pagination/PaginationButton.svelte

@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
+[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1119)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaginationButtonProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
+ * [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1119)
  * ## Props
  * @prop children
  * @prop size

package/dist/pagination/PaginationItem.svelte

@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1136)
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1144)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationItem.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaginationItemProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1136)
+ * [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1144)
  * ## Props
  * @prop children
  * @prop size

package/dist/pagination/PaginationNav.svelte

@@ -99,7 +99,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1117)
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1125)
 ## Props
 @prop currentPage = 1
 @prop totalPages = 1

package/dist/pagination/PaginationNav.svelte.d.ts

@@ -2,7 +2,7 @@ import { type PaginationNavProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1117)
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1125)
  * ## Props
  * @prop currentPage = 1
  * @prop totalPages = 1

package/dist/popover/Popover.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1150)
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1158)
 ## Props
 @prop title: titleSlot
 @prop color = "default"