flowbite-svelte 0.46.2 → 0.46.4

package/dist/buttons/Button.svelte

@@ -94,7 +94,7 @@ $: buttonClass = twMerge(
   color === "alternative" && (group && !checked ? "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-600"),
   outline && color === "dark" && (group ? checked ? "bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600" : "dark:text-white border-gray-800 dark:border-white" : "dark:text-gray-400 dark:border-gray-700"),
   coloredFocusClasses[color],
-  hasBorder() && group && "border-s-0 first:border-s",
+  hasBorder() && group && "[&:not(:first-child)]:-ms-px",
   group ? pill && "first:rounded-s-full last:rounded-e-full" || "first:rounded-s-lg last:rounded-e-lg" : pill && "rounded-full" || "rounded-lg",
   shadow && "shadow-lg",
   shadow && coloredShadowClasses[color],

package/dist/charts/Chart.svelte

@@ -18,7 +18,7 @@ function initChart(node, options2) {
 }
 </script>
 
-<div use:initChart={options} class={$$props.class} />
+<div use:initChart={options} class={$$props.class}></div>
 
 <!--
 @component

package/dist/device-mockups/Android.svelte

@@ -9,13 +9,13 @@ export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)} />
-  <div class={twMerge(leftTop, $$props.classLeftTop)} />
-  <div class={twMerge(leftMid, $$props.classLeftMid)} />
-  <div class={twMerge(leftBot, $$props.classLeftBot)} />
-  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(top, $$props.classTop)}></div>
+  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
+  <div class={twMerge(leftMid, $$props.classLeftMid)}></div>
+  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
+  <div class={twMerge(right, $$props.classRight)}></div>
   <div class={twMerge(slot, $$props.classSlot)}>
-    <slot />
+    <slot></slot>
   </div>
 </div>
 

package/dist/device-mockups/DefaultMockup.svelte

@@ -8,12 +8,12 @@ export let right = "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -righ
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)} />
-  <div class={twMerge(leftTop, $$props.classLeftTop)} />
-  <div class={twMerge(leftBot, $$props.classLeftBot)} />
-  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(top, $$props.classTop)}></div>
+  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
+  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
+  <div class={twMerge(right, $$props.classRight)}></div>
   <div class={twMerge(slot, $$props.classSlot)}>
-    <slot />
+    <slot></slot>
   </div>
 </div>
 

package/dist/device-mockups/Desktop.svelte

@@ -7,11 +7,11 @@ export let div = "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-
 
 <div class={twMerge(div, $$props.class)}>
   <div class={twMerge(inner, $$props.classInner)}>
-    <slot />
+    <slot></slot>
   </div>
 </div>
-<div class={twMerge(bot, $$props.classBot)} />
-<div class={twMerge(botUnder, $$props.classBotUnder)} />
+<div class={twMerge(bot, $$props.classBot)}></div>
+<div class={twMerge(botUnder, $$props.classBotUnder)}></div>
 
 <!--
 @component

package/dist/device-mockups/Ios.svelte

@@ -8,12 +8,12 @@ export let right = "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)} />
-  <div class={twMerge(leftTop, $$props.classLeftTop)} />
-  <div class={twMerge(leftBot, $$props.classLeftBot)} />
-  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(top, $$props.classTop)}></div>
+  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
+  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
+  <div class={twMerge(right, $$props.classRight)}></div>
   <div class={twMerge(slot, $$props.classSlot)}>
-    <slot />
+    <slot></slot>
   </div>
 </div>
 

package/dist/device-mockups/Laptop.svelte

@@ -7,12 +7,12 @@ export let botCen = "absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56
 
 <div class={twMerge(div, $$props.class)}>
   <div class={twMerge(inner, $$props.classInner)}>
-    <slot />
+    <slot></slot>
   </div>
 </div>
 
 <div class={twMerge(bot, $$props.classBot)}>
-  <div class={twMerge(botCen, $$props.classBotCen)} />
+  <div class={twMerge(botCen, $$props.classBotCen)}></div>
 </div>
 
 <!--

package/dist/device-mockups/Smartwatch.svelte

