flowbite-svelte 1.9.0 → 1.10.0

package/dist/accordion/Accordion.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-  import { setContext, getContext } from "svelte";
+  import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import { accordion } from "./";
-  import { type AccordionProps, type BaseThemes, cn } from "..";
+  import { type AccordionProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
 
-  // Get merged theme from context
-  const context = getContext<BaseThemes>("themeConfig");
-  // Use context theme if available, otherwise fallback to default
-  const accordionTheme = context?.accordion || accordion;
+  const theme = getTheme("accordion");
 
   const ctx = {
     flush,
@@ -20,10 +18,11 @@
 
   setContext("ctx", ctx);
   setContext("ctxTransitionType", transitionType);
-  const base = $derived(cn(accordionTheme({ flush }), className));
+  const base = $derived(cn(accordion({ flush }), className));
+  const finalClass = $derived(cn(base, theme));
 </script>
 
-<div {...restProps} class={base}>
+<div {...restProps} class={finalClass}>
   {@render children()}
 </div>
 
@@ -31,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L165)
+[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L158)
 ## Props
 @prop children
 @prop flush

package/dist/accordion/Accordion.svelte.d.ts

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

package/dist/accordion/AccordionItem.svelte

@@ -2,8 +2,9 @@
   import { slide } from "svelte/transition";
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
-  import { accordionitem } from ".";
-  import { type AccordionCtxType, type AccordionItemProps, type ParamsType, type BaseThemes, cn } from "..";
+  import { accordionItem, type AccordionItemTheme } from ".";
+  import { type AccordionCtxType, type AccordionItemProps, type ParamsType, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className, headerClass, contentClass }: AccordionItemProps = $props();
 
@@ -12,9 +13,7 @@
   const useTransition = transitionType === "none" ? false : ctxTransitionType === "none" ? false : true;
 
   // Theme context
-  const context = getContext<BaseThemes>("themeConfig");
-  // Use theme context if available, otherwise fallback to default
-  const accordionitemTheme = context?.accordionitem || accordionitem;
+  const theme = getTheme("accordionitem");
 
   const ctx: AccordionCtxType = getContext("ctx") ?? {};
 
@@ -28,13 +27,13 @@
 
   const handleToggle = () => selected.set(open ? {} : self);
 
-  const { base, button, content, active, inactive } = $derived(accordionitemTheme({ flush: ctx.flush, open }));
+  const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx.flush, open }));
 
   let buttonClass = $derived(cn(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), className));
 </script>
 
