flowbite-svelte 1.8.6 → 1.10.0

package/dist/kbd/Kbd.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import { kbd } from ".";
   import { type KbdProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: KbdProps = $props();
-  const kbdCls = cn(kbd(), className);
+
+  const theme = getTheme("kbd");
+
+  const kbdCls = cn(kbd(), className, theme);
 </script>
 
 <kbd {...restProps} class={kbdCls}>
@@ -14,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1012)
+[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
 ## 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#L1012)
+ * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/kbd/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Kbd } from "./Kbd.svelte";
-export { kbd } from "./theme";
+export { kbd, type KbdTheme } from "./theme";

package/dist/kbd/theme.d.ts

@@ -1 +1,2 @@
 export declare const kbd: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", unknown, unknown, undefined>>;
+export type KbdTheme = string;

package/dist/list-group/Listgroup.svelte

@@ -2,9 +2,12 @@
   import { setContext } from "svelte";
   import { listGroup } from ".";
   import { type ListgroupProps, ListgroupItem, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, items, active, onclick, horizontal, rounded, border, class: className, itemClass, iconClass, ...restProps }: ListgroupProps = $props();
 
+  const theme = getTheme("listgroup");
+
   const base = $derived(listGroup({ rounded, border, horizontal }));
 
   let tag = active ? "div" : "ul";
@@ -22,7 +25,7 @@
   }
 </script>
 
-<svelte:element this={tag} {...restProps} class={cn(base, className)}>
+<svelte:element this={tag} {...restProps} class={cn(base, className, theme)}>
   {#if items?.length}
     {#each items as item}
       {#if children}
@@ -42,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1031)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1026)
 ## 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#L1031)
+ * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1026)
  * ## Props
  * @prop children
  * @prop items

package/dist/list-group/ListgroupItem.svelte

@@ -2,9 +2,12 @@
   import { getContext } from "svelte";
   import { type ListgroupItemProps, cn } from "..";
   import { listGroupItem, type ListgroupItemVariants } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-15 w-15", ...restProps }: ListgroupItemProps = $props();
 
+  const theme = getTheme("listgroupItem");
+
   active = active ?? getContext("listGrpActive");
   horizontal = horizontal ?? getContext("listGrpHorizontal");
 
@@ -24,15 +27,15 @@
 {/snippet}
 
 {#if restProps.href === undefined && !active}
-  <li class={cn(itemClass, className)}>
+  <li class={cn(itemClass, className, theme)}>
     {@render nameOrChildren()}
   </li>
 {:else if restProps.href === undefined}
-  <button type="button" {...restProps} class={cn(itemClass, className)} {disabled} aria-current={current}>
+  <button type="button" {...restProps} class={cn(itemClass, className, theme)} {disabled} aria-current={current}>
     {@render nameOrChildren()}
   </button>
 {:else}
-  <a {...restProps} class={cn(itemClass, className)} aria-current={current}>
+  <a {...restProps} class={cn(itemClass, className, theme)} aria-current={current}>
     {@render nameOrChildren()}
   </a>
 {/if}
@@ -41,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1042)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
 ## 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#L1042)
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
  * ## Props
  * @prop children
  * @prop active

package/dist/list-group/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Listgroup } from "./Listgroup.svelte";
 export { default as ListgroupItem } from "./ListgroupItem.svelte";
-export { listGroup, listGroupItem } from "./theme";
+export { listGroup, listGroupItem, type ListGroupTheme, type ListGroupItemTheme } from "./theme";

package/dist/list-group/theme.d.ts

@@ -40,6 +40,7 @@ export declare const listGroup: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", unknown, unknown, undefined>>;
+export type ListGroupTheme = string;
 export type ListgroupItemVariants = VariantProps<typeof listGroupItem>;
 export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
     state: {
@@ -84,3 +85,4 @@ export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", unknown, unknown, undefined>>;
+export type ListGroupItemTheme = string;

package/dist/mega-menu/MegaMenu.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { megamenu } from "./theme";
+  import { megamenu, type MegaMenuTheme } from "./theme";
   import { type MegaMenuProps, type LinkType, Popper, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, ...restProps }: MegaMenuProps = $props();
 
+  const theme = getTheme("megaMenu");
+
   /* eslint-disable  @typescript-eslint/no-explicit-any */
   interface LinkTypeLike extends LinkType {
     [propName: string]: any;
@@ -12,9 +15,9 @@
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, extra: !!extra }));
 </script>
 
