flowbite-svelte 1.11.1 → 1.11.3

package/dist/accordion/Accordion.svelte

@@ -1,24 +1,28 @@
 <script lang="ts">
+  import { type AccordionCtxType, type AccordionProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { setContext } from "svelte";
-  import { writable } from "svelte/store";
   import { accordion } from "./";
-  import clsx from "clsx";
-  import { type AccordionProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { createSingleSelectionContext } from "../utils/singleselection.svelte";
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
 
   const theme = getTheme("accordion");
 
-  const ctx = {
+  const ctx: AccordionCtxType = $state({
     flush,
     activeClass,
     inactiveClass,
-    selected: multiple ? undefined : writable()
-  };
+    transitionType
+  });
+
+  setContext<AccordionCtxType>("ctx", ctx);
+
+  if (!multiple) {
+    createSingleSelectionContext();
+  }
 
-  setContext("ctx", ctx);
-  setContext("ctxTransitionType", transitionType);
   const base = $derived(accordion({ flush, class: clsx(theme, className) }));
 </script>
 
@@ -30,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L179)
+[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L168)
 ## 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#L179)
+ * [AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L168)
  * ## Props
  * @prop children
  * @prop flush

package/dist/accordion/AccordionItem.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { type AccordionCtxType, type AccordionItemProps, type ParamsType } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
   import { getContext } from "svelte";
-  import { writable } from "svelte/store";
   import { slide } from "svelte/transition";
   import { accordionItem } from ".";
 
@@ -27,24 +27,27 @@
 
   let styling: typeof classes = $derived(classes ?? { button: headerClass, content: contentClass, active: activeClass, inactive: inactiveClass });
 
-  const ctxTransitionType = getContext("ctxTransitionType");
+  const ctx: AccordionCtxType = getContext("ctx") ?? {};
+
+  const ctxTransitionType = ctx.transitionType ?? transitionType;
   // Check if transitionType is explicitly set to undefined in props
   const useTransition = transitionType === "none" ? false : ctxTransitionType === "none" ? false : true;
 
   // Theme context
   const theme = getTheme("accordionItem");
 
-  const ctx: AccordionCtxType = getContext("ctx") ?? {};
-
   // single selection
-  const self = {};
-  const selected = ctx.selected ?? writable();
+  const self = Symbol("accordion-item");
 
-  if (open) selected.set(self);
+  const updateSingleSelection = useSingleSelection<symbol>((value) => (open = value === self));
 
-  selected.subscribe((x) => (open = x === self));
+  $effect(() => {
+    updateSingleSelection(open, self);
+  });
 
-  const handleToggle = () => selected.set(open ? {} : self);
+  const handleToggle = () => {
+    open = !open;
+  };
 
   const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx.flush, open }));
 
@@ -94,7 +97,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L187)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L176)
 ## 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#L187)
+ * [AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L176)
  * ## Props
  * @prop children
  * @prop header

package/dist/alert/Alert.svelte

@@ -6,7 +6,7 @@
   import { getTheme } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable.svelte";
 
-  let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclose, ...restProps }: AlertProps = $props();
+  let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, ...restProps }: AlertProps = $props();
 
   // Theme context
   const theme = getTheme("alert");
@@ -34,7 +34,7 @@
 </script>
 
 {#if alertStatus}
-  <div role="alert" bind:this={ref} {...restProps} {onclose} transition:transition={params as ParamsType} class={divCls}>
+  <div role="alert" bind:this={ref} {...restProps} transition:transition={params as ParamsType} class={divCls}>
     {#if icon}
       {@render icon()}
     {/if}
@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L201)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L190)
 ## Props
 @prop children
 @prop icon
@@ -76,6 +76,5 @@
 @prop dismissable
 @prop transition = fade
 @prop params
-@prop onclose
 @prop ...restProps
 -->

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#L201)
+ * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L190)
  * ## Props
  * @prop children
  * @prop icon
@@ -15,7 +15,6 @@ import { type AlertProps } from "..";
  * @prop dismissable
  * @prop transition = fade
  * @prop params
- * @prop onclose
  * @prop ...restProps
  */
 declare const Alert: import("svelte").Component<AlertProps, {}, "alertStatus">;

package/dist/avatar/Avatar.svelte

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

package/dist/badge/Badge.svelte

@@ -6,7 +6,7 @@
   import { badge } from ".";
   import { createDismissableContext } from "../utils/dismissable.svelte";
 
-  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, classes, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
+  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, classes, border, href, target, rounded, transition = fade, params, aClass, ...restProps }: BadgeProps = $props();
 
   warnThemeDeprecation("Badge", { aClass }, { aClass: "linkClass" });
 
@@ -19,7 +19,7 @@
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
-  const close = (ev: MouseEvent) => {
+  const close = (ev: Event) => {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
       badgeStatus = false;
     }
@@ -29,7 +29,7 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} bind:this={ref} transition:transition={params as ParamsType} {onclose} class={base({ class: clsx(theme?.base, className) })}>
+  <div {...restProps} bind:this={ref} transition:transition={params as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
     {#if href}
       <a {href} {target} class={linkClass({ class: clsx(theme?.linkClass, styling.linkClass) })}>
         {@render children()}
@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L224)
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L213)
 ## Props
 @prop children
 @prop icon
@@ -71,6 +71,5 @@
 @prop transition = fade
 @prop params
 @prop aClass
-@prop onclose
 @prop ...restProps
 -->

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#L224)
+ * [BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L213)
  * ## Props
  * @prop children
  * @prop icon
@@ -19,7 +19,6 @@ import { type BadgeProps } from "..";
  * @prop transition = fade
  * @prop params
  * @prop aClass
- * @prop onclose
  * @prop ...restProps
  */
 declare const Badge: import("svelte").Component<BadgeProps, {}, "badgeStatus">;

package/dist/banner/Banner.svelte

@@ -6,7 +6,7 @@
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable.svelte";
 
-  let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, classes, innerClass, transition = fade, params, closeClass, onclose, ...restProps }: BannerProps = $props();
+  let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, classes, innerClass, transition = fade, params, closeClass, ...restProps }: BannerProps = $props();
 
   warnThemeDeprecation("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
 
@@ -27,7 +27,7 @@
 </script>
 
 {#if open}
-  <div tabindex="-1" bind:this={ref} {onclose} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
+  <div tabindex="-1" bind:this={ref} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
     <div class={insideDiv({ class: clsx(theme?.insideDiv, styling.insideDiv) })}>
       {@render children?.()}
     </div>
@@ -44,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L239)
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L227)
 ## Props
 @prop children
 @prop header
@@ -58,6 +58,5 @@
 @prop transition = fade
 @prop params
 @prop closeClass
-@prop onclose
 @prop ...restProps
 -->

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#L239)
+ * [BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L227)
  * ## Props
  * @prop children
  * @prop header
@@ -16,7 +16,6 @@ import { type BannerProps } from "..";
  * @prop transition = fade
  * @prop params
  * @prop closeClass
- * @prop onclose
  * @prop ...restProps
  */
 declare const Banner: import("svelte").Component<BannerProps, {}, "open">;

package/dist/bottom-navigation/BottomNav.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
+  import { type BottomNavContextType, type BottomNavProps, cn } from "..";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { setContext } from "svelte";
-  import { writable } from "svelte/store";
   import { bottomNav } from ".";
-  import clsx from "clsx";
-  import { type BottomNavProps, type BottomNavContextType, cn } from "..";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
 
@@ -42,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L257)
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L245)
 ## 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#L257)
+ * [BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L245)
  * ## Props
  * @prop children
  * @prop header

package/dist/bottom-navigation/BottomNavHeader.svelte

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

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -20,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L282)
+[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L270)
 ## 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#L282)
+ * [BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L270)
  * ## Props
  * @prop itemName
  * @prop active

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -67,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L266)
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L254)
 ## Props
 @prop children
 @prop btnName

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

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

package/dist/breadcrumb/Breadcrumb.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L288)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L276)
 ## Props
 @prop children
 @prop solid = false

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -56,7 +56,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L295)
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L283)
 ## Props
 @prop children
 @prop icon

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/button-group/ButtonGroup.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L306)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L294)
 ## Props
 @prop children
 @prop size = "md"

package/dist/button-group/ButtonGroup.svelte.d.ts

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

package/dist/buttons/Button.svelte

@@ -44,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L316)
+[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L304)
 ## Props
 @prop children
 @prop pill

package/dist/buttons/Button.svelte.d.ts

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

package/dist/buttons/GradientButton.svelte

@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L325)
+[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L313)
 ## Props
 @prop children
 @prop outline

package/dist/buttons/GradientButton.svelte.d.ts

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

package/dist/card/Card.svelte

@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L366)
+[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L354)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/card/Card.svelte.d.ts

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

package/dist/carousel/Carousel.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
+  import { type CarouselProps, type State, Slide } from "..";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { onMount, setContext } from "svelte";
-  import { writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
-  import clsx from "clsx";
-  import { type CarouselProps, type State, Slide } from "..";
-  import { getTheme } from "../theme/themeUtils";
 
   const SLIDE_DURATION_RATIO = 0.25;
 
@@ -13,20 +12,14 @@
 
   const theme = getTheme("carousel");
 
-  const { set, subscribe, update } = writable<State>({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date() });
+  const _state: State = $state({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date() });
 
-  setContext("state", {
-    set: (_state: State) => set({ index: _state.index, images: _state.images, lastSlideChange: new Date(), slideDuration, forward }),
-    subscribe,
-    update
-  });
+  setContext("state", _state);
 
-  let forward = $state(true);
   let initialized = false;
 
-  subscribe((_state) => {
+  $effect(() => {
     index = _state.index;
-    forward = _state.forward;
     onchange?.(images[index]);
   });
 
@@ -36,29 +29,23 @@
   });
 
   const nextSlide = () => {
-    update((_state) => {
-      if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-
-      return {
-        ..._state,
-        forward: true,
-        index: _state.index >= images.length - 1 ? 0 : _state.index + 1,
-        lastSlideChange: new Date()
-      };
-    });
+    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
+
+    _state.forward = true;
+    _state.index = _state.index >= images.length - 1 ? 0 : _state.index + 1;
+    _state.lastSlideChange = new Date();
+
+    return _state;
   };
 
   const prevSlide = () => {
-    update((_state) => {
-      if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-
-      return {
-        ..._state,
-        forward: false,
-        index: _state.index <= 0 ? images.length - 1 : _state.index - 1,
-        lastSlideChange: new Date()
-      };
-    });
+    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
+
+    _state.forward = false;
+    _state.index = _state.index <= 0 ? images.length - 1 : _state.index - 1;
+    _state.lastSlideChange = new Date();
+
+    return _state;
   };
 
   const loop = (node: HTMLElement) => {
@@ -68,7 +55,10 @@
 
     if (duration > 0) {
       intervalId = setInterval(nextSlide, duration);
-      if (initialized) forward ? nextSlide() : prevSlide();
+      if (initialized) {
+        if (_state.forward) nextSlide();
+        else prevSlide();
+      }
     }
 
     return () => clearInterval(intervalId);
@@ -189,7 +179,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L384)
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L372)
 ## Props
 @prop children
 @prop slide

package/dist/carousel/Carousel.svelte.d.ts

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