flowbite-svelte 1.11.2 → 1.11.4

package/dist/tabs/TabItem.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import { type SelectedTab, type TabCtxType, type TabitemProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+  import { useSingleSelection } from "../utils/singleselection.svelte";
+  import clsx from "clsx";
   import { getContext } from "svelte";
-  import { writable } from "svelte/store";
   import { tabItem, tabs } from ".";
-  import clsx from "clsx";
-  import { type TabitemProps, type TabCtxType } from "..";
-  import { getTheme } from "../theme/themeUtils";
 
-  let { children, titleSlot, open = false, title = "Tab title", activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
+  let { children, titleSlot, open = $bindable(false), title = "Tab title", activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
 
   const theme = getTheme("tabItem");
 
@@ -14,23 +14,18 @@
   let compoTabStyle = $derived(tabStyle ? tabStyle : ctx.tabStyle || "full");
 
   const { active, inactive } = $derived(tabs({ tabStyle: compoTabStyle, hasDivider: true }));
-  let selected = ctx.selected ?? writable<HTMLElement>();
+
   // Generate a unique ID for this tab button
   const tabId = `tab-${Math.random().toString(36).substring(2)}`;
 
-  function init(node: HTMLElement) {
-    selected.set(node);
-
-    const destroy = selected.subscribe((x) => {
-      if (x !== node) {
-        open = false;
-      }
-    });
+  const updateSingleSelection = useSingleSelection<SelectedTab>((value) => (open = value.id === tabId));
 
-    return { destroy };
-  }
+  $effect(() => {
+    // monitor if open changes out side of that component
+    updateSingleSelection?.(open, { snippet: children, id: tabId });
+  });
 
-  const { base, button, content } = $derived(tabItem({ open, disabled }));
+  const { base, button } = $derived(tabItem({ open, disabled }));
 </script>
 
 <li {...restProps} class={base({ class: clsx(theme?.base, className) })} role="presentation">
@@ -41,25 +36,17 @@
       {title}
     {/if}
   </button>
-
-  {#if open && children}
-    <div class={content({ class: clsx(theme?.content, classes?.content) })}>
-      <div use:init>
-        {@render children()}
-      </div>
-    </div>
-  {/if}
 </li>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1725)
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1709)
 ## Props
 @prop children
 @prop titleSlot
-@prop open = false
+@prop open = $bindable(false)
 @prop title = "Tab title"
 @prop activeClass
 @prop inactiveClass

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

@@ -2,11 +2,11 @@ import { type TabitemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1725)
+ * [TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1709)
  * ## Props
  * @prop children
  * @prop titleSlot
- * @prop open = false
+ * @prop open = $bindable(false)
  * @prop title = "Tab title"
  * @prop activeClass
  * @prop inactiveClass
@@ -16,6 +16,6 @@ import { type TabitemProps } from "..";
  * @prop tabStyle
  * @prop ...restProps
  */
-declare const TabItem: import("svelte").Component<TabitemProps, {}, "">;
+declare const TabItem: import("svelte").Component<TabitemProps, {}, "open">;
 type TabItem = ReturnType<typeof TabItem>;
 export default TabItem;

package/dist/tabs/Tabs.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import type { SelectedTab, TabCtxType, TabsProps } from "../types";
+  import { createSingleSelectionContext, useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
-  import { writable } from "svelte/store";
-  import { setContext } from "svelte";
+  import { setContext, type Snippet } from "svelte";
   import { tabs } from ".";
-  import type { TabsProps, TabCtxType } from "../types";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   let { children, tabStyle = "none", ulClass, contentClass, divider = true, class: className, classes, ...restProps }: TabsProps = $props();
 
@@ -19,24 +19,20 @@
   // Generate a unique ID for the tab panel
   const panelId = `tab-panel-${Math.random().toString(36).substring(2)}`;
 
-  const ctx: TabCtxType = {
-    get tabStyle() {
-      return tabStyle;
-    },
-    selected: writable<HTMLElement>(),
+  const ctx: TabCtxType = $state({
+    tabStyle,
+    selected: undefined,
     panelId // Add panelId to the context
-  };
+  });
 
   let dividerBool = $derived(["full", "pill"].includes(tabStyle) ? false : divider);
 
   setContext("ctx", ctx);
 
-  function init(node: HTMLElement) {
-    const destroy = ctx.selected.subscribe((x: HTMLElement) => {
-      if (x) node.replaceChildren(x);
-    });
-    return { destroy };
-  }
+  createSingleSelectionContext<SelectedTab>();
+
+  let selected: SelectedTab = $state({});
+  useSingleSelection<SelectedTab>((v) => (selected = v));
 </script>
 
 <ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className ?? ulClass) })}>