@@ -7,15 +7,15 @@ export let top = "relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-
 export let bot = "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]";
 </script>
 
-<div class={twMerge(div, $$props.class)} />
+<div class={twMerge(div, $$props.class)}></div>
 <div class={twMerge(top, $$props.classTop)}>
-  <div class={twMerge(rightTop, $$props.classRightTop)} />
-  <div class={twMerge(rightBot, $$props.classRightBot)} />
+  <div class={twMerge(rightTop, $$props.classRightTop)}></div>
+  <div class={twMerge(rightBot, $$props.classRightBot)}></div>
   <div class={twMerge(slot, $$props.classSlot)}>
-    <slot />
+    <slot></slot>
   </div>
 </div>
-<div class={twMerge(bot, $$props.classBot)} />
+<div class={twMerge(bot, $$props.classBot)}></div>
 
 <!--
 @component

package/dist/device-mockups/Tablet.svelte

@@ -8,12 +8,12 @@ export let right = "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -righ
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(leftTop, $$props.classLeftTop)} />
-  <div class={twMerge(leftMid, $$props.classLeftMid)} />
-  <div class={twMerge(leftBot, $$props.classLeftBot)} />
-  <div class={twMerge(right, $$props.classRight)} />
+  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
+  <div class={twMerge(leftMid, $$props.classLeftMid)}></div>
+  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
+  <div class={twMerge(right, $$props.classRight)}></div>
   <div class={twMerge(slot, $$props.classSlot)}>
-    <slot />
+    <slot></slot>
   </div>
 </div>
 

package/dist/drawer/Drawer.svelte

@@ -47,13 +47,13 @@ function clickOutsideWrapper(node, callback) {
 
 {#if !hidden}
   {#if backdrop && activateClickOutside}
-    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()}></div>
   {:else if backdrop && !activateClickOutside}
-    <div role="presentation" class={backdropDivClass} />
+    <div role="presentation" class={backdropDivClass}></div>
   {/if}
 
   <div use:clickOutsideWrapper={handleClickOutside} {id} {...$$restProps} class={twMerge(divClass, width, position, placements[placement], $$props.class)} transition:multiple={transitionParams} tabindex="-1" aria-controls={id} aria-labelledby={id}>
-    <slot {hidden} />
+    <slot {hidden}></slot>
   </div>
 {/if}
 

package/dist/dropdown/DropdownDivider.svelte

@@ -2,7 +2,7 @@
 export let divClass = "my-1 h-px bg-gray-100 dark:bg-gray-600";
 </script>
 
-<div {...$$restProps} class={twMerge(divClass, $$props.class)} />
+<div {...$$restProps} class={twMerge(divClass, $$props.class)}></div>
 
 <!--
 @component

package/dist/forms/Input.svelte

@@ -39,7 +39,7 @@ $: _size = size || clampSize(group?.size) || "md";
 let inputClass;
 $: {
   const _color = color === "base" && background ? "tinted" : color;
-  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "border-s-0 first:border-s last:border-e", $$props.class]);
+  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || "rounded-lg", group && "first:rounded-s-lg last:rounded-e-lg", group && "[&:not(:first-child)]:-ms-px", $$props.class]);
 }
 </script>
 

package/dist/forms/InputAddon.svelte

