flowbite-svelte 1.20.0 → 1.21.0

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#L1907)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
 ## 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#L1907)
+ * [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
  * ## 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#L1949)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1979)
 ## 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#L1949)
+ * [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1979)
  * ## 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#L1938)
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1968)
 ## 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#L1938)
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1968)
  * ## 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#L1962)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1992)
 ## 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#L1962)
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1992)
  * ## 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#L1975)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
 ## 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#L1975)
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
  * ## 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#L1967)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1997)
 ## 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#L1967)
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1997)
  * ## 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#L1981)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2011)
 ## 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#L1981)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2011)
  * ## Props
  * @prop children
  * @prop class: className

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#L1986)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2016)
 ## 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#L1986)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2016)
  * ## 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#L2024)
 ## 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#L2024)
  * ## 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#L2029)
 ## 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#L2029)
  * ## 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#L2073)
 ## 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#L2073)
  * ## 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

@@ -1,31 +1,36 @@
 <script lang="ts">
+  import type { ParamsType, PopperProps, TriggeredToggleEvent } from "../types";
   import type { Coords, Middleware, Placement, Strategy } from "@floating-ui/dom";
   import * as dom from "@floating-ui/dom";
-  import Arrow from "./Arrow.svelte";
-  import type { ParamsType, PopperProps, TriggeredToggleEvent } from "../types";
-  import { fade } from "svelte/transition";
-  import { sineIn } from "svelte/easing";
   import clsx from "clsx";
+  import { sineIn } from "svelte/easing";
+  import { fade } from "svelte/transition";
+  import Arrow from "./Arrow.svelte";
+  import { createMutualDebounce } from "./debounce";
+
+  const DEFAULT_TRIGGER_DELAY = 200;
+  const DEFAULT_OFFSET = 8;
 
   let {
     triggeredBy,
-    triggerDelay = 200,
+    triggerDelay = DEFAULT_TRIGGER_DELAY,
     trigger = "click",
     placement = "top",
-    offset = 8,
+    offset = DEFAULT_OFFSET,
     arrow = false,
     yOnly = false,
     strategy = "absolute",
+    role = "tooltip",
     reference,
     middlewares = [dom.flip(), dom.shift()],
-    onbeforetoggle: _onbeforetoggle,
-    ontoggle: _ontoggle,
-    onclose: _onclose,
     class: className = "",
     arrowClass = "",
     isOpen = $bindable(false),
     transitionParams,
     transition = fade,
+    onbeforetoggle,
+    ontoggle,
+    onclose,
     children,
     ...restProps
   }: PopperProps = $props();
@@ -44,6 +49,25 @@
     strategy
   });
 
+  $effect(() => {
+    if (reference && popover) {
+      referenceElement = popover.ownerDocument.querySelector<HTMLElement>(reference);
+    }
+  });
+
+  let arrowEl: HTMLElement | null = $state(null);
+  $effect(() => {
+    if (popover) {
+      arrowEl = popover.querySelector<HTMLElement>(".popover-arrow");
+    }
+  });
+
+  let middleware: Middleware[] = $derived.by(() => {
+    const base = [...middlewares, dom.offset(offset)];
+    if (arrowEl) base.push(dom.arrow({ element: arrowEl }));
+    return base;
+  });
+
   const paramsDefault = { duration: 100, easing: sineIn };
   const paramsOptions = $derived(transitionParams ?? paramsDefault);
 
@@ -54,11 +78,6 @@
       return;
     }
 
-    const arrowEl: HTMLElement | null = popover.querySelector(".popover-arrow");
-
-    let middleware: Middleware[] = [...middlewares, dom.offset(offset)];
-    if (arrowEl) middleware.push(dom.arrow({ element: arrowEl }));
-
     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) });
@@ -70,23 +89,17 @@
     });
   }
 
