flowbite-svelte 0.47.4 → 0.48.2

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

@@ -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;
@@ -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

@@ -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;
@@ -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/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/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,15 +104,15 @@ $: 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'}
   <label {...$$restProps} class={buttonClass}>
     <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>
+{: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>
 {:else}

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>;
     };

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);

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

@@ -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/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,8 +10,9 @@ 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-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 +22,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);
@@ -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;
 }
@@ -71,7 +72,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

@@ -12,6 +12,7 @@ declare const __propDef: {
         bottomOffset?: string;
         width?: string;
         backdrop?: boolean;
+        backdropClass?: string;
         bgColor?: string;
         bgOpacity?: string;
         placement?: "left" | "right" | "top" | "bottom";
@@ -45,7 +46,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.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;

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

@@ -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>
 

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>
 

package/dist/forms/InputAddon.svelte

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

package/dist/forms/MultiSelect.svelte

@@ -16,7 +16,7 @@ const sizes = {
   md: "px-3 py-1 min-h-[2.7rem]",
   lg: "px-4 py-2 min-h-[3.2rem]"
 };
-const multiSelectClass = "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-none";
+const multiSelectClass = "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden";
 let multiSelectDropdown;
 $: multiSelectDropdown = twMerge("absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full", dropdownClass);
 const itemsClass = "py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600";