flowbite-svelte 1.29.1 → 1.30.1

package/dist/sidebar/SidebarItem.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { SidebarItemProps } from "..";
+import type { SidebarItemProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1466)
+ * [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1524)
  * ## Props
  * @prop icon
  * @prop subtext

package/dist/sidebar/theme.d.ts

@@ -191,16 +191,16 @@ export declare const sidebarBrand: 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;
+            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;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -211,8 +211,8 @@ export declare const sidebarBrand: 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;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -265,8 +265,8 @@ export declare const sidebarDropdownWrapper: import("tailwind-variants").TVRetur
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
             ul?: import("tailwind-merge").ClassNameValue;
             btn?: import("tailwind-merge").ClassNameValue;
         };
@@ -275,8 +275,8 @@ export declare const sidebarDropdownWrapper: import("tailwind-variants").TVRetur
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
             ul?: import("tailwind-merge").ClassNameValue;
             btn?: import("tailwind-merge").ClassNameValue;
         };
@@ -291,8 +291,8 @@ export declare const sidebarDropdownWrapper: import("tailwind-variants").TVRetur
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            span?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
             ul?: import("tailwind-merge").ClassNameValue;
             btn?: import("tailwind-merge").ClassNameValue;
         };

package/dist/skeleton/CardPlaceholder.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1478)
+[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1536)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/CardPlaceholder.svelte.d.ts

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

package/dist/skeleton/ImagePlaceholder.svelte

@@ -70,7 +70,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1482)
+[ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1540)
 ## Props
 @prop size = "md"
 @prop rounded

package/dist/skeleton/ImagePlaceholder.svelte.d.ts

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

package/dist/skeleton/ListPlaceholder.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1488)
+[ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1546)
 ## Props
 @prop itemNumber = 5
 @prop size = "md"

package/dist/skeleton/ListPlaceholder.svelte.d.ts

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

package/dist/skeleton/Skeleton.svelte

@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1494)
+[SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1552)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/Skeleton.svelte.d.ts

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

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -52,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1498)
+[TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1556)
 ## Props
 @prop class: className
 @prop classes

package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts

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

package/dist/skeleton/TextPlaceholder.svelte

@@ -77,7 +77,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1500)
+[TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1558)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/TextPlaceholder.svelte.d.ts

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

package/dist/skeleton/VideoPlaceholder.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1504)
+[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1562)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/VideoPlaceholder.svelte.d.ts

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

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1508)
+[WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1566)
 ## Props
 @prop class: className
 @prop classes

package/dist/skeleton/WidgetPlaceholder.svelte.d.ts

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

package/dist/speed-dial/SpeedDial.svelte

@@ -2,7 +2,7 @@
   import clsx from "clsx";
   import Popper from "../utils/Popper.svelte";
   import { getSideAxis } from "@floating-ui/utils";
-  import { setContext } from "svelte";
+  import { setContext, untrack } from "svelte";
   import { speedDial } from "./theme";
   import type { SpeedDialProps, SpeedCtxType } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
@@ -21,7 +21,12 @@
     ...restProps
   }: SpeedDialProps = $props();
 
-  warnThemeDeprecation("SpeedDial", { popperClass }, { popperClass: "popper" });
+  warnThemeDeprecation(
+    "SpeedDial",
+    untrack(() => ({ popperClass })),
+    { popperClass: "popper" }
+  );
+
   const styling = $derived(
     classes ?? {
       popper: popperClass
@@ -30,7 +35,9 @@
 
   const theme = getTheme("speedDial");
 
-  setContext<SpeedCtxType>("speed-dial", { pill, tooltip, textOutside });
+  $effect(() => {
+    setContext<SpeedCtxType>("speed-dial", { pill, tooltip, textOutside });
+  });
 
   let vertical: boolean = $derived(getSideAxis(placement) === "y");
 
@@ -47,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1540)
+[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
 ## Props
 @prop children
 @prop popperClass

package/dist/speed-dial/SpeedDial.svelte.d.ts

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

package/dist/speed-dial/SpeedDialButton.svelte

@@ -2,7 +2,7 @@
   import Button from "../buttons/Button.svelte";
   import Tooltip from "../tooltip/Tooltip.svelte";
   import type { Placement } from "@floating-ui/dom";
-  import { getContext } from "svelte";
+  import { getContext, untrack } from "svelte";
   import { speedDialButton } from "./theme";
   import type { SpeedCtxType, SpeedDialButtonProps } from "../types";
   import clsx from "clsx";
@@ -23,14 +23,19 @@
     ...restProps
   }: SpeedDialButtonProps = $props();
 
-  warnThemeDeprecation("SpeedDialButton", { textClass }, { textClass: "span" });
+  warnThemeDeprecation(
+    "SpeedDialButton",
+    untrack(() => ({ textClass })),
+    { textClass: "span" }
+  );
+
   const styling = $derived(
     classes ?? {
       span: textClass
     }
   );
 
-  let tooltip: Placement | "none" = _tooltip ?? context.tooltip;
+  let tooltip = $derived<Placement | "none">(_tooltip ?? context.tooltip);
 
   const theme = getTheme("speedDialButton");
 
@@ -53,7 +58,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1555)
+[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1613)
 ## Props
 @prop children
 @prop name = ""

