flowbite-svelte 1.29.0 → 1.30.0

package/dist/table/TableHeadCell.svelte

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

package/dist/table/TableHeadCell.svelte.d.ts

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

package/dist/table/TableSearch.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { setContext } from "svelte";
-  import type { TableSearchProps, TableSearchType } from "../types";
+  import { setTableContext } from "../context";
+  import type { TableSearchProps, TableContextType } from "../types";
   import clsx from "clsx";
   import { tableSearch } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
@@ -27,11 +27,13 @@
     ...restProps
   }: TableSearchProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "TableSearch",
     { divClass, innerDivClass, inputClass, searchClass, svgDivClass, svgClass, tableClass },
     { divClass: "root", innerDivClass: "inner", inputClass: "input", searchClass: "search", svgDivClass: "svgDiv", svgClass: "svg", tableClass: "table" }
   );
+
   const styling = $derived(
     classes ?? {
       root: divClass,
@@ -46,8 +48,7 @@
 
   const theme = getTheme("tableSearch");
 
-  // Generate theme styles - handle custom color case
-  const themeColor = color === "custom" ? "default" : (color as "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink");
+  const themeColor = $derived(color === "custom" ? "default" : (color as "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink"));
 
   const { root, inner, search, svgDiv, svg, input, table } = $derived(tableSearch({ color: themeColor, striped, hoverable }));
 
@@ -56,13 +57,15 @@
   // Handle custom color
   const finalTableClass = $derived(color === "custom" && customColor ? clsx(tableCls, customColor) : tableCls);
 
-  const tableSearchCtx: TableSearchType = {
+  const tableSearchCtx = $derived<TableContextType>({
     striped,
     hoverable,
-    color
-  };
+    color: themeColor
+  });
 
-  setContext("tableCtx", tableSearchCtx);
+  $effect(() => {
+    setTableContext(tableSearchCtx);
+  });
 </script>
 
 <div class={root({ class: clsx(theme?.root, styling.root) })}>
@@ -94,7 +97,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1774)
+[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1834)
 ## Props
 @prop children
 @prop header

package/dist/table/TableSearch.svelte.d.ts

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

package/dist/tabs/TabItem.svelte

@@ -3,24 +3,30 @@
   import { getTheme } from "../theme/themeUtils";
   import { useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
-  import { getContext } from "svelte";
   import { tabItem, tabs } from "./theme";
+  import { getTabsContext } from "../context";
 
   let { children, titleSlot, open = $bindable(false), title = "Tab title", key, activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
 
   const theme = getTheme("tabItem");
-  const activeClasses = getContext<string>("activeClasses");
-  const ctx: TabCtxType = getContext("ctx");
+  const tabsCtx = getTabsContext();
+
+  if (!tabsCtx) {
+    throw new Error("TabItem must be used within a Tabs component");
+  }
+
+  const activeClasses = tabsCtx.activeClasses;
+  const ctx: TabCtxType = tabsCtx.ctx;
 
   const compoTabStyle = $derived(tabStyle ?? ctx.tabStyle ?? "full");
   const { active, inactive } = $derived(tabs({ tabStyle: compoTabStyle, hasDivider: true }));
 
   const tabId = $props.id();
-  const tabIdentifier = key ?? tabId;
-  const self: SelectedTab = { id: tabIdentifier, snippet: children };
+  const tabIdentifier = $derived(key ?? tabId);
+  const self = $derived<SelectedTab>({ id: tabIdentifier, snippet: children });
 
-  const registerTab = getContext<(tab: SelectedTab) => void>("registerTab");
-  const unregisterTab = getContext<(tabId: string) => void>("unregisterTab");
+  const registerTab = tabsCtx.registerTab;
+  const unregisterTab = tabsCtx.unregisterTab;
 
   const updateSingleSelection = useSingleSelection<SelectedTab>((value) => (open = value?.id === self.id));
 
@@ -63,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1863)
 ## Props
 @prop children
 @prop titleSlot

package/dist/tabs/TabItem.svelte.d.ts

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

package/dist/tabs/Tabs.svelte

@@ -3,15 +3,14 @@
   import type { SelectedTab, TabCtxType, TabsProps } from "../types";
   import { createSingleSelectionContext, useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
-  import { setContext } from "svelte";
   import { tabs } from "./theme";
+  import { setTabsContext } from "../context";
 
   let { children, selected = $bindable(), tabStyle = "none", ulClass, contentClass, divider = true, class: className, classes, ...restProps }: TabsProps = $props();
 
-  if (classes?.active) {
-    setContext("activeClasses", classes.active);
-  }
+  const activeClasses = $derived(typeof classes?.active === "string" ? classes.active : undefined);
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Tabs", { ulClass, contentClass }, { ulClass: "class", contentClass: "content" });
 
   const theme = getTheme("tabs");
@@ -20,10 +19,9 @@
 
   const uuid = $props.id();
   const panelId = `tab-panel-${uuid}`;
-  const ctx: TabCtxType = $state({ tabStyle, panelId });
+  const ctx = $derived<TabCtxType>({ tabStyle, panelId });
   const dividerBool = $derived(["full", "pill"].includes(tabStyle) ? false : divider);
 
-  setContext("ctx", ctx);
   createSingleSelectionContext<SelectedTab>();
 
   const tabRegistry = $state(new Map<string, SelectedTab>());
@@ -54,14 +52,27 @@
     }
   });
 
