flowbite-svelte 0.47.4 → 0.48.2

package/dist/forms/Radio.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>
 

package/dist/forms/Select.svelte

@@ -5,7 +5,7 @@ export let placeholder = "Choose option ...";
 export let underline = false;
 export let size = "md";
 export let defaultClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
-export let underlineClass = "text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer";
+export let underlineClass = "text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer";
 const common = "block w-full";
 const sizes = {
   sm: "text-sm p-2",
@@ -13,7 +13,7 @@ const sizes = {
   lg: "text-base py-3 px-4"
 };
 let selectClass;
-$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && "!px-0", $$props.class);
+$: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && "px-0!", $$props.class);
 </script>
 
 <select {...$$restProps} bind:value={value} class={selectClass} on:change on:contextmenu on:input>
@@ -39,5 +39,5 @@ $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, size
 @prop export let underline: $$Props['underline'] = false;
 @prop export let size: NonNullable<$$Props['size']> = 'md';
 @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
-@prop export let underlineClass: $$Props['underlineClass'] = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+@prop export let underlineClass: $$Props['underlineClass'] = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer';
 -->

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

@@ -34,7 +34,7 @@ export type SelectSlots = typeof __propDef.slots;
  * @prop export let underline: $$Props['underline'] = false;
  * @prop export let size: NonNullable<$$Props['size']> = 'md';
  * @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
- * @prop export let underlineClass: $$Props['underlineClass'] = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+ * @prop export let underlineClass: $$Props['underlineClass'] = 'text-gray-500 disabled:text-gray-400 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:disabled:text-gray-500 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer';
  */
 export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }

package/dist/forms/Textarea.svelte

@@ -2,7 +2,7 @@
 import { getContext } from "svelte";
 import Wrapper from "../utils/Wrapper.svelte";
 export let value = void 0;
-export let wrappedClass = "block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50";
+export let wrappedClass = "block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50";
 export let unWrappedClass = "p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50";
 export let innerWrappedClass = "py-2 px-4 bg-white dark:bg-gray-800";
 export let headerClass = "";
@@ -39,7 +39,7 @@ $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? "" : "rounded
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let value: $$Props['value'] = undefined;
-@prop export let wrappedClass: $$Props['wrappedClass'] = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+@prop export let wrappedClass: $$Props['wrappedClass'] = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
 @prop export let unWrappedClass: $$Props['unWrappedClass'] = 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
 @prop export let innerWrappedClass: $$Props['innerWrappedClass'] = 'py-2 px-4 bg-white dark:bg-gray-800';
 @prop export let headerClass: $$Props['headerClass'] = ''

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

@@ -39,7 +39,7 @@ export type TextareaSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let value: $$Props['value'] = undefined;
- * @prop export let wrappedClass: $$Props['wrappedClass'] = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+ * @prop export let wrappedClass: $$Props['wrappedClass'] = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
  * @prop export let unWrappedClass: $$Props['unWrappedClass'] = 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
  * @prop export let innerWrappedClass: $$Props['innerWrappedClass'] = 'py-2 px-4 bg-white dark:bg-gray-800';
  * @prop export let headerClass: $$Props['headerClass'] = ''

package/dist/forms/Toggle.svelte

@@ -9,7 +9,7 @@ export let customSize = "";
 export let classDiv = "";
 export let disabled = false;
 let background = getContext("background");
-const common = "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
+const common = "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
 const colors = {
   primary: "peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600",
   secondary: "peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600",

package/dist/indicators/Indicator.svelte

@@ -54,10 +54,10 @@ const offsets = {
   "bottom-right": "translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3"
 };
 let dotClass;
-$: dotClass = twMerge("flex-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);
+$: 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

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/list-group/ListgroupItem.svelte

@@ -7,7 +7,7 @@ export let href = "";
 export let currentClass = "text-white bg-primary-700 dark:text-white dark:bg-gray-800";
 export let normalClass = "";
 export let disabledClass = "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400";
-export let focusClass = "focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white";
+export let focusClass = "focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white";
 export let hoverClass = "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white";
 export let itemDefaultClass = "py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg";
 export let attrs = void 0;
@@ -47,7 +47,7 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === "dis
 @prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
 @prop export let normalClass: string = '';
 @prop export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
-@prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+@prop export let focusClass: string = 'focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
 @prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
 @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
 @prop export let attrs: any = undefined;

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

@@ -47,7 +47,7 @@ export type ListgroupItemSlots = typeof __propDef.slots;
  * @prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
  * @prop export let normalClass: string = '';
  * @prop export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
- * @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+ * @prop export let focusClass: string = 'focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
  * @prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
  * @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
  * @prop export let attrs: any = undefined;

package/dist/mega-menu/MegaMenu.svelte

@@ -5,13 +5,13 @@ export let full = false;
 export let open = false;
 export let ulClass = "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max";
 let wrapperClass;
-$: wrapperClass = twMerge(full && "border-y w-full !ml-0", $$props.class);
+$: wrapperClass = twMerge(full && "border-y w-full ml-0!", $$props.class);
 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={!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-screen-md justify-center mx-auto mt-2">
+<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>
+  <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}
         <li>

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

@@ -11,7 +11,7 @@ export let placement = "center";
 export let autoclose = false;
 export let outsideclose = false;
 export let dismissable = true;
-export let backdropClass = "fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80";
+export let backdropClass = "fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80";
 export let classBackdrop = void 0;
 export let dialogClass = "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex";
 export let classDialog = void 0;
@@ -141,7 +141,7 @@ $: footerCls = twMerge(footerClass, classFooter);
 @prop export let autoclose: $$Props['autoclose'] = false;
 @prop export let outsideclose: $$Props['outsideclose'] = false;
 @prop export let dismissable: $$Props['dismissable'] = true;
-@prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+@prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80';
 @prop export let classBackdrop: $$Props['classBackdrop'] = undefined;
 @prop export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
 @prop export let classDialog: $$Props['classDialog'] = undefined;

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;
@@ -60,7 +60,7 @@ export type ModalSlots = typeof __propDef.slots;
  * @prop export let autoclose: $$Props['autoclose'] = false;
  * @prop export let outsideclose: $$Props['outsideclose'] = false;
  * @prop export let dismissable: $$Props['dismissable'] = true;
- * @prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80';
  * @prop export let classBackdrop: $$Props['classBackdrop'] = undefined;
  * @prop export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
  * @prop export let classDialog: $$Props['classDialog'] = undefined;

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/NavLi.svelte

@@ -10,11 +10,27 @@ activeUrlStore.subscribe((value) => {
   navUrl = value;
 });
 $: active = navUrl ? href === navUrl : false;
-$: liClass = twMerge("block py-2 pe-4 ps-3 md:p-0 rounded md:border-0", active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+$: liClass = twMerge("block py-2 pe-4 ps-3 md:p-0 rounded-sm md:border-0", active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
 </script>
 
 <li>
-  <svelte:element this={href ? 'a' : 'div'} role={href ? undefined : 'link'} {href} {...$$restProps} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={liClass}>
+  <svelte:element
+    this={href ? 'a' : 'div'}
+    role={href ? 'link' : 'presentation'}
+    {href}
+    {...$$restProps}
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    class={liClass}
+  >
     <slot />
   </svelte:element>
 </li>

package/dist/navbar/NavUl.svelte

@@ -36,7 +36,7 @@ $: _ulClass = twMerge(ulClass, classUl);
     </Frame>
   </div>
 {:else}
-  <div {...$$restProps} class={_divClass} hidden={_hidden}>
+  <div {...$$restProps} class={_divClass} class:hidden={_hidden}>
     <ul class={_ulClass}>
       <slot />
     </ul>

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;
@@ -17,6 +17,7 @@ declare const __propDef: {
         params?: any;
     } & {
         fluid?: boolean;
+        navContainerClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/popover/Popover.svelte

@@ -3,7 +3,7 @@ export let title = "";
 export let defaultClass = "py-2 px-3";
 </script>
 
-<Popper activeContent border shadow rounded {...$$restProps} class="dark:!border-gray-600 {$$props.class}" on:show>
+<Popper activeContent border shadow rounded {...$$restProps} class="dark:border-gray-600! {$$props.class}" on:show>
   {#if $$slots.title || title}
     <div class="py-2 px-3 bg-gray-100 rounded-t-md border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
       <slot name="title">

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/rating/AdvancedRating.svelte

@@ -2,8 +2,8 @@
 export let ratings = [];
 export let divClass = "flex items-center mt-4";
 export let labelClass = "text-sm font-medium text-gray-600 dark:text-gray-500";
-export let ratingDivClass = "mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700";
-export let ratingClass = "h-5 bg-yellow-400 rounded";
+export let ratingDivClass = "mx-4 w-2/4 h-5 bg-gray-200 rounded-sm dark:bg-gray-700";
+export let ratingClass = "h-5 bg-yellow-400 rounded-sm";
 export let rightLabelClass = "text-sm font-medium text-gray-600 dark:text-gray-500";
 export let unit = "%";
 export let classDiv = "";
@@ -41,8 +41,8 @@ let rightLabelCls = twMerge(rightLabelClass, classRightLabel);
 @prop export let ratings: { label: string;
 @prop export let divClass: string = 'flex items-center mt-4';
 @prop export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
-@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
-@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded-sm dark:bg-gray-700';
+@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded-sm';
 @prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
 @prop export let unit: string = '%';
 @prop export let classDiv: string = '';

package/dist/rating/AdvancedRating.svelte.d.ts

@@ -34,8 +34,8 @@ export type AdvancedRatingSlots = typeof __propDef.slots;
  * @prop export let ratings: { label: string;
  * @prop export let divClass: string = 'flex items-center mt-4';
  * @prop export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
- * @prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
- * @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+ * @prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded-sm dark:bg-gray-700';
+ * @prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded-sm';
  * @prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
  * @prop export let unit: string = '%';
  * @prop export let classDiv: string = '';

package/dist/rating/Review.svelte

@@ -59,7 +59,7 @@ export let classLi = "";
           {review.title}
         </h4>
       </div>
-      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
+      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded-sm">
         {review.rating}
       </p>
     </div>

package/dist/rating/ScoreRating.svelte

@@ -1,12 +1,12 @@
 <script>export let ratings = [];
 export let ratings2 = [];
 export let headerLabel;
-export let desc1Class = "bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800";
+export let desc1Class = "bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-sm dark:bg-primary-200 dark:text-primary-800";
 export let desc2Class = "ms-2 w-24 font-medium text-gray-900 dark:text-white";
 export let desc3spanClass = "mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500";
 export let desc3pClass = "text-sm  w-24 font-medium text-gray-500 dark:text-gray-400";
 export let linkClass = "ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500";
-export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
+export let barColor = "bg-primary-600 h-2.5 rounded-sm dark:bg-primary-500";
 </script>
 
 <div class="flex items-center mb-5">
@@ -30,7 +30,7 @@ export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
       <dl>
         <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="w-full bg-gray-200 rounded-sm h-2.5 dark:bg-gray-700 me-2">
             <div class={barColor} style="width: {rating * 10}%"></div>
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
@@ -43,7 +43,7 @@ export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
       <dl>
         <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="w-full bg-gray-200 rounded-sm h-2.5 dark:bg-gray-700 me-2">
             <div class={barColor} style="width: {rating * 10}%"></div>
           </div>
           <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
@@ -60,10 +60,10 @@ export let barColor = "bg-primary-600 h-2.5 rounded dark:bg-primary-500";
 @prop export let ratings: $$Props['ratings'] = [];
 @prop export let ratings2: $$Props['ratings2'] = [];
 @prop export let headerLabel: $$Props['headerLabel'];
-@prop export let desc1Class: $$Props['desc1Class'] = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+@prop export let desc1Class: $$Props['desc1Class'] = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-sm dark:bg-primary-200 dark:text-primary-800';
 @prop export let desc2Class: $$Props['desc2Class'] = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
 @prop export let desc3spanClass: $$Props['desc3spanClass'] = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
 @prop export let desc3pClass: $$Props['desc3pClass'] = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
 @prop export let linkClass: $$Props['linkClass'] = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
-@prop export let barColor: $$Props['barColor'] = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+@prop export let barColor: $$Props['barColor'] = 'bg-primary-600 h-2.5 rounded-sm dark:bg-primary-500';
 -->

package/dist/rating/ScoreRating.svelte.d.ts

@@ -39,12 +39,12 @@ export type ScoreRatingSlots = typeof __propDef.slots;
  * @prop export let ratings: $$Props['ratings'] = [];
  * @prop export let ratings2: $$Props['ratings2'] = [];
  * @prop export let headerLabel: $$Props['headerLabel'];
- * @prop export let desc1Class: $$Props['desc1Class'] = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800';
+ * @prop export let desc1Class: $$Props['desc1Class'] = 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-sm dark:bg-primary-200 dark:text-primary-800';
  * @prop export let desc2Class: $$Props['desc2Class'] = 'ms-2 w-24 font-medium text-gray-900 dark:text-white';
  * @prop export let desc3spanClass: $$Props['desc3spanClass'] = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
  * @prop export let desc3pClass: $$Props['desc3pClass'] = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
  * @prop export let linkClass: $$Props['linkClass'] = 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
- * @prop export let barColor: $$Props['barColor'] = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+ * @prop export let barColor: $$Props['barColor'] = 'bg-primary-600 h-2.5 rounded-sm dark:bg-primary-500';
  */
 export default class ScoreRating extends SvelteComponentTyped<ScoreRatingProps, ScoreRatingEvents, ScoreRatingSlots> {
 }

package/dist/sidebar/SidebarCta.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from "tailwind-merge";
 export let divWrapperClass = "p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900";
 export let divClass = "flex items-center mb-3";
-export let spanClass = "bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900";
+export let spanClass = "bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-200 dark:text-primary-900";
 export let label = "";
 </script>
 
@@ -21,6 +21,6 @@ export let label = "";
 ## Props
 @prop export let divWrapperClass: $$Props['divWrapperClass'] = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
 @prop export let divClass: $$Props['divClass'] = 'flex items-center mb-3';
-@prop export let spanClass: $$Props['spanClass'] = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+@prop export let spanClass: $$Props['spanClass'] = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-200 dark:text-primary-900';
 @prop export let label: $$Props['label'] = '';
 -->

package/dist/sidebar/SidebarCta.svelte.d.ts

@@ -23,7 +23,7 @@ export type SidebarCtaSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let divWrapperClass: $$Props['divWrapperClass'] = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
  * @prop export let divClass: $$Props['divClass'] = 'flex items-center mb-3';
- * @prop export let spanClass: $$Props['spanClass'] = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+ * @prop export let spanClass: $$Props['spanClass'] = 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-200 dark:text-primary-900';
  * @prop export let label: $$Props['label'] = '';
  */
 export default class SidebarCta extends SvelteComponentTyped<SidebarCtaProps, SidebarCtaEvents, SidebarCtaSlots> {

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -9,7 +9,7 @@ export let transitionParams = {};
 export let isOpen = false;
 const multiple = (node, params) => {
   switch (transitionType) {
-    case "blur":
+    case "blur-sm":
       return blur(node, params);
     case "fly":
       return fly(node, params);

package/dist/sidebar/SidebarWrapper.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from "tailwind-merge";
-export let divClass = "overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800";
+export let divClass = "overflow-y-auto py-4 px-3 bg-gray-50 rounded-sm dark:bg-gray-800";
 </script>
 
 <div {...$$restProps} class={twMerge(divClass, $$props.class)}>
@@ -10,5 +10,5 @@ export let divClass = "overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
+@prop export let divClass: $$Props['divClass'] = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded-sm dark:bg-gray-800';
 -->

package/dist/sidebar/SidebarWrapper.svelte.d.ts

@@ -17,7 +17,7 @@ export type SidebarWrapperSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
+ * @prop export let divClass: $$Props['divClass'] = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded-sm dark:bg-gray-800';
  */
 export default class SidebarWrapper extends SvelteComponentTyped<SidebarWrapperProps, SidebarWrapperEvents, SidebarWrapperSlots> {
 }

package/dist/skeleton/CardPlaceholder.svelte

@@ -6,13 +6,13 @@ const sizes = {
   xl: "max-w-xl",
   xxl: "max-w-2xl"
 };
-export let divClass = "p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700";
+export let divClass = "p-4 rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700";
 export let size = "sm";
 $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>
-  <div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
+  <div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded-sm dark:bg-gray-700">
     <svg width="48" height="48" class="text-gray-200 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
       <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>
@@ -37,6 +37,6 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+@prop export let divClass: $$Props['divClass'] = 'p-4 rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700';
 @prop export let size: NonNullable<$$Props['size']> = 'sm';
 -->

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>;
@@ -15,7 +16,7 @@ export type CardPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+ * @prop export let divClass: $$Props['divClass'] = 'p-4 rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700';
  * @prop export let size: NonNullable<$$Props['size']> = 'sm';
  */
 export default class CardPlaceholder extends SvelteComponentTyped<CardPlaceholderProps, CardPlaceholderEvents, CardPlaceholderSlots> {

package/dist/skeleton/ImagePlaceholder.svelte

@@ -6,7 +6,7 @@ $: imgOnlyClass = imgOnly ? "max-w-60" : "";
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class, imgOnlyClass)}>
-  <div class="flex justify-center items-center w-full h-{imgHeight} bg-gray-300 rounded sm:w-96 {imgOnlyClass} dark:bg-gray-700">
+  <div class="flex justify-center items-center w-full h-{imgHeight} bg-gray-300 rounded-sm sm:w-96 {imgOnlyClass} dark:bg-gray-700">
     <svg width="48" height="48" class="text-gray-200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
       <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>

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

@@ -1,5 +1,5 @@
 <script>import { twMerge } from "tailwind-merge";
-export let divClass = "p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700";
+export let divClass = "p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700";
 </script>
 
 <div role="status" class={twMerge(divClass, $$props.class)}>
@@ -45,5 +45,5 @@ export let divClass = "p-4 space-y-4 max-w-md rounded border border-gray-200 div
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
+@prop export let divClass: $$Props['divClass'] = 'p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
 -->

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>;
@@ -14,7 +15,7 @@ export type ListPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
+ * @prop export let divClass: $$Props['divClass'] = 'p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
  */
 export default class ListPlaceholder extends SvelteComponentTyped<ListPlaceholderProps, ListPlaceholderEvents, ListPlaceholderSlots> {
 }