flowbite-svelte 1.19.1 → 1.20.1

package/dist/types.d.ts

@@ -73,6 +73,7 @@ import type { ApexOptions } from "apexcharts";
 import type { ButtonToggleVariants } from "./forms/button-toggle/theme";
 import type { TagsVariants } from "./forms/tags/theme";
 import type { VirtualListVariants } from "./virtuallist/theme";
+import type { KanbanBoardVariants, KanbanCardVariants } from "./kanban/theme";
 import type { CloseButtonVariants } from "./utils/theme";
 import type { DialogVariants } from "./dialog/theme";
 export declare const xs = "xs";
@@ -1762,5 +1763,32 @@ export interface VirtualListProps<T = unknown> extends VirtualListVariants, Omit
     overscan?: number;
     getItemHeight?: (item: T, index: number) => number;
     scrollToIndex?: (fn: (index: number) => void) => void;
+    contained?: boolean;
+    ariaLabel?: string;
+    class?: ClassValue | null;
+}
+export interface KanbanCardType {
+    id: string | number;
+    title: string;
+    description?: string;
+    tags?: string[];
+}
+export interface KanbanColumnType {
+    id: string | number;
+    title: string;
+    cards: KanbanCardType[];
+    color?: string;
+}
+export interface KanbanBoardProps extends KanbanBoardVariants, HTMLAttributes<HTMLDivElement> {
+    columns?: KanbanColumnType[];
+    onMove?: (card: KanbanCardType, from: KanbanColumnType, to: KanbanColumnType) => void;
+    onAddCard?: (col: KanbanColumnType) => void;
+    class?: ClassValue | null;
+}
+export interface KanbanCardProps extends KanbanCardVariants, HTMLAttributes<HTMLElement> {
+    card: KanbanCardType;
+    isDragging?: boolean;
+    onDragStart?: (card: KanbanCardType, ev?: DragEvent) => void;
+    onDragEnd?: (ev?: DragEvent) => void;
     class?: ClassValue | null;
 }

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#L1861)
+[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1896)
 ## 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#L1861)
+ * [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1896)
  * ## 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#L1890)
+[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1925)
 ## 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#L1890)
+ * [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1925)
  * ## 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#L1900)
+[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1935)
 ## 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#L1900)
+ * [DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1935)
  * ## 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#L1906)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1941)
 ## 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#L1906)
+ * [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1941)
  * ## Props
  * @prop children
  * @prop tag = "h1"

package/dist/typography/img/EnhancedImg.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1948)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1983)
 ## Props
 @prop src
 @prop href

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

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

package/dist/typography/img/Img.svelte

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

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

@@ -2,7 +2,7 @@ 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#L1937)
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1972)
  * ## Props
  * @prop children
  * @prop size

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

package/dist/typography/list/Li.svelte

@@ -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#L1974)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2009)
 ## 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#L1974)
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2009)
  * ## Props
  * @prop children
  * @prop icon

package/dist/typography/list/List.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
 ## 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#L1966)
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
  * ## 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#L1980)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2015)
 ## 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#L1980)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2015)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/paragraph/P.svelte

@@ -4,7 +4,20 @@
   import type { ParagraphProps } from "../../types";
   import { getTheme } from "../../theme/themeUtils";
 
-  let { children, class: className = "text-gray-900 dark:text-white", height = "normal", align = "left", justify = false, italic, firstUpper = false, whitespace = "normal", size = "base", space = "normal", weight = "normal", ...restProps }: ParagraphProps = $props();
+  let {
+    children,
+    class: className = "text-gray-900 dark:text-white",
+    height = "normal",
+    align = "left",
+    justify = false,
+    italic,
+    firstUpper = false,
+    whitespace = "normal",
+    size = "base",
+    space = "normal",
+    weight = "normal",
+    ...restProps
+  }: ParagraphProps = $props();
 
   const theme = getTheme("paragraph");
 
