flowbite-svelte 0.43.1 → 0.43.2

package/dist/accordion/AccordionItem.svelte

@@ -47,22 +47,8 @@ onMount(() => {
 });
 const handleToggle = (_) => selected.set(open ? {} : self);
 let buttonClass;
-$: buttonClass = twMerge([
-    defaultClass,
-    ctx.flush || borderClass,
-    borderBottomClass,
-    borderSharedClass,
-    ctx.flush ? paddingFlush : paddingDefault,
-    open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass),
-    !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass),
-    $$props.class
-]);
-$: contentClass = twMerge([
-    ctx.flush ? paddingFlush : paddingDefault,
-    ctx.flush ? '' : borderOpenClass,
-    borderBottomClass,
-    borderSharedClass
-]);
+$: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass), !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass), $$props.class]);
+$: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush ? '' : borderOpenClass, borderBottomClass, borderSharedClass]);
 </script>
 
 <h2 class="group">

package/dist/accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAKD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAwHtE,QAAA,MAAM,SAAS;;;;sBADqhB,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;;sBAA6T,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;CAC/3B,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAKD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA0GtE,QAAA,MAAM,SAAS;;;;sBADqhB,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;;sBAA6T,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;CAC/3B,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/bottom-nav/BottomNavHeaderItem.svelte

@@ -6,17 +6,7 @@ export let activeClass = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900
 $: btnClass = active ? activeClass : defaultClass;
 </script>
 
-<button
-  class={twMerge(btnClass, $$props.class)}
-  {...$$restProps}
-  on:click
-  on:change
-  on:keydown
-  on:keyup
-  on:focus
-  on:blur
-  on:mouseenter
-  on:mouseleave>
+<button class={twMerge(btnClass, $$props.class)} {...$$restProps} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
   {itemName}
 </button>
 

package/dist/bottom-nav/BottomNavItem.svelte

@@ -4,6 +4,7 @@ export let btnName = '';
 export let appBtnPosition = 'middle';
 export let activeClass = undefined;
 export let active = false;
