flowbite-svelte 1.20.0 → 1.20.1

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#L1986)
+ * [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#L1994)
+[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#L1994)
+ * [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#L1999)
+[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#L1999)
+ * [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#L2042)
+[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#L2042)
+ * [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

@@ -53,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#L113)
+[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#L113)
+ * [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

@@ -253,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#L2021)
+[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#L2021)
+ * [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#L2008)
+[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#L2008)
+ * [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;
   });
@@ -94,14 +110,16 @@
   bind:this={container}
   onscroll={handleScroll}
   role="list"
-  aria-label="Virtual scrolling 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>
@@ -120,6 +138,8 @@
 @prop getItemHeight
 @prop scrollToIndex
 @prop children
+@prop ariaLabel = "Virtual scrolling list"
+@prop contained = false
 @prop class: className
 @prop classes
 -->

package/dist/virtuallist/VirtualList.svelte.d.ts

@@ -1,4 +1,25 @@
 import type { VirtualListProps } from "../types";
+declare function $$render<T>(): {
+    props: VirtualListProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
@@ -11,9 +32,11 @@ import type { VirtualListProps } from "../types";
  * @prop getItemHeight
  * @prop scrollToIndex
  * @prop children
+ * @prop ariaLabel = "Virtual scrolling list"
+ * @prop contained = false
  * @prop class: className
  * @prop classes
  */
-declare const VirtualList: import("svelte").Component<VirtualListProps<unknown>, {}, "">;
-type VirtualList = ReturnType<typeof VirtualList>;
+declare const VirtualList: $$IsomorphicComponent;
+type VirtualList<T> = InstanceType<typeof VirtualList<T>>;
 export default VirtualList;

package/dist/virtuallist/theme.d.ts

@@ -2,39 +2,39 @@ import { type VariantProps } from "tailwind-variants";
 import type { Classes } from "../theme/themeUtils";
 export type VirtualListVariants = VariantProps<typeof virtualList> & Classes<typeof virtualList>;
 export declare const virtualList: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-            spacer?: import("tailwind-merge").ClassNameValue;
+    contained: {
+        true: {
+            item: string;
         };
+        false: {};
     };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-            spacer?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
+}, {
     container: string;
     spacer: string;
     content: string;
+    item: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            container?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-            spacer?: import("tailwind-merge").ClassNameValue;
+    contained: {
+        true: {
+            item: string;
         };
+        false: {};
     };
-} | {}, {
+}, {
     container: string;
     spacer: string;
     content: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    contained: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
     container: string;
     spacer: string;
     content: string;
+    item: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/virtuallist/theme.js

@@ -3,6 +3,16 @@ export const virtualList = tv({
     slots: {
         container: "overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent",
         spacer: "relative",
-        content: "absolute top-0 left-0 right-0"
+        content: "absolute top-0 left-0 right-0",
+        item: ""
+    },
+    variants: {
+        contained: {
+            true: { item: "[contain:layout_style_paint]" },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        contained: false
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.20.0",
+  "version": "1.20.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {