flowbite-svelte 1.4.2 → 1.5.0

package/dist/typography/anchor/A.svelte

@@ -40,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1752)
+[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1730)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/typography/anchor/A.svelte.d.ts

@@ -2,7 +2,7 @@ import type { AnchorProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1752)
+ * [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1730)
  * ## Props
  * @prop children
  * @prop color = "primary"

package/dist/typography/blockquote/Blockquote.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1781)
+[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1759)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/blockquote/Blockquote.svelte.d.ts

@@ -2,7 +2,7 @@ import type { BlockquoteProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1781)
+ * [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1759)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/descriptionlist/DescriptionList.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1791)
+[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1769)
 ## Props
 @prop children
 @prop tag

package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DescriptionListProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1791)
+ * [DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1769)
  * ## Props
  * @prop children
  * @prop tag

package/dist/typography/heading/Heading.svelte

@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1797)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1775)
 ## 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#L1797)
+ * [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1775)
  * ## Props
  * @prop children
  * @prop tag = "h1"

package/dist/typography/hr/Hr.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HrProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+[HrProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1781)
 ## Props
 @prop children
 @prop divClass

package/dist/typography/hr/Hr.svelte.d.ts

@@ -2,7 +2,7 @@ import type { HrProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [HrProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+ * [HrProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1781)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/typography/img/EnhancedImg.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1823)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1801)
 ## 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#L1823)
+ * [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1801)
  * ## Props
  * @prop src
  * @prop href

package/dist/typography/img/Img.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1814)
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1792)
 ## Props
 @prop size = "none"
 @prop effect = "none"

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#L1814)
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1792)
  * ## Props
  * @prop size = "none"
  * @prop effect = "none"

package/dist/typography/layout/Layout.svelte

@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1835)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1813)
 ## 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#L1835)
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1813)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/list/Li.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1848)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1826)
 ## 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#L1848)
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1826)
  * ## Props
  * @prop children
  * @prop icon

package/dist/typography/list/List.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1840)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1818)
 ## 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#L1840)
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1818)
  * ## Props
  * @prop children
  * @prop tag = "ul"

package/dist/typography/mark/Mark.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1854)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1832)
 ## 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#L1854)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1832)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/paragraph/P.svelte

@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1859)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1837)
 ## 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#L1859)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1837)
  * ## Props
  * @prop children
  * @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/secondary/Secondary.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1873)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1845)
 ## 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#L1873)
+ * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1845)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/span/Span.svelte

@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1878)
+[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1850)
 ## 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#L1878)
+ * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1850)
  * ## 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#L1925)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1891)
 ## Props
 @prop placement = "top"
 @prop cords

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

@@ -2,7 +2,7 @@ import { type ArrowProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1925)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1891)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/CloseButton.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L87)
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L95)
 ## Props
 @prop children
 @prop color = "gray"

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

@@ -2,7 +2,7 @@ import { type CloseButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L87)
+ * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L95)
  * ## Props
  * @prop children
  * @prop color = "gray"

package/dist/utils/Popper.svelte

@@ -5,6 +5,7 @@
   import type { ParamsType, PopperProps, TriggeredToggleEvent } from "..";
   import { fade } from "svelte/transition";
   import { sineIn } from "svelte/easing";
+  import clsx from "clsx";
 
   const TRIGGER_DELAY = 200;
 
@@ -15,9 +16,9 @@
   let hoverable: boolean = $derived(trigger === "hover");
 
   let popover: HTMLElement | null = $state(null);
-  let invoker: HTMLButtonElement | null = null;
+  let invoker: HTMLElement | null = null;
   let referenceElement: HTMLElement | null = null;