@@ -19,7 +19,7 @@ const divider = {
 const textSizes = { sm: "sm:text-xs", md: "text-sm", lg: "sm:text-base" };
 const prefixPadding = { sm: "px-2", md: "px-3", lg: "px-4" };
 $: _size = size || clampSize(group?.size) || "md";
-$: divClass = twMerge(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border border-e-0", "first:rounded-s-lg last:rounded-e-lg", $$props.class);
+$: divClass = twMerge(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "[&:not(:first-child)]:-ms-px", "first:rounded-s-lg last:rounded-e-lg", $$props.class);
 </script>
 
 <div {...$$restProps} class={divClass}>

package/dist/forms/MultiSelect.svelte

@@ -116,7 +116,7 @@ function handleKeyDown(event) {
     {#if selectItems.length}
       <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
     {/if}
-    <div class="w-[1px] bg-gray-300 dark:bg-gray-600" />
+    <div class="w-[1px] bg-gray-300 dark:bg-gray-600"></div>
     <svg class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
     </svg>

package/dist/forms/Textarea.svelte

@@ -20,15 +20,15 @@ $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? "" : "rounded
 <Wrapper show={wrapped} class={wrapperClass}>
   {#if $$slots.header}
     <div class={headerClass(true)}>
-      <slot name="header" />
+      <slot name="header"></slot>
     </div>
   {/if}
   <Wrapper show={wrapped} class={innerWrapperClass}>
-    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste on:select {...$$restProps} class={textareaClass} />
+    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste on:select {...$$restProps} class={textareaClass}></textarea>
   </Wrapper>
   {#if $$slots.footer}
     <div class={headerClass(false)}>
-      <slot name="footer" />
+      <slot name="footer"></slot>
     </div>
   {/if}
 </Wrapper>

package/dist/forms/Toggle.svelte

@@ -30,8 +30,8 @@ $: divClass = twMerge(common, background ? "dark:bg-gray-600 dark:border-gray-50
 </script>
 
 <Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
-  <span class={divClass} />
-  <slot />
+  <span class={divClass}></span>
+  <slot></slot>
 </Checkbox>
 
 <!--

package/dist/modal/Modal.svelte

@@ -93,7 +93,7 @@ $: footerCls = twMerge(footerClass, classFooter);
 
 {#if open}
   <!-- backdrop -->
-  <div class={backdropCls} />
+  <div class={backdropCls}></div>
   <!-- dialog -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} on:mousedown={onOutsideClose} class={dialogCls} tabindex="-1" aria-modal="true" role="dialog">
@@ -116,12 +116,12 @@ $: footerCls = twMerge(footerClass, classFooter);
           {#if dismissable && !$$slots.header && !title}
             <CloseButton name="Close modal" class="absolute top-3 end-2.5" {color} on:click={hide} />
           {/if}
-          <slot />
+          <slot></slot>
         </div>
         <!-- Modal footer -->
         {#if $$slots.footer}
           <Frame class={footerCls} {color}>
-            <slot name="footer" />
+            <slot name="footer"></slot>
           </Frame>
         {/if}
       </Frame>

package/dist/progress/Progressbar.svelte

@@ -41,7 +41,7 @@ $: _progress.set(Number(progress));
       {$_progress.toFixed(precision)}%
     </div>
   {:else}
-    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {$_progress}%" />
+    <div class={twJoin(barColors[color], size, 'rounded-full')} style="width: {$_progress}%"></div>
   {/if}
 </div>
 

package/dist/rating/AdvancedRating.svelte

@@ -14,16 +14,16 @@ let rightLabelCls = twMerge(rightLabelClass, $$props.classRightLabel);
 </script>
 
 {#if $$slots.rating}
-  <slot name="rating" />
+  <slot name="rating"></slot>
 {/if}
 {#if $$slots.globalText}
-  <slot name="globalText" />
+  <slot name="globalText"></slot>
 {/if}
 {#each ratings as { label, rating }}
   <div class={divCls}>
     <span class={labelCls}>{label}</span>
     <div class={ratingDivCls}>
-      <div class={ratingCls} style="width: {rating}%" />
+      <div class={ratingCls} style="width: {rating}%"></div>
     </div>
     <span class={rightLabelCls}>{rating}{unit}</span>
   </div>

package/dist/rating/ScoreRating.svelte

@@ -17,7 +17,7 @@ export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
     <p class={desc2Class}>{headerLabel.desc2}</p>
   {/if}
   {#if headerLabel.desc3}
-    <span class={desc3spanClass} />
+    <span class={desc3spanClass}></span>
     <p class={desc3pClass}>{headerLabel.desc3}</p>
   {/if}
   {#if headerLabel.link}
@@ -31,7 +31,7 @@ export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
           <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
-            <div class={barColor} style="width: {rating * 10}%" />
+            <div class={barColor} style="width: {rating * 10}%"></div>
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
         </dd>
@@ -44,7 +44,7 @@ export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
         <dd class="flex items-center mb-3">
           <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 me-2">
-            <div class={barColor} style="width: {rating * 10}%" />
+            <div class={barColor} style="width: {rating * 10}%"></div>
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
         </dd>

package/dist/skeleton/CardPlaceholder.svelte

@@ -17,17 +17,17 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
       <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" />
     </svg>
   </div>
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
   <div class="flex items-center mt-4 space-x-3 rtl:space-x-reverse">
     <svg class="w-14 h-14 text-gray-200 dark:text-gray-700" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
     </svg>
     <div>
-      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2" />
-      <div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
+      <div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
     </div>
   </div>
   <span class="sr-only">Loading...</span>

package/dist/skeleton/ImagePlaceholder.svelte

@@ -13,13 +13,13 @@ $: imgOnlyClass = imgOnly ? "max-w-60" : "";
   </div>
   {#if !imgOnly}
     <div class="w-full">
-      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12 mb-2.5" />
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-10/12 mb-2.5" />
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-11/12 mb-2.5" />
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12" />
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12 mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-10/12 mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-11/12 mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12"></div>
     </div>
   {/if}
   <span class="sr-only">Loading...</span>

package/dist/skeleton/ListPlaceholder.svelte

@@ -5,38 +5,38 @@ export let divClass = "p-4 space-y-4 max-w-md rounded border border-gray-200 div
 <div role="status" class={twMerge(divClass, $$props.class)}>
   <div class="flex justify-between items-center">
     <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
     </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
   </div>
   <div class="flex justify-between items-center pt-4">
     <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
     </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
   </div>
   <div class="flex justify-between items-center pt-4">
     <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
     </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
   </div>
   <div class="flex justify-between items-center pt-4">
     <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
     </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
   </div>
   <div class="flex justify-between items-center pt-4">
     <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
     </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>

package/dist/skeleton/Skeleton.svelte

@@ -12,13 +12,13 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12 mb-2.5" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-10/12 mb-2.5" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-11/12 mb-2.5" />
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12" />
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-10/12 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-11/12 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12"></div>
   <span class="sr-only">Loading...</span>
 </div>
 

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -3,14 +3,14 @@ export let divClass = "animate-pulse";
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
-  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto" />
-  <div class="h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]" />
+  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto"></div>
+  <div class="h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]"></div>
   <div class="flex justify-center items-center mt-4">
     <svg class="me-2 w-10 h-10 text-gray-200 dark:text-gray-700" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
     </svg>
-    <div class="w-20 h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 me-3" />
-    <div class="w-24 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+    <div class="w-20 h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 me-3"></div>
+    <div class="w-24 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>

package/dist/skeleton/TextPlaceholder.svelte

@@ -13,34 +13,34 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 
 <div role="status" class={outDivclass}>
   <div class="flex items-center space-x-2 rtl:space-x-reverse w-full">
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
+    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
   </div>
   <div class="flex items-center space-x-2 rtl:space-x-reverse w-11/12">
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
+    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
   </div>
   <div class="flex items-center space-x-2 rtl:space-x-reverse w-9/12">
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
+    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
   </div>
   <div class="flex items-center space-x-2 rtl:space-x-reverse w-11/12">
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
+    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
   </div>
   <div class="flex items-center space-x-2 rtl:space-x-reverse w-10/12">
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-32" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-32"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
+    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full"></div>
   </div>
   <div class="flex items-center space-x-2 rtl:space-x-reverse w-8/12">
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80" />
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
+    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80"></div>
+    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -3,16 +3,16 @@ export let divClass = "p-4 max-w-sm rounded border border-gray-200 shadow animat
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2.5" />
-  <div class="mb-10 w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2.5"></div>
+  <div class="mb-10 w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
   <div class="flex items-baseline mt-4 space-x-6 rtl:space-x-reverse">
-    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
-    <div class="w-full h-56 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
-    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
-    <div class="w-full h-64 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
-    <div class="w-full h-80 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
-    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
-    <div class="w-full h-80 bg-gray-200 rounded-t-lg dark:bg-gray-700" />
+    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+    <div class="w-full h-56 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+    <div class="w-full h-64 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+    <div class="w-full h-80 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+    <div class="w-full h-80 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>

package/dist/steps/StepIndicator.svelte

@@ -43,15 +43,15 @@ const currentStepColors = {
     {#each steps as step, i}
       {#if i === currentStep - 1}
         <div class="relative w-full h-full">
-          <div class={twJoin('relative w-full h-full rounded-sm', currentStepColors[color])} />
+          <div class={twJoin('relative w-full h-full rounded-sm', currentStepColors[color])}></div>
           {#if glow}
-            <div class={twJoin('absolute -inset-1 rounded-sm blur opacity-30 dark:opacity-25', currentStepColors[color])} />
+            <div class={twJoin('absolute -inset-1 rounded-sm blur opacity-30 dark:opacity-25', currentStepColors[color])}></div>
           {/if}
         </div>
       {:else if i < currentStep - 1}
-        <div class={twJoin('w-full h-full rounded-sm', completedStepColors[color])} />
+        <div class={twJoin('w-full h-full rounded-sm', completedStepColors[color])}></div>
       {:else}
-        <div class="w-full h-full rounded-sm bg-gray-200 dark:bg-gray-700" />
+        <div class="w-full h-full rounded-sm bg-gray-200 dark:bg-gray-700"></div>
       {/if}
     {/each}
   </div>

package/dist/tabs/Tabs.svelte

@@ -38,14 +38,14 @@ $: ulClass = twMerge(defaultClass, tabStyle === "underline" && "-mb-px", $$props
 </script>
 
 <ul class={ulClass}>
-  <slot {tabStyle} />
+  <slot {tabStyle}></slot>
 </ul>
 {#if divider}
   <slot name="divider">
-    <div class="h-px bg-gray-200 dark:bg-gray-700" />
+    <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
   </slot>
 {/if}
-<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init />
+<div class={contentClass} role="tabpanel" aria-labelledby="id-tab" use:init></div>
 
 <!--
 @component

package/dist/timeline/TimelineItem.svelte

@@ -33,7 +33,7 @@ const h3Cls = twMerge(order === "vertical" ? "flex items-center mb-1 text-lg fon
 </script>
 
 <li class={liCls}>
-  <div class={divCls} />
+  <div class={divCls}></div>
   {#if order !== 'default'}
     <slot name="icon">
       <svg aria-hidden="true" class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -56,7 +56,7 @@ const h3Cls = twMerge(order === "vertical" ? "flex items-center mb-1 text-lg fon
     {/if}
   {/if}
 
-  <slot />
+  <slot></slot>
 </li>
 
 <!--

package/dist/utils/Popper.svelte

@@ -111,6 +111,7 @@ onMount(() => {
   } else {
     referenceEl = triggerEls[0];
   }
+  document.addEventListener("click", closeOnClickOutside);
   return () => {
     triggerEls.forEach((element) => {
       if (element) {
@@ -121,8 +122,16 @@ onMount(() => {
       referenceEl.removeEventListener("focusout", hideHandler);
       referenceEl.removeEventListener("mouseleave", hideHandler);
     }
+    document.removeEventListener("click", closeOnClickOutside);
   };
 });
+function closeOnClickOutside(event) {
+  if (open) {
+    if (!event.composedPath().includes(floatingEl) && !triggerEls.some((el) => event.composedPath().includes(el))) {
+      hideHandler(event);
+    }
+  }
+}
 function optional(pred, func) {
   return pred ? func : () => void 0;
 }
@@ -139,13 +148,13 @@ function initArrow(node) {
 </script>
 
 {#if !referenceEl}
-  <div bind:this={contentEl} />
+  <div bind:this={contentEl}></div>
 {/if}
 
 {#if referenceEl}
   <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
-    <slot />
-    {#if arrow}<div use:initArrow class={arrowClass} />{/if}
+    <slot></slot>
+    {#if arrow}<div use:initArrow class={arrowClass}></div>{/if}
   </Frame>
 {/if}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.2",
+  "version": "0.46.4",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -28,7 +28,7 @@
     "eslint": "^9.5.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.39.3",
-    "flowbite-svelte": "^0.46.2",
+    "flowbite-svelte": "^0.46.4",
     "flowbite-svelte-blocks": "^1.1.2",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.11.2",