flowbite-svelte 0.48.1 → 0.48.2

package/dist/accordion/Accordion.svelte.d.ts

@@ -9,7 +9,7 @@ export interface AccordionCtxType {
     classInactive?: string;
 }
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

package/dist/accordion/AccordionItem.svelte

@@ -1,7 +1,7 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext, onMount } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import { writable } from "svelte/store";
-import { fade, blur, fly, slide } from "svelte/transition";
+import { blur, fade, fly, slide } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
 export let tag = "h2";
 export let open = false;
 export let activeClass = void 0;

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TransitionTypes, TransitionParamTypes } from '../types';
+import type { TransitionParamTypes, TransitionTypes } from '../types';
 declare const __propDef: {
     props: {
         tag?: string;
@@ -19,6 +19,7 @@ declare const __propDef: {
         borderSharedClass?: string;
         classActive?: string;
         classInactive?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

package/dist/avatar/Avatar.svelte

@@ -18,17 +18,17 @@ const sizes = {
   none: ""
 };
 let avatarClass;
-$: avatarClass = twMerge(rounded ? "rounded-sm" : "rounded-full", border && "p-1 ring-2 ring-gray-300 dark:ring-gray-500", sizes[size], stacked && "border-2 -ms-4 border-white dark:border-gray-800", "bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 object-cover", $$props.class);
+$: avatarClass = twMerge(rounded ? "rounded" : "rounded-full", border && "p-1 ring-2 ring-gray-300 dark:ring-gray-500", sizes[size], stacked && "border-2 -ms-4 border-white dark:border-gray-800", "bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 object-cover", $$props.class);
 </script>
 
 {#if !src || !!href || $$slots.default || dot}
   <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class="relative flex justify-center items-center {avatarClass}">
     {#if src}
-      <img {alt} {src} class={rounded ? 'rounded-sm' : 'rounded-full'} />
+      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
     {:else}
       <slot>
         <!-- default avatar placeholder -->
-        <svg class="w-full h-full {rounded ? 'rounded-sm' : 'rounded-full'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <svg class="w-full h-full {rounded ? 'rounded' : 'rounded-full'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
         </svg>
       </slot>
@@ -47,7 +47,7 @@ $: avatarClass = twMerge(rounded ? "rounded-sm" : "rounded-full", border && "p-1
 ## Props
 @prop export let src: $$Props['src'] = '';
 @prop export let href: $$Props['href'] = undefined;
-@prop export let rounded: $$Props['rounded-sm'] = false;
+@prop export let rounded: $$Props['rounded'] = false;
 @prop export let border: $$Props['border'] = false;
 @prop export let stacked: $$Props['stacked'] = false;
 @prop export let dot: $$Props['dot'] = undefined;

package/dist/avatar/Avatar.svelte.d.ts

@@ -27,7 +27,7 @@ export type AvatarSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let src: $$Props['src'] = '';
  * @prop export let href: $$Props['href'] = undefined;
- * @prop export let rounded: $$Props['rounded-sm'] = false;
+ * @prop export let rounded: $$Props['rounded'] = false;
  * @prop export let border: $$Props['border'] = false;
  * @prop export let stacked: $$Props['stacked'] = false;
  * @prop export let dot: $$Props['dot'] = undefined;

package/dist/badge/Badge.svelte

@@ -53,7 +53,7 @@ const close = () => {
 };
 const baseClass = "font-medium inline-flex items-center justify-center px-2.5 py-0.5";
 let badgeClass;
-$: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? "rounded-full" : "rounded-sm", $$restProps.class);
+$: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? "rounded-full" : "rounded", $$restProps.class);
 </script>
 
 {#if badgeStatus}
@@ -90,7 +90,7 @@ $: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `bord
 @prop export let dismissable: $$Props['dismissable'] = false;
 @prop export let border: $$Props['border'] = false;
 @prop export let href: $$Props['href'] = '';
-@prop export let rounded: $$Props['rounded-sm'] = false;
+@prop export let rounded: $$Props['rounded'] = false;
 @prop export let transition: NonNullable<$$Props['transition']> = fade;
 @prop export let params: $$Props['params'] = {};
 -->

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

@@ -36,7 +36,7 @@ export type BadgeSlots = typeof __propDef.slots;
  * @prop export let dismissable: $$Props['dismissable'] = false;
  * @prop export let border: $$Props['border'] = false;
  * @prop export let href: $$Props['href'] = '';
- * @prop export let rounded: $$Props['rounded-sm'] = false;
+ * @prop export let rounded: $$Props['rounded'] = false;
  * @prop export let transition: NonNullable<$$Props['transition']> = fade;
  * @prop export let params: $$Props['params'] = {};
  */

package/dist/buttons/Button.svelte

@@ -111,7 +111,7 @@ $: buttonClass = twMerge(
   <label {...$$restProps} class={buttonClass}>
     <slot />
   </label>
-{:else if tag === 'button' }
+{:else if tag === 'button'}
   <button {type} {...$$restProps} {disabled} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave on:mouseup on:mousedown>
     <slot />
   </button>
@@ -131,7 +131,7 @@ $: buttonClass = twMerge(
 @prop export let href: string | undefined = undefined;
 @prop export let type: HTMLButtonAttributes['type'] = 'button';
 @prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
-@prop export let shadow: $$Props['shadow-sm'] = false;
+@prop export let shadow: $$Props['shadow'] = false;
 @prop export let tag: $$Props['tag'] = 'button';
 @prop export let checked: $$Props['checked'] = undefined;
 @prop export let disabled: HTMLButtonAttributes['disabled'] = false;

package/dist/buttons/Button.svelte.d.ts

@@ -55,7 +55,7 @@ export type ButtonSlots = typeof __propDef.slots;
  * @prop export let href: string | undefined = undefined;
  * @prop export let type: HTMLButtonAttributes['type'] = 'button';
  * @prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
- * @prop export let shadow: $$Props['shadow-sm'] = false;
+ * @prop export let shadow: $$Props['shadow'] = false;
  * @prop export let tag: $$Props['tag'] = 'button';
  * @prop export let checked: $$Props['checked'] = undefined;
  * @prop export let disabled: HTMLButtonAttributes['disabled'] = false;

package/dist/buttons/GradientButton.svelte

@@ -70,5 +70,5 @@ $: divClass = twMerge($$props.outline && "p-0.5", gradientClasses[color], shadow
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let color: NonNullable<$$Props['color']> = 'blue';
-@prop export let shadow: $$Props['shadow-sm'] = false;
+@prop export let shadow: $$Props['shadow'] = false;
 -->

package/dist/buttons/GradientButton.svelte.d.ts

@@ -29,7 +29,7 @@ export type GradientButtonSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let color: NonNullable<$$Props['color']> = 'blue';
- * @prop export let shadow: $$Props['shadow-sm'] = false;
+ * @prop export let shadow: $$Props['shadow'] = false;
  */
 export default class GradientButton extends SvelteComponentTyped<GradientButtonProps, GradientButtonEvents, GradientButtonSlots> {
 }

package/dist/cards/Card.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SizeType } from '../types';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

package/dist/charts/Chart.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ApexOptions } from 'apexcharts';
 import type ApexCharts from 'apexcharts';
+import type { ApexOptions } from 'apexcharts';
 declare const __propDef: {
     props: {
         options: ApexOptions;

package/dist/device-mockups/Android.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         classLeftBot?: string;
         classRight?: string;
         classSlot?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/DefaultMockup.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         classLeftBot?: string;
         classRight?: string;
         classSlot?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Desktop.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         classInner?: string;
         classBot?: string;
         classBotUnder?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Ios.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         classLeftBot?: string;
         classRight?: string;
         classSlot?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Laptop.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         classInner?: string;
         classBot?: string;
         classBotCen?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Smartwatch.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         classRightBot?: string;
         classSlot?: string;
         classBot?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/device-mockups/Tablet.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         classLeftBot?: string;
         classRight?: string;
         classSlot?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/drawer/Drawer.svelte

@@ -10,6 +10,7 @@ export let topOffset = "inset-x-0 top-0";
 export let bottomOffset = "inset-x-0 bottom-0";
 export let width = "w-80";
 export let backdrop = true;
+export let backdropClass = "";
 export let bgColor = "bg-gray-900";
 export let bgOpacity = "bg-black/75";
 export let placement = "left";
@@ -39,7 +40,7 @@ const handleDrawer = () => {
   hidden = !hidden;
 };
 const handleClickOutside = () => activateClickOutside && !hidden && handleDrawer();
-let backdropDivClass = twMerge("fixed top-0 start-0 z-50 w-full h-full", backdrop && bgColor, backdrop && bgOpacity);
+let backdropDivClass = twMerge("fixed top-0 start-0 z-50 w-full h-full", backdrop && bgColor, backdrop && bgOpacity, backdropClass);
 function clickOutsideWrapper(node, callback) {
   return activateClickOutside ? clickOutside(node, callback) : void 0;
 }

package/dist/drawer/Drawer.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         bottomOffset?: string;
         width?: string;
         backdrop?: boolean;
+        backdropClass?: string;
         bgColor?: string;
         bgOpacity?: string;
         placement?: "left" | "right" | "top" | "bottom";

package/dist/dropdown/Dropdown.svelte

@@ -65,6 +65,6 @@ $: footerCls = twMerge(footerClass, classFooter);
 @prop export let trigger: $$Props['trigger'] = 'click';
 @prop export let placement: $$Props['placement'] = 'bottom';
 @prop export let color: $$Props['color'] = 'dropdown';
-@prop export let shadow: $$Props['shadow-sm'] = true;
-@prop export let rounded: $$Props['rounded-sm'] = true;
+@prop export let shadow: $$Props['shadow'] = true;
+@prop export let rounded: $$Props['rounded'] = true;
 -->

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

@@ -5,7 +5,7 @@ export type DropdownType = {
 import type { Placement } from '@floating-ui/dom';
 import type { FrameColor } from '../utils/Frame.svelte';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: FrameColor;
         rounded?: boolean;
@@ -79,8 +79,8 @@ export type DropdownSlots = typeof __propDef.slots;
  * @prop export let trigger: $$Props['trigger'] = 'click';
  * @prop export let placement: $$Props['placement'] = 'bottom';
  * @prop export let color: $$Props['color'] = 'dropdown';
- * @prop export let shadow: $$Props['shadow-sm'] = true;
- * @prop export let rounded: $$Props['rounded-sm'] = true;
+ * @prop export let shadow: $$Props['shadow'] = true;
+ * @prop export let rounded: $$Props['rounded'] = true;
  */
 export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
 }

package/dist/forms/CheckboxButton.svelte

@@ -40,25 +40,7 @@ $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 </script>
 
 <Button {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
-  <input
-    use:init={group}
-    type="checkbox"
-    bind:checked
-    value={value !== undefined ? value : 'on'}
-    {...$$restProps}
-    class="sr-only"
-    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 />
+  <input use:init={group} type="checkbox" bind:checked value={value !== undefined ? value : 'on'} {...$$restProps} class="sr-only" 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 />
   <slot />
 </Button>
 
@@ -74,5 +56,5 @@ $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 @prop export let outline: $$Props['outline'] = false;
 @prop export let size: $$Props['size'] = undefined;
 @prop export let color: $$Props['color'] = undefined;
-@prop export let shadow: $$Props['shadow-sm'] = false;
+@prop export let shadow: $$Props['shadow'] = false;
 -->

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

@@ -66,7 +66,7 @@ export type CheckboxButtonSlots = typeof __propDef.slots;
  * @prop export let outline: $$Props['outline'] = false;
  * @prop export let size: $$Props['size'] = undefined;
  * @prop export let color: $$Props['color'] = undefined;
- * @prop export let shadow: $$Props['shadow-sm'] = false;
+ * @prop export let shadow: $$Props['shadow'] = false;
  */
 export default class CheckboxButton extends SvelteComponentTyped<CheckboxButtonProps, CheckboxButtonEvents, CheckboxButtonSlots> {
 }

package/dist/forms/Radio.svelte

@@ -11,7 +11,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 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-sm", 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";
@@ -30,7 +30,7 @@ $: if (checked && group === void 0) {
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" {...$$restProps} bind:group={group} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
+  <input type="radio" {...$$restProps} 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} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 

package/dist/forms/RadioButton.svelte

@@ -13,23 +13,7 @@ $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 </script>
 
 <Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
-  <input
-    type="radio"
-    bind:group
-    {value}
-    {...$$restProps}
-    class="sr-only"
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:paste
-    on:change />
+  <input type="radio" bind:group {value} {...$$restProps} class="sr-only" on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change />
   <slot />
 </Button>
 
@@ -44,5 +28,5 @@ $: buttonClass = twMerge(inline ? "inline-flex" : "flex", $$props.class);
 @prop export let outline: $$Props['outline'] = false;
 @prop export let size: $$Props['size'] = undefined;
 @prop export let color: $$Props['color'] = undefined;
-@prop export let shadow: $$Props['shadow-sm'] = false;
+@prop export let shadow: $$Props['shadow'] = false;
 -->

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

@@ -44,7 +44,7 @@ export type RadioButtonSlots = typeof __propDef.slots;
  * @prop export let outline: $$Props['outline'] = false;
  * @prop export let size: $$Props['size'] = undefined;
  * @prop export let color: $$Props['color'] = undefined;
- * @prop export let shadow: $$Props['shadow-sm'] = false;
+ * @prop export let shadow: $$Props['shadow'] = false;
  */
 export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
 }

package/dist/indicators/Indicator.svelte

@@ -54,17 +54,17 @@ const offsets = {
   "bottom-right": "translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3"
 };
 let dotClass;
-$: dotClass = twMerge("shrink-0", rounded ? "rounded-sm" : "rounded-full", border && "border-2 border-white dark:border-gray-800", sizes[size], colors[color], $$slots.default && "inline-flex items-center justify-center", placement && "absolute " + placements[placement], placement && offset && offsets[placement], $$props.class);
+$: dotClass = twMerge("shrink-0", rounded ? "rounded" : "rounded-full", border && "border-2 border-white dark:border-gray-800", sizes[size], colors[color], $$slots.default && "inline-flex items-center justify-center", placement && "absolute " + placements[placement], placement && offset && offsets[placement], $$props.class);
 </script>
 
-<div {...$$restProps} class={dotClass} ><slot /></div>
+<div {...$$restProps} class={dotClass}><slot /></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let color: NonNullable<$$Props['color']> = 'gray';
-@prop export let rounded: $$Props['rounded-sm'] = false;
+@prop export let rounded: $$Props['rounded'] = false;
 @prop export let size: NonNullable<$$Props['size']> = 'md';
 @prop export let border: $$Props['border'] = false;
 @prop export let placement: $$Props['placement'] = undefined;

package/dist/indicators/Indicator.svelte.d.ts

@@ -24,7 +24,7 @@ export type IndicatorSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let color: NonNullable<$$Props['color']> = 'gray';
- * @prop export let rounded: $$Props['rounded-sm'] = false;
+ * @prop export let rounded: $$Props['rounded'] = false;
  * @prop export let size: NonNullable<$$Props['size']> = 'md';
  * @prop export let border: $$Props['border'] = false;
  * @prop export let placement: $$Props['placement'] = undefined;

package/dist/list-group/Listgroup.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ListGroupItemType } from '../types';
 declare class __sveltets_Render<T extends ListGroupItemType | string> {
-    props(): import("svelte/elements").HTMLAnchorAttributes & {
+    props(): import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { LinkType } from '../types';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

package/dist/modal/Modal.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Dismissable, SizeType } from '../types';
 import type { ModalPlacementType } from '../types';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

package/dist/navbar/NavHamburger.svelte

@@ -6,12 +6,13 @@ import Menu from "./Menu.svelte";
 export let menuClass = "h-6 w-6 shrink-0";
 export let onClick = void 0;
 export let classMenu = "";
+export let title = "Open main menu";
 let btnClass = "ms-3 md:hidden";
 let hiddenStore = getContext("navHidden") ?? writable(true);
 const toggle = (ev) => hiddenStore.update((h) => !h);
 </script>
 
-<ToolbarButton name="Open main menu" on:click={onClick || toggle} {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+<ToolbarButton name={title} on:click={onClick || toggle} {...$$restProps} class={twMerge(btnClass, $$props.class)}>
   <Menu class={twMerge(menuClass, classMenu)} />
 </ToolbarButton>
 

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         menuClass?: string;
         onClick?: (() => void) | undefined;
         classMenu?: string;
+        title?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/navbar/Navbar.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import NavContainer from './NavContainer.svelte';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

package/dist/pagination/PaginationItem.svelte

@@ -11,7 +11,7 @@ let defaultClass;
 $: defaultClass = twMerge(
   "flex items-center font-medium",
   large ? "h-10 px-4 text-base" : "h-8 px-3 text-sm",
-  group ? "" : table ? "rounded-sm" : "rounded-lg",
+  group ? "" : table ? "rounded" : "rounded-lg",
   // table || 'border border-gray-300 dark:border-gray-700 dark:bg-gray-800',
   table ? "" : "border",
   active ? activeClass : normalClass,

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

package/dist/skeleton/CardPlaceholder.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         divClass?: string;
         size?: string | number;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/skeleton/ImagePlaceholder.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         divClass?: string;
         imgHeight?: string;
         imgOnly?: boolean;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/skeleton/ListPlaceholder.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         divClass?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/skeleton/Skeleton.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         divClass?: string;
         size?: string | number;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        class?: string;
         divClass?: string;
     };
     events: {

package/dist/skeleton/TextPlaceholder.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
+    props: HTMLAttributes<HTMLDivElement> & {
         divClass?: string;
         size?: string | number;
     };

package/dist/skeleton/VideoPlaceholder.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         divClass?: string;
         size?: string | number;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
+    props: HTMLAttributes<HTMLDivElement> & {
         divClass?: string;
     };
     events: {

package/dist/speed-dial/SpeedDial.svelte

@@ -22,7 +22,6 @@ let divClass;
 $: divClass = twMerge(defaultClass, "group", $$props.class);
 let poperClass;
 $: poperClass = twMerge(popperDefaultClass, ["top", "bottom"].includes(placement.split("-")[0]) && "flex-col");
-$: console.log(typeof $$restProps, Object.keys($$restProps));
 </script>
 
 <div class={divClass}>

package/dist/table/Table.svelte

@@ -61,7 +61,7 @@ setContext("sorter", writable(null));
               </svg>
             </slot>
           </div>
-          <input bind:value={searchTerm} type="text" id="table-search" class={inputCls} {placeholder} />
+          <input bind:value={searchTerm} type="search" id="table-search" class={inputCls} {placeholder} />
         </div>
         <slot name="header" />
       </div>
@@ -80,7 +80,7 @@ setContext("sorter", writable(null));
 @prop export let striped: $$Props['striped'] = false;
 @prop export let hoverable: $$Props['hoverable'] = false;
 @prop export let noborder: $$Props['noborder'] = false;
-@prop export let shadow: $$Props['shadow-sm'] = false;
+@prop export let shadow: $$Props['shadow'] = false;
 @prop export let color: NonNullable<$$Props['color']> = 'default';
 @prop export let customeColor: $$Props['customeColor'] = '';
 @prop export let items: $$Props['items'] = [];

package/dist/table/Table.svelte.d.ts

@@ -41,7 +41,7 @@ export type TableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
  * @prop export let striped: $$Props['striped'] = false;
  * @prop export let hoverable: $$Props['hoverable'] = false;
  * @prop export let noborder: $$Props['noborder'] = false;
- * @prop export let shadow: $$Props['shadow-sm'] = false;
+ * @prop export let shadow: $$Props['shadow'] = false;
  * @prop export let color: NonNullable<$$Props['color']> = 'default';
  * @prop export let customeColor: $$Props['customeColor'] = '';
  * @prop export let items: $$Props['items'] = [];

package/dist/timeline/ActivityItem.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ActivityType } from '../types';
+import type { HTMLLiAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
+    props: HTMLLiAttributes & {
         activities: ActivityType[];
         liClass?: string;
         spanClass?: string;

package/dist/timeline/GroupItem.svelte

@@ -30,20 +30,20 @@ let spanCls = twMerge(spanClass, classSpan);
           <div class="text-sm font-normal">{comment}</div>
         {/if}
         {#if isPrivacy}
-        <span class={spanCls}>
-          {#if isPrivate}
-            <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
-              <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
-            </svg>
-            Private
-          {:else}
-            <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd" />
-            </svg>
-            Public
-          {/if}
-        </span>
+          <span class={spanCls}>
+            {#if isPrivate}
+              <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
+                <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+              </svg>
+              Private
+            {:else}
+              <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd" />
+              </svg>
+              Public
+            {/if}
+          </span>
         {/if}
       </div>
     </a>

package/dist/timeline/GroupItem.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import type { GroupTimelineType } from '../types';
+import type { HTMLLiAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
+    props: HTMLLiAttributes & {
         timelines: GroupTimelineType[];
         aClass?: string;
         imgClass?: string;

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HTMLLiAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
+    props: HTMLLiAttributes & {
         title?: string;
         date?: string;
         svgClass?: string;

package/dist/toolbar/Toolbar.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("../utils/Frame.svelte").FrameColor;
         rounded?: boolean;

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

@@ -21,10 +21,10 @@ declare const bgColors: {
     none: string;
 };
 import type { Action } from 'svelte/action';
-import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { HTMLAttributes } from 'svelte/elements';
 import { type TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
-    props: HTMLAnchorAttributes & {
+    props: HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: FrameColor;
         rounded?: boolean;

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("./Frame.svelte").FrameColor;
         rounded?: boolean;

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Dismissable } from '../types';
 import { type TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
+    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
         tag?: string;
         color?: import("./Frame.svelte").FrameColor;
         rounded?: boolean;

package/package.json

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