flowbite-svelte 1.28.3 → 1.29.0

package/dist/stepper/DoubleArrowIcon.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+  }
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<svg
+  class={className || "ms-2 h-3 w-3 sm:ms-4 rtl:rotate-180"}
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 12 10"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  {...restProps}
+>
+  <path d="m7 9 4-4-4-4M1 9l4-4-4-4" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+Props
+## Props
+@prop class: className
+@prop ...restProps
+-->

package/dist/stepper/DoubleArrowIcon.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SVGAttributes } from "svelte/elements";
+interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * Props
+ * ## Props
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const DoubleArrowIcon: import("svelte").Component<Props, {}, "">;
+type DoubleArrowIcon = ReturnType<typeof DoubleArrowIcon>;
+export default DoubleArrowIcon;

package/dist/stepper/ProfileCardIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+  }
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<svg class={className || "h-3.5 w-3.5 text-gray-500 dark:text-gray-400"} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16" {...restProps}>
+  <path
+    d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z"
+  />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+Props
+## Props
+@prop class: className
+@prop ...restProps
+-->

package/dist/stepper/ProfileCardIcon.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SVGAttributes } from "svelte/elements";
+interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * Props
+ * ## Props
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ProfileCardIcon: import("svelte").Component<Props, {}, "">;
+type ProfileCardIcon = ReturnType<typeof ProfileCardIcon>;
+export default ProfileCardIcon;

package/dist/stepper/ProgressStepper.svelte