-<Popper color={full ? "default" : "dropdown"} arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={cn(base(), className)}>
-  <div class={div()}>
-    <ul class={cn(ul(), ulClass)}>
+<Popper color={full ? "default" : "dropdown"} arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={cn(base(), className, (theme as MegaMenuTheme)?.base)}>
+  <div class={cn(div(), (theme as MegaMenuTheme)?.div)}>
+    <ul class={cn(ul(), ulClass, (theme as MegaMenuTheme)?.ul)}>
       {#each items as item, index}
         <li>
           {@render children({ item, index })}
@@ -23,7 +26,7 @@
         {@render children({ item: items[0], index: 0 })}
       {/each}
     </ul>
-    {#if full && extra}<div class={cn(extraCls(), extraClass)}>{@render extra()}</div>{/if}
+    {#if full && extra}<div class={cn(extraCls(), extraClass, (theme as MegaMenuTheme)?.extra)}>{@render extra()}</div>{/if}
   </div>
 </Popper>
 
@@ -31,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1053)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
 ## 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#L1053)
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
  * ## Props
  * @prop children
  * @prop extra

package/dist/mega-menu/index.d.ts

@@ -1,2 +1,2 @@
 export { default as MegaMenu } from "./MegaMenu.svelte";
-export { megamenu } from "./theme";
+export { megamenu, type MegaMenuTheme } from "./theme";

package/dist/mega-menu/theme.d.ts

@@ -41,3 +41,5 @@ export declare const megamenu: import("tailwind-variants").TVReturnType<{
     ul: string;
     extra: string;
 }, undefined, unknown, unknown, undefined>>;
+export type MegaMenuSlots = keyof typeof megamenu.slots;
+export type MegaMenuTheme = Partial<Record<MegaMenuSlots, string>>;

package/dist/modal/Modal.svelte

@@ -1,104 +1,116 @@
 <script lang="ts">
-  import { type ModalProps, type ParamsType, CloseButton, trapFocus } from "..";
+  import { type ModalProps, type ParamsType, CloseButton, trapFocus, cn } from "..";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
-  import { modal as modalTheme } from ".";
+  import { modal as modalStyle, type ModalTheme } from ".";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { children, oncancel, onsubmit, modal = true, autoclose = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, params, transition = fade, ...restProps }: ModalProps = $props();
+  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, params, transition = fade, ...restProps }: ModalProps = $props();
+
+  const theme = getTheme("modal");
 
   const paramsDefault = { duration: 100, easing: sineIn };
   const paramsOptions = $derived(params ?? paramsDefault);
 
-  const { base, header: headerCls, footer: footerCls, body, closeBtn } = $derived(modalTheme({ placement, size }));
+  const { base, form: formCls, header: headerCls, footer: footerCls, body, closebutton } = $derived(modalStyle({ placement, size }));
+
+  const close = (dlg: HTMLDialogElement) => (open = false);
+  // @ts-expect-error: dlg.requestClose may not be supported
+  const cancel = (dlg: HTMLDialogElement) => (typeof dlg.requestClose === "function" ? dlg.requestClose() : close());
 
   function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
-    // this event gets called when user presses ESC key
-    // We'll handle ESC via the trapFocus action instead
-    if (ev.currentTarget instanceof HTMLDialogElement) {
-      // Stop the default ESC handling from dialog element
-      // as we're handling it in our trapFocus action
-      ev.preventDefault();
-      oncancel?.(ev); // propagate the event to the user
-    }
+    // this event gets called when user canceled the dialog:
+    // pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
+    oncancel?.(ev);
+    if (ev.defaultPrevented) return;
+
+    ev.preventDefault(); // prevent anyway, we need clean close
+    if (!permanent) close(ev.currentTarget);
   }
 
   function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
-    if (ev.currentTarget instanceof HTMLDialogElement) {
-      if (outsideclose && ev.target === ev.currentTarget && !permanent) {
-        open = false;
-      }
-      if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
-        open = false;
-      }
+    const dlg: HTMLDialogElement = ev.currentTarget;
+    if (outsideclose && ev.target === dlg) {
+      cancel(dlg);
+    }
+    if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
+      close(dlg);
     }
   }
 
