flowbite-svelte 0.48.2 → 0.48.4

package/dist/badge/Badge.svelte

@@ -11,6 +11,7 @@ export let href = "";
 export let rounded = false;
 export let transition = fade;
 export let params = {};
+export let tag = "div";
 let badgeStatus = true;
 const colors = {
   primary: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300",
@@ -57,7 +58,7 @@ $: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `bord
 </script>
 
 {#if badgeStatus}
-  <div {...$$restProps} transition:transition={params} class={badgeClass} on:close>
+  <svelte:element this={tag} {...$$restProps} transition:transition={params} class={badgeClass} on:close>
     {#if href}
       <a {href}>
         <slot></slot>
@@ -78,7 +79,7 @@ $: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `bord
           }} />
       </slot>
     {/if}
-  </div>
+  </svelte:element>
 {/if}
 
 <!--

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

@@ -12,6 +12,7 @@ declare const __propDef: {
         rounded?: boolean;
         transition?: (node: HTMLElement, params: any) => TransitionConfig;
         params?: object;
+        tag?: string;
     };
     events: {
         close: CustomEvent<any>;

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     } & {
         files?: FileList | undefined;
         inputClass?: string;

package/dist/forms/Input.svelte

@@ -16,6 +16,7 @@ export let color = "base";
 export let floatClass = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400";
 export let classLeft = "";
 export let classRight = "";
+export let wrapperClass = "relative w-auto";
 const dispatcher = createEventDispatcher();
 const borderClasses = {
   base: "border border-gray-300 dark:border-gray-600",
@@ -53,7 +54,7 @@ const clearAll = (e) => {
 };
 </script>
 
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right || clearable}>
+<Wrapper class={wrapperClass} show={$$slots.left || $$slots.right || !!clearable}>
   {#if $$slots.left}
     <div class="{twMerge(floatClass, classLeft)} start-0 ps-2.5 pointer-events-none">
       <slot name="left" />
@@ -63,12 +64,12 @@ const clearAll = (e) => {
     <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, classRight)} end-0 pe-2.5">
-    <slot name="right"></slot>
-  </div>
+    <div class="{twMerge(floatClass, classRight)} end-0 pe-2.5">
+      <slot name="right"></slot>
+    </div>
   {/if}
   {#if clearable && value && `${value}`.length > 0}
-    <CloseButton {size} on:click={clearAll} color="none" class=" {twMerge(floatClass, classRight)} focus:ring-0 end-1 focus:ring-gray-400 dark:text-white" />
+    <CloseButton {size} on:click={clearAll} color="none" class="{twMerge(floatClass, classRight)} focus:ring-0 end-1" tabindex={-1} />
   {/if}
 </Wrapper>
 

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     };
     events: {
         blur: FocusEvent;

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     } & {
         value?: number;
     };

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         floatClass?: string;
         classLeft?: string;
         classRight?: string;
+        wrapperClass?: string;
     } & {
         size?: FormSizeType;
         placeholder?: string;

package/dist/mega-menu/MegaMenu.svelte

@@ -10,7 +10,7 @@ let ulCls;
 $: ulCls = twMerge(ulClass, full && $$slots.extra ? "grid-cols-2" : "grid-cols-2 md:grid-cols-3", "text-sm font-medium", full && $$slots.extra && "md:w-2/3", $$props.classUl);
 </script>
 
-<Popper color={full ? 'default' : 'dropdown'} border={!full} rounded-sm={!full} activeContent arrow={false} trigger="click" placement="bottom" yOnly={full} {...$$restProps} class={wrapperClass} on:show bind:open>
+<Popper color={full ? 'default' : 'dropdown'} border={!full} rounded={!full} activeContent arrow={false} trigger="click" placement="bottom" yOnly={full} {...$$restProps} class={wrapperClass} on:show bind:open>
   <div class="flex flex-col md:flex-row p-4 max-w-(--breakpoint-md) justify-center mx-auto mt-2">
     <ul class={ulCls}>
       {#each items as item, index}

package/dist/table/TableBodyRow.svelte

@@ -2,7 +2,7 @@
 import { getContext } from "svelte";
 export let color = getContext("color");
 const colors = {
-  default: "bg-white dark:bg-gray-800 dark:border-gray-700",
+  default: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
   blue: "bg-blue-500 border-blue-400",
   green: "bg-green-500 border-green-400",
   red: "bg-red-500 border-red-400",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.48.2",
+  "version": "0.48.4",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "packageManager": "pnpm@8.15.4",