flowbite-svelte 0.40.2 → 0.41.2

package/dist/buttons/GradientButton.svelte

@@ -53,7 +53,19 @@ $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow
     <!-- Trick to prentend outline without using border
 	    This has a limitation of no supporting transparency as
 	    is set to bg-white dark:bg-gray-900 -->
-    <Button {...$$restProps} color="none" class={gradientOutlineClass}><slot /></Button>
+    <Button
+      {...$$restProps}
+      color="none"
+      class={gradientOutlineClass}
+      on:click
+      on:change
+      on:keydown
+      on:keyup
+      on:touchstart
+      on:touchend
+      on:touchcancel
+      on:mouseenter
+      on:mouseleave><slot /></Button>
   </div>
 {:else}
   <Button

package/dist/dropdowns/Dropdown.svelte.d.ts

@@ -235,6 +235,7 @@ declare const __propDef: {
         placement?: import("@floating-ui/dom").Placement | undefined;
         trigger?: "click" | "hover" | undefined;
         triggeredBy?: string | undefined;
+        reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
         open?: boolean | undefined;
         yOnly?: boolean | undefined;

package/dist/dropdowns/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/MultiSelect.svelte

@@ -89,7 +89,7 @@ const clearThisOption = (select) => {
   <div class="flex ml-auto gap-2">
     <CloseButton on:click={clearAll} color="none" class="p-0 focus:ring-gray-400" />
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600" />
-    <button tabindex="-1">
+    <button type="button" tabindex="-1">
       <ChevronDown class="h-4 w-4 mb-1 mr-1 cursor-pointer" />
     </button>
   </div>

package/dist/list-group/ListgroupItem.svelte

@@ -45,7 +45,7 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'dis
 {:else}
   <button
     type="button"
-    class="inline-flex relative items-center text-left {itemClass}"
+    class="flex items-center text-left {itemClass}"
     {disabled}
     on:blur
     on:change

package/dist/megamenu/MegaMenu.svelte.d.ts

@@ -236,6 +236,7 @@ declare const __propDef: {
         placement?: import("@floating-ui/dom").Placement | undefined;
         trigger?: "click" | "hover" | undefined;
         triggeredBy?: string | undefined;
+        reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
         open?: boolean | undefined;
         yOnly?: boolean | undefined;

package/dist/megamenu/MegaMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAyDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA7CL,OAAO;iBACJ,MAAM;;;;;;;;;;;;;;;CA4CoC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAyDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA7CL,OAAO;iBACJ,MAAM;;;;;;;;;;;;;;;CA4CoC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/popover/Popover.svelte.d.ts

@@ -235,6 +235,7 @@ declare const __propDef: {
         placement?: import("@floating-ui/dom").Placement | undefined;
         trigger?: "click" | "hover" | undefined;
         triggeredBy?: string | undefined;
+        reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
         open?: boolean | undefined;
         yOnly?: boolean | undefined;

package/dist/popover/Popover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/popover/Popover.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/popover/Popover.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/speed-dial/SpeedDial.svelte

@@ -17,12 +17,12 @@ export let textOutside = false;
 export let id = generateId();
 export let name = 'Open actions menu';
 export let gradient = false;
+export let open = false;
 setContext('speed-dial', { pill, tooltip, textOutside });
 let divClass;
 $: divClass = twMerge(defaultClass, 'group', $$props.class);
 let poperClass;
-$: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement) && 'flex-col');
-let open = false;
+$: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement.split('-')[0]) && 'flex-col');
 </script>
 
 <div class={divClass}>

package/dist/speed-dial/SpeedDial.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         id?: string | undefined;
         name?: string | undefined;
         gradient?: boolean | undefined;
+        open?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/speed-dial/SpeedDial.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpeedDial.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/speed-dial/SpeedDial.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAmEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"SpeedDial.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/speed-dial/SpeedDial.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAqEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/tooltips/Tooltip.svelte.d.ts

