flowbite-svelte 1.29.1 → 1.30.0

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

package/dist/step-indicator/StepIndicator.svelte.d.ts

@@ -2,20 +2,22 @@ import type { StepIndicatorProps } from "../types";
 /**
  * [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
  */
-declare const StepIndicator: import("svelte").Component<StepIndicatorProps, {}, "">;
+declare const StepIndicator: import("svelte").Component<StepIndicatorProps, {}, "color" | "size" | "currentStep">;
 type StepIndicator = ReturnType<typeof StepIndicator>;
 export default StepIndicator;

package/dist/stepper/BreadcrumbStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import DoubleArrowIcon from "./DoubleArrowIcon.svelte";
   import { breadcrumbStepper } from "./theme";
@@ -17,8 +16,6 @@
 
   const theme = getTheme("breadcrumbStepper");
 
-  setContext("stepperType", "breadcrumb");
-
   const { base, item, indicator } = $derived(breadcrumbStepper());
 
   // Handle step click
@@ -137,7 +134,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1669)
+[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1729)
 ## Props
 @prop steps = []
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L1669)
+ * [BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1729)
  * ## Props
  * @prop steps = []
  * @prop class: className

package/dist/stepper/CheckmarkIcon.svelte

@@ -55,10 +55,10 @@
   };
 
   // Select the appropriate props based on the variant
-  const iconProps = variant === "simple" ? simpleIconProps : variant === "tick" ? polylineIconProps : defaultIconProps;
+  const iconProps = $derived(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");
+  const baseClass = $derived(className || (variant !== "default" ? "h-4 w-4" : "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4"));
 </script>
 
 <svg

package/dist/stepper/DetailedStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { detailedStepper } from "./theme";
   import type { DetailedStepperProps } from "../types";
@@ -16,8 +15,6 @@
 
   const theme = getTheme("detailedStepper");
 
-  setContext("stepperType", "detailed");
-
   // Override the theme to make current step also highlighted
   const stepperTheme = $derived(() => {
     const baseTheme = detailedStepper();
@@ -145,7 +142,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
+[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1692)
 ## Props
 @prop steps = []
 @prop contentClass

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

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

package/dist/stepper/ProgressStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { progressStepper } from "./theme";
   import type { ProgressStepperProps } from "../types";
@@ -34,8 +33,6 @@
 
   const theme = getTheme("progressStepper");
 
-  setContext("stepperType", "progress");
-
   const { base, item, circle, line, progressLine } = $derived(progressStepper());
 
   // Handle step click
@@ -152,7 +149,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1614)
+[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1674)
 ## Props
 @prop steps = []
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L1614)
+ * [ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1674)
  * ## Props
  * @prop steps = []
  * @prop class: className

package/dist/stepper/Stepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import type { StepStatus, Step } from "../types";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { stepper } from "./theme";
@@ -17,8 +16,6 @@
 
   const theme = getTheme("stepper");
 
-  setContext("stepperType", "stepper");
-
   const { base, item, content } = $derived(stepper());
 
   // Handle step click
@@ -109,7 +106,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
+[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1658)
 ## Props
 @prop steps = []
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L1598)
+ * [StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1658)
  * ## Props
  * @prop steps = []
  * @prop class: className

package/dist/stepper/TimelineStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import type { StepStatus, TimelineStep } from "../types";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import ProfileCardIcon from "./ProfileCardIcon.svelte";
@@ -18,8 +17,6 @@
 
   const theme = getTheme("timelineStepper");
 
-  setContext("stepperType", "timeline");
-
   const { base, item, circle } = $derived(timelineStepper());
 
   // Handle step click
@@ -111,7 +108,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1687)
+[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1747)
 ## Props
 @prop steps = []
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L1687)
+ * [TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1747)
  * ## Props
  * @prop steps = []
  * @prop class: className

package/dist/stepper/VerticalStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import type { StepStatus, Step } from "../types";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { verticalStepper } from "./theme";
@@ -17,8 +16,6 @@
 
   const theme = getTheme("verticalStepper");
 
-  setContext("stepperType", "vertical");
-
   const { base, card, content } = $derived(verticalStepper());
 
   // Handle step click
