flowbite-svelte 1.2.0 → 1.2.2

package/dist/utils/Popper.svelte

@@ -1,27 +1,32 @@
 <script lang="ts">
-  import type { Coords, Middleware, Placement } from "@floating-ui/dom";
+  import type { Coords, Middleware, Placement, Strategy } from "@floating-ui/dom";
   import * as dom from "@floating-ui/dom";
   import Arrow from "./Arrow.svelte";
-  import type { PopperProps, TriggeredToggleEvent } from "..";
+  import type { ParamsType, PopperProps, TriggeredToggleEvent } from "..";
+  import { fade } from "svelte/transition";
+  import { sineIn } from "svelte/easing";
 
   const TRIGGER_DELAY = 200;
 
-  let { triggeredBy, trigger = "click", placement = "top", offset = 8, arrow = false, yOnly = false, strategy = "absolute", reference, middlewares = [dom.flip(), dom.shift()], onbeforetoggle: _onbeforetoggle, ontoggle: _ontoggle, class: className = "", arrowClass = "", isOpen = $bindable(false), children, ...restProps }: PopperProps = $props();
+  let { triggeredBy, trigger = "click", placement = "top", offset = 8, arrow = false, yOnly = false, strategy = "absolute", reference, middlewares = [dom.flip(), dom.shift()], onbeforetoggle: _onbeforetoggle, ontoggle: _ontoggle, class: className = "", arrowClass = "", isOpen = $bindable(false), transitionParams, transition = fade, children, ...restProps }: PopperProps = $props();
 
   let focusable: boolean = true;
   let clickable: boolean = $derived(trigger === "click");
   let hoverable: boolean = $derived(trigger === "hover");
 
-  let popover: HTMLElement | null = null;
+  let popover: HTMLElement | null = $state(null);
   let invoker: HTMLButtonElement | null = null;
   let referenceElement: HTMLElement | null = null;
   let triggerEls: HTMLButtonElement[] = [];
-  let arrowParams: { placement: Placement; cords: Partial<Coords>; strategy: "absolute" | "fixed" } = $state({
+  let arrowParams: { placement: Placement; cords: Partial<Coords>; strategy: Strategy } = $state({
     placement,
     cords: { x: 0, y: 0 },
     strategy
   });
 
+  const paramsDefault = { duration: 100, easing: sineIn };
+  const paramsOptions = $derived(transitionParams ?? paramsDefault);
+
   const px = (n: number | undefined) => (n ? `${n}px` : "");
 
   function updatePopoverPosition() {
@@ -58,17 +63,14 @@
     if (ev.target !== invoker && triggerEls.includes(ev.target as HTMLButtonElement)) {
       invoker = ev.target as HTMLButtonElement;
       // if (invoker) invoker.popoverTargetElement = popover;
-      popover?.hidePopover(); // invoker changed need to hide old popover
-      isOpen = false; // Update isOpen state when popover is hidden
+      isOpen = false;
+      await new Promise((resolve) => setTimeout(resolve, TRIGGER_DELAY));
     }
 
     if (ev.type === "mousedown") {
-      popover?.togglePopover();
-      // For toggle, we need to check the current state after toggling
-      // This will be handled by the ontoggle event
+      isOpen = !isOpen;
     } else {
-      popover?.showPopover();
-      isOpen = true; // Update isOpen state when popover is shown
+      isOpen = true;
     }
   }
 
@@ -81,8 +83,6 @@
     if (ev?.type === "mouseleave" && popover?.contains(popover.ownerDocument.activeElement)) return;
     if (ev?.type === "focusout" && popover?.contains(popover.ownerDocument.activeElement)) return;
 
-    popover?.hidePopover();
-    // Update isOpen state when popover is closed
     isOpen = false;
   }
 
@@ -109,6 +109,9 @@
   function on_toggle(ev: ToggleEvent) {
     if (!invoker) return;
 
+    // Update isOpen value when popover state changes through other means
+    isOpen = ev.newState === "open";
+
     (ev as TriggeredToggleEvent).trigger = invoker;
     _ontoggle?.(ev as TriggeredToggleEvent);
   }
@@ -158,52 +161,24 @@
       isOpen = false;
     }
   }
-
-  // Watch for isOpen changes to control popover state and update isOpen when state changes
-  $effect(() => {
-    if (popover) {
-      if (isOpen === true) {
-        popover.showPopover();
-      } else if (isOpen === false) {
-        popover.hidePopover();
-      }
-    }
-  });
-
-  // Update isOpen value when popover state changes through other means
-  function updateIsOpenState(ev: ToggleEvent) {
-    isOpen = ev.newState === "open";
-  }
 </script>
 