-  let isTriggered: boolean = false;
-
-  async function open_popover(ev: Event) {
-    // throttle
-    isTriggered = true;
-    await new Promise((resolve) => setTimeout(resolve, triggerDelay));
-    if (!isTriggered) {
-      return;
-    }
-
+  async function _open_popover(ev: Event) {
     ev.preventDefault();
 
     if (ev.target !== invoker && triggerEls.includes(ev.target as HTMLElement)) {
       invoker = ev.target as HTMLElement;
-      // if (invoker) invoker.popoverTargetElement = popover;
-      isOpen = false;
-      await new Promise((resolve) => setTimeout(resolve, triggerDelay));
+      if (isOpen) {
+        // invoker changed but the popover is open and stays open; pretend as if it toggles
+        popover?.dispatchEvent(new ToggleEvent("beforetoggle", { newState: "open", oldState: "open" }));
+        await updatePopoverPosition();
+        popover?.dispatchEvent(new ToggleEvent("toggle", { newState: "open", oldState: "open" }));
+      }
     }
 
     if (ev.type === "mousedown") {
@@ -96,7 +109,7 @@
     }
   }
 
-  async function close_popover(ev: Event) {
+  async function _close_popover(ev: Event) {
     // For click triggers, don't close on focusout events from inside the popover
     if (trigger === "click" && ev.type === "focusout") {
       const relatedTarget = (ev as FocusEvent).relatedTarget as HTMLElement;
@@ -112,12 +125,6 @@
       }
     }
 
-    isTriggered = false;
-    await new Promise((resolve) => setTimeout(resolve, triggerDelay));
-    if (isTriggered) {
-      return;
-    }
-
     // if popover has focus don't close when leaving the invoker
     if (ev?.type === "mouseleave" && popover?.contains(popover.ownerDocument.activeElement)) {
       return;
@@ -129,26 +136,31 @@
     isOpen = false;
   }
 
-  let autoUpdateDestroy = () => {};
+  const [open_popover, close_popover] = createMutualDebounce(_open_popover, _close_popover, () => triggerDelay);
 
   function on_before_toggle(ev: ToggleEvent) {
     if (!invoker || !popover) return;
+    const evWithTrigger: TriggeredToggleEvent = Object.assign(ev, { trigger: invoker });
+    onbeforetoggle?.(evWithTrigger);
+  }
 
-    (ev as TriggeredToggleEvent).trigger = invoker;
-    _onbeforetoggle?.(ev as TriggeredToggleEvent);
-
+  $effect(() => {
     // Floating UI instance when it's closed we need to keep a autoUpdate destroy function
+    let autoUpdateDestroy: (() => void) | null = null;
 
-    if (ev.newState === "open") {
+    if (isOpen && popover && invoker) {
       autoUpdateDestroy = dom.autoUpdate(referenceElement ?? invoker, popover, updatePopoverPosition);
       popover.ownerDocument.addEventListener("click", closeOnClickOutside);
       popover.ownerDocument.addEventListener("keydown", closeOnEscape);
-    } else {
-      autoUpdateDestroy();
-      popover.ownerDocument.removeEventListener("click", closeOnClickOutside);
-      popover.ownerDocument.removeEventListener("keydown", closeOnEscape);
     }
-  }
+
+    return () => {
+      autoUpdateDestroy?.();
+      autoUpdateDestroy = null;
+      popover?.ownerDocument.removeEventListener("click", closeOnClickOutside);
+      popover?.ownerDocument.removeEventListener("keydown", closeOnEscape);
+    };
+  });
 
   function on_toggle(ev: ToggleEvent) {
     if (!invoker) return;
@@ -156,11 +168,11 @@
     // Update isOpen value when popover state changes through other means
     isOpen = ev.newState === "open";
 
-    (ev as TriggeredToggleEvent).trigger = invoker;
-    _ontoggle?.(ev as TriggeredToggleEvent);
+    const evWithTrigger: TriggeredToggleEvent = Object.assign(ev, { trigger: invoker });
+    ontoggle?.(evWithTrigger);
 
     if (ev.newState === "closed") {
-      _onclose?.(ev as TriggeredToggleEvent);
+      onclose?.(evWithTrigger);
     }
   }
 
@@ -182,7 +194,6 @@
       return;
     }
 
-    if (reference) referenceElement = node.ownerDocument.querySelector<HTMLElement>(reference);
     invoker = triggerEls[0];
 
     triggerEls.forEach((element: HTMLElement) => {
@@ -190,13 +201,11 @@
       for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
     });
 
-    $effect(() => {
-      return () => {
-        triggerEls.forEach((element: HTMLElement) => {
-          for (const [name, handler, cond] of events) if (cond) element.removeEventListener(name, handler);
-        });
-      };
-    });
+    return () => {
+      triggerEls.forEach((element: HTMLElement) => {
+        for (const [name, handler, cond] of events) if (cond) element.removeEventListener(name, handler);
+      });
+    };
   }
 
   function closeOnEscape(event: KeyboardEvent) {
@@ -223,22 +232,22 @@
   }
 </script>
 