package/dist/speed-dial/SpeedDialButton.svelte.d.ts

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

package/dist/speed-dial/SpeedDialTrigger.svelte

@@ -44,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1538)
+[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1596)
 ## Props
 @prop children
 @prop name = "Open actions menu"

package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpeedDialTriggerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1538)
+ * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1596)
  * ## Props
  * @prop children
  * @prop name = "Open actions menu"

package/dist/spinner/Spinner.svelte

@@ -83,7 +83,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1565)
+[SpinnerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1623)
 ## Props
 @prop type = "default"
 @prop color = "primary"

package/dist/spinner/Spinner.svelte.d.ts

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

package/dist/split-pane/Divider.svelte

@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2191)
+[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2258)
 ## Props
 @prop direction
 @prop index

package/dist/split-pane/Divider.svelte.d.ts

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

package/dist/split-pane/Pane.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PaneProps } from "../types";
-  import { getSplitPaneContext } from "./SplitPane.svelte";
+  import { getSplitPaneContext } from "../context";
   import Divider from "./Divider.svelte";
   import { pane } from "./theme";
   import { getTheme } from "../theme/themeUtils";
@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2185)
+[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2252)
 ## Props
 @prop children
 @prop class: className = ""

package/dist/split-pane/Pane.svelte.d.ts

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

package/dist/split-pane/SplitPane.svelte

@@ -1,31 +1,6 @@
-<script lang="ts" module>
-  import { setContext, getContext } from "svelte";
-
-  const SPLIT_PANE_KEY = Symbol("SPLIT_PANE");
-
-  interface SplitPaneContext {
-    registerPane: () => number;
-    getPaneStyle: (index: number) => string;
-    getPaneSize: (index: number) => number;
-    shouldRenderDivider: (index: number) => boolean;
-    getDirection: () => "horizontal" | "vertical";
-    getIsDragging: () => boolean;
-    onMouseDown: (e: MouseEvent, index: number) => void;
-    onTouchStart: (e: TouchEvent, index: number) => void;
-    onKeyDown: (e: KeyboardEvent, index: number) => void;
-  }
-
-  export function setSplitPaneContext(ctx: SplitPaneContext) {
-    setContext(SPLIT_PANE_KEY, ctx);
-  }
-
-  export function getSplitPaneContext(): SplitPaneContext | undefined {
-    return getContext(SPLIT_PANE_KEY);
-  }
-</script>
-
 <script lang="ts">
   import type { SplitPaneProps } from "../types";
+  import { setSplitPaneContext } from "../context";
   import { splitpane } from "./theme";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
@@ -49,16 +24,16 @@
   const MIN_DELTA = 1; // For mouse movement (Math.abs(delta) < MIN_DELTA)
 
   // Validate numeric props
-  if (minSize <= 0) {
-    console.warn(`minSize must be positive, got ${minSize}. Using default 100.`);
-    minSize = 100;
-  }
-  if (keyboardStep <= 0) {
-    console.warn(`keyboardStep must be positive, got ${keyboardStep}. Using default 2.`);
-    keyboardStep = 2;
-  }
+  $effect(() => {
+    if (minSize <= 0) {
+      console.warn(`minSize must be positive, got ${minSize}.`);
+    }
+    if (keyboardStep <= 0) {
+      console.warn(`keyboardStep must be positive, got ${keyboardStep}.`);
+    }
+  });
 