-  setContext("registerTab", (tabData: SelectedTab) => {
+  const registerFn = (tabData: SelectedTab) => {
     if (tabData.id) {
       tabRegistry.set(tabData.id, tabData);
     }
-  });
+  };
 
-  setContext("unregisterTab", (tabId: string) => {
+  const unregisterFn = (tabId: string) => {
     tabRegistry.delete(tabId);
+  };
+
+  // Set context synchronously for SSR compatibility
+  // Use getters to make the context reactive
+  setTabsContext({
+    get activeClasses() {
+      return activeClasses;
+    },
+    get ctx() {
+      return ctx;
+    },
+    registerTab: registerFn,
+    unregisterTab: unregisterFn
   });
 </script>
 
@@ -80,7 +91,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1794)
+[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1854)
 ## Props
 @prop children
 @prop selected = $bindable()

package/dist/tabs/Tabs.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TabsProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1794)
+ * [TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1854)
  * ## Props
  * @prop children
  * @prop selected = $bindable()

package/dist/theme/ThemeProvider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import { setContext } from "svelte";
+  import { setThemeContext } from "../context";
   import type { ThemeConfig } from "../types";
 
   interface ThemeProviderProps {
@@ -10,11 +10,13 @@
 
   let { children, theme }: ThemeProviderProps = $props();
 
-  if (theme) {
-    setContext("theme", theme);
-  } else {
-    console.log("ThemeProvider: No theme provided");
-  }
+  $effect(() => {
+    if (theme) {
+      setThemeContext(theme);
+    } else {
+      console.log("ThemeProvider: No theme provided");
+    }
+  });
 </script>
 
 {@render children()}

package/dist/theme/themeUtils.d.ts

@@ -1,6 +1,6 @@
 import type { ThemeConfig } from "..";
 import type { ClassValue } from "clsx";
-export declare function getTheme<K extends keyof ThemeConfig>(componentKey: K): ThemeConfig[K];
+export declare function getTheme<K extends keyof ThemeConfig>(componentKey: K): ThemeConfig[K] | undefined;
 type Slots<T extends {
     slots: Record<string, unknown>;
 }> = Omit<T["slots"], "base">;

package/dist/theme/themeUtils.js

@@ -1,7 +1,7 @@
-import { getContext } from "svelte";
+import { getThemeContext } from "../context";
 import { DEV } from "esm-env";
 export function getTheme(componentKey) {
-    const theme = getContext("theme");
+    const theme = getThemeContext();
     return theme?.[componentKey];
 }
 /**

package/dist/timeline/Activity.svelte

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

package/dist/timeline/Activity.svelte.d.ts

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

package/dist/timeline/ActivityItem.svelte

@@ -6,6 +6,7 @@
 
   let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, class: className, classes, ...restProps }: ActivityItemProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "ActivityItem",
     { liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass },
@@ -20,6 +21,7 @@
       textClass: "text"
     }
   );
+
   const styling = $derived(
     classes ?? {
       span: spanClass,
@@ -62,7 +64,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1845)
+[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1912)
 ## Props
 @prop activities
 @prop liClass

package/dist/timeline/ActivityItem.svelte.d.ts

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

package/dist/timeline/Group.svelte

@@ -6,6 +6,7 @@
 
   let { children, divClass, timeClass, date, olClass, class: className, classes, ...restProps }: GroupProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Group",
     { divClass, timeClass, olClass },
@@ -15,6 +16,7 @@
       olClass: "ol"
     }
   );
+
   const styling = $derived({
     time: timeClass,
     ol: olClass
@@ -36,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1857)
+[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1924)
 ## Props
 @prop children
 @prop divClass

package/dist/timeline/Group.svelte.d.ts

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

package/dist/timeline/GroupItem.svelte

@@ -6,6 +6,7 @@
 
   let { timelines, aClass, imgClass, divClass, titleClass, spanClass, class: className, classes, ...restProps }: GroupItemProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "GroupItem",
     { aClass, imgClass, divClass, titleClass, spanClass },
@@ -17,6 +18,7 @@
       spanClass: "span"
     }
   );
+
   const styling = $derived(
     classes ?? {
       img: imgClass,
@@ -74,7 +76,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1865)
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1932)
 ## Props
 @prop timelines
 @prop aClass

package/dist/timeline/GroupItem.svelte.d.ts

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

package/dist/timeline/Timeline.svelte

@@ -9,7 +9,9 @@
 
   const theme = getTheme("timeline");
 
-  setContext<TimelineVariants["order"]>("order", order);
+  $effect(() => {
+    setContext<TimelineVariants["order"]>("order", order);
+  });
   const olCls = $derived(timeline({ order, class: clsx(theme, className) }));
 </script>
 
@@ -21,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1886)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1953)
 ## Props
 @prop children
 @prop order = "default"

package/dist/timeline/Timeline.svelte.d.ts

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

package/dist/timeline/TimelineItem.svelte

@@ -25,6 +25,7 @@
     ...restProps
   }: TimelineItemProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "TimelineItem",
     { svgClass, liClass, divClass, timeClass, h3Class, connectorClass },
@@ -129,7 +130,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1893)
+[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1960)
 ## Props
 @prop children
 @prop orientationSlot

package/dist/timeline/TimelineItem.svelte.d.ts

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

package/dist/timeline/theme.d.ts

@@ -9,26 +9,26 @@ export declare const activity: import("tailwind-variants").TVReturnType<{} | {}
 export declare const activityItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            inner?: import("tailwind-merge").ClassNameValue;
             title?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
             li?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
             outer?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            inner?: import("tailwind-merge").ClassNameValue;
             title?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
             li?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
             outer?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -44,13 +44,13 @@ export declare const activityItem: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            inner?: import("tailwind-merge").ClassNameValue;
             title?: import("tailwind-merge").ClassNameValue;
-            text?: import("tailwind-merge").ClassNameValue;
-            time?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
             li?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
             outer?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -76,17 +76,17 @@ export declare const activityItem: import("tailwind-variants").TVReturnType<{
 export declare const group: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            time?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
             ol?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
-            time?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
             ol?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -96,9 +96,9 @@ export declare const group: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            time?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
             ol?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -114,24 +114,24 @@ export declare const groupItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
             a?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
             a?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -146,12 +146,12 @@ export declare const groupItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
-            div?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
             a?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/toast/Toast.svelte

@@ -24,6 +24,7 @@
     ...restProps
   }: ToastProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Toast",
     { iconClass, contentClass },
@@ -32,6 +33,7 @@
       contentClass: "content"
     }
   );
+
   const styling = $derived(
     classes ?? {
       icon: iconClass,
@@ -76,7 +78,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1911)
+[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
 ## Props
 @prop children
 @prop icon

package/dist/toast/Toast.svelte.d.ts

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

package/dist/toast/ToastContainer.svelte

@@ -15,7 +15,7 @@
     "bottom-right": "bottom-4 right-4"
   };
 
-  const base = toastContainer({ class: clsx(positionClasses[position], theme, className) });
+  const base = $derived(toastContainer({ class: clsx(positionClasses[position], theme, className) }));
 </script>
 
 <div {...restProps} class={base}>
@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1926)
+[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
 ## Props
 @prop children
 @prop position = "top-right"