@@ -19,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#L1985)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
 ## Props
 @prop children
 @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/paragraph/P.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ParagraphProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1985)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
  * ## Props
  * @prop children
  * @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/secondary/Secondary.svelte

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

package/dist/typography/secondary/Secondary.svelte.d.ts

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

package/dist/typography/span/Span.svelte

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

package/dist/typography/span/Span.svelte.d.ts

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

package/dist/utils/Arrow.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2041)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2076)
 ## Props
 @prop placement = "top"
 @prop cords

package/dist/utils/Arrow.svelte.d.ts

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

package/dist/utils/CloseButton.svelte

@@ -24,7 +24,11 @@
       {@render children()}
     {:else}
       <svg class={svg({ class: svgClass })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
       </svg>
     {/if}
   </button>
@@ -35,7 +39,11 @@
       {@render children()}
     {:else}
       <svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
       </svg>
     {/if}
   </a>
@@ -45,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L112)
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L144)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/utils/CloseButton.svelte.d.ts

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

package/dist/utils/Popper.svelte

@@ -7,7 +7,28 @@
   import { sineIn } from "svelte/easing";
   import clsx from "clsx";
 
-  let { triggeredBy, triggerDelay = 200, trigger = "click", placement = "top", offset = 8, arrow = false, yOnly = false, strategy = "absolute", reference, middlewares = [dom.flip(), dom.shift()], onbeforetoggle: _onbeforetoggle, ontoggle: _ontoggle, onclose: _onclose, class: className = "", arrowClass = "", isOpen = $bindable(false), transitionParams, transition = fade, children, ...restProps }: PopperProps = $props();
+  let {
+    triggeredBy,
+    triggerDelay = 200,
+    trigger = "click",
+    placement = "top",
+    offset = 8,
+    arrow = false,
+    yOnly = false,
+    strategy = "absolute",
+    reference,
+    middlewares = [dom.flip(), dom.shift()],
+    onbeforetoggle: _onbeforetoggle,
+    ontoggle: _ontoggle,
+    onclose: _onclose,
+    class: className = "",
+    arrowClass = "",
+    isOpen = $bindable(false),
+    transitionParams,
+    transition = fade,
+    children,
+    ...restProps
+  }: PopperProps = $props();
 
   let focusable: boolean = true;
   let clickable: boolean = $derived(trigger === "click");
@@ -205,7 +226,22 @@
 <div use:set_triggers hidden></div>
 
 {#if isOpen}
-  <div popover="manual" role="tooltip" bind:this={popover} class:overflow-visible={true} onfocusout={close_popover} onmouseleave={hoverable ? close_popover : undefined} onmouseenter={hoverable ? open_popover : undefined} onbeforetoggle={on_before_toggle} ontoggle={on_toggle} class={clsx(className)} transition:transition={paramsOptions as ParamsType} onintrostart={() => popover?.showPopover()} onoutroend={() => popover?.hidePopover()} {...restProps}>
+  <div
+    popover="manual"
+    role="tooltip"
+    bind:this={popover}
+    class:overflow-visible={true}
+    onfocusout={close_popover}
+    onmouseleave={hoverable ? close_popover : undefined}
+    onmouseenter={hoverable ? open_popover : undefined}
+    onbeforetoggle={on_before_toggle}
+    ontoggle={on_toggle}
+    class={clsx(className)}
+    transition:transition={paramsOptions as ParamsType}
+    onintrostart={() => popover?.showPopover()}
+    onoutroend={() => popover?.hidePopover()}
+    {...restProps}
+  >
     {@render children()}
     {#if arrow}
       <Arrow {...arrowParams} class={arrowClass} />
@@ -217,7 +253,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2055)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = 200

package/dist/utils/Popper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2055)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = 200

package/dist/video/Video.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2007)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2042)
 ## Props
 @prop children
 @prop type = "video/mp4"

package/dist/video/Video.svelte.d.ts

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

package/dist/virtuallist/VirtualList.svelte

