flowbite-svelte 1.11.3 → 1.11.4

package/dist/footer/theme.d.ts

@@ -28,18 +28,18 @@ export declare const footer: import("tailwind-variants").TVReturnType<{
 export type FooterBrandVariants = VariantProps<typeof footerBrand> & Classes<typeof footerBrand>;
 export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            img?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            base?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            img?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            base?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -48,10 +48,10 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     img: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            img?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            base?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -66,18 +66,18 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
 export type FooterCopyrightVariants = VariantProps<typeof footerCopyright> & Classes<typeof footerCopyright>;
 export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            bySpan?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+            bySpan?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            bySpan?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+            bySpan?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -86,10 +86,10 @@ export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     bySpan: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            bySpan?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+            bySpan?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -106,16 +106,16 @@ export declare const footerLinkGroup: import("tailwind-variants").TVReturnType<{
 export type FooterLinkVariants = VariantProps<typeof footerLink> & Classes<typeof footerLink>;
 export declare const footerLink: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -123,9 +123,9 @@ export declare const footerLink: import("tailwind-variants").TVReturnType<{
     link: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/forms/fileupload/Fileupload.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import { CloseButton, type FileuploadProps } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { createDismissableContext } from "../../utils/dismissable.svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
 
   let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, classes, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, wrapperClass, ...restProps }: FileuploadProps = $props();
 

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -4,7 +4,7 @@
   import clsx from "clsx";
   import { type FloatingLabelInputProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { createDismissableContext } from "../../utils/dismissable.svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
 
   let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), variant = "standard", size = "default", color = "default", class: className, classes, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: FloatingLabelInputProps = $props();
 

package/dist/forms/input-field/Input.svelte

@@ -4,7 +4,7 @@
   import { CloseButton, type SizeType, type InputProps, type InputValue } from "../..";
   import { input, clampSize } from ".";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { createDismissableContext } from "../../utils/dismissable.svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
 
   let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, classes, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, comboItemClass, onInput, onFocus, onBlur, onKeydown, oninput, onfocus, onblur, onkeydown, ...restProps }: InputProps<InputValue> = $props();
 

package/dist/forms/search/Search.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import { CloseButton, type SearchProps } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { createDismissableContext } from "../../utils/dismissable.svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
 
   let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, class: className, classes, ...restProps }: SearchProps = $props();
 

package/dist/forms/select/MultiSelect.svelte

@@ -4,7 +4,7 @@
   import { multiSelect } from ".";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { onMount } from "svelte";
-  import { createDismissableContext } from "../../utils/dismissable.svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
 
   // Consider reusing that component - https://svelecte.vercel.app/
 

package/dist/forms/select/Select.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import { type SelectProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { createDismissableContext } from "../../utils/dismissable.svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
 
   let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, placeholder = "Choose option ...", clearable, clearableColor = "none", clearableOnClick, onClear, clearableSvgClass, clearableClass, selectClass, class: className, classes, ...restProps }: SelectProps<T> = $props();
 

package/dist/forms/tags/theme.d.ts

@@ -3,28 +3,28 @@ import type { Classes } from "../../theme/themeUtils";
 export type TagsVariants = VariantProps<typeof tags> & Classes<typeof tags>;
 export declare const tags: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            input?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            base?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
-            tag?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
-            info?: import("tailwind-variants").ClassValue;
-            warning?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            input?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            close?: import("tailwind-merge").ClassNameValue;
+            tag?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
+            info?: import("tailwind-merge").ClassNameValue;
+            warning?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            input?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            base?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
-            tag?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
-            info?: import("tailwind-variants").ClassValue;
-            warning?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            input?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            close?: import("tailwind-merge").ClassNameValue;
+            tag?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
+            info?: import("tailwind-merge").ClassNameValue;
+            warning?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -38,15 +38,15 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
     error: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            input?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            base?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
