flowbite-svelte 0.47.3 → 0.48.1

package/dist/accordion/Accordion.svelte

@@ -7,7 +7,7 @@ import { setContext } from "svelte";
 export let multiple = false;
 export let flush = false;
 export let activeClass = "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800";
-export let inactiveClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800";
+export let inactiveClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800";
 export let defaultClass = "text-gray-500 dark:text-gray-400";
 export let classActive = "";
 export let classInactive = "";
@@ -33,7 +33,7 @@ $: frameClass = twMerge(defaultClass, $$props.class);
 @prop export let multiple: $$Props['multiple'] = false;
 @prop export let flush: $$Props['flush'] = false;
 @prop export let activeClass: $$Props['activeClass'] = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
-@prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+@prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
 @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
 @prop export let classActive: $$Props['classActive'] = '';
 @prop export let classInactive: $$Props['classInactive'] = '';

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

@@ -48,7 +48,7 @@ export type AccordionSlots = typeof __propDef.slots;
  * @prop export let multiple: $$Props['multiple'] = false;
  * @prop export let flush: $$Props['flush'] = false;
  * @prop export let activeClass: $$Props['activeClass'] = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
- * @prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+ * @prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
  * @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
  * @prop export let classActive: $$Props['classActive'] = '';
  * @prop export let classInactive: $$Props['classInactive'] = '';

package/dist/accordion/AccordionItem.svelte

@@ -23,7 +23,7 @@ let activeCls = twMerge(activeClass, classActive);
 let inactiveCls = twMerge(inactiveClass, classInactive);
 const multiple = (node, params) => {
   switch (transitionType) {
-    case "blur":
+    case "blur-sm":
       return blur(node, params);
     case "fly":
       return fly(node, params);

package/dist/avatar/Avatar.svelte

@@ -18,17 +18,17 @@ const sizes = {
   none: ""
 };
 let avatarClass;
-$: 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);
+$: 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);
 </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' : 'rounded-full'} />
+      <img {alt} {src} class={rounded ? 'rounded-sm' : 'rounded-full'} />
     {:else}
       <slot>
         <!-- default avatar placeholder -->
-        <svg class="w-full h-full {rounded ? 'rounded' : 'rounded-full'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <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">
           <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" : "rounded-full", border && "p-1 ri
 ## Props
 @prop export let src: $$Props['src'] = '';
 @prop export let href: $$Props['href'] = undefined;
-@prop export let rounded: $$Props['rounded'] = false;
+@prop export let rounded: $$Props['rounded-sm'] = 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'] = false;
+ * @prop export let rounded: $$Props['rounded-sm'] = 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", $$restProps.class);
+$: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? "rounded-full" : "rounded-sm", $$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'] = false;
+@prop export let rounded: $$Props['rounded-sm'] = 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'] = false;
+ * @prop export let rounded: $$Props['rounded-sm'] = false;
  * @prop export let transition: NonNullable<$$Props['transition']> = fade;
  * @prop export let params: $$Props['params'] = {};
  */

package/dist/banner/Banner.svelte

@@ -14,7 +14,7 @@ export let classInner = "";
 const divClasses = {
   default: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
   bottom: "bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50",
-  cta: "flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl start-1/2 top-6",
+  cta: "flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-xs lg:max-w-7xl start-1/2 top-6",
   signup: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
   info: "top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50"
 };
@@ -22,8 +22,8 @@ const insideDivClasses = {
   default: "items-center mx-auto",
   bottom: "items-center mx-auto",
   cta: "flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0",
-  signup: "items-center flex-shrink-0 w-full mx-auto sm:w-auto",
-  info: "items-center flex-shrink-0"
+  signup: "items-center shrink-0 w-full mx-auto sm:w-auto",
+  info: "items-center shrink-0"
 };
 $: divClass = twMerge(position, divClass, divClasses[bannerType], classDiv);
 $: div2Class = twMerge(innerClass, insideDivClasses[bannerType], classInner);

package/dist/button-group/ButtonGroup.svelte

@@ -1,7 +1,7 @@
 <script>import { setContext } from "svelte";
 import { twMerge } from "tailwind-merge";
 export let size = "md";
-export let divClass = "inline-flex rounded-lg shadow-sm";
+export let divClass = "inline-flex rounded-lg shadow-xs";
 setContext("group", { size });
 </script>
 