@@ -45,13 +41,15 @@
 {#if dividerBool}
   <div class={dividerClass({ class: clsx(theme?.divider, classes?.divider) })}></div>
 {/if}
-<div id={panelId} class={content({ class: clsx(theme?.content, styling.content) })} role="tabpanel" aria-labelledby={panelId} use:init></div>
+<div id={panelId} class={content({ class: clsx(theme?.content, styling.content) })} role="tabpanel" aria-labelledby={selected.id}>
+  {@render selected.snippet?.()}
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1717)
+[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1701)
 ## Props
 @prop children
 @prop tabStyle = "none"

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#L1717)
+ * [TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1701)
  * ## Props
  * @prop children
  * @prop tabStyle = "none"

package/dist/tabs/theme.d.ts

@@ -104,7 +104,6 @@ export declare const tabItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
-    content: string;
 }, undefined, {
     open: {
         true: {
@@ -119,7 +118,6 @@ export declare const tabItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
-    content: string;
 }, import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -134,5 +132,4 @@ export declare const tabItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
-    content: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/tabs/theme.js

@@ -48,8 +48,7 @@ export const tabs = tv({
 export const tabItem = tv({
     slots: {
         base: "group focus-within:z-10",
-        button: "inline-block text-sm font-medium text-center disabled:cursor-not-allowed",
-        content: "hidden"
+        button: "inline-block text-sm font-medium text-center disabled:cursor-not-allowed"
     },
     variants: {
         open: {

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#L1760)
+[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1745)
 ## 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#L1760)
+ * [ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1745)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/timeline/ActivityItem.svelte

@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1764)
+[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1749)
 ## 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#L1764)
+ * [ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1749)
  * ## Props
  * @prop activities
  * @prop liClass

package/dist/timeline/Group.svelte

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

package/dist/timeline/GroupItem.svelte

@@ -66,7 +66,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1784)
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1769)
 ## 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#L1784)
+ * [GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1769)
  * ## Props
  * @prop timelines
  * @prop aClass

package/dist/timeline/Timeline.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1804)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1789)
 ## 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#L1804)
+ * [TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1789)
  * ## Props
  * @prop children
  * @prop order = "default"

package/dist/timeline/TimelineItem.svelte

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

package/dist/timeline/theme.d.ts

@@ -8,28 +8,28 @@ export type TimelineItemVariants = VariantProps<typeof timelineItem> & Classes<t
 export declare const activity: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative border-s border-gray-200 dark:border-gray-700", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative border-s border-gray-200 dark:border-gray-700", unknown, unknown, undefined>>;
 export declare const activityItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            img?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
-            inner?: import("tailwind-variants").ClassValue;
-            text?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
-            li?: import("tailwind-variants").ClassValue;
-            outer?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            outer?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            img?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
-            inner?: import("tailwind-variants").ClassValue;
-            text?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
-            li?: import("tailwind-variants").ClassValue;
-            outer?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            outer?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -43,15 +43,15 @@ export declare const activityItem: import("tailwind-variants").TVReturnType<{
     text: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            img?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
-            inner?: import("tailwind-variants").ClassValue;
-            text?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
-            li?: import("tailwind-variants").ClassValue;
-            outer?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            img?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            text?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            outer?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -75,18 +75,18 @@ export declare const activityItem: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export declare const group: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
-            ol?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
-            ol?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -95,10 +95,10 @@ export declare const group: import("tailwind-variants").TVReturnType<{
     ol: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
-            time?: import("tailwind-variants").ClassValue;
-            ol?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            time?: import("tailwind-merge").ClassNameValue;
+            ol?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -112,26 +112,26 @@ export declare const group: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export declare const groupItem: 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;
-            title?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
-            svg?: import("tailwind-variants").ClassValue;
-            a?: 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;
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            a?: 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;
-            title?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
-            svg?: import("tailwind-variants").ClassValue;
-            a?: 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;
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -144,14 +144,14 @@ export declare const groupItem: import("tailwind-variants").TVReturnType<{
     svg: 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;
-            title?: import("tailwind-variants").ClassValue;
-            div?: import("tailwind-variants").ClassValue;
-            svg?: import("tailwind-variants").ClassValue;
-            a?: 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;
+            title?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+            svg?: import("tailwind-merge").ClassNameValue;
+            a?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/toast/Toast.svelte

@@ -6,9 +6,9 @@
   import { fly } from "svelte/transition";
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { createDismissableContext } from "../utils/dismissable.svelte";
+  import { createDismissableContext } from "../utils/dismissable";
 
-  let { children, icon, toastStatus = $bindable(true), dismissable = true, color = "primary", position, iconClass, contentClass, align = true, params, transition = fly, class: className, classes, onclose, ...restProps }: ToastProps = $props();
+  let { children, icon, toastStatus = $bindable(true), dismissable = true, color = "primary", position, iconClass, contentClass, align = true, params, transition = fly, class: className, classes, ...restProps }: ToastProps = $props();
 
   warnThemeDeprecation(
     "Toast",
@@ -41,7 +41,7 @@
 </script>
 
 {#if toastStatus}
-  <div role="alert" bind:this={ref} {onclose} transition:transition={params as ParamsType} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div role="alert" bind:this={ref} transition:transition={params as ParamsType} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
     {#if icon}
       <div class={iconVariants({ class: clsx(theme?.icon, styling.icon) })}>
         {@render icon()}
@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1823)
+[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1808)
 ## Props
 @prop children
 @prop icon
@@ -77,6 +77,5 @@
 @prop transition = fly
 @prop class: className
 @prop classes
-@prop onclose
 @prop ...restProps
 -->

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#L1823)
+ * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1808)
  * ## Props
  * @prop children
  * @prop icon
@@ -17,7 +17,6 @@ import type { ToastProps } from "../types";
  * @prop transition = fly
  * @prop class: className
  * @prop classes
- * @prop onclose
  * @prop ...restProps
  */
 declare const Toast: import("svelte").Component<ToastProps, {}, "toastStatus">;

package/dist/toolbar/Toolbar.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-  import { toolbar } from "./";
+  import { getTheme } from "../theme/themeUtils";
   import type { ToolbarProps } from "../types";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { setContext } from "svelte";
+  import { toolbar } from "./";
 
   let { children, end, color, embedded, class: className, classes, ...restProps }: ToolbarProps = $props();
 
   const theme = getTheme("toolbar");
 
-  const separators = writable(false);
-  setContext("toolbar", separators);
+  const context = $state({ separators: false });
+  setContext("toolbar", context);
 
   let frameColor = $derived(embedded ? "default" : color);
 
@@ -19,7 +18,7 @@
     toolbar({
       color: frameColor,
       embedded,
-      separators: $separators
+      separators: context.separators
     })
   );
 
@@ -41,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1131)
+[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1115)
 ## Props
 @prop children
 @prop end

package/dist/toolbar/Toolbar.svelte.d.ts

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

package/dist/toolbar/ToolbarButton.svelte

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

package/dist/toolbar/ToolbarButton.svelte.d.ts

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