flowbite-svelte 1.29.0 → 1.30.0

package/dist/toast/ToastContainer.svelte.d.ts

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

package/dist/toolbar/Toolbar.svelte

@@ -2,7 +2,7 @@
   import { getTheme } from "../theme/themeUtils";
   import type { ToolbarProps } from "../types";
   import clsx from "clsx";
-  import { setContext } from "svelte";
+  import { setToolbarContext } from "../context";
   import { toolbar } from "./theme";
 
   let { children, end, color, embedded, class: className, classes, ...restProps }: ToolbarProps = $props();
@@ -10,7 +10,19 @@
   const theme = getTheme("toolbar");
 
   const context = $state({ separators: false });
-  setContext("toolbar", context);
+
+  // Create context object with getter
+  const ctx = {
+    get separators() {
+      return context.separators;
+    },
+    set separators(value: boolean) {
+      context.separators = value;
+    }
+  };
+
+  // Set context during initialization
+  setToolbarContext(ctx);
 
   let frameColor = $derived(embedded ? "default" : color);
 
@@ -40,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1172)
+[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1230)
 ## Props
 @prop children
 @prop end

package/dist/toolbar/Toolbar.svelte.d.ts

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

package/dist/toolbar/ToolbarButton.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import { toolbarButton } from "./theme";
   import type { ToolbarButtonProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
-  const background = getContext("background");
   let { children, color, name, "aria-label": ariaLabel, size, class: className, ...restProps }: ToolbarButtonProps = $props();
 
   const theme = getTheme("toolbarButton");
@@ -14,7 +12,7 @@
     toolbarButton({
       color,
       size,
-      background: !!background,
+      background: false,
       class: clsx(theme, className)
     })
   );
@@ -36,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1178)
+[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1236)
 ## Props
 @prop children
 @prop color

package/dist/toolbar/ToolbarButton.svelte.d.ts

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

package/dist/toolbar/ToolbarGroup.svelte

@@ -2,7 +2,7 @@
   import { getTheme } from "../theme/themeUtils";
   import type { ToolbarGroupProps } from "../types";
   import clsx from "clsx";
-  import { getContext } from "svelte";
+  import { getToolbarContext } from "../context";
   import { toolbarGroup } from "./theme";
 
   let { children, spacing, padding, position = "middle", class: className, ...restProps }: ToolbarGroupProps = $props();
@@ -11,9 +11,9 @@
 
   const groupCls = $derived(toolbarGroup({ spacing, padding, position, class: clsx(theme, className) }));
 
-  const context = getContext<Record<string, boolean>>("toolbar");
+  const ctx = getToolbarContext();
 
-  if (context) context.separators = true;
+  if (ctx) ctx.separators = true;
 </script>
 
 <div {...restProps} class={groupCls}>
@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1176)
+[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1234)
 ## Props
 @prop children
 @prop spacing

package/dist/toolbar/ToolbarGroup.svelte.d.ts

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

package/dist/tooltip/Tooltip.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1933)
+[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2000)
 ## Props
 @prop type = "dark"
 @prop color = undefined

package/dist/tooltip/Tooltip.svelte.d.ts

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

package/dist/tour/theme.js

@@ -10,7 +10,7 @@ export const tour = tv({
         description: "text-sm leading-relaxed text-gray-600 mb-4",
         progressContainer: "flex gap-2 justify-center",
         progressDot: ["w-2 h-2 rounded-full bg-gray-300", "hover:bg-gray-400 transition-all duration-200 hover:scale-110"],
-        progressDotActive: "!bg-blue-500 !w-6 rounded",
+        progressDotActive: "!bg-blue-500 w-6! rounded",
         actions: ["flex justify-between items-center px-5 py-4", "border-t border-gray-200 relative z-10 bg-white rounded-b-xl"],
         navigation: "flex gap-2",
         button: ["px-4 py-2 rounded-md text-sm font-medium", "transition-all duration-200"],

package/dist/types.d.ts

@@ -143,12 +143,6 @@ export type AnchorButtonDivAttributes = ({
     href?: undefined;
     onclick?: undefined;
 } & HTMLAttributes<HTMLDivElement>);
-export interface AccordionCtxType {
-    flush?: boolean;
-    activeClass?: string | null;
-    inactiveClass?: string | null;
-    transitionType?: TransitionFunc | "none";
-}
 export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<HTMLDivElement>, "color"> {
     children: Snippet;
     multiple?: boolean;
@@ -183,7 +177,7 @@ export interface AvatarProps extends AvatarVariants, HTMLAttributes<HTMLDivEleme
     href?: HTMLAnchorAttributes["href"];
     target?: HTMLAnchorAttributes["target"];
     src?: string;
-    dot?: Record<string, unknown>;
+    dot?: Partial<Omit<IndicatorProps, "children">>;
     alt?: string;
     onclick?: () => void;
 }
@@ -209,11 +203,6 @@ export interface BannerProps extends BannerVariants, Omit<HTMLAttributes<HTMLDiv
     closeClass?: ClassValue;
     onclose?: (ev: MouseEvent) => void;
 }
-export type BottomNavContextType = {
-    activeClass?: string | null;
-    activeUrl?: string;
-    navType?: BottomNavVariants["navType"];
-};
 export interface BottomNavProps extends BottomNavVariants, HTMLAttributes<HTMLDivElement> {
     children: Snippet;
     header?: Snippet;
@@ -274,13 +263,68 @@ export interface GradientButtonProps extends GradientButtonVariantes, HTMLButton
     href?: string;
     btnClass?: ClassValue;
 }
+export interface AccordionContextType {
+    flush?: boolean;
+    activeClass?: string | null;
+    inactiveClass?: string | null;
+    transitionType?: TransitionFunc | "none";
+}
+export interface BottomNavContextType {
+    activeClass?: string | null;
+    activeUrl?: string;
+    navType?: BottomNavVariants["navType"];
+}
+export interface CarouselContextType {
+    images: HTMLImgAttributes[];
+    index: number;
+    lastSlideChange: number;
+    slideDuration: number;
+    forward: boolean;
+    changeSlide: (newIndex: number) => void;
+}
+export interface DrawerContextType {
+    placement: "left" | "right" | "top" | "bottom";
+}
+export interface DropdownContextType {
+    activeUrl: string;
+}
+export interface PaginationContextType {
+    group: boolean;
+    table?: boolean;
+    size?: "default" | "large";
+    activeClasses?: ClassValue;
+}
+export interface ButtonToggleContextType {
+    toggleSelected: (toggleValue: string) => void;
+    isSelected: (toggleValue: string) => boolean;
+    multiSelect: boolean;
+    color?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    roundedSize?: "sm" | "md" | "lg" | "xl" | "full";
+    ctxIconClass?: string;
+    ctxBtnClass?: string;
+}
+export interface ListContextType {
+    ctxClass: string;
+}
+export interface ToolbarContextType {
+    separators: boolean;
+}
+export interface ListGroupContextType {
+    active?: boolean;
+    horizontal?: boolean;
+}
+export interface ButtonGroupContextType {
+    size: SizeType;
+    disabled?: boolean;
+}
 export type ButtonToggleGroupProps = HTMLAttributes<HTMLDivElement> & {
     multiSelect?: boolean;
     name?: string;
     value?: string | null | string[];
     color?: ButtonToggleVariants["color"];
     size?: ButtonToggleVariants["size"];
-    roundedSize?: ButtonToggleVariants["roundedSize"];
+    roundedSize?: "sm" | "md" | "lg" | "xl" | "full";
     onSelect?: (val: string | null | string[]) => void;
     children: Snippet;
     ctxIconClass?: ClassValue;
@@ -306,14 +350,6 @@ export type CardProps = Omit<CardVariants, "href"> & AnchorDivAttributes & {
     imgClass?: ClassValue;
     contentClass?: string;
 };
-export type CarouselState = {
-    images: HTMLImgAttributes[];
-    index: number;
-    lastSlideChange: number;
-    slideDuration: number;
-    forward: boolean;
-    changeSlide: (newIndex: number) => void;
-};
 export interface CarouselProps extends CarouselVariants, Omit<HTMLAttributes<HTMLDivElement>, "children" | "onchange"> {
     children?: Snippet<[number]>;
     slide?: Snippet<[{
@@ -1188,7 +1224,7 @@ export interface RatingIconProps extends SVGAttributes<SVGSVGElement> {
     groupId?: string;
     pathd?: string;
 }
-export type SidebarCtxType = {
+export type SidebarContextType = {
     closeSidebar?: () => void;
     activeClass?: string;
     nonActiveClass?: string;
@@ -1347,9 +1383,17 @@ export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
 export interface StepIndicatorProps extends StepIndicatorVariants, HTMLAttributes<HTMLElement> {
     steps?: string[];
     currentStep?: number;
+    size?: StepIndicatorVariants["size"];
     color?: StepIndicatorVariants["color"] | "custom";
+    glow?: boolean;
+    hideLabel?: boolean;
+    clickable?: boolean;
     completedCustom?: string;
     currentCustom?: string;
+    onStepClick?: (event: {
+        current: number;
+        last: number;
+    }) => void;
 }
 export type StepStatus = "completed" | "current" | "pending";
 export interface Step {
@@ -1462,7 +1506,7 @@ export interface TimelineStepperProps extends HTMLOlAttributes, TimelineStepperV
         last: number;
     }) => void;
 }
-export type TableCtxType = {
+export type TableContextType = {
     striped?: boolean;
     hoverable?: boolean;
     border?: boolean;
@@ -1575,6 +1619,12 @@ export type SelectedTab = {
     snippet?: Snippet;
     id?: string;
 };
+export interface TabsContextType {
+    activeClasses?: string;
+    ctx: TabCtxType;
+    registerTab: (tab: SelectedTab) => void;
+    unregisterTab: (tabId: string) => void;
+}
 export type { ThemeConfig } from "./theme";
 export interface ActivityType {
     id?: string | number;
@@ -1884,6 +1934,17 @@ export interface DividerProps {
     class?: ClassValue | null;
     currentSize: number;
 }
+export 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 type TourStep = {
     target: string;
     title?: string;

package/dist/typography/a/A.svelte

@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
+[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2004)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/typography/a/A.svelte.d.ts

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

package/dist/typography/blockquote/Blockquote.svelte

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

package/dist/typography/blockquote/Blockquote.svelte.d.ts

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

package/dist/typography/descriptionlist/DescriptionList.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1976)
+[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2043)
 ## Props
 @prop children
 @prop tag

package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts

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

package/dist/typography/heading/Heading.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1982)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2049)
 ## Props
 @prop children
 @prop tag = "h1"

package/dist/typography/heading/Heading.svelte.d.ts

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

package/dist/typography/hr/Hr.svelte

@@ -6,7 +6,7 @@
 
   let { children, divClass, innerDivClass, class: className, classes, divProps = {}, hrProps = {}, ...restProps }: HrProps = $props();
 
-  // base container content
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Hr",
     { divClass, innerDivClass },
@@ -15,6 +15,7 @@
       innerDivClass: "content"
     }
   );
+
   const styling = $derived(
     classes ?? {
       div: divClass,
@@ -23,11 +24,11 @@
   );
 
   const theme = getTheme("hr");
-  const bg = classes?.bg ?? "bg-gray-200 dark:bg-gray-700";
+  const bg = $derived(classes?.bg ?? "bg-gray-200 dark:bg-gray-700");
 
   // for backward compatibility and ...restPorps will be removed and use only ..divProps and ...hrProps in future
-  const mergedDivProps = { ...restProps, ...divProps };
-  const mergedHrProps = { ...restProps, ...hrProps };
+  const mergedDivProps = $derived({ ...restProps, ...divProps });
+  const mergedHrProps = $derived({ ...restProps, ...hrProps });
 
   let { base, div, content } = $derived(hr({ withChildren: !!children }));
 </script>

package/dist/typography/img/Img.svelte

@@ -4,8 +4,9 @@
   import type { ImgProps } from "../../types";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
-  let { children, size, effect, align, caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
+  let { children, size, effect: imgEffect, align, caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Img",
     { figClass, captionClass },
@@ -22,7 +23,7 @@
 
   const theme = getTheme("img");
 
-  let { base, figure, caption: figureCaption } = $derived(img({ size, effect, align }));
+  let { base, figure, caption: figureCaption } = $derived(img({ size, effect: imgEffect, align }));
 
   // Determine if using slot or traditional props
   const useSlot = $derived(!!children);
@@ -61,11 +62,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2013)
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2080)
 ## Props
 @prop children
 @prop size
-@prop effect
+@prop effect: imgEffect
 @prop align
 @prop caption
 @prop class: className

package/dist/typography/img/Img.svelte.d.ts

@@ -2,11 +2,11 @@ import type { ImgProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2013)
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2080)
  * ## Props
  * @prop children
  * @prop size
- * @prop effect
+ * @prop effect: imgEffect
  * @prop align
  * @prop caption
  * @prop class: className

package/dist/typography/layout/Layout.svelte

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

package/dist/typography/layout/Layout.svelte.d.ts

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

package/dist/typography/list/Li.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import type { LiProps } from "../../types";
   import clsx from "clsx";
+  import { getListContext } from "../../context";
 
   let { children, icon, class: className, ...restProps }: LiProps = $props();
 
-  const getCtxClass = getContext<() => string>("ctxClass");
+  const ctx = getListContext();
 
-  let liCls = $derived(clsx(getCtxClass(), icon && "flex items-center", className));
+  let liCls = $derived(clsx(ctx?.ctxClass, icon && "flex items-center", className));
 </script>
 
 <li {...restProps} class={liCls}>
@@ -18,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2050)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2117)
 ## Props
 @prop children
 @prop icon

package/dist/typography/list/Li.svelte.d.ts

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

package/dist/typography/list/List.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import { list } from "./theme";
   import type { ListProps } from "../../types";
   import clsx from "clsx";
   import { getTheme } from "../../theme/themeUtils";
+  import { setListContext } from "../../context";
 
   let { children, tag = "ul", isContenteditable = false, position = "inside", ctxClass, class: className, ...restProps }: ListProps = $props();
 
   const theme = getTheme("list");
 
-  let contextClass = $state(ctxClass || "");
+  let contextClass = $derived(ctxClass || "");
 
-  setContext("ctxClass", () => contextClass);
+  // Create context object
+  const ctx = {
+    get ctxClass() {
+      return contextClass;
+    }
+  };
+
+  // Set context during initialization
+  setListContext(ctx);
 
   $effect(() => {
     contextClass = ctxClass || "";
@@ -28,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2042)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2109)
 ## Props
 @prop children
 @prop tag = "ul"

package/dist/typography/list/List.svelte.d.ts

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

package/dist/typography/mark/Mark.svelte

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

package/dist/typography/mark/Mark.svelte.d.ts

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

package/dist/typography/paragraph/P.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2061)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2128)
 ## Props
 @prop children
 @prop class: className = "text-gray-900 dark:text-white"