-            tag?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
-            info?: import("tailwind-variants").ClassValue;
-            warning?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            input?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
+            close?: import("tailwind-merge").ClassNameValue;
+            tag?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
+            info?: import("tailwind-merge").ClassNameValue;
+            warning?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/forms/textarea/Textarea.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import { type TextareaProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { createDismissableContext } from "../../utils/dismissable.svelte";
+  import { createDismissableContext } from "../../utils/dismissable";
 
   let { header, footer, addon, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, addonClass, disabled, class: className, classes, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, textareaClass, ...restProps }: TextareaProps = $props();
 

package/dist/gallery/theme.d.ts

@@ -3,16 +3,16 @@ import type { Classes } from "../theme/themeUtils";
 export type GalleryVariants = VariantProps<typeof gallery> & Classes<typeof gallery>;
 export declare const gallery: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
-            image?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
-            image?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -20,9 +20,9 @@ export declare const gallery: import("tailwind-variants").TVReturnType<{
     div: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
-            image?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/modal/Modal.svelte

@@ -5,7 +5,7 @@
   import { fade } from "svelte/transition";
   import { modal as modalStyle } from ".";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { createDismissableContext } from "../utils/dismissable.svelte";
+  import { createDismissableContext } from "../utils/dismissable";
 
   let { children, onaction = () => true, oncancel, onsubmit, ontoggle, form = false, modal = true, autoclose = false, focustrap = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, classes, params, transition = fade, fullscreen = false, ...restProps }: ModalProps = $props();
 

package/dist/navbar/NavBrand.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1082)
 ## 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#L1079)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1082)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/navbar/NavContainer.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1081)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1084)
 ## 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#L1081)
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1084)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/navbar/NavHamburger.svelte

@@ -4,7 +4,7 @@
   import ToolbarButton from "../toolbar/ToolbarButton.svelte";
   import Menu from "./Menu.svelte";
   import { navbarHamburger } from "./theme";
-  import type { NavbarState, NavHamburgerProps } from "../types";
+  import type { NavbarState, NavHamburgerProps, NavbarBreakpoint } from "../types";
   import type { MouseEventHandler } from "svelte/elements";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
@@ -14,10 +14,10 @@
   const styling = $derived(classes ?? { menu: menuClass });
 
   const theme = getTheme("navbarHamburger");
+  const navState = getContext<NavbarState>("navState");
+  const navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
+  const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint });
 
-  let { base, menu } = navbarHamburger();
-
-  let navState = getContext<NavbarState>("navState");
   const toggle: MouseEventHandler<HTMLButtonElement> = (ev) => {
     navState.hidden = !navState.hidden;
   };
@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1085)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
 ## Props
 @prop children
 @prop onclick

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

@@ -1,7 +1,7 @@
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1085)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
  * ## Props
  * @prop children
  * @prop onclick
@@ -16,63 +16,111 @@ declare const NavHamburger: import("svelte").Component<import("../toolbar/theme"
 } & import("svelte/elements").HTMLButtonAttributes & {
     name?: string;
 } & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     menu: string;
 }, undefined, unknown, unknown, undefined>>> & import("../theme/themeUtils").Classes<import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     menu: string;
 }, undefined, unknown, unknown, undefined>>> & {

package/dist/navbar/NavLi.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import { getTheme } from "../theme/themeUtils";
-  import type { NavbarState, NavLiProps } from "../types";
+  import type { NavbarState, NavLiProps, NavbarBreakpoint } from "../types";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import { navbarLi } from "./theme";
 
   let navState = getContext<NavbarState>("navState");
+  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
 
   let { children, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
   const theme = getTheme("navbarLi");
 
   let active = $derived(navState.activeUrl ? restProps.href === navState.activeUrl : false);
-  let liClass = $derived(navbarLi({ hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
+  let liClass = $derived(navbarLi({ breakpoint: navBreakpoint, hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
 </script>
 
 <li>
@@ -31,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
 ## 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#L1106)
+ * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
  * ## Props
  * @prop children
  * @prop activeClass

package/dist/navbar/NavUl.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import type { NavbarState, NavUlProps } from "../types";
+  import type { NavbarState, NavUlProps, NavbarBreakpoint } from "../types";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import { sineIn } from "svelte/easing";
@@ -9,6 +9,7 @@
   import { navbarUl } from "./theme";
 
   let navState = getContext<NavbarState>("navState");
+  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
 
   let { children, activeUrl = $bindable(), ulClass, slideParams, transition = slide, transitionParams, activeClass, nonActiveClass, respectMotionPreference = true, class: clasName, classes, ...restProps }: NavUlProps = $props();
 
@@ -40,7 +41,7 @@
 
   let hidden: boolean = $derived(navState.hidden ?? true);
 
-  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden }));
+  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint }));
 
   $effect(() => {
     navState.activeClass = active({ class: clsx(theme?.active, styling.active) });
@@ -70,7 +71,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1091)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1094)
 ## Props
 @prop children
 @prop activeUrl = $bindable()

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

@@ -2,7 +2,7 @@ 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#L1091)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1094)
  * ## Props
  * @prop children
  * @prop activeUrl = $bindable()