-<h2 class={base({ class: headerClass })}>
-  <button type="button" onclick={handleToggle} class={buttonClass} aria-expanded={open}>
+<h2 class={cn(base({ class: headerClass }), (theme as AccordionItemTheme)?.base)}>
+  <button type="button" onclick={handleToggle} class={cn(buttonClass, (theme as AccordionItemTheme)?.button)} aria-expanded={open}>
     {#if header}
       {@render header()}
       {#if open}
@@ -59,14 +58,14 @@
 {#if useTransition}
   {#if open && transitionType !== "none"}
     <div transition:transitionType={transitionParams as ParamsType}>
-      <div class={content({ class: contentClass })}>
+      <div class={cn(content({ class: contentClass }), (theme as AccordionItemTheme)?.content)}>
         {@render children()}
       </div>
     </div>
   {/if}
 {:else}
   <div class={open ? "block" : "hidden"}>
-    <div class={content({ class: contentClass })}>
+    <div class={cn(content({ class: contentClass }), (theme as AccordionItemTheme)?.content)}>
       {@render children()}
     </div>
   </div>
@@ -76,7 +75,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L177)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L170)
 ## Props
 @prop children
 @prop header

package/dist/accordion/AccordionItem.svelte.d.ts

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

package/dist/accordion/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Accordion } from "./Accordion.svelte";
 export { default as AccordionItem } from "./AccordionItem.svelte";
-export { accordion, accordionitem } from "./theme";
+export { accordion, accordionItem, type AccordionTheme, type AccordionItemTheme } from "./theme";

package/dist/accordion/index.js

@@ -1,3 +1,3 @@
 export { default as Accordion } from "./Accordion.svelte";
 export { default as AccordionItem } from "./AccordionItem.svelte";
-export { accordion, accordionitem } from "./theme";
+export { accordion, accordionItem } from "./theme";

package/dist/accordion/theme.d.ts

@@ -1,20 +1,32 @@
 export declare const accordion: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
     flush: {
         true: string;
         false: string;
     };
-}, undefined, "w-full text-gray-500 dark:text-gray-400", {
+}, undefined, "w-full", {
+    color: {
+        primary: string;
+        secondary: string;
+    };
     flush: {
         true: string;
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
     flush: {
         true: string;
         false: string;
     };
-}, undefined, "w-full text-gray-500 dark:text-gray-400", unknown, unknown, undefined>>;
-export declare const accordionitem: import("tailwind-variants").TVReturnType<{
+}, undefined, "w-full", unknown, unknown, undefined>>;
+export declare const accordionItem: import("tailwind-variants").TVReturnType<{
     flush: {
         true: {
             button: string;
@@ -78,3 +90,6 @@ export declare const accordionitem: import("tailwind-variants").TVReturnType<{
     active: string;
     inactive: string;
 }, undefined, unknown, unknown, undefined>>;
+export type AccordionTheme = string;
+export type AccordionItemSlots = keyof typeof accordionItem.slots;
+export type AccordionItemTheme = Partial<Record<AccordionItemSlots, string>>;

package/dist/accordion/theme.js

@@ -1,14 +1,18 @@
 import { tv } from "tailwind-variants";
 export const accordion = tv({
-    base: "w-full text-gray-500 dark:text-gray-400",
+    base: "w-full",
     variants: {
+        color: {
+            primary: "text-primary-500 dark:text-primary-400",
+            secondary: "text-secondary-500 dark:text-secondary-400"
+        },
         flush: {
             true: "",
             false: "border border-gray-200 dark:border-gray-700 rounded-t-xl"
         }
     }
 });
-export const accordionitem = tv({
+export const accordionItem = tv({
     slots: {
         base: "group",
         button: "flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b",

package/dist/alert/Alert.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import { fade } from "svelte/transition";
   import { alert } from ".";
-  import { type AlertProps, type BaseThemes, type ParamsType, CloseButton, cn } from "..";
+  import { type AlertProps, type ParamsType, CloseButton, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclick = () => (alertStatus = false), ...restProps }: AlertProps = $props();
 
-  const context = getContext<BaseThemes>("themeConfig");
-  // Use theme context if available, otherwise fallback to default
-  const alertTheme = context?.alert || alert;
+  // Theme context
+  const theme = getTheme("alert");
 
   let divCls = $derived(
     cn(
-      alertTheme({
+      alert({
         color,
         rounded,
         border,
         icon: !!icon,
         dismissable
       }),
-      className
+      className,
+      theme
     )
   );
 </script>
@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L192)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L185)
 ## Props
 @prop children
 @prop icon

package/dist/alert/Alert.svelte.d.ts

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

package/dist/alert/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Alert } from "./Alert.svelte";
-export { alert } from "./theme";
+export { alert, type AlertTheme } from "./theme";

package/dist/alert/theme.d.ts

@@ -107,3 +107,4 @@ declare const alert: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "p-4 gap-3 text-sm", unknown, unknown, undefined>>;
 export { alert, type AlertVariants };
+export type AlertTheme = string;

package/dist/avatar/Avatar.svelte

@@ -1,26 +1,25 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import { avatar } from ".";
-  import { type AvatarProps, type BaseThemes, Indicator, cn } from "..";
+  import { type AvatarProps, Indicator, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
 
-  // Get merged theme from context
-  const context = getContext<BaseThemes>("themeConfig");
-  // Use context theme if available, otherwise fallback to default
-  const avatarTheme = context?.avatar || avatar;
+  // Theme context
+  const theme = getTheme("avatar");
 
   dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
 
   let avatarClass = $derived(
     cn(
-      avatarTheme({
+      avatar({
         cornerStyle,
         border,
         stacked,
         size
       }),
-      className
+      className,
+      theme
     )
   );
 </script>
@@ -51,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L203)
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L196)
 ## Props
 @prop children
 @prop indicator

package/dist/avatar/Avatar.svelte.d.ts

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

package/dist/avatar/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Avatar } from "./Avatar.svelte";
-export { avatar } from "./theme";
+export { avatar, type AvatarTheme } from "./theme";

package/dist/avatar/theme.d.ts

@@ -60,3 +60,4 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", unknown, unknown, undefined>>;
 export { avatar };
+export type AvatarTheme = string;

package/dist/badge/Badge.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
-  import { getContext } from "svelte";
-  import { badge } from ".";
+  import { badge, type BadgeTheme } from ".";
   import { fade } from "svelte/transition";
-  import { type ParamsType, type BaseThemes, type BadgeProps, CloseButton, cn } from "..";
+  import { type ParamsType, type BadgeProps, CloseButton, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
 
-  // Get merged theme from context
-  const context = getContext<BaseThemes>("themeConfig");
-  // Use context theme if available, otherwise fallback to default
-  const badgeTheme = context?.badge || badge;
+  // Theme context
+  const theme = getTheme("badge");
 
-  const { base, hrefClass } = $derived(badgeTheme({ color, size: large ? "large" : "small", rounded, border }));
+  const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border }));
 
   const close = (ev: MouseEvent) => {
     onclose?.(ev);
@@ -20,9 +18,9 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} transition:transition={params as ParamsType} class={cn(base(), className)}>
+  <div {...restProps} transition:transition={params as ParamsType} class={cn(base(), className, (theme as BadgeTheme)?.base)}>
     {#if href}
-      <a {href} {target} class={cn(hrefClass(), aClass)}>
+      <a {href} {target} class={cn(linkClass(), aClass, (theme as BadgeTheme)?.linkClass)}>
         {@render children()}
       </a>
     {:else}
@@ -46,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L219)
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L212)
 ## Props
 @prop children
 @prop icon

package/dist/badge/Badge.svelte.d.ts

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

package/dist/badge/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Badge } from "./Badge.svelte";
-export { badge } from "./theme";
+export { badge, type BadgeTheme } from "./theme";

package/dist/badge/theme.d.ts

@@ -79,7 +79,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    hrefClass: string;
+    linkClass: string;
     base: string;
 }, undefined, {
     color: {
@@ -160,7 +160,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    hrefClass: string;
+    linkClass: string;
     base: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
@@ -241,7 +241,9 @@ declare const badge: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    hrefClass: string;
+    linkClass: string;
     base: string;
 }, undefined, unknown, unknown, undefined>>;
 export { badge, type BadgeVariants };
+export type BadgeSlots = keyof typeof badge.slots;
+export type BadgeTheme = Partial<Record<BadgeSlots, string>>;

package/dist/badge/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 const badge = tv({
     slots: {
-        hrefClass: "flex align-middle",
+        linkClass: "flex align-middle",
         base: "font-medium inline-flex items-center justify-center px-2.5 py-0.5"
     },
     variants: {

package/dist/banner/Banner.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import { banner } from ".";
+  import { banner, type BannerTheme } from ".";
   import { type ParamsType, type BannerProps, CloseButton, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, innerClass, transition = fade, params, closeClass, ...restProps }: BannerProps = $props();
 
+  // Theme context
+  const theme = getTheme("banner");
+
   const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
 </script>
 
 {#if open}
-  <div tabindex="-1" class={cn(base(), className)} {...restProps} transition:transition={params as ParamsType}>
-    <div class={cn(insideDiv(), innerClass)}>
+  <div tabindex="-1" class={cn(base(), className, (theme as BannerTheme)?.base)} {...restProps} transition:transition={params as ParamsType}>
+    <div class={cn(insideDiv(), innerClass, (theme as BannerTheme)?.insideDiv)}>
       {@render children?.()}
     </div>
 
     {#if dismissable}
       <div class="flex items-center justify-end">
         <CloseButton
-          class={cn(dismissableClass(), closeClass)}
+          class={cn(dismissableClass(), closeClass, (theme as BannerTheme)?.dismissable)}
           {color}
           ariaLabel="Remove banner"
           onclick={() => {
@@ -33,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L234)
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L227)
 ## Props
 @prop children
 @prop header

package/dist/banner/Banner.svelte.d.ts

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

package/dist/banner/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Banner } from "./Banner.svelte";
-export { banner } from "./theme";
+export { banner, type BannerTheme } from "./theme";

package/dist/banner/theme.d.ts

@@ -227,3 +227,5 @@ declare const banner: import("tailwind-variants").TVReturnType<{
     dismissable: string;
 }, undefined, unknown, unknown, undefined>>;
 export { banner };
+export type BannerSlots = keyof typeof banner.slots;
+export type BannerTheme = Partial<Record<BannerSlots, string>>;

package/dist/bottom-navigation/BottomNav.svelte

@@ -2,10 +2,14 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import { bottomNav } from ".";
-  import { type BottomNavProps, type BottomNavContextType, cn } from "..";
+  import { type BottomNavProps, type BottomNavContextType, cn, type BottomNavTheme } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, header, position = "fixed", navType = "default", outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
 
+  // Theme context
+  const theme = getTheme("bottomNav");
+
   const activeCls = cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass);
 
   const activeUrlStore = writable("");
@@ -20,12 +24,12 @@
   });
 </script>
 
-<div {...restProps} class={cn(outer(), outerClass)}>
+<div {...restProps} class={cn(outer(), outerClass, (theme as BottomNavTheme)?.outer)}>
   {#if header}
     {@render header()}
   {/if}
 
-  <div class={cn(inner(), innerClass)}>
+  <div class={cn(inner(), innerClass, (theme as BottomNavTheme)?.inner)}>
     {@render children()}
   </div>
 </div>
@@ -34,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L256)
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L249)
 ## Props
 @prop children
 @prop header

package/dist/bottom-navigation/BottomNav.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-  import { bottomnavheader } from ".";
-  import { type BottomNavHeaderProps, cn } from "..";
+  import { bottomNavHeader } from ".";
+  import { type BottomNavHeaderProps, cn, type BottomNavHeaderTheme } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
-  const { innerDiv, outerDiv } = $derived(bottomnavheader());
+
+  // Theme context
+  const theme = getTheme("bottomNavHeader");
+
+  const { innerDiv, outerDiv } = $derived(bottomNavHeader());
 </script>
 
-<div {...restProps} class={cn(outerDiv(), outerClass)}>
-  <div class={cn(innerDiv(), innerClass)} role="group">
+<div {...restProps} class={cn(outerDiv(), outerClass, (theme as BottomNavHeaderTheme)?.outerDiv)}>
+  <div class={cn(innerDiv(), innerClass, (theme as BottomNavHeaderTheme)?.innerDiv)} role="group">
     {@render children()}
   </div>
 </div>
@@ -16,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L302)
+[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L295)
 ## Props
 @prop children
 @prop outerClass

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-  import { bottomnavheaderitem } from ".";
+  import { bottomNavHeaderItem } from ".";
   import { type BottomNavHeaderItemProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
-  let base = $derived(bottomnavheaderitem({ active }));
+
+  // Theme context
+  const theme = getTheme("bottomNavHeaderItem");
+
+  let base = $derived(bottomNavHeaderItem({ active }));
 </script>
 
-<button {...restProps} class={cn(base, className)}>
+<button {...restProps} class={cn(base, className, theme)}>
   {itemName}
 </button>
 
@@ -14,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L308)
+[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L301)
 ## Props
 @prop itemName
 @prop active

package/dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

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