flowbite-svelte 1.17.1 → 1.17.3

package/dist/forms/select/MultiSelect.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T">
   import clsx from "clsx";
-  import type { MultiSelectProps, SelectOptionType } from "../..";
+  import type { MultiSelectProps, SelectOptionType, SizeType } from "../..";
   import Badge from "../../badge/Badge.svelte";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { multiSelect } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { createDismissableContext } from "../../utils/dismissable";
 
   // Consider reusing that component - https://svelecte.vercel.app/
@@ -37,6 +37,7 @@
 
   let selectItems = $derived(items.filter((x) => value.includes(x.value)));
   let show: boolean = $state(false);
+  let group: { size: SizeType } = getContext("group");
 
   // Active item
   let activeIndex: number | null = $state(null);
@@ -193,7 +194,7 @@
     };
   });
 
-  const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = multiSelect({ disabled });
+  const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = multiSelect({ disabled, grouped: !!group });
 </script>
 
 <select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
@@ -212,7 +213,7 @@
         {#if children}
           {@render children({ item, clear: () => clearThisOption(item) })}
         {:else}
-          <Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={[disabled && "pointer-events-none"]}>
+          <Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={["mx-0.5 px-2 py-0", disabled && "pointer-events-none"]}>
             {item.name}
           </Badge>
         {/if}

package/dist/forms/select/Select.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" generics="T">
   import { select as selectCls } from "./theme";
   import clsx from "clsx";
-  import type { SelectProps } from "../..";
+  import type { SelectProps, SizeType } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
+  import { getContext } from "svelte";
 
   let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, placeholder = "Choose option ...", clearable, clearableColor = "none", clearableOnClick, onClear, clearableSvgClass, clearableClass, selectClass, class: className, classes, ...restProps }: SelectProps<T> = $props();
 
@@ -14,7 +15,8 @@
 
   const theme = getTheme("select");
 
-  const { base, select, close } = $derived(selectCls({ underline, size, disabled }));
+  let group: { size: SizeType } = getContext("group");
+  const { base, select, close } = $derived(selectCls({ underline, size, disabled, grouped: !!group }));
 
   const clearAll = () => {
     if (elementRef) {

package/dist/forms/select/theme.d.ts

@@ -28,6 +28,16 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
 }, {
     base: string;
     select: string;
@@ -59,6 +69,16 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
 }, {
     base: string;
     select: string;
@@ -90,6 +110,16 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
 }, {
     base: string;
     select: string;
@@ -122,6 +152,16 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
 }, {
     base: string;
     select: string;
@@ -157,6 +197,16 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
 }, {
     base: string;
     select: string;
@@ -192,6 +242,16 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
             item: string;
         };
     };