-  let transition = $state(transitionProp);
+  let transition = $derived(transitionProp);
   $effect(() => {
     // syncing local transition state with prop changes
     if (!isDragging) {
@@ -71,7 +46,7 @@
   let startPos = $state(0);
   let sizes = $state<number[]>([]);
   let container: HTMLDivElement;
-  let currentDirection = $state(direction);
+  let currentDirection = $derived(direction);
   let registeredPanes = $state(0);
 
   // Register panes as they mount
@@ -410,7 +385,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2171)
+[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2238)
 ## Props
 @prop direction = "horizontal"
 @prop minSize = 100

package/dist/split-pane/SplitPane.svelte.d.ts

@@ -1,21 +1,8 @@
-interface SplitPaneContext {
-    registerPane: () => number;
-    getPaneStyle: (index: number) => string;
-    getPaneSize: (index: number) => number;
-    shouldRenderDivider: (index: number) => boolean;
-    getDirection: () => "horizontal" | "vertical";
-    getIsDragging: () => boolean;
-    onMouseDown: (e: MouseEvent, index: number) => void;
-    onTouchStart: (e: TouchEvent, index: number) => void;
-    onKeyDown: (e: KeyboardEvent, index: number) => void;
-}
-export declare function setSplitPaneContext(ctx: SplitPaneContext): void;
-export declare function getSplitPaneContext(): SplitPaneContext | undefined;
 import type { SplitPaneProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2171)
+ * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2238)
  * ## Props
  * @prop direction = "horizontal"
  * @prop minSize = 100

package/dist/step-indicator/StepIndicator.svelte

@@ -6,13 +6,15 @@
 
   let {
     steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"],
-    currentStep = 1,
-    size = "md",
-    color = "primary",
+    currentStep = $bindable(1),
+    size = $bindable("md"),
+    color = $bindable("primary"),
     glow = false,
     hideLabel = false,
+    clickable = true,
     completedCustom = "",
     currentCustom = "",
+    onStepClick,
     class: className,
     classes,
     ...restProps
@@ -20,12 +22,27 @@
 
   const theme = getTheme("stepIndicator");
 
-  const { base, label, container, wrapper, step: stepCls, glow: stepGlow, incomplete } = stepIndicator({ size, color, glow, hideLabel });
+  const { base, label, container, wrapper, step: stepCls, glow: stepGlow, incomplete } = $derived(stepIndicator({ size, color, glow, hideLabel }));
 
   // Ensure currentStep is within bounds
   let safeCurrentStep = $derived(Math.max(1, Math.min(currentStep, steps.length)));
   let currentStepLabel = $derived(steps[safeCurrentStep - 1] ?? "Unknown Step");
 
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (!clickable || stepIndex < 0 || stepIndex >= steps.length) return;
+
+    const next = stepIndex + 1;
+    if (next === currentStep) return;
+
+    const last = currentStep;
+    currentStep = next;
+
+    if (onStepClick) {
+      onStepClick({ current: currentStep, last });
+    }
+  }
+
   // Handle custom colors if provided
   const getCustomStepClass = (stepIndex: number) => {
     if (color !== "custom") return "";
@@ -46,7 +63,40 @@
 
   <div class={container({ class: clsx((theme as StepIndicatorTheme)?.container, classes?.container) })}>
     {#each steps as _step, i (i)}
-      {#if i === currentStep - 1}
+      {#if clickable}
+        {#if i === currentStep - 1}
+          <button
+            type="button"
+            class={wrapper({ class: clsx((theme as StepIndicatorTheme)?.wrapper, classes?.wrapper, "cursor-pointer transition-opacity hover:opacity-75") })}
+            onclick={() => handleStepClick(i)}
+            aria-current="step"
+            aria-label={`Current step: ${steps[i]}`}
+          >
+            <div class={stepCls({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step) })} data-state="current"></div>
+            {#if glow}
+              <div class={stepGlow({ class: clsx(getCustomStepClass(i), (theme as StepIndicatorTheme)?.glow, classes?.glow) })}></div>
+            {/if}
+          </button>
+        {:else if i < currentStep - 1}
+          <button
+            type="button"
+            aria-label={`Go to ${steps[i]} (completed)`}
+            class={stepCls({
+              class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step, "cursor-pointer transition-opacity hover:opacity-75")
+            })}
+            data-state="completed"
+            onclick={() => handleStepClick(i)}
+          ></button>
+        {:else}
+          <button
+            type="button"
+            aria-label={`Go to ${steps[i]}`}
+            class={incomplete({ class: clsx((theme as StepIndicatorTheme)?.incomplete, classes?.incomplete, "cursor-pointer transition-opacity hover:opacity-75") })}
+            data-state="incomplete"
+            onclick={() => handleStepClick(i)}
+          ></button>
+        {/if}
+      {:else if i === currentStep - 1}
         <div class={wrapper({ class: clsx((theme as StepIndicatorTheme)?.wrapper, classes?.wrapper) })}>
           <div class={stepCls({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step) })} data-state="current"></div>
           {#if glow}
@@ -66,16 +116,18 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1574)
+[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
 ## Props
 @prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
-@prop currentStep = 1
-@prop size = "md"
-@prop color = "primary"
+@prop currentStep = $bindable(1)
+@prop size = $bindable("md")
+@prop color = $bindable("primary")
 @prop glow = false
 @prop hideLabel = false
+@prop clickable = true
 @prop completedCustom = ""
 @prop currentCustom = ""
+@prop onStepClick
 @prop class: className
 @prop classes
 @prop ...restProps