@@ -14,5 +14,5 @@ setContext("group", { size });
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let size: $$Props['size'] = 'md';
-@prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-sm';
+@prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-xs';
 -->

package/dist/button-group/ButtonGroup.svelte.d.ts

@@ -20,7 +20,7 @@ export type ButtonGroupSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let size: $$Props['size'] = 'md';
- * @prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-sm';
+ * @prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-xs';
  */
 export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
 }

package/dist/buttons/Button.svelte

@@ -84,7 +84,7 @@ $: buttonClass = twMerge(
   "text-center font-medium",
   group ? "focus-within:ring-2" : "focus-within:ring-4",
   group && "focus-within:z-10",
-  group || "focus-within:outline-none",
+  group || "focus-within:outline-hidden",
   "inline-flex items-center justify-center " + sizeClasses[size],
   outline && checked && "border dark:border-gray-900",
   outline && checked && colorCheckedClasses[color],
@@ -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 && "[&:not(:first-child)]:-ms-px",
+  hasBorder() && group && "not-first:-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],
@@ -104,7 +104,7 @@ $: buttonClass = twMerge(
 </script>
 
 {#if href && !disabled}
-  <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
+  <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave on:mouseup on:mousedown>
     <slot />
   </a>
 {:else if tag === 'label'}
@@ -112,7 +112,7 @@ $: buttonClass = twMerge(
     <slot />
   </label>
 {: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>
+  <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>
 {:else}
@@ -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'] = false;
+@prop export let shadow: $$Props['shadow-sm'] = 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

@@ -33,6 +33,8 @@ declare const __propDef: {
         touchcancel: TouchEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseup: MouseEvent;
+        mousedown: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -53,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'] = false;
+ * @prop export let shadow: $$Props['shadow-sm'] = 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

@@ -6,21 +6,21 @@ const group = getContext("group");
 export let color = "blue";
 export let shadow = false;
 const gradientClasses = {
-  blue: "text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ",
-  green: "text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800",
-  cyan: "text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800",
-  teal: "text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800",
-  lime: "text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800",
-  red: "text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800",
-  pink: "text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800",
-  purple: "text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800",
-  purpleToBlue: "text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800",
-  cyanToBlue: "text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800",
-  greenToBlue: "text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800",
-  purpleToPink: "text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800",
-  pinkToOrange: "text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800",
-  tealToLime: "text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700",
-  redToYellow: "text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400"
+  blue: "text-white bg-linear-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-linear-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ",
+  green: "text-white bg-linear-to-r from-green-400 via-green-500 to-green-600 hover:bg-linear-to-br focus:ring-green-300 dark:focus:ring-green-800",
+  cyan: "text-white bg-linear-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-linear-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800",
+  teal: "text-white bg-linear-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-linear-to-br focus:ring-teal-300 dark:focus:ring-teal-800",
+  lime: "text-gray-900 bg-linear-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-linear-to-br focus:ring-lime-300 dark:focus:ring-lime-800",
+  red: "text-white bg-linear-to-r from-red-400 via-red-500 to-red-600 hover:bg-linear-to-br focus:ring-red-300 dark:focus:ring-red-800",
+  pink: "text-white bg-linear-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-linear-to-br focus:ring-pink-300 dark:focus:ring-pink-800",
+  purple: "text-white bg-linear-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-linear-to-br focus:ring-purple-300 dark:focus:ring-purple-800",
+  purpleToBlue: "text-white bg-linear-to-br from-purple-600 to-blue-500 hover:bg-linear-to-bl focus:ring-blue-300 dark:focus:ring-blue-800",
+  cyanToBlue: "text-white bg-linear-to-r from-cyan-500 to-blue-500 hover:bg-linear-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800",
+  greenToBlue: "text-white bg-linear-to-br from-green-400 to-blue-600 hover:bg-linear-to-bl focus:ring-green-200 dark:focus:ring-green-800",
+  purpleToPink: "text-white bg-linear-to-r from-purple-500 to-pink-500 hover:bg-linear-to-l focus:ring-purple-200 dark:focus:ring-purple-800",
+  pinkToOrange: "text-white bg-linear-to-br from-pink-500 to-orange-400 hover:bg-linear-to-bl focus:ring-pink-200 dark:focus:ring-pink-800",
+  tealToLime: "text-gray-900 bg-linear-to-r from-teal-200 to-lime-200 hover:bg-linear-to-l focus:ring-lime-200 dark:focus:ring-teal-700",
+  redToYellow: "text-gray-900 bg-linear-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-linear-to-bl focus:ring-red-100 dark:focus:ring-red-400"
 };
 const coloredShadowClasses = {
   blue: "shadow-blue-500/50 dark:shadow-blue-800/80",
@@ -41,12 +41,12 @@ const coloredShadowClasses = {
 };
 let gradientOutlineClass;
 $: gradientOutlineClass = twMerge(
-  "inline-flex items-center justify-center w-full  !border-0",
-  $$props.pill || "!rounded-md",
-  "bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white",
+  "inline-flex items-center justify-center w-full  border-0!",
+  $$props.pill || "rounded-md!",
+  "bg-white text-gray-900! dark:bg-gray-900 dark:text-white!",
   // this is limitation - no transparency
-  "hover:bg-transparent hover:!text-inherit",
-  "transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit"
+  "hover:bg-transparent hover:text-inherit!",
+  "transition-all duration-75 ease-in group-hover:bg-black/0! group-hover:text-inherit!"
 );
 let divClass;
 $: divClass = twMerge($$props.outline && "p-0.5", gradientClasses[color], shadow && "shadow-lg", shadow && coloredShadowClasses[color], group ? $$props.pill && "first:rounded-s-full last:rounded-e-full" || "first:rounded-s-lg last:rounded-e-lg" : $$props.pill && "rounded-full" || "rounded-lg", $$props.class);
@@ -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'] = false;
+@prop export let shadow: $$Props['shadow-sm'] = 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'] = false;
+ * @prop export let shadow: $$Props['shadow-sm'] = false;
  */
 export default class GradientButton extends SvelteComponentTyped<GradientButtonProps, GradientButtonEvents, GradientButtonSlots> {
 }

package/dist/cards/Card.svelte

@@ -21,7 +21,7 @@ const sizes = {
   sm: "max-w-sm",
   md: "max-w-xl",
   lg: "max-w-2xl",
-  xl: "max-w-screen-xl"
+  xl: "max-w-(--breakpoint-xl)"
 };
 let innerPadding;
 $: innerPadding = paddings[padding];

package/dist/carousel/ControlButton.svelte

@@ -2,12 +2,12 @@
 export let forward;
 export let name;
 let buttonCls;
-$: buttonCls = twMerge("flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-none text-white dark:text-gray-300", forward ? "end-0" : "start-0", $$props.class);
+$: buttonCls = twMerge("flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300", forward ? "end-0" : "start-0", $$props.class);
 </script>
 
 <button on:click type="button" class={buttonCls}>
   <slot>
-    <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
+    <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-hidden">
       {#if forward}
         <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />

package/dist/carousel/Slide.svelte

@@ -18,7 +18,7 @@ $: transitionSlideOut = {
   height: "100%",
   duration: $state.slideDuration
 };
-$: imgClass = twMerge("absolute block !w-full h-full object-cover", $$props.class);
+$: imgClass = twMerge("absolute block w-full! h-full object-cover", $$props.class);
 </script>
 
 {#if transition}

package/dist/charts/Chart.svelte

@@ -1,6 +1,7 @@
 <script>import { onMount } from "svelte";
 export let options;
-let chart;
+export let chart = void 0;
+let chartElement;
 function initChart(node, options2) {
   async function asyncInitChart() {
     const ApexChartsModule = await import("apexcharts");
@@ -25,11 +26,12 @@ onMount(() => {
 });
 </script>
 
-<div use:initChart={options} class={$$props.class}></div>
+<div use:initChart={options} bind:this={chartElement} class={$$props.class}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let options: ApexOptions;
+@prop export let chart: ApexCharts | undefined = undefined;
 -->

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

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
 declare const __propDef: {
     props: {
         options: ApexOptions;
         class?: string;
+        chart?: ApexCharts;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +19,7 @@ export type ChartSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let options: ApexOptions;
+ * @prop export let chart: ApexCharts | undefined = undefined;
  */
 export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
 }

package/dist/darkmode/DarkMode.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from "tailwind-merge";
-export let btnClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5";
+export let btnClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5";
 export let size = "md";
 export let ariaLabel = "Dark mode";
 const sizes = {
@@ -52,7 +52,7 @@ const toggleTheme = (ev) => {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnClass: $$Props['btnClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
+@prop export let btnClass: $$Props['btnClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5';
 @prop export let size: NonNullable<$$Props['size']> = 'md';
 @prop export let ariaLabel: $$Props['ariaLabel'] = 'Dark mode';
 -->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -20,7 +20,7 @@ export type DarkModeSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnClass: $$Props['btnClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5';
+ * @prop export let btnClass: $$Props['btnClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5';
  * @prop export let size: NonNullable<$$Props['size']> = 'md';
  * @prop export let ariaLabel: $$Props['ariaLabel'] = 'Dark mode';
  */

package/dist/datepicker/Datepicker.svelte

@@ -80,7 +80,7 @@ function getDaysInMonth(date) {
   let start = firstDay.getDay() - firstDayOfWeek;
   if (start < 0) start += 7;
   for (let i = 0; i < start; i++) {
-    daysArray.push(new Date(year, month, -i));
+    daysArray.unshift(new Date(year, month, -i));
   }
   for (let i = 1; i <= lastDay.getDate(); i++) {
     daysArray.push(new Date(year, month, i));
@@ -216,8 +216,8 @@ function handleApply() {
 <div bind:this={datepickerContainerElement} class="relative {inline ? 'inline-block' : ''}">
   {#if !inline}
     <div class="relative">
-      <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
-      <button type="button" class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none" on:click={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? 'Close date picker' : 'Open date picker'}>
+      <input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-hidden dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
+      <button type="button" class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-hidden" on:click={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? 'Close date picker' : 'Open date picker'}>
         <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
           <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
         </svg>

package/dist/drawer/Drawer.svelte

@@ -11,7 +11,7 @@ export let bottomOffset = "inset-x-0 bottom-0";
 export let width = "w-80";
 export let backdrop = true;
 export let bgColor = "bg-gray-900";
-export let bgOpacity = "bg-opacity-75";
+export let bgOpacity = "bg-black/75";
 export let placement = "left";
 export let id = "drawer-example";
 export let divClass = "overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800";
@@ -21,7 +21,7 @@ function multiple(node, params) {
   switch (transitionType) {
     case "slide":
       return slide(node, params);
-    case "blur":
+    case "blur-sm":
       return blur(node, params);
     case "fade":
       return fade(node, params);
@@ -71,7 +71,7 @@ function clickOutsideWrapper(node, callback) {
 @prop export let width: $$Props['width'] = 'w-80';
 @prop export let backdrop: $$Props['backdrop'] = true;
 @prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
-@prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-opacity-75';
+@prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-black/75';
 @prop export let placement: NonNullable<$$Props['placement']> = 'left';
 @prop export let id: $$Props['id'] = 'drawer-example';
 @prop export let divClass: $$Props['divClass'] = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';

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

@@ -45,7 +45,7 @@ export type DrawerSlots = typeof __propDef.slots;
  * @prop export let width: $$Props['width'] = 'w-80';
  * @prop export let backdrop: $$Props['backdrop'] = true;
  * @prop export let bgColor: $$Props['bgColor'] = 'bg-gray-900';
- * @prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-opacity-75';
+ * @prop export let bgOpacity: $$Props['bgOpacity'] = 'bg-black/75';
  * @prop export let placement: NonNullable<$$Props['placement']> = 'left';
  * @prop export let id: $$Props['id'] = 'drawer-example';
  * @prop export let divClass: $$Props['divClass'] = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';

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'] = true;
-@prop export let rounded: $$Props['rounded'] = true;
+@prop export let shadow: $$Props['shadow-sm'] = true;
+@prop export let rounded: $$Props['rounded-sm'] = true;
 -->

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

@@ -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'] = true;
- * @prop export let rounded: $$Props['rounded'] = true;
+ * @prop export let shadow: $$Props['shadow-sm'] = true;
+ * @prop export let rounded: $$Props['rounded-sm'] = true;
  */
 export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
 }

package/dist/footer/Footer.svelte

@@ -1,6 +1,6 @@
 <script>import { twMerge } from "tailwind-merge";
 export let footerType = void 0;
-let footerClass = twMerge(footerType === "sitemap" && "bg-gray-800", footerType === "socialmedia" && "p-4 bg-white sm:p-6 dark:bg-gray-800", footerType === "logo" && "p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800", footerType === "default" && "p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800", $$props.class);
+let footerClass = twMerge(footerType === "sitemap" && "bg-gray-800", footerType === "socialmedia" && "p-4 bg-white sm:p-6 dark:bg-gray-800", footerType === "logo" && "p-4 bg-white rounded-lg shadow-sm md:px-6 md:py-8 dark:bg-gray-800", footerType === "default" && "p-4 bg-white rounded-lg shadow-sm md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800", $$props.class);
 </script>
 
 <footer {...$$restProps} class={footerClass}>

package/dist/forms/CheckboxButton.svelte

@@ -74,5 +74,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'] = false;
+@prop export let shadow: $$Props['shadow-sm'] = 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'] = false;
+ * @prop export let shadow: $$Props['shadow-sm'] = false;
  */
 export default class CheckboxButton extends SvelteComponentTyped<CheckboxButtonProps, CheckboxButtonEvents, CheckboxButtonSlots> {
 }

package/dist/forms/Fileupload.svelte

@@ -2,10 +2,10 @@
 import Input from "./Input.svelte";
 import { CloseButton } from "..";
 export let files = void 0;
-export let inputClass = "border !p-0 dark:text-gray-400";
+export let inputClass = "border p-0! dark:text-gray-400";
 export let clearable = false;
 export let size = "md";
-const base = "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border !p-0 dark:text-gray-400";
+const base = "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border p-0! dark:text-gray-400";
 const wrapper = "relative w-full";
 const right = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5";
 const sizes = {
@@ -42,7 +42,7 @@ let inputCls = twMerge(base, sizes[size ?? "md"], inputClass);
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let files: $$Props['files'] = undefined;
-@prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
+@prop export let inputClass: $$Props['inputClass'] = 'border p-0! dark:text-gray-400';
 @prop export let clearable: $$Props['clearable'] = false;
 @prop export let size: $$Props['size'] = 'md';
 -->

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

@@ -40,7 +40,7 @@ export type FileuploadSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let files: $$Props['files'] = undefined;
- * @prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
+ * @prop export let inputClass: $$Props['inputClass'] = 'border p-0! dark:text-gray-400';
  * @prop export let clearable: $$Props['clearable'] = false;
  * @prop export let size: $$Props['size'] = 'md';
  */

package/dist/forms/FloatingLabelInput.svelte

@@ -43,9 +43,9 @@ const labelSizes = {
   }
 };
 const inputClasses = {
-  filled: "block rounded-t-lg w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-none focus:ring-0 peer",
-  outlined: "block w-full text-sm text-gray-900 bg-transparent rounded-lg border appearance-none dark:text-white  focus:outline-none focus:ring-0 peer",
-  standard: "block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer"
+  filled: "block rounded-t-lg w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-hidden focus:ring-0 peer",
+  outlined: "block w-full text-sm text-gray-900 bg-transparent rounded-lg border appearance-none dark:text-white  focus:outline-hidden focus:ring-0 peer",
+  standard: "block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-hidden focus:ring-0 peer"
 };
 const labelClasses = {
   filled: "absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-left rtl:origin-right start-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4",
@@ -58,7 +58,7 @@ const inputColorClasses = {
   red: "border-red-600 dark:border-red-500 dark:focus:border-red-500  focus:border-red-600"
 };
 const labelColorClasses = {
-  base: "text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500",
+  base: "text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 dark:peer-focus:text-primary-500",
   green: "text-green-600 dark:text-green-500",
   red: "text-red-600 dark:text-red-500"
 };

package/dist/forms/Input.svelte

@@ -44,7 +44,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] || (clearable || $$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]);
+  inputClass = twMerge([defaultClass, inputPadding[_size], $$slots.left && leftPadding[_size] || (clearable || $$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:-ms-px", $$props.class]);
 }
 const clearAll = (e) => {
   e.stopPropagation();
@@ -53,7 +53,7 @@ const clearAll = (e) => {
 };
 </script>
 
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
+<Wrapper class="relative w-full" 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" />
@@ -68,7 +68,7 @@ const clearAll = (e) => {
   </div>
   {/if}
   {#if clearable && value && `${value}`.length > 0}
-    <CloseButton {size} on:click={clearAll} color="none" class=" {twMerge(floatClass, classRight)} focus:ring-0 end-6 focus:ring-gray-400 dark:text-white" />
+    <CloseButton {size} on:click={clearAll} color="none" class=" {twMerge(floatClass, classRight)} focus:ring-0 end-1 focus:ring-gray-400 dark:text-white" />
   {/if}
 </Wrapper>