flowbite-svelte 1.28.0 → 1.28.2

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#L2026)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2041)
 ## 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#L2026)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2041)
  * ## 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#L2034)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2049)
 ## 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#L2034)
+ * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2049)
  * ## 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#L2039)
+[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2054)
 ## 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#L2039)
+ * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2054)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/uiHelpers.svelte.d.ts

@@ -1,10 +1,10 @@
-export function uiHelpers(): {
+export declare function uiHelpers(): {
     isOpen: boolean;
     toggle: () => void;
     close: () => void;
     open: () => void;
 };
-export function clickOutside(element: any, callbackFunction: any): {
-    update(newCallbackFunction: any): void;
+export declare function clickOutside(element: HTMLElement, callbackFunction: (event: MouseEvent) => void): {
+    update(newCallbackFunction: (event: MouseEvent) => void): void;
     destroy(): void;
 };

package/dist/uiHelpers.svelte.js

@@ -1,57 +1,50 @@
-// @ts-nocheck
 export function uiHelpers() {
-  let isOpen = $state(false);
-
-  function toggle() {
-    isOpen = !isOpen;
-  }
-
-  function close() {
-    isOpen = false;
-  }
-
-  function open() {
-    isOpen = true;
-  }
-
-  return {
-    get isOpen() {
-      return isOpen;
-    },
-    set isOpen(value) {
-      isOpen = value;
-    },
-
-    toggle,
-    close,
-    open
-  };
-}
-
-export function clickOutside(element, callbackFunction) {
-  const onClick = (event) => {
-    if (typeof callbackFunction === "function") {
-      const targetNode = event.target;
-      if (!element.contains(targetNode)) {
-        callbackFunction(event);
-      }
-    } else {
-      console.error("Callback function is not a function");
+    let isOpen = $state(false);
+    function toggle() {
+        isOpen = !isOpen;
+    }
+    function close() {
+        isOpen = false;
     }
-  };
-
-  element.ownerDocument.body.addEventListener("click", onClick);
-
-  return {
-    update(newCallbackFunction) {
-      if (typeof newCallbackFunction === "function") {
-        callbackFunction = newCallbackFunction;
-      } else {
-        console.error("New callback function is not a function");
-      }
-    },
-    destroy() {
-      element.ownerDocument.body.removeEventListener("click", onClick);
+    function open() {
+        isOpen = true;
     }
-  };
+    return {
+        get isOpen() {
+            return isOpen;
+        },
+        set isOpen(value) {
+            isOpen = value;
+        },
+        toggle,
+        close,
+        open
+    };
+}
+export function clickOutside(element, callbackFunction) {
+    const onClick = (event) => {
+        if (typeof callbackFunction === "function") {
+            const targetNode = event.target;
+            if (!element.contains(targetNode)) {
+                callbackFunction(event);
+            }
+        }
+        else {
+            console.error("Callback function is not a function");
+        }
+    };
+    element.ownerDocument.body.addEventListener("click", onClick);
+    return {
+        update(newCallbackFunction) {
+            if (typeof newCallbackFunction === "function") {
+                callbackFunction = newCallbackFunction;
+            }
+            else {
+                console.error("New callback function is not a function");
+            }
+        },
+        destroy() {
+            element.ownerDocument.body.removeEventListener("click", onClick);
+        }
+    };
 }

package/dist/utils/Arrow.svelte

@@ -3,13 +3,13 @@
   import { getOppositePlacement, getSide } from "@floating-ui/utils";
   import type { ArrowProps } from "../types";
 
-  let { placement = "top", cords, strategy = "absolute", class: className = "" }: ArrowProps = $props();
+  let { placement = "top", cords, class: className = "" }: ArrowProps = $props();
 
   const px = (n: number | undefined) => (n ? `${n}px` : "");
 
-  // calming down the warnings
-  getSide;
-  getOppositePlacement;
+  // Prevent unused import warnings - these functions are used in the $effect below
+  void getSide;
+  void getOppositePlacement;
 
   function getBorderWidth(element: HTMLElement) {
     const computedStyle = window.getComputedStyle(element);
@@ -25,7 +25,6 @@
 
   function positioning(node: HTMLElement) {
     $effect(() => {
-      node.style.position = strategy;
       node.style.left = px(cords.x);
       node.style.top = px(cords.y);
       node.style.right = "";
@@ -44,17 +43,16 @@
   }
 </script>
 
-<div use:positioning class="popover-arrow clip pointer-events-none block h-[10px] w-[10px] border-b border-l border-inherit bg-inherit text-inherit {className}"></div>
+<div use:positioning class="popover-arrow clip pointer-events-none absolute block h-[10px] w-[10px] border-b border-l border-inherit bg-inherit text-inherit {className}"></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2083)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2098)
 ## Props
 @prop placement = "top"
 @prop cords
-@prop strategy = "absolute"
 @prop class: className = ""
 -->
 

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

@@ -2,11 +2,10 @@ 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#L2083)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2098)
  * ## Props
  * @prop placement = "top"
  * @prop cords
- * @prop strategy = "absolute"
  * @prop class: className = ""
  */
 declare const Arrow: import("svelte").Component<ArrowProps, {}, "">;

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#L147)
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L146)
 ## 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#L147)
+ * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L146)
  * ## Props
  * @prop children
  * @prop color = "gray"

package/dist/utils/Popper.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ParamsType, PopperProps, TriggeredToggleEvent } from "../types";
-  import type { Coords, Middleware, Placement, Strategy } from "@floating-ui/dom";
+  import type { Coords, Middleware, Placement } from "@floating-ui/dom";
   import * as dom from "@floating-ui/dom";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
@@ -43,10 +43,9 @@
   let invoker: HTMLElement | null = null;
   let referenceElement: HTMLElement | null = null;
   let triggerEls: HTMLElement[] = [];
-  let arrowParams: { placement: Placement; cords: Partial<Coords>; strategy: Strategy } = $state({
+  let arrowParams: { placement: Placement; cords: Partial<Coords> } = $state({
     placement,
-    cords: { x: 0, y: 0 },
-    strategy
+    cords: { x: 0, y: 0 }
   });
 
   $effect(() => {
@@ -80,10 +79,9 @@
 
     return dom.computePosition(referenceElement ?? invoker, popover, { placement, middleware, strategy }).then(({ x, y, middlewareData: { arrow }, placement: pl, strategy }) => {
       if (popover) {
-        Object.assign(popover.style, { position: strategy, left: yOnly ? "0" : px(x), top: px(y) });
-
+        Object.assign(popover.style, { position: strategy, left: yOnly ? "0" : px(x), right: "auto", top: px(y) });
         if (arrow && arrowEl) {
-          arrowParams = { placement: pl, cords: { x: arrow.x, y: arrow.y }, strategy };
+          arrowParams = { placement: pl, cords: { x: arrow.x, y: arrow.y } };
         }
       }
     });
@@ -177,7 +175,7 @@
   }
 
   function set_triggers(node: HTMLElement) {
-    const events: [string, any, boolean][] = [
+    const events: [string, (ev: Event) => void, boolean][] = [
       ["focusin", open_popover, focusable],
       ["focusout", close_popover, focusable],
       ["mousedown", open_popover, clickable],
@@ -262,7 +260,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2061)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2076)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = DEFAULT_TRIGGER_DELAY

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#L2061)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2076)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = DEFAULT_TRIGGER_DELAY

package/dist/utils/debounce.d.ts

@@ -12,6 +12,6 @@
  * openDialogDeb(); // Schedule open
  * closeDialogDeb(); // Cancel open, schedule close
  */
-type Func = (...args: any[]) => any;
+type Func = (...args: any[]) => unknown;
 export declare function createMutualDebounce<A extends Func, B extends Func>(actionA: A, actionB: B, delayFunc: () => number): [(...args: Parameters<A>) => void, (...args: Parameters<B>) => void];
 export {};

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#L2048)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2063)
 ## 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#L2048)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2063)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.28.0",
+  "version": "1.28.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -13,46 +13,45 @@
   "license": "MIT",
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
-    "@docsearch/css": "^4.2.0",
-    "@docsearch/js": "^4.2.0",
-    "@eslint/compat": "^1.4.1",
-    "@eslint/js": "^9.39.0",
+    "@docsearch/css": "^4.3.2",
+    "@docsearch/js": "^4.3.2",
+    "@eslint/compat": "^2.0.0",
+    "@eslint/js": "^9.39.1",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
     "@flowbite-svelte-plugins/datatable": "^0.4.1",
     "@flowbite-svelte-plugins/texteditor": "^0.25.6",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@resvg/resvg-js": "^2.6.2",
-    "@sveltejs/adapter-vercel": "^6.1.1",
-    "@sveltejs/enhanced-img": "0.8.3",
-    "@sveltejs/kit": "^2.48.4",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/adapter-vercel": "^6.2.0",
+    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.2.8",
+    "@testing-library/svelte": "^5.2.9",
     "@testing-library/user-event": "^14.6.1",
     "@tiptap/core": "3.7.2",
-    "@vitest/browser": "^4.0.6",
-    "@vitest/browser-playwright": "^4.0.6",
+    "@vitest/browser": "^4.0.14",
+    "@vitest/browser-playwright": "^4.0.14",
     "dayjs": "^1.11.19",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.39.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.13.0",
-    "flowbite-svelte-admin-dashboard": "^2.0.0",
+    "flowbite-svelte-admin-dashboard": "^2.1.1",
     "flowbite-svelte-blocks": "^2.1.0",
     "flowbite-svelte-icons": "^3.0.0",
     "flowbite-svelte-illustrations": "^1.0.5",
     "flowbite-typography": "^1.0.5",
     "globals": "^16.5.0",
     "highlight.js": "^11.11.1",
-    "jsdom": "^27.1.0",
+    "jsdom": "^27.2.0",
     "katex": "^0.16.25",
     "lowlight": "^3.3.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
-    "playwright": "^1.56.1",
+    "playwright": "^1.57.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
@@ -63,19 +62,19 @@
     "satori": "^0.18.3",
     "satori-html": "^0.3.2",
     "super-sitemap": "^1.0.5",
-    "svelte": "^5.43.2",
-    "svelte-check": "^4.3.3",
-    "svelte-doc-llm": "^0.5.1",
+    "svelte": "^5.45.2",
+    "svelte-check": "^4.3.4",
+    "svelte-doc-llm": "^0.7.0",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.5.0",
-    "svelte-rune-highlight": "^0.7.1",
-    "tailwindcss": "^4.1.16",
+    "svelte-rune-highlight": "^0.11.1",
+    "tailwindcss": "^4.1.17",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.12",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.2.4",
     "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^4.0.6",
+    "vitest": "^4.0.14",
     "vitest-browser-svelte": "^2.0.1"
   },
   "peerDependencies": {
@@ -128,13 +127,13 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/utils": "^0.2.10",
-    "apexcharts": "^5.3.5",
+    "apexcharts": "^5.3.6",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "esm-env": "^1.2.2",
     "flowbite": "^3.1.2",
-    "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^3.1.1"
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2"
   },
   "files": [
     "dist",
@@ -813,10 +812,6 @@
       "types": "./dist/typography/hr/Hr.svelte.d.ts",
       "svelte": "./dist/typography/hr/Hr.svelte"
     },
-    "./EnhancedImg.svelte": {
-      "types": "./dist/typography/img/EnhancedImg.svelte.d.ts",
-      "svelte": "./dist/typography/img/EnhancedImg.svelte"
-    },
     "./Img.svelte": {
       "types": "./dist/typography/img/Img.svelte.d.ts",
       "svelte": "./dist/typography/img/Img.svelte"
@@ -888,7 +883,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:ignore": "npx sv check --ignore 'src/routes/testdir,dist,build' --no-tsconfig",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
+    "lint": "pnpm format && prettier --check . && eslint .",
     "format": "prettier --write .",
     "test:e2e": "playwright test",
     "test:unit": "vitest",

package/dist/typography/img/EnhancedImg.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import clsx from "clsx";
-  import { img } from "./theme";
-  import type { EnhandedImgProps } from "../../types";
-  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-
-  let { src, href, caption, size, figClass, class: className, classes, captionClass, ...restProps }: EnhandedImgProps = $props();
-
-  warnThemeDeprecation(
-    "EnhancedImg",
-    { figClass, captionClass },
-    {
-      figClass: "fig",
-      captionClass: "caption"
-    }
-  );
-  const styling = $derived({
-    fig: figClass,
-    caption: captionClass
-  });
-
-  const theme = getTheme("img");
-
-  let { base, figure, caption: figureCaption } = $derived(img({ size }));
-  console.warn("EnhancedImg is deprecated. Please use Img instead.");
-</script>
-
-{#snippet imageSlot()}
-  {#if caption}
-    <figure class={figure({ class: clsx(theme?.figure, styling.fig) })}>
-      <enhanced:img {src} {...restProps} class={base({ class: clsx(theme?.base, className) })} />
-      <figcaption class={figureCaption({ class: clsx(theme?.caption, styling.caption) })}>
-        {@html caption}
-      </figcaption>
-    </figure>
-  {:else}
-    <enhanced:img {src} {...restProps} class={base({ class: clsx(theme?.base, className) })} />
-  {/if}
-{/snippet}
-
-{#if href}
-  <a {href}>
-    {@render imageSlot()}
-  </a>
-{:else}
-  {@render imageSlot()}
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1989)
-## Props
-@prop src
-@prop href
-@prop caption
-@prop size
-@prop figClass
-@prop class: className
-@prop classes
-@prop captionClass
-@prop ...restProps
--->

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

@@ -1,19 +0,0 @@
-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#L1989)
- * ## Props
- * @prop src
- * @prop href
- * @prop caption
- * @prop size
- * @prop figClass
- * @prop class: className
- * @prop classes
- * @prop captionClass
- * @prop ...restProps
- */
-declare const EnhancedImg: import("svelte").Component<EnhandedImgProps, {}, "">;
-type EnhancedImg = ReturnType<typeof EnhancedImg>;
-export default EnhancedImg;