-  let dlg: HTMLDialogElement | undefined = $state();
-
-  // This prevents total dialog closing and we want only to prevent cancelling
-  // The close with user defined actions should be allowed
-  // $effect(() => {
-  //   if (permanent && !open) {
-  //     open = true;
-  //   }
-  // });
-
-  // Handler for Escape key that respects component state
-  const handleEscape = () => {
-    if (!permanent) {
-      oncancel?.({ currentTarget: dlg } as any);
-      // If oncancel prevented default, we don't close
-      if (oncancel && event?.defaultPrevented) return;
-      open = false;
-    }
-  };
+  function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
+    // When dialog contains the <form method="dialog"> and when child with type="submit" was pressed
+
+    onsubmit?.(ev);
+    if (ev.defaultPrevented) return;
+
+    ev.preventDefault(); // stop dialog.close()
 
-  function _onsubmit(ev: SubmitEvent) {
-    if (!dlg) return;
+    const dlg: HTMLDialogElement = ev.currentTarget;
 
     if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
       dlg.returnValue = ev.submitter.value;
     }
 
-    // @ts-ignore
-    onsubmit?.(ev); // forward event to user handle
-
-    if (!ev.defaultPrevented) {
-      // stop dialog.close() and trigger close with transition
-      ev.preventDefault();
-      open = false;
+    if (!dlg.returnValue) {
+      return cancel(dlg); // if no action - treat that as cancel
     }
+
+    // explicit false from onaction blocks the form closing
+    if (typeof onaction === "function" && onaction({ action: dlg.returnValue, data: new FormData(ev.target as HTMLFormElement) }) === false) return;
+
+    close(dlg);
+  }
+
+  function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
+    ontoggle?.(ev);
+    open = ev.newState === "open"; // for cases when toggle by other means
   }
 
   function init(dlg: HTMLDialogElement) {
-    modal ? dlg?.showModal() : dlg?.show();
-    return () => dlg?.close();
+    modal ? dlg.showModal() : dlg.show();
+    return () => dlg.close();
   }
+
+  const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
+  const close_handler = (pred: boolean) => (pred ? undefined : () => (open = false));
 </script>
 