@@ -235,6 +235,7 @@ declare const __propDef: {
         placement?: import("@floating-ui/dom").Placement | undefined;
         trigger?: "click" | "hover" | undefined;
         triggeredBy?: string | undefined;
+        reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
         open?: boolean | undefined;
         yOnly?: boolean | undefined;

package/dist/tooltips/Tooltip.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltips/Tooltip.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltips/Tooltip.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/utils/Popper.svelte

@@ -9,14 +9,16 @@ export let offset = 8;
 export let placement = 'top';
 export let trigger = 'hover';
 export let triggeredBy = undefined;
+export let reference = undefined;
 export let strategy = 'absolute';
 export let open = false;
 export let yOnly = false;
 const dispatch = createEventDispatcher();
 let clickable;
 $: clickable = trigger === 'click';
-$: dispatch('show', triggerEl, open);
-let triggerEl;
+$: dispatch('show', referenceEl, open);
+$: placement && (referenceEl = referenceEl);
+let referenceEl;
 let floatingEl;
 let arrowEl;
 let contentEl;
@@ -24,10 +26,10 @@ let triggerEls = [];
 let _blocked = false; // management of the race condition between focusin and click events
 const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
 const showHandler = (ev) => {
-    if (triggerEl === undefined)
+    if (referenceEl === undefined)
         console.error('trigger undefined');
-    if (triggerEls.includes(ev.target) && triggerEl !== ev.target) {
-        triggerEl = ev.target;
+    if (!reference && triggerEls.includes(ev.target) && referenceEl !== ev.target) {
+        referenceEl = ev.target;
         block();
     }
     if (clickable && ev.type === 'focusin' && !open)
@@ -40,7 +42,7 @@ const px = (n) => (n != null ? `${n}px` : '');
 const hideHandler = (ev) => {
     if (activeContent) {
         setTimeout(() => {
-            const elements = [triggerEl, floatingEl, arrowEl].filter((x) => x);
+            const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
             if (ev.type === 'mouseleave' && elements.some(hasHover))
                 return;
             if (ev.type === 'focusout' && elements.some(hasFocus))
@@ -58,23 +60,21 @@ const oppositeSideMap = {
     bottom: 'top',
     top: 'bottom'
 };
+let middleware;
+$: middleware = [
+    dom.flip(),
+    dom.shift(),
+    dom.offset(+offset),
+    arrowEl && dom.arrow({ element: arrowEl, padding: 10 })
+];
 function updatePosition() {
     dom
-        .computePosition(triggerEl, floatingEl, {
-        placement,
-        strategy,
-        middleware: [
-            dom.flip(),
-            dom.shift(),
-            dom.offset(+offset),
-            arrowEl && dom.arrow({ element: arrowEl, padding: 10 })
-        ]
-    })
+        .computePosition(referenceEl, floatingEl, { placement, strategy, middleware })
         .then(({ x, y, middlewareData, placement, strategy }) => {
         floatingEl.style.position = strategy;
         floatingEl.style.left = yOnly ? '0' : px(x);
         floatingEl.style.top = px(y);
-        if (middlewareData.arrow && arrowEl) {
+        if (middlewareData.arrow && arrowEl instanceof HTMLDivElement) {
             arrowEl.style.left = px(middlewareData.arrow.x);
             arrowEl.style.top = px(middlewareData.arrow.y);
             arrowSide = oppositeSideMap[placement.split('-')[0]];
@@ -82,13 +82,13 @@ function updatePosition() {
         }
     });
 }
-function init(node, _triggerEl) {
+function init(node, _referenceEl) {
     floatingEl = node;
-    let cleanup = dom.autoUpdate(node, _triggerEl, updatePosition);
+    let cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
     return {
-        update(_triggerEl) {
+        update(_referenceEl) {
             cleanup();
-            cleanup = dom.autoUpdate(node, _triggerEl, updatePosition);
+            cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
         },
         destroy() {
             cleanup();
@@ -117,7 +117,15 @@ onMount(() => {
             if (cond)
                 element.addEventListener(name, handler);
     });
-    triggerEl = triggerEls[0];
+    if (reference) {
+        referenceEl = document.querySelector(reference) ?? document.body;
+        if (referenceEl === document.body) {
+            console.error(`Popup reference not found: '${reference}'`);
+        }
+    }
+    else {
+        referenceEl = triggerEls[0];
+    }
     return () => {
         triggerEls.forEach((element) => {
             if (element) {
@@ -132,16 +140,24 @@ function optional(pred, func) {
 }
 let arrowClass;
 $: arrowClass = twJoin('absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit', $$props.border && arrowSide === 'bottom' && 'border-b border-r', $$props.border && arrowSide === 'top' && 'border-t border-l ', $$props.border && arrowSide === 'right' && 'border-t border-r ', $$props.border && arrowSide === 'left' && 'border-b border-l ');
+function initArrow(node) {
+    arrowEl = node;
+    return {
+        destroy() {
+            arrowEl = null;
+        }
+    };
+}
 </script>
 
-{#if !triggerEl}
+{#if !referenceEl}
   <div bind:this={contentEl} />
 {/if}
 
-{#if open && triggerEl}
+{#if open && referenceEl}
   <Frame
     use={init}
-    options={triggerEl}
+    options={referenceEl}
     role="tooltip"
     tabindex={activeContent ? -1 : undefined}
     on:focusin={optional(activeContent, showHandler)}
@@ -150,7 +166,7 @@ $: arrowClass = twJoin('absolute pointer-events-none block w-[10px] h-[10px] rot
     on:mouseleave={optional(activeContent && !clickable, hideHandler)}
     {...$$restProps}>
     <slot />
-    {#if arrow}<div class={arrowClass} bind:this={arrowEl} />{/if}
+    {#if arrow}<div use:initArrow class={arrowClass} />{/if}
   </Frame>
 {/if}
 

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

@@ -236,6 +236,7 @@ declare const __propDef: {
         placement?: Placement | undefined;
         trigger?: "click" | "hover" | undefined;
         triggeredBy?: string | undefined;
+        reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
         open?: boolean | undefined;
         yOnly?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAyB,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA8L/E,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAqC,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AAiN3F,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.40.2",
+  "version": "0.41.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -20,9 +20,10 @@
     "prepublishOnly": "npm run add-exports && npm run write-package-json && npm run package && publint",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:unit": "vitest",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
     "write-package-json": "node ./scripts/package-json-writer.js",
     "add-exports": "node ./scripts/add-exports-to-package-json.js",
     "package:publish": "standard-version && git push --follow-tags origin main && npm run package && npm run add-exports && npm run write-package-json && npm publish",
@@ -30,36 +31,36 @@
   },
   "devDependencies": {
     "@docsearch/js": "^3.5.1",
-    "@playwright/test": "^1.36.0",
-    "@sveltejs/adapter-vercel": "^3.0.2",
-    "@sveltejs/kit": "^1.22.3",
+    "@playwright/test": "^1.36.2",
+    "@sveltejs/adapter-vercel": "^3.0.3",
+    "@sveltejs/kit": "^1.22.4",
     "@sveltejs/package": "2.1.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "autoprefixer": "^10.4.14",
     "createprops": "^0.5.5",
     "esbuild": "0.18.10",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-svelte": "^2.32.2",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-svelte": "^2.32.4",
     "mdsvex": "^0.11.0",
-    "mdsvexamples": "^0.3.3",
-    "postcss": "^8.4.26",
+    "mdsvexamples": "^0.3.4",
+    "postcss": "^8.4.27",
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "prism-themes": "^1.9.0",
     "publint": "^0.1.16",
-    "svelte": "^4.0.5",
+    "svelte": "^4.1.2",
     "svelte-check": "^3.4.6",
     "svelte-meta-tags": "^2.8.0",
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.19",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.3.3",
-    "tslib": "^2.6.0",
+    "tslib": "^2.6.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.4",
+    "vite": "^4.4.8",
     "vitest": "^0.32.4"
   },
   "peerDependencies": {
@@ -109,9 +110,9 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.4.5",
-    "flowbite": "^1.7.0",
-    "tailwind-merge": "^1.13.2"
+    "@floating-ui/dom": "^1.5.1",
+    "flowbite": "^1.8.1",
+    "tailwind-merge": "^1.14.0"
   },
   "engines": {
     "npm": ">=7.0.0",