+export let href;
 const navType = getContext('navType');
 const context = getContext('bottomNavType') ?? {};
 const btnClasses = {
@@ -37,10 +38,10 @@ let spanClass;
 $: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
 </script>
 
-<button {...$$restProps} class={btnClass} aria-label={btnName} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
+<svelte:element this={href ? 'a' : 'button'} aria-label={btnName} {href} role={href ? 'link' : 'button'} {...$$restProps} class={btnClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
   <slot />
   <span class={spanClass}>{btnName}</span>
-</button>
+</svelte:element>
 
 <!--
   @component

package/dist/bottom-nav/BottomNavItem.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         appBtnPosition?: "left" | "middle" | "right" | undefined;
         activeClass?: string | undefined;
         active?: boolean | undefined;
+        href: string;
     };
     events: {
         click: MouseEvent;

package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+DD,QAAA,MAAM,SAAS;;;;;sBADmL,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;;;sBADgM,MAAM,GAAG,SAAS;;cAA0B,MAAM;;;;;;;;;;;;;;;;;CACnL,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/buttons/Button.svelte

@@ -68,7 +68,7 @@ let buttonClass;
 $: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
-<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave role={href ? 'button' : undefined}>
+<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
   <slot />
 </svelte:element>
 

package/dist/buttons/GradientButton.svelte

@@ -50,19 +50,7 @@ $: 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}
-      on:click
-      on:change
-      on:keydown
-      on:keyup
-      on:touchstart
-      on:touchend
-      on:touchcancel
-      on:mouseenter
-      on:mouseleave><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 {...$$restProps} color="none" class={divClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>

package/dist/carousels/Carousel.svelte

@@ -66,12 +66,7 @@ if (loop) {
 
 <div {id} class="relative">
   <div class={divCls}>
-    <Slide
-      image={image.imgurl}
-      altTag={image.name}
-      attr={image.attribution}
-      slideClass={slideCls}
-      imgClass={imgCls} />
+    <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} slideClass={slideCls} imgClass={imgCls} />
   </div>
   {#if showIndicators}
     <!-- Slider indicators -->
@@ -117,15 +112,7 @@ if (loop) {
 {#if showThumbs}
   <div class={thumbDivCls}>
     {#each images as { id, imgurl, name, attribution }}
-      <Thumbnail
-        thumbClass={thumbCls}
-        thumbBtnClass={thumbBtnCls}
-        thumbImg={imgurl}
-        altTag={name}
-        titleLink={attribution}
-        {id}
-        selected={imageShowingIndex === id}
-        on:click={() => goToSlide(id)} />
+      <Thumbnail thumbClass={thumbCls} thumbBtnClass={thumbBtnCls} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
     {/each}
   </div>
 {/if}

package/dist/carousels/CarouselTransition.svelte

@@ -140,15 +140,7 @@ if (loop) {
 {#if showThumbs}
   <div class={thumbDivCls}>
     {#each images as { id, imgurl, name, attribution }}
-      <Thumbnail
-        thumbClass={thumbCls}
-        thumbBtnClass={thumbBtnCls}
-        thumbImg={imgurl}
-        altTag={name}
-        titleLink={attribution}
-        {id}
-        selected={imageShowingIndex === id}
-        on:click={() => goToSlide(id)} />
+      <Thumbnail thumbClass={thumbCls} thumbBtnClass={thumbBtnCls} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
     {/each}
   </div>
 {/if}

package/dist/carousels/Thumbnail.svelte

@@ -10,14 +10,7 @@ export let thumbBtnClass = '';
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <button on:click aria-label="Click to view image" class={thumbBtnClass}>
-  <img
-    class={thumbClass}
-    class:active={selected}
-    id={id.toString()}
-    src={thumbImg}
-    alt={altTag}
-    title="Image from {titleLink}"
-    width="{thumbWidth}%" />
+  <img class={thumbClass} class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" width="{thumbWidth}%" />
 </button>
 
 <!--

package/dist/darkmode/DarkMode.svelte

@@ -16,13 +16,10 @@ const toggleTheme = () => {
   <script>
     if ('color-theme' in localStorage) {
       // explicit preference - overrides author's choice
-      localStorage.getItem('color-theme') === 'dark'
-        ? window.document.documentElement.classList.add('dark')
-        : window.document.documentElement.classList.remove('dark');
+      localStorage.getItem('color-theme') === 'dark' ? window.document.documentElement.classList.add('dark') : window.document.documentElement.classList.remove('dark');
     } else {
       // browser preference - does not overrides
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches)
-        window.document.documentElement.classList.add('dark');
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) window.document.documentElement.classList.add('dark');
     }
   </script>
 </svelte:head>

package/dist/dropdowns/Dropdown.svelte

@@ -1,9 +1,16 @@
+<script context="module">export {};
+</script>
+
 <script>import { twMerge } from 'tailwind-merge';
 import Popper from '../utils/Popper.svelte';
+import { setContext } from 'svelte';
 export let open = false;
 export let containerClass = 'divide-y z-50';
 export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
 export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
+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);
+setContext('DropdownType', { activeClass: activeCls });
 let containerCls = twMerge(containerClass, $$props.classContainer);
 let headerCls = twMerge(headerClass, $$props.classHeader);
 let ulCls = twMerge('py-1', $$props.class);

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

@@ -1,4 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+export type DropdownType = {
+    activeClass: string;
+};
 declare const __propDef: {
     props: {
         download?: any;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;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;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAoEJ,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/dropdowns/DropdownItem.svelte

@@ -1,9 +1,13 @@
 <script>import Wrapper from '../utils/Wrapper.svelte';
 import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
 export let defaultClass = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
 export let href = undefined;
+export let activeClass = undefined;
+export let active = false;
+const context = getContext('DropdownType') ?? {};
 let liClass;
-$: liClass = twMerge(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
+$: liClass = twMerge(defaultClass, href ? 'block' : 'w-full text-left', active && (activeClass ?? context.activeClass), $$props.class);
 let wrap = true;
 function init(node) {
     wrap = node.parentElement?.tagName === 'UL';
@@ -11,7 +15,7 @@ function init(node) {
 </script>
 
 <Wrapper tag="li" show={wrap} use={init}>
-  <svelte:element this={href ? 'a' : 'button'} {href} type={href ? undefined : 'button'} {...$$restProps} class={liClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave role={href ? undefined : 'button'}>
+  <svelte:element this={href ? 'a' : 'button'} {href} type={href ? undefined : 'button'} role={href ? 'link' : 'button'} {...$$restProps} class={liClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
     <slot />
   </svelte:element>
 </Wrapper>

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

@@ -4,6 +4,8 @@ declare const __propDef: {
         [x: string]: any;
         defaultClass?: string | undefined;
         href?: string | undefined;
+        activeClass?: string | undefined;
+        active?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8BD,QAAA,MAAM,SAAS;;;;eAD6E,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;CAChC,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsCD,QAAA,MAAM,SAAS;;;;eADyH,MAAM,GAAG,SAAS;sBAAgB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CAC9G,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/forms/Dropzone.svelte

@@ -11,19 +11,7 @@ function keydown(ev) {
 }
 </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">
+<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" />

package/dist/forms/FloatingLabelInput.svelte

@@ -63,30 +63,7 @@ const labelColorClasses = {
 </script>
 
 <div class={twMerge(divClasses[style], $$props.classDiv)}>
-  <input
-    {id}
-    {...$$restProps}
-    bind:value
-    on:blur
-    on:change
-    on:click
-    on:focus
-    on:input
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mouseenter
-    on:mouseleave
-    on:mouseover
-    on:paste
-    {...{ type }}
-    placeholder=" "
-    class={twMerge(
-      inputClasses[style],
-      inputColorClasses[color],
-      inputSizes[style][size],
-      $$props.classInput
-    )} />
+  <input {id} {...$$restProps} bind:value on:blur on:change on:click on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...{ type }} placeholder=" " class={twMerge(inputClasses[style], inputColorClasses[color], inputSizes[style][size], $$props.classInput)} />
 
   <label for={id} class={twMerge(labelClasses[style], labelColorClasses[color], labelSizes[style][size], $$props.classLabel)}>
     {label}

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA6F1C,QAAA,MAAM,SAAS;;;;;;;;gBADqP,GAAG;;;;;;;;;;;;;;;;;;;;CACzL,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAwF1C,QAAA,MAAM,SAAS;;;;;;;;gBADqP,GAAG;;;;;;;;;;;;;;;;;;;;CACzL,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/forms/Input.svelte

@@ -51,24 +51,7 @@ $: {
     </div>
   {/if}
   <slot props={{ ...$$restProps, class: inputClass }}>
-    <input
-      {...$$restProps}
-      bind:value
-      on:blur
-      on:change
-      on:click
-      on:contextmenu
-      on:focus
-      on:keydown
-      on:keypress
-      on:keyup
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-      on:paste
-      on:input
-      {...{ type }}
-      class={inputClass} />
+    <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
   {#if $$slots.right}
     <div class="{twMerge(floatClass, $$props.classRight)} right-0 pr-2.5"><slot name="right" /></div>

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyDD,QAAA,MAAM,SAAS;;;gBADiI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CACrE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmDD,QAAA,MAAM,SAAS;;;gBADiI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CACrE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyDD,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwDD,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/list-group/Listgroup.svelte

@@ -14,11 +14,9 @@ $: groupClass = twMerge(defaultClass, $$props.class);
 <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
     {#if typeof item === 'object'}
-      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}
-        ><slot {item} {index} /></ListgroupItem>
+      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
     {:else}
-      <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}
-        ><slot {item} {index} /></ListgroupItem>
+      <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
     {/if}
   {:else}
     <slot item={items[0]} />

package/dist/list-group/ListgroupItem.svelte

@@ -30,21 +30,7 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'dis
     <slot item={$$props} />
   </a>
 {:else}
-  <button
-    type="button"
-    class="flex items-center text-left {itemClass}"
-    {disabled}
-    on:blur
-    on:change
-    on:click
-    on:focus
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mouseenter
-    on:mouseleave
-    on:mouseover
-    aria-current={current}>
+  <button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
     <slot item={$$props} />
   </button>
 {/if}

package/dist/modals/Modal.svelte

@@ -105,11 +105,7 @@ function handleKeys(e) {
           <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} color={$$restProps.color} />
         {/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-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
           <slot />
         </div>
         <!-- Modal footer -->

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;AAyEH,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;AAsEH,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/utils/Popper.svelte

@@ -61,16 +61,9 @@ const oppositeSideMap = {
     top: 'bottom'
 };
 let middleware;
-$: middleware = [
-    dom.flip(),
-    dom.shift(),
-    dom.offset(+offset),
-    arrowEl && dom.arrow({ element: arrowEl, padding: 10 })
-];
+$: middleware = [dom.flip(), dom.shift(), dom.offset(+offset), arrowEl && dom.arrow({ element: arrowEl, padding: 10 })];
 function updatePosition() {
-    dom
-        .computePosition(referenceEl, floatingEl, { placement, strategy, middleware })
-        .then(({ x, y, middlewareData, placement, strategy }) => {
+    dom.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);
@@ -122,6 +115,11 @@ onMount(() => {
         if (referenceEl === document.body) {
             console.error(`Popup reference not found: '${reference}'`);
         }
+        else {
+            referenceEl.addEventListener('focusout', hideHandler);
+            if (!clickable)
+                referenceEl.addEventListener('mouseleave', hideHandler);
+        }
     }
     else {
         referenceEl = triggerEls[0];
@@ -133,6 +131,10 @@ onMount(() => {
                     element.removeEventListener(name, handler);
             }
         });
+        if (referenceEl) {
+            referenceEl.addEventListener('focusout', hideHandler);
+            referenceEl.addEventListener('mouseleave', hideHandler);
+        }
     };
 });
 function optional(pred, func) {
@@ -155,16 +157,7 @@ function initArrow(node) {
 {/if}
 
 {#if open && referenceEl}
-  <Frame
-    use={init}
-    options={referenceEl}
-    role="tooltip"
-    tabindex={activeContent ? -1 : undefined}
-    on:focusin={optional(activeContent, showHandler)}
-    on:focusout={optional(activeContent, hideHandler)}
-    on:mouseenter={optional(activeContent && !clickable, showHandler)}
-    on:mouseleave={optional(activeContent && !clickable, hideHandler)}
-    {...$$restProps}>
+  <Frame use={init} options={referenceEl} role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && !clickable, showHandler)} on:mouseleave={optional(activeContent && !clickable, hideHandler)} {...$$restProps}>
     <slot />
     {#if arrow}<div use:initArrow class={arrowClass} />{/if}
   </Frame>

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,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"}
+{"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;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;;;;;;;;;;;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.43.1",
+  "version": "0.43.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -31,19 +31,19 @@
   },
   "devDependencies": {
     "@docsearch/js": "^3.5.1",
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.37.0",
     "@sveltejs/adapter-vercel": "^3.0.3",
-    "@sveltejs/kit": "^1.22.4",
+    "@sveltejs/kit": "^1.22.6",
     "@sveltejs/package": "2.1.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.15",
     "createprops": "^0.5.5",
     "esbuild": "0.18.10",
-    "eslint": "^8.46.0",
+    "eslint": "^8.47.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-svelte": "^2.32.4",
-    "flowbite-svelte-icons": "^0.3.5",
+    "flowbite-svelte-icons": "^0.3.6",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.3.4",
     "postcss": "^8.4.27",
@@ -52,16 +52,16 @@
     "prettier-plugin-svelte": "^2.10.1",
     "prism-themes": "^1.9.0",
     "publint": "^0.1.16",
-    "svelte": "^4.1.2",
-    "svelte-check": "^3.4.6",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.0",
     "svelte-meta-tags": "^2.8.0",
     "svelte-preprocess": "^5.0.4",
-    "svelte2tsx": "^0.6.19",
+    "svelte2tsx": "^0.6.20",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.3.3",
     "tslib": "^2.6.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.8",
+    "vite": "^4.4.9",
     "vitest": "^0.32.4"
   },
   "peerDependencies": {