@@ -1,64 +1,165 @@
 <script lang="ts">
   import { setContext } from "svelte";
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { progressStepper } from "./theme";
   import type { ProgressStepperProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
+  import { Tween } from "svelte/motion";
+  import { cubicOut } from "svelte/easing";
 
-  let { children, steps = [], class: className, classes, ...restrorps }: ProgressStepperProps = $props();
+  let { steps = [], class: className, classes, current = $bindable(0), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: ProgressStepperProps = $props();
+
+  // Ensure current is within valid bounds
+  $effect(() => {
+    if (current < 0) current = 0;
+    if (current > steps.length && steps.length > 0) current = steps.length;
+  });
+
+  // Animated progress with Tween
+  const animatedProgress = new Tween(0, {
+    duration: 100,
+    easing: cubicOut
+  });
+
+  // Update animated progress when current changes
+  $effect(() => {
+    if (steps.length <= 1 || current === 0) {
+      animatedProgress.target = 0;
+    } else {
+      const progressPercent = ((current - 1) / (steps.length - 1)) * 100;
+      animatedProgress.target = progressPercent;
+    }
+  });
 
   const theme = getTheme("progressStepper");
 
   setContext("stepperType", "progress");
 
-  const { base, item, circle } = $derived(progressStepper());
+  const { base, item, circle, line, progressLine } = $derived(progressStepper());
+
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (clickable && stepIndex < steps.length) {
+      const last = current;
+      // Convert 0-based array index to 1-based current value
+      current = stepIndex + 1;
+
+      // Call custom onStepClick if provided
+      if (onStepClick) {
+        onStepClick({ current, last });
+      }
+    }
+  }
+
+  // Determine step status - reactive to current changes
+  // current = 0: no items highlighted (all pending)
+  // current = 1: first item is current
+  // current = 2: first is completed, second is current
+  function getStepStatus(stepIndex: number): "completed" | "current" | "pending" {
+    if (current === 0) {
+      return "pending";
+    }
+    if (stepIndex < current - 1) {
+      return "completed";
+    } else if (stepIndex === current - 1) {
+      return "current";
+    } else {
+      return "pending";
+    }
+  }
+
+  // Calculate line positions and progress
+  // Lines should start from center of first circle and end at center of last circle
+  const lineStart = $derived(steps.length <= 1 ? "0" : `${(1 / steps.length) * 50}%`);
+
+  const lineWidth = $derived(steps.length <= 1 ? "0" : `${100 - (1 / steps.length) * 100}%`);
+
+  // Calculate progress width using animated value
+  const progressWidth = $derived(steps.length <= 1 || lineWidth === "0" ? "0" : `${(animatedProgress.current / 100) * parseFloat(lineWidth)}%`);
 </script>
 
-<ol class={base({ class: clsx(theme?.base, className) })} {...restrorps}>
-  {#if children}
-    {@render children()}
-  {:else if steps}
-    {#each steps as step, index (step.id)}
-      <li
-        class={item({
-          status: step.status,
-          isLast: index === steps.length - 1,
-          class: clsx(theme?.item, classes?.item)
-        })}
-      >
-        <span class={circle({ status: step.status, class: clsx(theme?.circle, classes?.circle) })}>
-          {#if step.status === "completed"}
-            {#if step.icon}
-              <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
-            {:else}
-              <svg class="h-3.5 w-3.5 text-blue-600 lg:h-4 lg:w-4 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
-              </svg>
-            {/if}
+<ol class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+  <!-- Background line (gray) - from center of first to center of last circle -->
+  <div class={line({ class: clsx(theme?.line, classes?.line) })} style="left: {lineStart}; width: {lineWidth}" aria-hidden="true"></div>
+
+  <!-- Progress line (colored, overlays the background) -->
+  <div class={progressLine({ class: clsx(theme?.progressLine, classes?.progressLine) })} style="left: {lineStart}; width: {progressWidth}" aria-hidden="true"></div>
+
+  {#each steps as step, index (step.id)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li
+      class={item({
+        status,
+        class: clsx(theme?.item, classes?.item)
+      })}
+    >
+      {#if clickable}
+        <button
+          type="button"
+          class={circle({ status, class: clsx(theme?.circle, classes?.circle, "cursor-pointer transition-all hover:brightness-110") })}
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          {#if status === "completed" && showCheckmarkForCompleted}
+            <!-- Checkmark for completed steps -->
+            <CheckmarkIcon variant="tick" />
+          {:else if step.icon}
+            <!-- Show icon if provided -->
+            <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
+          {:else}
+            <!-- Show number for steps without icon -->
+            <span class="text-sm font-semibold">{step.id}</span>
+          {/if}
+        </button>
+      {:else}
+        <span class={circle({ status, class: clsx(theme?.circle, classes?.circle) })} aria-current={status === "current" ? "step" : undefined}>
+          {#if status === "completed" && showCheckmarkForCompleted}
+            <!-- Checkmark for completed steps -->
+            <CheckmarkIcon variant="tick" />
           {:else if step.icon}
+            <!-- Show icon if provided -->
             <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
           {:else}
-            <svg class="h-4 w-4 text-gray-500 lg:h-5 lg:w-5 dark:text-gray-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
-              <path
-                d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z"
-              />
-            </svg>
+            <!-- Show number for steps without icon -->
+            <span class="text-sm font-semibold">{step.id}</span>
           {/if}
         </span>
-      </li>
-    {/each}
-  {/if}
+      {/if}
+    </li>
+  {/each}
 </ol>
 
+<!--
+## Features
+- **Clickable navigation**: Click or press Enter/Space on steps to navigate
+- **Auto status**: Automatically determines completed/current/pending status based on current index
+- **Numbers by default**: Shows step numbers (from step.id) when no icon is provided
+- **Custom icons**: Icons replace numbers when provided
+- **Checkmarks**: Completed steps show checkmarks (can be disabled with showCheckmarkForCompleted={false})
+- **Progress line**: A colored overlay line shows progress up to the current step
+- **Accessible**: Keyboard navigation with proper ARIA attributes
+
+## Note
+The `current` prop is 1-based:
+- current=0 means no step is active (all pending)
+- current=1 means first step is active
+- current=2 means first step is completed, second step is active
+- etc.
+-->
+
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1609)
+[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1614)
 ## Props
-@prop children
 @prop steps = []
 @prop class: className
 @prop classes
-@prop ...restrorps
+@prop current = $bindable(0)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
+@prop ...restProps
 -->

package/dist/stepper/ProgressStepper.svelte.d.ts

@@ -2,14 +2,17 @@ import type { ProgressStepperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1609)
+ * [ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1614)
  * ## Props
- * @prop children
  * @prop steps = []
  * @prop class: className
  * @prop classes
- * @prop ...restrorps
+ * @prop current = $bindable(0)
+ * @prop clickable = true
+ * @prop showCheckmarkForCompleted = true
+ * @prop onStepClick
+ * @prop ...restProps
  */
-declare const ProgressStepper: import("svelte").Component<ProgressStepperProps, {}, "">;
+declare const ProgressStepper: import("svelte").Component<ProgressStepperProps, {}, "current">;
 type ProgressStepper = ReturnType<typeof ProgressStepper>;
 export default ProgressStepper;

package/dist/stepper/Stepper.svelte

@@ -1,68 +1,122 @@
 <script lang="ts">
   import { setContext } from "svelte";
+  import type { StepStatus, Step } from "../types";
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { stepper } from "./theme";
   import type { StepperProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
-  let { children, steps = [], class: className, classes, ...restProps }: StepperProps = $props();
+  let { steps = [], class: className, classes, current = $bindable(1), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: StepperProps = $props();
+
+  // Ensure current is within valid bounds
+  $effect(() => {
+    if (current < 0) current = 0;
+    if (current > steps.length && steps.length > 0) current = steps.length;
+  });
 
   const theme = getTheme("stepper");
 
   setContext("stepperType", "stepper");
 
   const { base, item, content } = $derived(stepper());
+
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (clickable && stepIndex < steps.length) {
+      const last = current;
+      // Convert 0-based array index to 1-based current value
+      current = stepIndex + 1;
+
+      // Call custom onStepClick if provided
+      if (onStepClick) {
+        onStepClick({ current, last });
+      }
+    }
+  }
+
+  // Determine step status - reactive to current changes
+  // current = 0: no items highlighted (all pending)
+  // current = 1: first item is current
+  // current = 2: first is completed, second is current
+  function getStepStatus(stepIndex: number): "completed" | "current" | "pending" {
+    if (current === 0) {
+      return "pending";
+    }
+    if (stepIndex < current - 1) {
+      return "completed";
+    } else if (stepIndex === current - 1) {
+      return "current";
+    } else {
+      return "pending";
+    }
+  }
 </script>
 
+{#snippet stepContent(step: Step, status: StepStatus, index: number)}
+  {#if status === "completed" && showCheckmarkForCompleted}
+    <CheckmarkIcon />
+  {:else if step.icon}
+    <step.icon class={clsx(step.iconClass) || "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4"} />
+  {:else}
+    <span class="me-2">{step.id || index + 1}</span>
+  {/if}
+  {step.label}
+  {#if step.description}
+    <span class={clsx(step.descriptionClass) || "hidden sm:ms-2 sm:inline-flex"}>{step.description}</span>
+  {/if}
+{/snippet}
+
 <ol {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-  {#if children}
-    {@render children()}
-  {:else if steps}
-    {#each steps as step, index (step.id ?? index)}
-      <li
-        class={item({
-          status: step.status,
-          isLast: index === steps.length - 1,
-          class: clsx(theme?.item, classes?.item)
-        })}
-      >
+  {#each steps as step, index (step.id ?? index)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li
+      class={item({
+        status,
+        isLast: index === steps.length - 1,
+        class: clsx(theme?.item, classes?.item)
+      })}
+    >
+      {#if clickable}
+        <button
+          type="button"
+          class={content({
+            status,
+            isLast: index === steps.length - 1,
+            class: clsx(theme?.content, classes?.content, "w-full cursor-pointer text-left transition-opacity hover:opacity-75")
+          })}
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          {@render stepContent(step, status, index)}
+        </button>
+      {:else}
         <span
           class={content({
-            status: step.status,
+            status,
             isLast: index === steps.length - 1,
             class: clsx(theme?.content, classes?.content)
           })}
         >
-          {#if step.status === "completed"}
-            {#if step.icon}
-              <step.icon class={clsx(step.iconClass) || "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4"} />
-            {:else}
-              <svg class="me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
-              </svg>
-            {/if}
-          {:else}
-            <span class="me-2">{step.id || index + 1}</span>
-          {/if}
-          {step.label}
-          {#if step.description}
-            <span class={clsx(step.descriptionClass) || "hidden sm:ms-2 sm:inline-flex"}>{step.description}</span>
-          {/if}
+          {@render stepContent(step, status, index)}
         </span>
-      </li>
-    {/each}
-  {/if}
+      {/if}
+    </li>
+  {/each}
 </ol>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1596)
+[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
 ## Props
-@prop children
 @prop steps = []
 @prop class: className
 @prop classes
+@prop current = $bindable(1)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
 @prop ...restProps
 -->

package/dist/stepper/Stepper.svelte.d.ts

@@ -2,14 +2,17 @@ import type { StepperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1596)
+ * [StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
  * ## Props
- * @prop children
  * @prop steps = []
  * @prop class: className
  * @prop classes
+ * @prop current = $bindable(1)
+ * @prop clickable = true
+ * @prop showCheckmarkForCompleted = true
+ * @prop onStepClick
  * @prop ...restProps
  */
-declare const Stepper: import("svelte").Component<StepperProps, {}, "">;
+declare const Stepper: import("svelte").Component<StepperProps, {}, "current">;
 type Stepper = ReturnType<typeof Stepper>;
 export default Stepper;

package/dist/stepper/TimelineStepper.svelte

@@ -1,65 +1,125 @@
 <script lang="ts">
   import { setContext } from "svelte";
+  import type { StepStatus, TimelineStep } from "../types";
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
+  import ProfileCardIcon from "./ProfileCardIcon.svelte";
   import { timelineStepper } from "./theme";
   import type { TimelineStepperProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
-  let { children, steps = [], class: className, classes, contentClass, ...restProps }: TimelineStepperProps = $props();
+  let { steps = [], class: className, classes, contentClass, current = $bindable(1), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: TimelineStepperProps = $props();
+
+  // Ensure current is within valid bounds
+  $effect(() => {
+    if (current < 0) current = 0;
+    if (current > steps.length && steps.length > 0) current = steps.length;
+  });
 
   const theme = getTheme("timelineStepper");
 
   setContext("stepperType", "timeline");
 
   const { base, item, circle } = $derived(timelineStepper());
+
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (clickable && stepIndex < steps.length) {
+      const last = current;
+      // Convert 0-based array index to 1-based current value
+      current = stepIndex + 1;
+
+      // Call custom onStepClick if provided
+      if (onStepClick) {
+        onStepClick({ current, last });
+      }
+    }
+  }
+
+  // Determine step status - reactive to current changes
+  function getStepStatus(stepIndex: number): "completed" | "current" | "pending" {
+    if (current === 0) {
+      return "pending";
+    }
+    if (stepIndex < current - 1) {
+      return "completed";
+    } else if (stepIndex === current - 1) {
+      return "current";
+    } else {
+      return "pending";
+    }
+  }
 </script>
 
+{#snippet stepIcon(status: StepStatus, step: TimelineStep)}
+  {#if status === "completed" && showCheckmarkForCompleted}
+    <CheckmarkIcon class="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
+  {:else if step.icon}
+    <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />
+  {:else}
+    <ProfileCardIcon />
+  {/if}
+{/snippet}
+
 <ol class={base({ class: clsx(theme?.base, className) })} {...restProps}>
-  {#if children}
-    {@render children()}
-  {:else if steps}
-    {#each steps as step, index (step.id)}
-      <li class={item({ isLast: index === steps.length - 1, class: clsx(theme?.item, classes?.item) })}>
-        <span class={circle({ status: step.status, class: clsx(theme?.circle, classes?.circle) })}>
-          {#if step.status === "completed"}
-            {#if step.icon}
-              <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />
-            {:else}
-              <svg class="h-3.5 w-3.5 text-green-500 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
-              </svg>
-            {/if}
-          {:else if step.icon}
-            <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />
-          {:else}
-            <svg class="h-3.5 w-3.5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
-              <path
-                d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z"
-              />
-            </svg>
-          {/if}
+  {#each steps as step, index (step.id)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li class={item({ isLast: index === steps.length - 1, class: clsx(theme?.item, classes?.item) })}>
+      {#if clickable}
+        <button
+          type="button"
+          class="absolute -start-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full ring-4 ring-white transition-opacity hover:opacity-75 dark:ring-gray-900 {circle({
+            status,
+            class: clsx(theme?.circle, classes?.circle)
+          })}"
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          {@render stepIcon(status, step)}
+        </button>
+      {:else}
+        <span class={circle({ status, class: clsx(theme?.circle, classes?.circle) })} aria-current={status === "current" ? "step" : undefined}>
+          {@render stepIcon(status, step)}
         </span>
-        <div class={clsx(contentClass)}>
-          <h3 class="leading-tight font-medium">{step.label}</h3>
-          {#if step.description}
-            <p class="text-sm">{step.description}</p>
-          {/if}
-        </div>
-      </li>
-    {/each}
-  {/if}
+      {/if}
+      <div class={clsx(contentClass)}>
+        <h3 class="leading-tight font-medium">{step.label}</h3>
+        {#if step.description}
+          <p class="text-sm">{step.description}</p>
+        {/if}
+      </div>
+    </li>
+  {/each}
 </ol>
 
+<!--
+## Features
+- **Clickable navigation**: Click or press Enter/Space on steps to navigate
+- **Auto status**: Automatically determines completed/current/pending status based on current index
+- **Custom icons**: Support for custom icons on completed steps
+- **Accessible**: Keyboard navigation with proper ARIA attributes
+
+## Note
+The `current` prop is 1-based:
+- current=0 means no step is active (all pending)
+- current=1 means first step is active
+- current=2 means first step is completed, second step is active
+- etc.
+-->
+
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1670)
+[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1687)
 ## Props
-@prop children
 @prop steps = []
 @prop class: className
 @prop classes
 @prop contentClass
+@prop current = $bindable(1)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
 @prop ...restProps
 -->