-{#if open}
-  <dialog use:trapFocus={{ onEscape: handleEscape }} {@attach init} onsubmit={_onsubmit} bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition|global={paramsOptions as ParamsType}>
-    {#if title || header}
-      <div class={headerCls({ class: clsx(headerClass) })}>
-        {#if title}
-          <h3>{title}</h3>
-          <CloseButton onclick={() => (open = false)} class={clsx(closeBtnClass)} />
-        {:else if header}
-          {@render header()}
+{#snippet content()}
+  {#if title || header}
+    <div class={cn(headerCls({ class: clsx(headerClass) }), (theme as ModalTheme)?.header)}>
+      {#if title}
+        <h3>{title}</h3>
+        {#if dismissable && !permanent}
+          <CloseButton type="submit" onclick={close_handler(form)} class={clsx(closeBtnClass)} />
         {/if}
-      </div>
-    {/if}
-    <div class={body({ class: clsx(bodyClass) })}>
-      {@render children?.()}
+      {:else if header}
+        {@render header()}
+      {/if}
     </div>
-    {#if footer}
-      <div class={footerCls({ class: clsx(footerClass) })}>
-        {@render footer()}
-      </div>
-    {/if}
-    {#if dismissable && !permanent && !title}
-      <CloseButton onclick={() => (open = false)} class={closeBtn({ class: clsx(closeBtnClass) })} />
+  {/if}
+  <div class={cn(body({ class: clsx(bodyClass) }), (theme as ModalTheme)?.body)}>
+    {@render children?.()}
+  </div>
+  {#if footer}
+    <div class={cn(footerCls({ class: clsx(footerClass) }), (theme as ModalTheme)?.footer)}>
+      {@render footer()}
+    </div>
+  {/if}
+  {#if dismissable && !permanent && !title}
+    <CloseButton type="submit" onclick={close_handler(form)} class={cn(closebutton({ class: clsx(closeBtnClass) }), (theme as ModalTheme)?.closebutton)} />
+  {/if}
+{/snippet}
+
+{#if open}
+  <dialog {@attach init} use:focusTrap class={cn(base({ class: clsx(className) }), (theme as ModalTheme)?.base)} tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps}>
+    {#if form}
+      <form method="dialog" class={cn(formCls(), (theme as ModalTheme)?.form)}>
+        {@render content()}
+      </form>
+    {:else}
+      {@render content()}
     {/if}
   </dialog>
 {/if}
@@ -107,13 +119,17 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1064)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
 ## Props
 @prop children
+@prop onaction = ()
 @prop oncancel
 @prop onsubmit
+@prop ontoggle
+@prop form = false
 @prop modal = true
 @prop autoclose = false
+@prop focustrap = false
 @prop header
 @prop footer
 @prop title

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

@@ -2,13 +2,17 @@ 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#L1064)
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
  * ## Props
  * @prop children
+ * @prop onaction = ()
  * @prop oncancel
  * @prop onsubmit
+ * @prop ontoggle
+ * @prop form = false
  * @prop modal = true
  * @prop autoclose = false
+ * @prop focustrap = false
  * @prop header
  * @prop footer
  * @prop title

package/dist/modal/index.d.ts

@@ -1,3 +1,2 @@
-import Modal from "./Modal.svelte";
-import { modal } from "./theme";
-export { Modal, modal };
+export { default as Modal } from "./Modal.svelte";
+export { modal, type ModalTheme } from "./theme";

package/dist/modal/index.js

@@ -1,3 +1,2 @@
-import Modal from "./Modal.svelte";
-import { modal } from "./theme";
-export { Modal, modal };
+export { default as Modal } from "./Modal.svelte";
+export { modal } from "./theme";

package/dist/modal/theme.d.ts

@@ -49,10 +49,11 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    form: string;
     header: string;
     footer: string;
     body: string;
-    closeBtn: string;
+    closebutton: string;
 }, undefined, {
     placement: {
         "top-left": {
@@ -102,10 +103,11 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    form: string;
     header: string;
     footer: string;
     body: string;
-    closeBtn: string;
+    closebutton: string;
 }, import("tailwind-variants").TVReturnType<{
     placement: {
         "top-left": {
@@ -155,8 +157,11 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    form: string;
     header: string;
     footer: string;
     body: string;
-    closeBtn: string;
+    closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ModalSlots = keyof typeof modal.slots;
+export type ModalTheme = Partial<Record<ModalSlots, string>>;

package/dist/modal/theme.js

@@ -2,10 +2,11 @@ import { tv } from "tailwind-variants";
 export const modal = tv({
     slots: {
         base: "backdrop:bg-black/80 open:flex flex-col w-full max-h-[90hv] rounded-lg divide-y text-gray-500 dark:text-gray-400 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-700 bg-white dark:bg-gray-800 pointer-events-auto",
+        form: "flex flex-col rounded-lg divide-y",
         header: "flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white",
         footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0",
         body: "p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain",
-        closeBtn: "absolute top-3 end-2.5"
+        closebutton: "absolute top-3 end-2.5"
     },
     variants: {
         placement: {

package/dist/navbar/Menu.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import type { MenuProps } from "../types";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+  import { cn } from "..";
 
   let { size = "24", color = "currentColor", variation = "outline", ariaLabel = "bars 3", class: className, ...restProps }: MenuProps = $props();
 
+  const theme = getTheme("memu");
+
   let viewBox: string = $state("0 0 24 24");
   let svgpath: string = $state("");
   let svgoutline = `<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `;
@@ -25,7 +29,7 @@
   });
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={clsx(className)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
+<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={cn(clsx(className), theme)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
   {@html svgpath}
 </svg>
 
@@ -33,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1082)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
 ## 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#L1082)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
-  import { navbar_brand } from "./theme";
+  import { cn } from "..";
+  import { navbarBrand } from "./theme";
   import type { NavBrandProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: NavBrandProps = $props();
+
+  const theme = getTheme("navBrand");
 </script>
 
-<a {...restProps} class={twMerge(navbar_brand(), clsx(className))}>
+<a {...restProps} class={cn(navbarBrand(), clsx(className), theme)}>
   {@render children?.()}
 </a>
 
@@ -15,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1102)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
 ## 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#L1102)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/navbar/NavContainer.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
-  import { navbar_container } from "./theme";
+  import { navbarContainer } from "./theme";
   import type { NavContainerProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, fluid, class: clasName, ...restProps }: NavContainerProps = $props();
+
+  const theme = getTheme("navContainer");
 </script>
 
-<div {...restProps} class={twMerge(navbar_container({ fluid }), clsx(clasName))}>
+<div {...restProps} class={cn(navbarContainer({ fluid }), clsx(clasName), theme)}>
   {@render children?.()}
 </div>
 
@@ -15,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1104)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1102)
 ## 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#L1104)
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1102)
  * ## Props
  * @prop children
  * @prop fluid