flowbite-svelte 1.28.3 → 1.29.1

package/dist/command-palette/CommandPalette.svelte

@@ -194,7 +194,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2213)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2233)
 ## Props
 @prop open = $bindable(false)
 @prop items = []

package/dist/command-palette/CommandPalette.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CommandPaletteProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2213)
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2233)
  * ## Props
  * @prop open = $bindable(false)
  * @prop items = []

package/dist/dropdown/DropdownItem.svelte

@@ -22,7 +22,7 @@
 
 <li class={li({ class: clsx(styling.li) })}>
   {#if href}
-    <a {href} {...restProps} class={finalClass}>
+    <a {href} {onclick} {...restProps} class={finalClass}>
       {@render children()}
     </a>
   {:else if onclick}

package/dist/dropdown/theme.js

@@ -10,8 +10,8 @@ export const dropdownHeader = tv({
 });
 export const dropdownItem = tv({
     slots: {
-        base: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
-        active: "block px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+        base: "block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+        active: "block w-full text-left px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
         li: ""
     }
 });

package/dist/kanban/KanbanCard.svelte

@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2142)
+[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2162)
 ## Props
 @prop card
 @prop isDragging = false

package/dist/kanban/KanbanCard.svelte.d.ts

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

package/dist/scroll-spy/ScrollSpy.svelte

@@ -255,7 +255,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2228)
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2248)
 ## Props
 @prop items
 @prop position = "top"

package/dist/scroll-spy/ScrollSpy.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ScrollSpyProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2228)
+ * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2248)
  * ## Props
  * @prop items
  * @prop position = "top"

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#L2171)
+[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2191)
 ## 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#L2171)
+ * [DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2191)
  * ## Props
  * @prop direction
  * @prop index

package/dist/split-pane/Pane.svelte

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

package/dist/split-pane/SplitPane.svelte

@@ -410,7 +410,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2151)
+[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2171)
 ## Props
 @prop direction = "horizontal"
 @prop minSize = 100

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

@@ -15,7 +15,7 @@ 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#L2151)
+ * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2171)
  * ## Props
  * @prop direction = "horizontal"
  * @prop minSize = 100

package/dist/stepper/BreadcrumbStepper.svelte

