flowbite-svelte 0.44.23 → 0.44.24

package/dist/alert/Alert.svelte.d.ts

@@ -34,7 +34,7 @@ declare const __propDef: {
         icon: {};
         default: {};
         'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
+            close: any;
         };
     };
 };

package/dist/badge/Badge.svelte.d.ts

@@ -26,7 +26,7 @@ declare const __propDef: {
     slots: {
         default: {};
         'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
+            close: any;
         };
     };
 };

package/dist/dropdown/Dropdown.svelte

@@ -9,17 +9,21 @@ const activeUrlStore = writable('');
 export let activeUrl = '';
 export let open = false;
 export let containerClass = 'divide-y z-50';
+export let classContainer = undefined;
 export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
+export let classHeader = undefined;
 export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
+export let classFooter = undefined;
 export let activeClass = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
-let activeCls = twMerge(activeClass, $$props.classActive);
+export let classActive = undefined;
+let activeCls = twMerge(activeClass, classActive);
 setContext('DropdownType', { activeClass: activeCls });
 $: activeUrlStore.set(activeUrl);
 setContext('activeUrl', activeUrlStore);
-let containerCls = twMerge(containerClass, $$props.classContainer);
-let headerCls = twMerge(headerClass, $$props.classHeader);
-let ulCls = twMerge('py-1', $$props.class);
-let footerCls = twMerge(footerClass, $$props.classFooter);
+$: containerCls = twMerge(containerClass, classContainer);
+$: headerCls = twMerge(headerClass, classHeader);
+$: ulCls = twMerge('py-1', $$props.class);
+$: footerCls = twMerge(footerClass, classFooter);
 $: {
     // set default values
     $$restProps.arrow = $$restProps.arrow ?? false;
@@ -54,7 +58,11 @@ $: {
 @prop export let activeUrl: string = '';
 @prop export let open: boolean = false;
 @prop export let containerClass: string = 'divide-y z-50';
+@prop export let classContainer: string | undefined = undefined;
 @prop export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
+@prop export let classHeader: string | undefined = undefined;
 @prop export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+@prop export let classFooter: string | undefined = undefined;
 @prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+@prop export let classActive: string | undefined = undefined;
 -->

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

@@ -19,18 +19,22 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
         open?: boolean | undefined;
         yOnly?: boolean | undefined;
     } & {
-        open?: boolean | undefined;
+        activeUrl?: string | undefined;
         containerClass?: string | undefined;
+        classContainer?: string | undefined;
         headerClass?: string | undefined;
+        classHeader?: string | undefined;
         footerClass?: string | undefined;
-        activeUrl?: string | undefined;
+        classFooter?: string | undefined;
+        activeClass?: string | undefined;
+        classActive?: string | undefined;
     };
     events: {
         show: CustomEvent<any>;
@@ -52,9 +56,13 @@ export type DropdownSlots = typeof __propDef.slots;
  * @prop export let activeUrl: string = '';
  * @prop export let open: boolean = false;
  * @prop export let containerClass: string = 'divide-y z-50';
+ * @prop export let classContainer: string | undefined = undefined;
  * @prop export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
+ * @prop export let classHeader: string | undefined = undefined;
  * @prop export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+ * @prop export let classFooter: string | undefined = undefined;
  * @prop export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+ * @prop export let classActive: string | undefined = undefined;
  */
 export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA+EJ,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;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAuFJ,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;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/forms/Checkbox.svelte

@@ -46,7 +46,7 @@ function onChange() {
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input use:init={group} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={twMerge(spacing, inputClass(custom, color, true, background, $$slots.default || $$props.class))} />
+  <input use:init={group} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 

package/dist/forms/Dropzone.svelte

@@ -9,14 +9,18 @@ function keydown(ev) {
         input.click();
     }
 }
+function onClick(event) {
+    event.preventDefault();
+    input.click();
+}
 </script>
 
-<button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
-  <label class="flex flex-col items-center" tabIndex="0">
-    <slot />
-    <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" class="hidden" />
-  </label>
+<button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:click={onClick} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
+  <slot />
 </button>
+<label class="hidden">
+  <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" />
+</label>
 
 <!--
 @component

package/dist/forms/Dropzone.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Dropzone.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA+BD,QAAA,MAAM,SAAS;;;;gBADwF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAC7C,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Dropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Dropzone.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAoCD,QAAA,MAAM,SAAS;;;;gBADwF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAC7C,CAAC;AAC/E,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/forms/Radio.svelte

@@ -12,8 +12,7 @@ const colorClasses = {
     blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
 };
 export const labelClass = (inline, extraClass) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
-export let spacing = 'me-2';
-export const inputClass = (custom, color, rounded, tinted, extraClass) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+export const inputClass = (custom, color, rounded, tinted, spacing, extraClass) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
 </script>
 
 <script>import { getContext } from 'svelte';
@@ -23,12 +22,13 @@ export let custom = false;
 export let inline = false;
 export let group = undefined;
 export let value = '';
+export let spacing = 'mr-2';
 // tinted if put in component having its own background
 let background = getContext('background');
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} />
+  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 
@@ -36,10 +36,10 @@ let background = getContext('background');
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let spacing: string = 'me-2';
 @prop export let color: FormColorType = 'primary';
 @prop export let custom: boolean = false;
 @prop export let inline: boolean = false;
 @prop export let group: number | string | undefined = undefined;
 @prop export let value: number | string = '';
+@prop export let spacing: string = 'mr-2';
 -->

package/dist/forms/Radio.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
 export declare const labelClass: (inline: boolean, extraClass: string) => string;
-export declare let spacing: string;
-export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => string;
+export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, spacing: string, extraClass: string) => string;
 import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