@@ -111,7 +108,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1650)
+[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1710)
 ## Props
 @prop steps = []
 @prop liClass

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

@@ -2,7 +2,7 @@ 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#L1650)
+ * [VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1710)
  * ## Props
  * @prop steps = []
  * @prop liClass

package/dist/table/Table.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-  import { setContext } from "svelte";
+  import { setTableContext } from "../context";
   import { table as tableCls } from "./theme";
   import TableHead from "./TableHead.svelte";
   import TableBody from "./TableBody.svelte";
   import clsx from "clsx";
-  import type { TableProps, TableCtxType } from "../types";
+  import type { TableProps, TableContextType } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   let { children, footerSlot, captionSlot, items, divClass, striped, hoverable, border = true, shadow, color = "default", class: className, classes, ...restProps }: TableProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Table", { divClass }, { divClass: "div" });
+
   const styling = $derived(
     classes ?? {
       div: divClass
@@ -19,7 +21,7 @@
 
   const { div, table } = $derived(tableCls({ color, shadow }));
 
-  let tableCtx: TableCtxType = {
+  let tableCtx: TableContextType = {
     get striped() {
       return striped;
     },
@@ -34,7 +36,7 @@
     }
   };
 
-  setContext("tableCtx", tableCtx);
+  setTableContext(tableCtx);
   let headItems = $derived(items && items.length > 0 ? Object.keys(items[0]).map((key) => ({ text: key.charAt(0).toUpperCase() + key.slice(1) })) : []);
 
   let bodyItems = $derived(items && items.length > 0 ? items.map((item) => Object.values(item)) : []);
@@ -61,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1722)
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1782)
 ## 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#L1722)
+ * [TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1782)
  * ## 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#L1754)
+[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1814)
 ## 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#L1754)
+ * [TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1814)
  * ## 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#L1743)
+[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
 ## 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#L1743)
+ * [TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/table/TableBodyRow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getTableContext } from "../context";
   import { tableBodyRow } from "./theme";
-  import type { TableBodyRowProps, TableCtxType } from "../types";
+  import type { TableBodyRowProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -9,12 +9,12 @@
 
   const theme = getTheme("tableBodyRow");
 
-  const tableCtx = getContext<TableCtxType>("tableCtx");
+  const tableCtx = getTableContext();
   // for reactivity with svelte context
-  let compoColor = $derived(color || tableCtx.color || "default");
-  let compoHoverable = $derived(hoverable || tableCtx.hoverable || false);
-  let compoStriped = $derived(striped || tableCtx.striped || false);
-  let compoBorder = $derived(border || tableCtx.border || false);
+  let compoColor = $derived(color || tableCtx?.color || "default");
+  let compoHoverable = $derived(hoverable || tableCtx?.hoverable || false);
+  let compoStriped = $derived(striped || tableCtx?.striped || false);
+  let compoBorder = $derived(border || tableCtx?.border || false);
 
   const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder, class: clsx(theme, className) }));
 </script>
@@ -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#L1735)
+[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1795)
 ## 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#L1735)
+ * [TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1795)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/table/TableHead.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getTableContext } from "../context";
   import TableHeadCell from "./TableHeadCell.svelte";
   import { tableHead } from "./theme";
-  import type { TableHeadProps, TableCtxType, HeadItemType } from "../types";
+  import type { TableHeadProps, HeadItemType } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -10,11 +10,11 @@
 
   const theme = getTheme("tableHead");
 
-  const tableCtx = getContext<TableCtxType>("tableCtx");
+  const tableCtx = getTableContext();
   // for reactivity with svelte context
-  let compoColor = $derived(color ? color : tableCtx.color || "default");
-  let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
-  let compoBorder = $derived(border ? border : tableCtx.border || false);
+  let compoColor = $derived(color ? color : tableCtx?.color || "default");
+  let compoStriped = $derived(striped ? striped : tableCtx?.striped || false);
+  let compoBorder = $derived(border ? border : tableCtx?.border || false);
 
   const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped, class: clsx(theme, className) }));
 
@@ -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#L1710)
+[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1770)
 ## 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#L1710)
+ * [TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1770)
  * ## Props
  * @prop children
  * @prop headerSlot