@@ -1,65 +1,150 @@
 <script lang="ts">
   import { setContext } from "svelte";
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
+  import DoubleArrowIcon from "./DoubleArrowIcon.svelte";
   import { breadcrumbStepper } from "./theme";
   import clsx from "clsx";
   import type { BreadcrumbStepperProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
 
-  let { children, steps = [], class: className, classes, ...restProps }: BreadcrumbStepperProps = $props();
+  let { steps = [], class: className, classes, current = $bindable(1), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: BreadcrumbStepperProps = $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("breadcrumbStepper");
 
   setContext("stepperType", "breadcrumb");
 
   const { base, item, indicator } = $derived(breadcrumbStepper());
-  // { class: clsx(theme?.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
+  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>
 
 <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({
-          status: step.status,
-          hasChevron: index < steps.length - 1,
-          class: clsx(theme?.item, classes?.item)
-        })}
-      >
-        <span class={indicator({ status: step.status, class: clsx(theme?.indicator, classes?.indicator) })}>
-          {#if step.status === "completed" && step.icon}
-            <step.icon class={step.iconClass || "h-3 w-3"} />
-          {:else}
-            {step.id}
+  {#each steps as step, index (step.id)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li
+      class={item({
+        status,
+        hasChevron: index < steps.length - 1,
+        class: clsx(theme?.item, classes?.item)
+      })}
+    >
+      {#if clickable}
+        <button
+          type="button"
+          class="flex cursor-pointer items-center transition-opacity hover:opacity-75"
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#if status === "completed" && showCheckmarkForCompleted}
+              {#if step.icon}
+                <step.icon class={step.iconClass || "h-3 w-3"} />
+              {:else}
+                <CheckmarkIcon variant="simple" class="h-3 w-3" />
+              {/if}
+            {:else if step.icon}
+              <step.icon class={step.iconClass || "h-3 w-3"} />
+            {:else}
+              {step.id}
+            {/if}
+          </span>
+
+          {step.label}
+
+          {#if step.shortLabel}
+            <span class="hidden sm:ms-2 sm:inline-flex">{step.shortLabel}</span>
           {/if}
-        </span>
+        </button>
+      {:else}
+        <span aria-current={status === "current" ? "step" : undefined} class="flex items-center">
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#if status === "completed" && showCheckmarkForCompleted}
+              {#if step.icon}
+                <step.icon class={step.iconClass || "h-3 w-3"} />
+              {:else}
+                <CheckmarkIcon variant="simple" class="h-3 w-3" />
+              {/if}
+            {:else if step.icon}
+              <step.icon class={step.iconClass || "h-3 w-3"} />
+            {:else}
+              {step.id}
+            {/if}
+          </span>
 
-        {step.label}
+          {step.label}
 
-        {#if step.shortLabel}
-          <span class="hidden sm:ms-2 sm:inline-flex">{step.shortLabel}</span>
-        {/if}
+          {#if step.shortLabel}
+            <span class="hidden sm:ms-2 sm:inline-flex">{step.shortLabel}</span>
+          {/if}
+        </span>
+      {/if}
 
-        {#if index < steps.length - 1}
-          <svg class="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">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 9 4-4-4-4M1 9l4-4-4-4" />
-          </svg>
-        {/if}
-      </li>
-    {/each}
-  {/if}
+      {#if index < steps.length - 1}
+        <DoubleArrowIcon />
+      {/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
+- **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
-[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1655)
+[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1669)
 ## 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/BreadcrumbStepper.svelte.d.ts

@@ -2,14 +2,17 @@ import type { BreadcrumbStepperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1655)
+ * [BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1669)
  * ## 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 BreadcrumbStepper: import("svelte").Component<BreadcrumbStepperProps, {}, "">;
+declare const BreadcrumbStepper: import("svelte").Component<BreadcrumbStepperProps, {}, "current">;
 type BreadcrumbStepper = ReturnType<typeof BreadcrumbStepper>;
 export default BreadcrumbStepper;

package/dist/stepper/CheckmarkIcon.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  type IconVariant = "default" | "simple" | "tick";
+
+  interface IconPropsType {
+    viewBox: string;
+    fill: string | "none";
+    pathData?: string;
+    pointsData?: string;
+    stroke?: string;
+    "stroke-width"?: string;
+    "stroke-linecap"?: "round" | "butt" | "square" | "inherit";
+    "stroke-linejoin"?: "round" | "bevel" | "miter" | "inherit";
+  }
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+    variant?: IconVariant;
+  }
+
+  let { class: className, variant = "default", ...restProps }: Props = $props();
+
+  // 1. 'default' (Check inside a circle) - FILL ICON
+  const defaultIconProps: IconPropsType = {
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    pathData: "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",
+    stroke: undefined,
+    "stroke-linecap": undefined,
+    "stroke-linejoin": undefined,
+    "stroke-width": undefined
+  };
+
+  // 2. 'simple' (Basic check stroke path) - STROKE ICON
+  const simpleIconProps: IconPropsType = {
+    viewBox: "0 0 16 12",
+    fill: "none",
+    pathData: "M1 5.917 5.724 10.5 15 1.5",
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2"
+  };
+
+  // 3. 'tick' (New V-shaped check stroke) - STROKE ICON
+  const polylineIconProps: IconPropsType = {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    pointsData: "20 6 9 17 4 12",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+
+  // Select the appropriate props based on the variant
+  const iconProps = variant === "simple" ? simpleIconProps : variant === "tick" ? polylineIconProps : defaultIconProps;
+
+  // Determine the base class for the SVG
+  const baseClass = className || (variant !== "default" ? "h-4 w-4" : "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4");
+</script>
+
+<svg
+  class={baseClass}
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox={iconProps.viewBox}
+  fill={iconProps.fill}
+  stroke={iconProps.stroke}
+  stroke-width={iconProps["stroke-width"]}
+  stroke-linecap={iconProps["stroke-linecap"]}
+  stroke-linejoin={iconProps["stroke-linejoin"]}
+  {...restProps}
+>
+  {#if iconProps.pointsData}
+    <polyline points={iconProps.pointsData} />
+  {:else}
+    <path d={iconProps.pathData} />
+  {/if}
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+Props
+## Props
+@prop class: className
+@prop variant = "default"
+@prop ...restProps
+-->

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

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

package/dist/stepper/DetailedStepper.svelte

@@ -1,53 +1,159 @@
 <script lang="ts">
   import { setContext } from "svelte";
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { detailedStepper } from "./theme";
   import type { DetailedStepperProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
-  let { children, steps = [], contentClass, class: className, classes, ...restrorps }: DetailedStepperProps = $props();
+  let { steps = [], contentClass, class: className, classes, current = $bindable(0), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: DetailedStepperProps = $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("detailedStepper");
 
   setContext("stepperType", "detailed");
 
-  const { base, item, indicator } = $derived(detailedStepper());
+  // Override the theme to make current step also highlighted
+  const stepperTheme = $derived(() => {
+    const baseTheme = detailedStepper();
+    return {
+      base: baseTheme.base,
+      item: (props: { status: "completed" | "current" | "pending"; class?: string }) => {
+        // Make current status use the same styling as completed
+        const status = props.status === "current" ? "completed" : props.status;
+        return baseTheme.item({ ...props, status });
+      },
+      indicator: (props: { status: "completed" | "current" | "pending"; class?: string }) => {
+        // Make current status use the same styling as completed
+        const status = props.status === "current" ? "completed" : props.status;
+        return baseTheme.indicator({ ...props, status });
+      }
+    };
+  });
+
+  const { base, item, indicator } = $derived(stepperTheme());
+
+  // 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>
 
-<ol class={base({ class: clsx(theme?.base, className) })} {...restrorps}>
-  {#if children}
-    {@render children()}
-  {:else if steps}
-    {#each steps as step (step.id)}
-      <li class={item({ status: step.status, class: clsx(theme?.item, classes?.item) })}>
-        <span class={indicator({ status: step.status, class: clsx(theme?.indicator, classes?.indicator) })}>
-          {#if step.status === "completed" && step.icon}
-            <step.icon class={clsx(step.iconClass)} />
-          {:else}
-            {step.id}
-          {/if}
-        </span>
-        <span class={clsx(contentClass)}>
-          <h3 class="leading-tight font-medium">{step.label}</h3>
-          {#if step.description}
-            <p class="text-sm">{step.description}</p>
-          {/if}
-        </span>
-      </li>
-    {/each}
-  {/if}
+<ol class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+  {#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="flex w-full cursor-pointer items-center space-x-2.5 text-left transition-opacity hover:opacity-75 rtl:space-x-reverse"
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#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)} />
+            {:else}
+              <!-- Show number for steps without icon -->
+              {step.id}
+            {/if}
+          </span>
+          <span class={clsx(contentClass)}>
+            <h3 class="leading-tight font-medium">{step.label}</h3>
+            {#if step.description}
+              <p class={clsx("text-sm", step.descriptionClass)}>{step.description}</p>
+            {/if}
+          </span>
+        </button>
+      {:else}
+        <div class="flex items-center space-x-2.5 rtl:space-x-reverse" aria-current={status === "current" ? "step" : undefined}>
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#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)} />
+            {:else}
+              <!-- Show number for steps without icon -->
+              {step.id}
+            {/if}
+          </span>
+          <span class={clsx(contentClass)}>
+            <h3 class="leading-tight font-medium">{step.label}</h3>
+            {#if step.description}
+              <p class={clsx("text-sm", step.descriptionClass)}>{step.description}</p>
+            {/if}
+          </span>
+        </div>
+      {/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
+- **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
-[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1624)
+[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
 ## Props
-@prop children
 @prop steps = []
 @prop contentClass
 @prop class: className
 @prop classes
-@prop ...restrorps
+@prop current = $bindable(0)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
+@prop ...restProps
 -->