flowbite-svelte 1.28.2 → 1.29.0

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
 -->

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

@@ -2,15 +2,18 @@ import type { TimelineStepperProps } from "../types";
 /**
  * [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
  */
-declare const TimelineStepper: import("svelte").Component<TimelineStepperProps, {}, "">;
+declare const TimelineStepper: import("svelte").Component<TimelineStepperProps, {}, "current">;
 type TimelineStepper = ReturnType<typeof TimelineStepper>;
 export default TimelineStepper;

package/dist/stepper/VerticalStepper.svelte

@@ -1,63 +1,125 @@
 <script lang="ts">
   import { setContext } from "svelte";
+  import type { StepStatus, Step } from "../types";
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { verticalStepper } from "./theme";
   import type { VerticalStepperProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
-  let { children, steps = [], liClass, class: className, classes, ...restProps }: VerticalStepperProps = $props();
+  let { steps = [], liClass, class: className, classes, current = $bindable(1), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: VerticalStepperProps = $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("verticalStepper");
 
   setContext("stepperType", "vertical");
 
   const { base, card, content } = $derived(verticalStepper());
+
+  // 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: Step)}
+  {#if status === "completed" && showCheckmarkForCompleted}
+    <CheckmarkIcon variant="simple" />
+  {:else if status === "current"}
+    {#if step.icon}
+      <step.icon class={step.iconClass || "h-4 w-4"} />
+    {:else}
+      <CheckmarkIcon variant="simple" />
+    {/if}
+  {/if}
+{/snippet}
+
 <ol class={base({ class: clsx(theme?.base, className) })} {...restProps}>
-  {#if children}
-    {@render children()}
-  {:else if steps}
-    {#each steps as step (step.id)}
-      <li class={clsx(liClass)}>
-        <div class={card({ status: step.status, class: clsx(theme?.card, classes?.card) })} role="alert">
+  {#each steps as step, index (step.id)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li class={clsx(liClass)}>
+      {#if clickable}
+        <button
+          type="button"
+          class="w-full cursor-pointer text-left transition-opacity hover:opacity-75 {card({ status, class: clsx(theme?.card, classes?.card) })}"
+          aria-current={status === "current" ? "step" : undefined}
+          onclick={() => handleStepClick(index)}
+        >
           <div class={content({ class: clsx(theme?.content, classes?.content) })}>
             <span class="sr-only">{step.label}</span>
             <h3 class="font-medium">{step.id}. {step.label}</h3>
-            {#if step.status === "completed"}
-              {#if step.icon}
-                <step.icon class={step.iconClass || "h-4 w-4"} />
-              {:else}
-                <svg class="h-4 w-4" 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.status === "current"}
-              {#if step.icon}
-                <step.icon class={step.iconClass || "h-4 w-4"} />
-              {:else}
-                <svg class="h-4 w-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
-                </svg>
-              {/if}
-            {/if}
+            {@render stepIcon(status, step)}
+          </div>
+        </button>
+      {:else}
+        <div class={card({ status, class: clsx(theme?.card, classes?.card) })} aria-current={status === "current" ? "step" : undefined}>
+          <div class={content({ class: clsx(theme?.content, classes?.content) })}>
+            <span class="sr-only">{step.label}</span>
+            <h3 class="font-medium">{step.id}. {step.label}</h3>
+            {@render stepIcon(status, step)}
           </div>
         </div>
-      </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
+- **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
-[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1639)
+[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1650)
 ## Props
-@prop children
 @prop steps = []
 @prop liClass
 @prop class: className
 @prop classes
+@prop current = $bindable(1)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
 @prop ...restProps
 -->

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

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

package/dist/stepper/index.d.ts

@@ -4,4 +4,7 @@ export { default as DetailedStepper } from "./DetailedStepper.svelte";
 export { default as VerticalStepper } from "./VerticalStepper.svelte";
 export { default as BreadcrumbStepper } from "./BreadcrumbStepper.svelte";
 export { default as TimelineStepper } from "./TimelineStepper.svelte";
+export { default as CheckmarkIcon } from "./CheckmarkIcon.svelte";
+export { default as DoubleArrowIcon } from "./DoubleArrowIcon.svelte";
+export { default as ProfileCardIcon } from "./ProfileCardIcon.svelte";
 export { stepper, progressStepper, detailedStepper, verticalStepper, breadcrumbStepper, timelineStepper } from "./theme";

package/dist/stepper/index.js

@@ -4,4 +4,7 @@ export { default as DetailedStepper } from "./DetailedStepper.svelte";
 export { default as VerticalStepper } from "./VerticalStepper.svelte";
 export { default as BreadcrumbStepper } from "./BreadcrumbStepper.svelte";
 export { default as TimelineStepper } from "./TimelineStepper.svelte";
+export { default as CheckmarkIcon } from "./CheckmarkIcon.svelte";
+export { default as DoubleArrowIcon } from "./DoubleArrowIcon.svelte";
+export { default as ProfileCardIcon } from "./ProfileCardIcon.svelte";
 export { stepper, progressStepper, detailedStepper, verticalStepper, breadcrumbStepper, timelineStepper } from "./theme";

package/dist/stepper/theme.d.ts

@@ -100,16 +100,12 @@ export declare const progressStepper: import("tailwind-variants").TVReturnType<{
             circle: string;
         };
     };
-    isLast: {
-        true: {
-            item: string;
-        };
-        false: {};
-    };
 }, {
     base: string;
     item: string;
     circle: string;
+    line: string;
+    progressLine: string;
 }, undefined, {
     status: {
         completed: {
@@ -125,16 +121,12 @@ export declare const progressStepper: import("tailwind-variants").TVReturnType<{
             circle: string;
         };
     };
-    isLast: {
-        true: {
-            item: string;
-        };
-        false: {};
-    };
 }, {
     base: string;
     item: string;
     circle: string;
+    line: string;
+    progressLine: string;
 }, import("tailwind-variants").TVReturnType<{
     status: {
         completed: {
@@ -150,16 +142,12 @@ export declare const progressStepper: import("tailwind-variants").TVReturnType<{
             circle: string;
         };
     };
-    isLast: {
-        true: {
-            item: string;
-        };
-        false: {};
-    };
 }, {
     base: string;
     item: string;
     circle: string;
+    line: string;
+    progressLine: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const detailedStepper: import("tailwind-variants").TVReturnType<{
     status: {

package/dist/stepper/theme.js

@@ -12,7 +12,7 @@ export const stepper = tv({
                 content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
             },
             current: {
-                item: "md:w-full sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700",
+                item: "text-primary-600 dark:text-primary-500 md:w-full sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700",
                 content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
             },
             pending: {
@@ -22,8 +22,8 @@ export const stepper = tv({
         },
         isLast: {
             true: {
-                item: "after:content-none after:hidden",
-                content: "after:content-none"
+                item: "after:!hidden",
+                content: "after:!hidden"
             },
             false: {}
         }
@@ -36,35 +36,30 @@ export const stepper = tv({
 // ProgressStepper
 export const progressStepper = tv({
     slots: {
-        base: "flex items-center w-full",
-        item: "flex items-center w-full",
-        circle: "flex items-center justify-center w-10 h-10 rounded-full lg:h-12 lg:w-12 shrink-0"
+        base: "flex items-center w-full relative",
+        item: "flex items-center justify-center z-10",
+        circle: "flex items-center justify-center w-10 h-10 rounded-full lg:h-12 lg:w-12 shrink-0",
+        line: "absolute h-1 top-1/2 -translate-y-1/2 bg-gray-200 dark:bg-gray-700",
+        progressLine: "absolute h-1 top-1/2 -translate-y-1/2 bg-primary-600 dark:bg-primary-500 transition-all duration-300 ease-in-out"
     },
     variants: {
         status: {
             completed: {
-                item: "text-primary-600 dark:text-primary-500 after:content-[''] after:w-full after:h-1 after:border-b after:border-primary-100 after:border-4 after:inline-block dark:after:border-primary-800",
-                circle: "bg-primary-100 dark:bg-primary-800"
+                item: "text-primary-600 dark:text-primary-400 flex-1",
+                circle: "bg-primary-600 dark:bg-primary-500 text-white"
             },
             current: {
-                item: "after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-100 after:border-4 after:inline-block dark:after:border-gray-700",
-                circle: "bg-gray-100 dark:bg-gray-700"
+                item: "flex-1",
+                circle: "bg-primary-600 dark:bg-primary-500 text-white"
             },
             pending: {
-                item: "after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-100 after:border-4 after:inline-block dark:after:border-gray-700",
-                circle: "bg-gray-100 dark:bg-gray-700"
+                item: "flex-1",
+                circle: "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
             }
-        },
-        isLast: {
-            true: {
-                item: "after:content-none"
-            },
-            false: {}
         }
     },
     defaultVariants: {
-        status: "pending",
-        isLast: false
+        status: "pending"
     }
 });
 // DetailedStepper
@@ -130,8 +125,8 @@ export const breadcrumbStepper = tv({
                 indicator: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white"
             },
             current: {
-                item: "text-gray-500 dark:text-gray-400",
-                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+                item: "text-primary-600 dark:text-primary-500",
+                indicator: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white"
             },
             pending: {
                 item: "text-gray-500 dark:text-gray-400",
@@ -160,7 +155,7 @@ export const timelineStepper = tv({
                 circle: "bg-green-200 dark:bg-green-900"
             },
             current: {
-                circle: "bg-gray-100 dark:bg-gray-700"
+                circle: "bg-primary-200 dark:bg-primary-900"
             },
             pending: {
                 circle: "bg-gray-100 dark:bg-gray-700"

package/dist/table/Table.svelte

@@ -61,7 +61,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1702)
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1722)
 ## Props
 @prop children
 @prop footerSlot

package/dist/table/Table.svelte.d.ts

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

package/dist/table/TableBody.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1734)
+[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1754)
 ## Props
 @prop children
 @prop bodyItems

package/dist/table/TableBody.svelte.d.ts

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

package/dist/table/TableBodyCell.svelte

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

package/dist/table/TableBodyCell.svelte.d.ts

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

package/dist/table/TableBodyRow.svelte

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

package/dist/table/TableBodyRow.svelte.d.ts

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

package/dist/table/TableHead.svelte

@@ -53,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1690)
+[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1710)
 ## Props
 @prop children
 @prop headerSlot

package/dist/table/TableHead.svelte.d.ts

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

package/dist/table/TableHeadCell.svelte

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

package/dist/table/TableHeadCell.svelte.d.ts

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