@@ -11,6 +10,7 @@ declare const __propDef: {
         inline?: boolean | undefined;
         group?: number | string | undefined;
         value?: string | number | undefined;
+        spacing?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -37,12 +37,12 @@ export type RadioSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let spacing: string = 'me-2';
  * @prop export let color: FormColorType = 'primary';
  * @prop export let custom: boolean = false;
  * @prop export let inline: boolean = false;
  * @prop export let group: number | string | undefined = undefined;
  * @prop export let value: number | string = '';
+ * @prop export let spacing: string = 'mr-2';
  */
 export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
 }

package/dist/forms/Radio.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AACxI,eAAO,IAAI,OAAO,EAAE,MAAe,CAAC;AAEpC,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,cAAc,MAAM,WAAgR,CAAC;AAI1Y,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA6B9C,QAAA,MAAM,SAAS;;;;;;gBADuJ,MAAM,GAAG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CACnH,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WAAyE,CAAC;AAExI,eAAO,MAAM,UAAU,WAAY,OAAO,SAAS,aAAa,WAAW,OAAO,UAAU,OAAO,WAAW,MAAM,cAAc,MAAM,WAAgR,CAAC;AAI3Z,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8B9C,QAAA,MAAM,SAAS;;;;;;gBAD0K,MAAM,GAAG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -17,7 +17,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;

package/dist/modal/Modal.svelte