-<div use:set_triggers hidden></div>
+<div {@attach set_triggers} hidden></div>
 
 {#if isOpen}
   <div
     popover="manual"
-    role="tooltip"
+    {role}
     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()}
+    onbeforetoggle={on_before_toggle}
+    ontoggle={on_toggle}
     onoutroend={() => popover?.hidePopover()}
     {...restProps}
   >
@@ -253,26 +262,27 @@
 @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#L2051)
 ## Props
 @prop triggeredBy
-@prop triggerDelay = 200
+@prop triggerDelay = DEFAULT_TRIGGER_DELAY
 @prop trigger = "click"
 @prop placement = "top"
-@prop offset = 8
+@prop offset = DEFAULT_OFFSET
 @prop arrow = false
 @prop yOnly = false
 @prop strategy = "absolute"
+@prop role = "tooltip"
 @prop reference
 @prop middlewares = [dom.flip(), dom.shift()]
-@prop onbeforetoggle: _onbeforetoggle
-@prop ontoggle: _ontoggle
-@prop onclose: _onclose
 @prop class: className = ""
 @prop arrowClass = ""
 @prop isOpen = $bindable(false)
 @prop transitionParams
 @prop transition = fade
+@prop onbeforetoggle
+@prop ontoggle
+@prop onclose
 @prop children
 @prop ...restProps
 -->

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

@@ -2,26 +2,27 @@ 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#L2051)
  * ## Props
  * @prop triggeredBy
- * @prop triggerDelay = 200
+ * @prop triggerDelay = DEFAULT_TRIGGER_DELAY
  * @prop trigger = "click"
  * @prop placement = "top"
- * @prop offset = 8
+ * @prop offset = DEFAULT_OFFSET
  * @prop arrow = false
  * @prop yOnly = false
  * @prop strategy = "absolute"
+ * @prop role = "tooltip"
  * @prop reference
  * @prop middlewares = [dom.flip(), dom.shift()]
- * @prop onbeforetoggle: _onbeforetoggle
- * @prop ontoggle: _ontoggle
- * @prop onclose: _onclose
  * @prop class: className = ""
  * @prop arrowClass = ""
  * @prop isOpen = $bindable(false)
  * @prop transitionParams
  * @prop transition = fade
+ * @prop onbeforetoggle
+ * @prop ontoggle
+ * @prop onclose
  * @prop children
  * @prop ...restProps
  */

package/dist/utils/debounce.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Create a mutual debounce for two opposing actions.
+ * Calling one action cancels any pending execution of the other.
+ *
+ * @param actionA - First action (e.g., openDialog)
+ * @param actionB - Second action (e.g., closeDialog)
+ * @param delayFunc - Function returning delay in milliseconds (default: 300ms)
+ * @returns Object with mutual debounce control methods
+ *
+ * @example
+ * const [openDialogDeb, closeDialogDeb] = createMutualDebounce(openDialog, closeDialog, () => 300);
+ * openDialogDeb(); // Schedule open
+ * closeDialogDeb(); // Cancel open, schedule close
+ */
+type Func = (...args: any[]) => any;
+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/utils/debounce.js

@@ -0,0 +1,41 @@
+/**
+ * Create a mutual debounce for two opposing actions.
+ * Calling one action cancels any pending execution of the other.
+ *
+ * @param actionA - First action (e.g., openDialog)
+ * @param actionB - Second action (e.g., closeDialog)
+ * @param delayFunc - Function returning delay in milliseconds (default: 300ms)
+ * @returns Object with mutual debounce control methods
+ *
+ * @example
+ * const [openDialogDeb, closeDialogDeb] = createMutualDebounce(openDialog, closeDialog, () => 300);
+ * openDialogDeb(); // Schedule open
+ * closeDialogDeb(); // Cancel open, schedule close
+ */
+export function createMutualDebounce(actionA, actionB, delayFunc) {
+    let rafId = null;
+    function scheduleExecution(func, args, startTime) {
+        rafId = requestAnimationFrame((currentTime) => {
+            const elapsed = currentTime - (startTime || 0);
+            if (elapsed < delayFunc())
+                return scheduleExecution(func, args, startTime);
+            rafId = null;
+            func(...args);
+        });
+    }
+    function cancel() {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    }
+    const debouncedA = (...args) => {
+        cancel();
+        scheduleExecution(actionA, args, performance.now());
+    };
+    const debouncedB = (...args) => {
+        cancel();
+        scheduleExecution(actionB, args, performance.now());
+    };
+    return [debouncedA, debouncedB];
+}

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#L2038)
 ## 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#L2038)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"