+    grouped: {
+        false: {
+            base: string;
+            select: string;
+        };
+        true: {
+            base: string;
+            select: string;
+        };
+    };
 }, {
     base: string;
     select: string;

package/dist/forms/select/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const select = tv({
     slots: {
-        base: "relative",
+        base: "relative w-full",
         select: "block w-full rtl:text-right",
         close: "absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
         svg: ""
@@ -9,10 +9,10 @@ export const select = tv({
     variants: {
         underline: {
             true: {
-                select: "text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer px-0!"
+                select: "text-gray-500 bg-transparent rounded-none! border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer px-0!"
             },
             false: {
-                select: "text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                select: "text-gray-900 bg-gray-50 border border-gray-300 focus:outline-hidden focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
             }
         },
         size: {
@@ -25,6 +25,13 @@ export const select = tv({
                 select: "cursor-not-allowed opacity-50"
             },
             false: {}
+        },
+        grouped: {
+            false: { base: "rounded-lg", select: "rounded-lg" },
+            true: {
+                base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
+                select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
+            }
         }
     },
     defaultVariants: {
@@ -34,8 +41,8 @@ export const select = tv({
 });
 export const multiSelect = tv({
     slots: {
-        base: "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden",
-        select: "flex flex-wrap gap-2",
+        base: "relative border border-gray-300 w-full flex items-center gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden",
+        select: "",
         dropdown: "absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full",
         item: "py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600",
         close: "p-0 focus:ring-gray-400 dark:text-white",
@@ -66,6 +73,13 @@ export const multiSelect = tv({
             true: {
                 item: "bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white"
             }
+        },
+        grouped: {
+            false: { base: "rounded-lg", select: "rounded-lg" },
+            true: {
+                base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
+                select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
+            }
         }
     },
     // Add compoundVariants here

package/dist/types.d.ts

@@ -1660,13 +1660,18 @@ export interface Picture {
         h: number;
     };
 }
-export interface ImgProps extends ImgVariants, HTMLImgAttributes {
+export interface ImgProps extends ImgVariants, Omit<HTMLImgAttributes, "children"> {
+    children?: Snippet<[{
+        class: string;
+        restProps: any;
+    }]>;
     size?: ImgVariants["size"];
     effect?: ImgVariants["effect"];
     caption?: string;
     figClass?: string;
     captionClass?: string;
     href?: HTMLAnchorElement["href"];
+    align?: ImgVariants["align"];
 }
 export interface EnhandedImgProps extends ImgVariants, Omit<HTMLImgAttributes, "src"> {
     src: string | Picture;

package/dist/typography/img/EnhancedImg.svelte

@@ -22,6 +22,7 @@
   const theme = getTheme("img");
 
   let { base, figure, caption: figureCaption } = $derived(img({ size }));
+  console.warn("EnhancedImg is deprecated. Please use Img instead.");
 </script>
 
 {#snippet imageSlot()}
@@ -49,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#L1946)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1948)
 ## 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#L1946)
+ * [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1948)
  * ## Props
  * @prop src
  * @prop href

package/dist/typography/img/Img.svelte

@@ -4,36 +4,48 @@
   import type { ImgProps } from "../../types";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
-  let { size = "none", effect = "none", caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
+  let { children, size, effect, align, caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
 
   warnThemeDeprecation(
     "Img",
     { figClass, captionClass },
     {
-      figClass: "fig",
+      figClass: "figure",
       captionClass: "caption"
     }
   );
+
   const styling = $derived({
-    fig: figClass,
-    caption: captionClass
+    figure: figClass || classes?.figure,
+    caption: captionClass || classes?.caption
   });
 
   const theme = getTheme("img");
 
-  let { base, figure, caption: figureCaption } = $derived(img({ size, effect }));
+  let { base, figure, caption: figureCaption } = $derived(img({ size, effect, align }));
+
+  // Determine if using slot or traditional props
+  const useSlot = $derived(!!children);
+  // Compute the final class string to pass to children
+  const imgClass = $derived(base({ class: clsx(theme?.base, className) }));
 </script>
 
 {#snippet imageSlot()}
   {#if caption}
-    <figure class={figure({ class: clsx(theme?.figure, styling.fig) })}>
-      <img {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    <figure class={figure({ class: clsx(theme?.figure, styling.figure) })}>
+      {#if useSlot}
+        {@render children?.({ class: imgClass, restProps })}
+      {:else}
+        <img {...restProps} class={imgClass} />
+      {/if}
       <figcaption class={figureCaption({ class: clsx(theme?.caption, styling.caption) })}>
         {@html caption}
       </figcaption>
     </figure>
+  {:else if useSlot}
+    {@render children?.({ class: imgClass, restProps })}
   {:else}
-    <img {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    <img {...restProps} class={imgClass} />
   {/if}
 {/snippet}
 
@@ -51,8 +63,10 @@
 ## Type
 [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
 ## Props
-@prop size = "none"
-@prop effect = "none"
+@prop children
+@prop size
+@prop effect
+@prop align
 @prop caption
 @prop class: className
 @prop classes

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

@@ -4,8 +4,10 @@ import type { ImgProps } from "../../types";
  * ## Type
  * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
  * ## Props
- * @prop size = "none"
- * @prop effect = "none"
+ * @prop children
+ * @prop size
+ * @prop effect
+ * @prop align
  * @prop caption
  * @prop class: className
  * @prop classes

package/dist/typography/img/theme.d.ts

@@ -31,10 +31,6 @@ export declare const img: import("tailwind-variants").TVReturnType<{
             base: string;
             figure: string;
         };
-        none: {
-            base: string;
-            figure: string;
-        };
     };
     effect: {
         grayscale: {
@@ -55,8 +51,19 @@ export declare const img: import("tailwind-variants").TVReturnType<{
         "hue-rotate": {
             base: string;
         };
-        none: {
+    };
+    align: {
+        left: {
             base: string;
+            figure: string;
+        };
+        center: {
+            base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
         };
     };
 }, {
@@ -93,10 +100,6 @@ export declare const img: import("tailwind-variants").TVReturnType<{
             base: string;
             figure: string;
         };
-        none: {
-            base: string;
-            figure: string;
-        };
     };
     effect: {
         grayscale: {
@@ -117,8 +120,19 @@ export declare const img: import("tailwind-variants").TVReturnType<{
         "hue-rotate": {
             base: string;
         };
-        none: {
+    };
+    align: {
+        left: {
             base: string;
+            figure: string;
+        };
+        center: {
+            base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
         };
     };
 }, {
@@ -155,10 +169,6 @@ export declare const img: import("tailwind-variants").TVReturnType<{
             base: string;
             figure: string;
         };
-        none: {
-            base: string;
-            figure: string;
-        };
     };
     effect: {
         grayscale: {
@@ -179,8 +189,19 @@ export declare const img: import("tailwind-variants").TVReturnType<{
         "hue-rotate": {
             base: string;
         };
-        none: {
+    };
+    align: {
+        left: {
+            base: string;
+            figure: string;
+        };
+        center: {
             base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
         };
     };
 }, {

package/dist/typography/img/theme.js

@@ -13,8 +13,7 @@ export const img = tv({
             lg: { base: "max-w-lg", figure: "max-w-lg" },
             xl: { base: "max-w-xl", figure: "max-w-xl" },
             "2xl": { base: "max-w-2xl", figure: "max-w-2xl" },
-            full: { base: "max-w-full", figure: "max-w-full" },
-            none: { base: "", figure: "" }
+            full: { base: "max-w-full", figure: "max-w-full" }
         },
         effect: {
             grayscale: {
@@ -32,10 +31,12 @@ export const img = tv({
             },
             "hue-rotate": {
                 base: "hue-rotate-60 filter transition-all duration-300 hover:hue-rotate-0"
-            },
-            none: {
-                base: "transition-all duration-300"
             }
+        },
+        align: {
+            left: { base: "mx-0", figure: "mx-0" },
+            center: { base: "mx-auto", figure: "mx-auto" },
+            right: { base: "ml-auto mr-0", figure: "ml-auto mr-0" }
         }
     }
 });

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#L1959)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1961)
 ## 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#L1959)
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1961)
  * ## 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#L1972)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1974)
 ## 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#L1972)
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1974)
  * ## 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#L1964)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
 ## 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#L1964)
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
  * ## 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#L1978)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1980)
 ## 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#L1978)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1980)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/paragraph/P.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1983)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1985)
 ## 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#L1983)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1985)
  * ## 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#L1991)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
 ## 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#L1991)
+ * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
  * ## 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#L1996)
+[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1998)
 ## 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#L1996)
+ * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1998)
  * ## 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#L2038)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2040)
 ## 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#L2038)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2040)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/Popper.svelte

@@ -213,7 +213,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2018)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
 ## 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#L2018)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
  * ## 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#L2005)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2007)
 ## 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#L2005)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2007)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.17.1",
+  "version": "1.17.3",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -16,27 +16,27 @@
     "@docsearch/css": "^4.1.0",
     "@docsearch/js": "^4.1.0",
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
-    "@flowbite-svelte-plugins/datatable": "^0.4.0",
+    "@flowbite-svelte-plugins/datatable": "^0.4.1",
     "@flowbite-svelte-plugins/texteditor": "^0.25.5",
     "@playwright/test": "^1.55.1",
     "@resvg/resvg-js": "^2.6.2",
-    "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/enhanced-img": "0.6.1",
-    "@sveltejs/kit": "^2.43.2",
+    "@sveltejs/adapter-auto": "^6.1.1",
+    "@sveltejs/adapter-vercel": "^5.10.3",
+    "@sveltejs/enhanced-img": "0.8.3",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/vite": "^4.1.13",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
     "@tiptap/core": "3.4.4",
     "dayjs": "^1.11.18",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "flowbite-svelte-admin-dashboard": "^2.0.0",
@@ -47,7 +47,7 @@
     "globals": "^16.4.0",
     "highlight.js": "^11.11.1",
     "jsdom": "^27.0.0",
-    "katex": "^0.16.22",
+    "katex": "^0.16.23",
     "lowlight": "^3.3.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
@@ -55,24 +55,23 @@
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "prism-themes": "^1.9.0",
-    "publint": "^0.3.13",
+    "publint": "^0.3.14",
     "runatics": "^0.1.4",
     "runes-meta-tags": "^0.4.5",
     "satori": "^0.18.3",
     "satori-html": "^0.3.2",
-    "simple-datatables": "^10.0.0",
     "super-sitemap": "^1.0.5",
-    "svelte": "^5.39.5",
+    "svelte": "^5.39.9",
     "svelte-check": "^4.3.2",
     "svelte-doc-llm": "^0.4.1",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.4.1",
     "svelte-rune-highlight": "^0.7.1",
-    "tailwindcss": "^4.1.13",
-    "tsx": "^4.20.5",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1",
-    "vite": "^7.1.7",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4"
   },