-  let triggerEls: HTMLButtonElement[] = [];
+  let triggerEls: HTMLElement[] = [];
   let arrowParams: { placement: Placement; cords: Partial<Coords>; strategy: Strategy } = $state({
     placement,
     cords: { x: 0, y: 0 },
@@ -60,8 +61,8 @@
 
     ev.preventDefault();
 
-    if (ev.target !== invoker && triggerEls.includes(ev.target as HTMLButtonElement)) {
-      invoker = ev.target as HTMLButtonElement;
+    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, TRIGGER_DELAY));
@@ -126,8 +127,9 @@
       ["mouseleave", close_popover, hoverable]
     ];
 
-    if (triggeredBy) triggerEls = [...node.ownerDocument.querySelectorAll<HTMLButtonElement>(triggeredBy)];
-    else if (node.previousElementSibling) triggerEls = [node.previousElementSibling as HTMLButtonElement];
+    if (triggeredBy) triggerEls = [...node.ownerDocument.querySelectorAll<HTMLElement>(triggeredBy)];
+    else if (node.previousElementSibling) triggerEls = [node.previousElementSibling as HTMLElement];
+    else if (node.parentElement) triggerEls = [node.parentElement];
 
     if (!triggerEls.length) {
       console.error("No triggers found.", triggeredBy);
@@ -137,7 +139,7 @@
     if (reference) referenceElement = node.ownerDocument.querySelector<HTMLElement>(reference);
     invoker = triggerEls[0];
 
-    triggerEls.forEach((element: HTMLButtonElement) => {
+    triggerEls.forEach((element: HTMLElement) => {
       if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
       for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
     });
@@ -173,7 +175,7 @@
 <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}>
+  <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={clsx(className)} transition:transition={paramsOptions as ParamsType} onintrostart={() => popover?.showPopover()} onoutroend={() => popover?.hidePopover()} {...restProps}>
     {@render children()}
     {#if arrow}
       <Arrow {...arrowParams} class={arrowClass} />
@@ -185,7 +187,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1906)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1872)
 ## Props
 @prop triggeredBy
 @prop trigger = "click"

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

package/dist/utils/index.d.ts

@@ -2,4 +2,5 @@ import { type ClassValue } from "clsx";
 export { default as CloseButton } from "./CloseButton.svelte";
 export { closeButtonVariants } from "./theme";
 export { trapFocus } from "./actions.svelte";
+export { default as Popper } from "./Popper.svelte";
 export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/index.js

@@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
 export { default as CloseButton } from "./CloseButton.svelte";
 export { closeButtonVariants } from "./theme";
 export { trapFocus } from "./actions.svelte";
+export { default as Popper } from "./Popper.svelte";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -27,7 +27,6 @@
     "@tailwindcss/vite": "^4.1.7",
     "@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.27.0",
@@ -107,10 +106,10 @@
     "@floating-ui/dom": "^1.7.0",
     "@floating-ui/utils": "^0.2.9",
     "apexcharts": "^4.7.0",
+    "clsx": "^2.1.1",
     "flowbite": "^3.1.2",
     "tailwind-merge": "^3.3.0",
-    "tailwind-variants": "^1.0.0",
-    "virtua": "^0.41.2"
+    "tailwind-variants": "^1.0.0"
   },
   "files": [
     "dist",
@@ -220,6 +219,10 @@
       "types": "./dist/chart/Chart.svelte.d.ts",
       "svelte": "./dist/chart/Chart.svelte"
     },
+    "./Clipboard.svelte": {
+      "types": "./dist/clipboard/Clipboard.svelte.d.ts",
+      "svelte": "./dist/clipboard/Clipboard.svelte"
+    },
     "./DarkMode.svelte": {
       "types": "./dist/darkmode/DarkMode.svelte.d.ts",
       "svelte": "./dist/darkmode/DarkMode.svelte"

package/dist/kbd/type.js

@@ -1,7 +0,0 @@
-"use strict";
-// import type { Snippet } from "svelte";
-// import type { HTMLAttributes } from "svelte/elements";
-// interface KbdProps extends HTMLAttributes<HTMLElement> {
-//   children: Snippet;
-// }
-// export { type KbdProps };