@@ -1,21 +1,22 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import type { VirtualListProps } from "../types";
   import { virtualList } from "./theme";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
-  // Destructure props with defaults
   let {
     items = [],
     minItemHeight = 50,
     height = 400,
     overscan = 5,
     getItemHeight,
-    scrollToIndex, // Bind function to parent
+    scrollToIndex,
     children,
+    ariaLabel = "Virtual scrolling list",
     class: className,
-    classes
-  }: VirtualListProps = $props();
+    classes,
+    contained = false
+  }: VirtualListProps<T> = $props();
 
   const theme = getTheme("virtualList");
 
@@ -23,17 +24,32 @@
   let scrollTop = $state(0);
   let rafId: number | undefined;
 
-  const styles = virtualList();
+  /**
+   * Whether to apply CSS containment for performance optimization.
+   * Defaults to false. This prop value takes precedence over any theme defaults.
+   * @default false
+   */
+  const styles = virtualList({ contained });
+
+  const containStyle = $derived.by(() => {
+    if (!contained) return "";
+    // Flatten potential string | string[] | Record<string, boolean> via clsx
+    const itemClasses = clsx(classes?.item);
+    const hasCustomContain = /\[contain:[^\]]+\]/.test(itemClasses);
+    return hasCustomContain ? "" : "contain: layout style paint;";
+  });
 
   // Total height of all items
   const totalHeight = $derived.by(() => items.reduce((sum: number, item, i) => sum + (getItemHeight ? getItemHeight(item, i) : (minItemHeight ?? 50)), 0));
 
+  // Sanitize and use the safe value in index calculations.
+  const overscanSafe = $derived(Math.max(0, Math.floor(overscan ?? 0)));
   // Find the first visible index
   const startIndex = $derived.by(() => {
     let y = 0;
     for (let i = 0; i < items.length; i++) {
       const h = getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
-      if (y + h > scrollTop) return Math.max(0, i - overscan);
+      if (y + h > scrollTop) return Math.max(0, i - overscanSafe);
       y += h;
     }
     return 0;
@@ -45,7 +61,7 @@
     for (let i = 0; i < items.length; i++) {
       const h = getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
       y += h;
-      if (y >= scrollTop + height) return Math.min(items.length, i + overscan + 1);
+      if (y >= scrollTop + height) return Math.min(items.length, i + overscanSafe + 1);
     }
     return items.length;
   });
@@ -90,11 +106,20 @@
   });
 </script>
 
-<div bind:this={container} onscroll={handleScroll} role="list" aria-label="Virtual scrolling list" class={styles.container({ class: clsx(theme?.container, className) })} style={`height:${height}px; position:relative;`}>
+<div
+  bind:this={container}
+  onscroll={handleScroll}
+  role="list"
+  aria-label={ariaLabel}
+  class={styles.container({ class: clsx(theme?.container, className) })}
+  style={`height:${height}px; position:relative;`}
+>
   <div class={styles.spacer({ class: clsx(theme?.spacer, classes?.spacer) })} style={`height:${totalHeight}px;`}>
     <div class={styles.content({ class: clsx(theme?.content, classes?.content) })} style={`transform:translateY(${offsetY}px); will-change:transform;`}>
       {#each visibleItems as item, i (startIndex + i)}
-        {@render children?.(item, startIndex + i)}
+        <div role="listitem" aria-setsize={items.length} aria-posinset={startIndex + i + 1} class={styles.item({ class: clsx(theme?.item, classes?.item) })} style={containStyle}>
+          {@render children?.(item, startIndex + i)}
+        </div>
       {/each}
     </div>
   </div>
@@ -104,7 +129,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VirtualListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2048)
+[VirtualListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2049)
 ## Props
 @prop items = []
 @prop minItemHeight = 50
@@ -113,6 +138,8 @@
 @prop getItemHeight
 @prop scrollToIndex
 @prop children
+@prop ariaLabel = "Virtual scrolling list"
+@prop contained = false
 @prop class: className
 @prop classes
 -->