-<div
-  popover="manual"
-  role="tooltip"
-  bind:this={popover}
-  use:set_triggers
-  class:overflow-visible={true}
-  onfocusout={close_popover}
-  onmouseleave={hoverable ? close_popover : undefined}
-  onmouseenter={hoverable ? open_popover : undefined}
-  onbeforetoggle={on_before_toggle}
-  ontoggle={(ev) => {
-    updateIsOpenState(ev);
-    on_toggle(ev);
-  }}
-  class={className}
-  {...restProps}
->
-  {@render children()}
-  {#if arrow}
-    <Arrow {...arrowParams} class={arrowClass} />
-  {/if}
-</div>
+<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={className} transition:transition={paramsOptions as ParamsType} onintrostart={() => popover?.showPopover()} onoutroend={() => popover?.hidePopover()} {...restProps}>
+    {@render children()}
+    {#if arrow}
+      <Arrow {...arrowParams} class={arrowClass} />
+    {/if}
+  </div>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1815)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1842)
 ## Props
 @prop triggeredBy
 @prop trigger = "click"
@@ -219,6 +194,8 @@
 @prop class: className = ""
 @prop arrowClass = ""
 @prop isOpen = $bindable(false)
+@prop transitionParams
+@prop transition = fade
 @prop children
 @prop ...restProps
 -->

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

@@ -2,7 +2,7 @@ import type { PopperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1815)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1842)
  * ## Props
  * @prop triggeredBy
  * @prop trigger = "click"
@@ -18,6 +18,8 @@ import type { PopperProps } from "..";
  * @prop class: className = ""
  * @prop arrowClass = ""
  * @prop isOpen = $bindable(false)
+ * @prop transitionParams
+ * @prop transition = fade
  * @prop children
  * @prop ...restProps
  */

package/dist/video/Video.svelte

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -15,45 +15,45 @@
     "@changesets/cli": "2.29.2",
     "@docsearch/css": "^3.9.0",
     "@docsearch/js": "^3.9.0",
-    "@eslint/compat": "^1.2.8",
-    "@eslint/js": "^9.25.1",
+    "@eslint/compat": "^1.2.9",
+    "@eslint/js": "^9.26.0",
     "@playwright/test": "^1.52.0",
-    "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/adapter-vercel": "^5.7.0",
-    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/adapter-auto": "^6.0.1",
+    "@sveltejs/adapter-vercel": "^5.7.2",
+    "@sveltejs/kit": "^2.21.0",
     "@sveltejs/package": "2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/vite": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.7",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.25.1",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-svelte": "^3.5.1",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-svelte": "^3.6.0",
     "flowbite-svelte-icons": "^2.1.1",
-    "globals": "^16.0.0",
+    "globals": "^16.1.0",
     "jsdom": "^26.1.0",
-    "mdsvex": "^0.12.5",
+    "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "prism-themes": "^1.9.0",
     "publint": "^0.3.12",
-    "svelte": "^5.28.2",
-    "svelte-check": "^4.1.6",
-    "svelte-lib-helpers": "^0.4.26",
-    "svelte-meta-tags": "^4.2.0",
+    "svelte": "^5.28.6",
+    "svelte-check": "^4.1.7",
+    "svelte-lib-helpers": "^0.4.28",
+    "svelte-meta-tags": "^4.3.0",
     "svelte-rune-highlight": "^0.6.6",
-    "tailwindcss": "^4.1.4",
-    "tsx": "^4.19.3",
+    "tailwindcss": "^4.1.6",
+    "tsx": "^4.19.4",
     "typescript": "^5.8.3",
     "typescript-eslint": "8.31.1",
-    "vite": "^6.3.3",
-    "vitest": "^3.1.2"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
@@ -103,12 +103,13 @@
     "url": "git+https://github.com/themesberg/flowbite-svelte.git"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/dom": "^1.7.0",
     "@floating-ui/utils": "^0.2.9",
     "apexcharts": "^4.7.0",
     "flowbite": "^3.1.2",
-    "tailwind-merge": "^3.2.0",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-merge": "^3.3.0",
+    "tailwind-variants": "^1.0.0",
+    "virtua": "^0.41.0"
   },
   "files": [
     "dist",
@@ -370,6 +371,10 @@
       "types": "./dist/forms/select/Select.svelte.d.ts",
       "svelte": "./dist/forms/select/Select.svelte"
     },
+    "./Tags.svelte": {
+      "types": "./dist/forms/tags/Tags.svelte.d.ts",
+      "svelte": "./dist/forms/tags/Tags.svelte"
+    },
     "./Textarea.svelte": {
       "types": "./dist/forms/textarea/Textarea.svelte.d.ts",
       "svelte": "./dist/forms/textarea/Textarea.svelte"