@@ -98,7 +98,7 @@ function handleKeys(e) {
       <Frame rounded shadow {...$$restProps} class={frameClass}>
         <!-- Modal header -->
         {#if $$slots.header || title}
-          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 rounded-t-lg">
+          <Frame color={$$restProps.color} class="flex justify-between items-center p-4 md:p-5 rounded-t-lg">
             <slot name="header">
               <h3 class="text-xl font-semibold {$$restProps.color ? '' : 'text-gray-900 dark:text-white'} p-0">
                 {title}
@@ -108,7 +108,7 @@ function handleKeys(e) {
           </Frame>
         {/if}
         <!-- Modal body -->
-        <div class={twMerge('p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
+        <div class={twMerge('p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
           {#if dismissable && !$$slots.header && !title}
             <CloseButton name="Close modal" class="absolute top-3 end-2.5" on:click={hide} color={$$restProps.color} />
           {/if}
@@ -116,7 +116,7 @@ function handleKeys(e) {
         </div>
         <!-- Modal footer -->
         {#if $$slots.footer}
-          <Frame color={$$restProps.color} class="flex items-center p-6 space-x-2 rtl:space-x-reverse rounded-b-lg">
+          <Frame color={$$restProps.color} class="flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg">
             <slot name="footer" />
           </Frame>
         {/if}

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

@@ -16,7 +16,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;

package/dist/speed-dial/SpeedDial.svelte

@@ -59,7 +59,7 @@ $: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement
 @prop export let placement: Placement = 'top';
 @prop export let pill: boolean = true;
 @prop export let tooltip: Placement | 'none' = 'left';
-@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
 @prop export let textOutside: boolean = false;
 @prop export let id: string = generateId();
 @prop export let name: string = 'Open actions menu';

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

@@ -13,7 +13,7 @@ declare const __propDef: {
         placement?: Placement | undefined;
         pill?: boolean | undefined;
         tooltip?: "none" | Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         textOutside?: boolean | undefined;
         id?: string | undefined;
         name?: string | undefined;
@@ -39,7 +39,7 @@ export type SpeedDialSlots = typeof __propDef.slots;
  * @prop export let placement: Placement = 'top';
  * @prop export let pill: boolean = true;
  * @prop export let tooltip: Placement | 'none' = 'left';
- * @prop export let trigger: 'hover' | 'click' = 'hover';
+ * @prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
  * @prop export let textOutside: boolean = false;
  * @prop export let id: string = generateId();
  * @prop export let name: string = 'Open actions menu';

package/dist/toast/Toast.svelte.d.ts

@@ -32,7 +32,7 @@ declare const __propDef: {
         icon: {};
         default: {};
         'close-button': {
-            close: (ev: MouseEvent | undefined) => void;
+            close: any;
         };
     };
 };

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

@@ -16,7 +16,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: import("@floating-ui/dom").Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;

package/dist/utils/Popper.svelte

@@ -17,6 +17,8 @@ export let middlewares = [dom.flip(), dom.shift()];
 const dispatch = createEventDispatcher();
 let clickable;
 $: clickable = trigger === 'click';
+let hoverable;
+$: hoverable = trigger === 'hover';
 $: dispatch('show', open);
 $: placement && (referenceEl = referenceEl);
 let referenceEl;
@@ -93,8 +95,8 @@ onMount(() => {
         ['focusin', showHandler, true],
         ['focusout', hideHandler, true],
         ['click', showHandler, clickable],
-        ['mouseenter', showHandler, !clickable],
-        ['mouseleave', hideHandler, !clickable]
+        ['mouseenter', showHandler, hoverable],
+        ['mouseleave', hideHandler, hoverable]
     ];
     if (triggeredBy)
         triggerEls = [...document.querySelectorAll(triggeredBy)];
@@ -117,7 +119,7 @@ onMount(() => {
         }
         else {
             referenceEl.addEventListener('focusout', hideHandler);
-            if (!clickable)
+            if (hoverable)
                 referenceEl.addEventListener('mouseleave', hideHandler);
         }
     }
@@ -172,7 +174,7 @@ function initArrow(node) {
 @prop export let arrow: boolean = true;
 @prop export let offset: number = 8;
 @prop export let placement: Placement = 'top';
-@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
 @prop export let triggeredBy: string | undefined = undefined;
 @prop export let reference: string | undefined = undefined;
 @prop export let strategy: 'absolute' | 'fixed' = 'absolute';

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

@@ -17,7 +17,7 @@ declare const __propDef: {
         arrow?: boolean | undefined;
         offset?: number | undefined;
         placement?: Placement | undefined;
-        trigger?: "click" | "hover" | undefined;
+        trigger?: "click" | "focus" | "hover" | undefined;
         triggeredBy?: string | undefined;
         reference?: string | undefined;
         strategy?: "fixed" | "absolute" | undefined;
@@ -43,7 +43,7 @@ export type PopperSlots = typeof __propDef.slots;
  * @prop export let arrow: boolean = true;
  * @prop export let offset: number = 8;
  * @prop export let placement: Placement = 'top';
- * @prop export let trigger: 'hover' | 'click' = 'hover';
+ * @prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
  * @prop export let triggeredBy: string | undefined = undefined;
  * @prop export let reference: string | undefined = undefined;
  * @prop export let strategy: 'absolute' | 'fixed' = 'absolute';

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,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAqC,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA0M3F,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;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAqC,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA6M3F,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;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

package/dist/utils/TransitionFrame.svelte

@@ -23,7 +23,9 @@ function close(ev) {
     </div>
   {/if}
 {:else}
-  <Frame {...$$restProps}><slot {close} /></Frame>
+  {#if open}
+    <Frame {...$$restProps}><slot /></Frame>
+  {/if}
 {/if}
 
 <!--

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

@@ -21,9 +21,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            close: (ev: MouseEvent | undefined) => void;
-        };
+        default: {};
     };
 };
 export type TransitionFrameProps = typeof __propDef.props;

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

@@ -1 +1 @@
-{"version":3,"file":"TransitionFrame.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/TransitionFrame.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA+C9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;6BAvCgB,WAAW,UAAU,GAAG,KAAK,gBAAgB;iBAK/D,GAAG;;;;;;;wBAcK,UAAU,GAAG,SAAS;;;CAoBY,CAAC;AACxD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,eAAe,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CAC9H"}
+{"version":3,"file":"TransitionFrame.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/TransitionFrame.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAiD9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;6BAzCgB,WAAW,UAAU,GAAG,KAAK,gBAAgB;iBAK/D,GAAG;;;;;;;;CAoCuC,CAAC;AACxD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,eAAe,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CAC9H"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.44.23",
+  "version": "0.44.24",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -34,14 +34,14 @@
   "devDependencies": {
     "@docsearch/js": "^3.5.2",
     "@playwright/test": "^1.41.2",
-    "@sveltejs/adapter-vercel": "^4.0.5",
-    "@sveltejs/kit": "^2.5.0",
-    "@sveltejs/package": "2.2.2",
+    "@sveltejs/adapter-vercel": "^5.1.0",
+    "@sveltejs/kit": "^2.5.1",
+    "@sveltejs/package": "2.2.7",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "autoprefixer": "^10.4.17",
-    "esbuild": "0.19.5",
+    "esbuild": "0.20.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
@@ -49,23 +49,23 @@
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.4.1",
     "postcss": "^8.4.35",
-    "postcss-load-config": "^4.0.2",
+    "postcss-load-config": "^5.0.3",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-svelte": "^3.2.1",
     "prism-themes": "^1.9.0",
     "publint": "^0.2.7",
-    "svelte": "^4.2.10",
-    "svelte-check": "^3.6.3",
-    "svelte-lib-helpers": "^0.3.17",
+    "svelte": "^4.2.11",
+    "svelte-check": "^3.6.4",
+    "svelte-lib-helpers": "^0.4.1",
     "svelte-meta-tags": "^3.1.0",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.0",
+    "svelte2tsx": "^0.7.1",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vitest": "^0.34.6"
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "svelte": "^4.0.0"
@@ -114,9 +114,9 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.1",
-    "apexcharts": "^3.45.2",
-    "flowbite": "^2.2.1",
+    "@floating-ui/dom": "^1.6.3",
+    "apexcharts": "^3.46.0",
+    "flowbite": "^2.3.0",
     "tailwind-merge": "^2.2.1"
   },
   "engines": {
@@ -750,6 +750,7 @@
     "./Video.svelte": {
       "types": "./dist/video/Video.svelte.d.ts",
       "svelte": "./dist/video/Video.svelte"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }