flowbite-svelte 0.44.18 → 0.44.20

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

@@ -15,8 +15,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CACtG"}

package/dist/alert/Alert.svelte

@@ -1,47 +1,29 @@
-<script>import { twMerge } from 'tailwind-merge';
-import { createEventDispatcher } from 'svelte';
+<script>import TransitionFrame from '../utils/TransitionFrame.svelte';
+import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
-import Frame from '../utils/Frame.svelte';
-import { fade } from 'svelte/transition';
 export let dismissable = false;
 export let defaultClass = 'p-4 gap-3 text-sm';
-let open = true;
-const dispatch = createEventDispatcher();
-$: dispatch(open ? 'open' : 'close');
-function close(e) {
-    e.stopPropagation();
-    open = false;
-}
 let divClass;
 $: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
-$: {
-    // set default values
-    $$restProps.color = $$restProps.color ?? 'primary';
-    $$restProps.rounded = $$restProps.rounded ?? true;
-    if (dismissable)
-        $$restProps.transition = $$restProps.transition ?? fade;
-}
 </script>
 
-{#if open}
-  <Frame {...$$restProps} class={divClass} role="alert">
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {/if}
+<TransitionFrame {dismissable} color="primary" role="alert" rounded {...$$restProps} class={divClass} on:close let:close>
+  {#if $$slots.icon}
+    <slot name="icon" />
+  {/if}
 
-    {#if $$slots.icon || dismissable}
-      <div><slot /></div>
-    {:else}
-      <slot />
-    {/if}
+  {#if $$slots.icon || dismissable}
+    <div><slot /></div>
+  {:else}
+    <slot />
+  {/if}
 
-    {#if dismissable}
-      <slot name="close-button" {close}>
-        <CloseButton class="ml-auto -mr-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
-      </slot>
-    {/if}
-  </Frame>
-{/if}
+  {#if dismissable}
+    <slot name="close-button" {close}>
+      <CloseButton class="ml-auto -mr-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+    </slot>
+  {/if}
+</TransitionFrame>
 
 <!--
 @component

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import type { Dismissable } from '../types';
 declare const __propDef: {
     props: import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string | undefined;
@@ -7,15 +6,19 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
         class?: string | undefined;
         role?: string | undefined;
-    } & Dismissable;
+    } & import("..").Dismissable & {
+        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
+        params?: any;
+    } & {
+        defaultClass?: string | undefined;
+    };
     events: {
+        close: CustomEvent<any>;
         click: MouseEvent;
         change: CustomEvent<any>;
         keydown: CustomEvent<any>;
@@ -31,7 +34,7 @@ declare const __propDef: {
         icon: {};
         default: {};
         'close-button': {
-            close: (e: MouseEvent) => void;
+            close: (ev: MouseEvent | undefined) => void;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/alert/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA2D9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAxCK,UAAU;;;CAwCyB,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/alert/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA6CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/badge/Badge.svelte

@@ -1,8 +1,6 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { twMerge, twJoin } from 'tailwind-merge';
+<script>import TransitionFrame from '../utils/TransitionFrame.svelte';
+import { twMerge } from 'tailwind-merge';
 import CloseButton from '../utils/CloseButton.svelte';
-import { fade } from 'svelte/transition';
-import Frame from '../utils/Frame.svelte';
 export let color = 'primary';
 export let large = false;
 export let dismissable = false;
@@ -59,29 +57,16 @@ const closeBtnColors = {
     pink: 'text-pink-400 hover:text-pink-900 dark:hover:bg-pink-800 dark:hover:text-pink-300',
     none: ''
 };
-$: {
-    if (dismissable)
-        $$restProps.transition = $$restProps.transition ?? fade;
-}
-let open = true;
-const dispatch = createEventDispatcher();
-$: dispatch(open ? 'open' : 'close');
-const close = (e) => {
-    e.stopPropagation();
-    open = false;
-};
 </script>
 
-{#if open}
-  <Frame {...$$restProps} class={badgeClass}>
-    <slot />
-    {#if dismissable}
-      <slot name="close-button" {close}>
-        <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ml-1.5 -mr-1.5" />
-      </slot>
-    {/if}
-  </Frame>
-{/if}
+<TransitionFrame {dismissable} {...$$restProps} class={badgeClass} let:close on:close>
+  <slot />
+  {#if dismissable}
+    <slot name="close-button" {close}>
+      <CloseButton {color} on:click={close} size={large ? 'sm' : 'xs'} name="Remove badge" class="ml-1.5 -mr-1.5" />
+    </slot>
+  {/if}
+</TransitionFrame>
 
 <!--
 @component

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import type { Dismissable } from '../types';
 declare const __propDef: {
     props: Omit<import("svelte/elements").HTMLAnchorAttributes & {
         tag?: string | undefined;
@@ -7,24 +6,27 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
         class?: string | undefined;
         role?: string | undefined;
-    }, "color"> & Dismissable & {
+    } & import("..").Dismissable & {
+        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
+        params?: any;
+    }, "color"> & {
         color?: "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "primary" | "none" | undefined;
         large?: boolean | undefined;
     };
     events: {
+        close: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
         'close-button': {
-            close: (e: MouseEvent) => void;
+            close: (ev: MouseEvent | undefined) => void;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/badge/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAMD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA0G9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;uBArBK,UAAU;;;CAqByB,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/badge/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA8FD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/buttons/Button.svelte

@@ -8,8 +8,10 @@ export let href = undefined;
 export let type = 'button';
 export let color = group ? (outline ? 'dark' : 'alternative') : 'primary';
 export let shadow = false;
+export let tag = 'button';
+export let checked = undefined;
 const colorClasses = {
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus:text-primary-700 dark:focus:text-white dark:hover:text-white',
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white',
     blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
     green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
@@ -20,16 +22,28 @@ const colorClasses = {
     yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 ',
     none: ''
 };
+const colorCheckedClasses = {
+    alternative: 'text-primary-700 border dark:text-primary-500 bg-gray-100 dark:bg-gray-700 border-gray-300 shadow-gray-300 dark:shadow-gray-800 shadow-inner',
+    blue: 'text-blue-900 bg-blue-400 dark:bg-blue-500 shadow-blue-700 dark:shadow-blue-800 shadow-inner',
+    dark: 'text-white bg-gray-500 dark:bg-gray-600 shadow-gray-800 dark:shadow-gray-900 shadow-inner',
+    green: 'text-green-900 bg-green-400 dark:bg-green-500 shadow-green-700 dark:shadow-green-800 shadow-inner',
+    light: 'text-gray-900 bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:text-gray-900 dark:border-gray-700 shadow-gray-300 dark:shadow-gray-700 shadow-inner',
+    primary: 'text-primary-900 bg-primary-400 dark:bg-primary-500 shadow-primary-700 dark:shadow-primary-800 shadow-inner',
+    purple: 'text-purple-900 bg-purple-400 dark:bg-purple-500 shadow-purple-700 dark:shadow-purple-800 shadow-inner',
+    red: 'text-red-900 bg-red-400 dark:bg-red-500 shadow-red-700 dark:shadow-red-800 shadow-inner',
+    yellow: 'text-yellow-900 bg-yellow-300 dark:bg-yellow-400 shadow-yellow-500 dark:shadow-yellow-700 shadow-inner',
+    none: ''
+};
 const coloredFocusClasses = {
-    alternative: 'focus:ring-gray-200 dark:focus:ring-gray-700',
-    blue: 'focus:ring-blue-300 dark:focus:ring-blue-800',
-    dark: 'focus:ring-gray-300 dark:focus:ring-gray-700',
-    green: 'focus:ring-green-300 dark:focus:ring-green-800',
-    light: 'focus:ring-gray-200 dark:focus:ring-gray-700',
-    primary: 'focus:ring-primary-300 dark:focus:ring-primary-800',
-    purple: 'focus:ring-purple-300 dark:focus:ring-purple-900',
-    red: 'focus:ring-red-300 dark:focus:ring-red-900',
-    yellow: 'focus:ring-yellow-300 dark:focus:ring-yellow-900',
+    alternative: 'focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
+    blue: 'focus-within:ring-blue-300 dark:focus-within:ring-blue-800',
+    dark: 'focus-within:ring-gray-300 dark:focus-within:ring-gray-700',
+    green: 'focus-within:ring-green-300 dark:focus-within:ring-green-800',
+    light: 'focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
+    primary: 'focus-within:ring-primary-300 dark:focus-within:ring-primary-800',
+    purple: 'focus-within:ring-purple-300 dark:focus-within:ring-purple-900',
+    red: 'focus-within:ring-red-300 dark:focus-within:ring-red-900',
+    yellow: 'focus-within:ring-yellow-300 dark:focus-within:ring-yellow-900',
     none: ''
 };
 const coloredShadowClasses = {
@@ -45,9 +59,9 @@ const coloredShadowClasses = {
     none: ''
 };
 const outlineClasses = {
-    alternative: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+    alternative: 'text-gray-900 dark:text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white focus-within:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus-within:ring-gray-800',
     blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
     green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
     light: 'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600',
     primary: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
@@ -65,12 +79,58 @@ const sizeClasses = {
 };
 const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
-$: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? '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-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: 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', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], 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-700'), 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 && 'border-l-0 first:border-l', group
+    ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg'
+    : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
-<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
-  <slot />
-</svelte:element>
+{#if href}
+  <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>
+    <slot />
+  </a>
+{:else if tag === 'button'}
+  <button
+    {type}
+    {...$$restProps}
+    class={buttonClass}
+    on:click
+    on:change
+    on:keydown
+    on:keyup
+    on:touchstart|passive
+    on:touchend
+    on:touchcancel
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </button>
+{:else}
+  <svelte:element this={tag} {...$$restProps} class={buttonClass}>
+    <slot />
+  </svelte:element>
+{/if}
 
 <!--
 @component
@@ -80,7 +140,9 @@ $: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'fo
 @prop export let outline: boolean = false;
 @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
 @prop export let href: string | undefined = undefined;
-@prop export let type: ButtonType = 'button';
+@prop export let type: HTMLButtonAttributes['type'] = 'button';
 @prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
 @prop export let shadow: boolean = false;
+@prop export let tag: string = 'button';
+@prop export let checked: boolean | undefined = undefined;
 -->

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ButtonType } from '../types';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,9 +7,11 @@ declare const __propDef: {
         outline?: boolean | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "md" | undefined;
         href?: string | undefined;
-        type?: ButtonType | undefined;
+        type?: HTMLButtonAttributes['type'];
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative" | undefined;
         shadow?: boolean | undefined;
+        tag?: string | undefined;
+        checked?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -38,9 +40,11 @@ export type ButtonSlots = typeof __propDef.slots;
  * @prop export let outline: boolean = false;
  * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
  * @prop export let href: string | undefined = undefined;
- * @prop export let type: ButtonType = 'button';
+ * @prop export let type: HTMLButtonAttributes['type'] = 'button';
  * @prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
  * @prop export let shadow: boolean = false;
+ * @prop export let tag: string = 'button';
+ * @prop export let checked: boolean | undefined = undefined;
  */
 export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA+F3C,QAAA,MAAM,SAAS;;;;;;eAD+L,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAClJ,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgK5D,QAAA,MAAM,SAAS;;;;;;eAD6N,MAAM,GAAG,SAAS;eAAS,oBAAoB,CAAC,MAAM,CAAC;;;;kBAAiE,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACzS,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

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

@@ -7,8 +7,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CAClF"}

package/dist/carousel/Carousel.svelte

@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import Controls from './Controls.svelte';
 import Indicators from './Indicators.svelte';
 import Slide from './Slide.svelte';
-import { canChangeSlide } from './Carousel';
+import { canChangeSlide } from './CarouselSlide';
 const SLIDE_DURATION_RATIO = 0.25; // TODO: Expose one day?
 export let images;
 export let index = 0;

package/dist/carousel/{Carousel.d.ts → CarouselSlide.d.ts}

@@ -3,4 +3,4 @@ export declare const canChangeSlide: ({ lastSlideChange, slideDuration, slideDur
     slideDuration: number;
     slideDurationRatio?: number | undefined;
 }) => boolean;
-//# sourceMappingURL=Carousel.d.ts.map
+//# sourceMappingURL=CarouselSlide.d.ts.map

package/dist/carousel/CarouselSlide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/CarouselSlide.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;qBAKR,IAAI;mBACN,MAAM;;aAStB,CAAC"}

package/dist/carousel/Controls.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import ControlButton from './ControlButton.svelte';
 import { twMerge } from 'tailwind-merge';
-import { canChangeSlide } from './Carousel';
+import { canChangeSlide } from './CarouselSlide';
 const state = getContext('state');
 const { update } = state;
 function changeSlide(forward) {

package/dist/datepicker/Datepicker.svelte

@@ -1,3 +1,6 @@
+<script context="module">"use strict";
+</script>
+
 <script>import Calendar from './Calender.svelte';
 export let range = false;
 // autoHide not working

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -1,4 +1,15 @@
 import { SvelteComponent } from "svelte";
+declare module 'svelte/elements' {
+    interface HTMLAttributes<T> {
+        [x: `data-${string}`]: any;
+        'date-rangepicker'?: boolean;
+        datepicker?: boolean;
+        'datepicker-buttons'?: boolean;
+        'datepicker-format'?: string;
+        'datepicker-orientation'?: string;
+        'datepicker-title'?: string;
+    }
+}
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/datepicker/Datepicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA8DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
+{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,OAAO,QAAQ,iBAAiB,CAAC;IAC/B,UAAU,cAAc,CAAC,CAAC;QACxB,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,GAAG,CAAC;QAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,wBAAwB,CAAC,EAAE,MAAM,CAAC;QAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;CACF;AAkEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}

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

@@ -9,8 +9,6 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;
-        transition?: ((node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig) | undefined;
-        params?: object | undefined;
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA+EJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/dropdown/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AA+EJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/footer/Footer.svelte

@@ -1,5 +1,5 @@
 <script>import { twMerge } from 'tailwind-merge';
-export let footerType = 'default';
+export let footerType = undefined;
 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);
 </script>
 
@@ -11,5 +11,5 @@ let footerClass = twMerge(footerType === 'sitemap' && 'bg-gray-800', footerType
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
+@prop export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' | undefined = undefined;
 -->

package/dist/footer/Footer.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        footerType?: "default" | "sitemap" | "logo" | "socialmedia" | undefined;
+        footerType?: 'sitemap' | 'default' | 'logo' | 'socialmedia' | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,7 +17,7 @@ export type FooterSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
+ * @prop export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' | undefined = undefined;
  */
 export default class Footer extends SvelteComponent<FooterProps, FooterEvents, FooterSlots> {
 }

package/dist/footer/Footer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAmBD,QAAA,MAAM,SAAS;;;qBAD2C,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS;;;;;;;;CACtC,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

package/dist/forms/CheckboxButton.svelte

@@ -0,0 +1,84 @@
+<script>import Button from '../buttons/Button.svelte';
+import { twMerge } from 'tailwind-merge';
+export let group = [];
+export let value = 'on';
+export let checked = undefined;
+export let inline = true;
+// Button properties forwarding
+export let pill = false;
+export let outline = false;
+export let size = undefined;
+export let color = undefined;
+export let shadow = false;
+// react on external group changes
+function init(_, _group) {
+    if (checked === undefined)
+        checked = _group.includes(value);
+    onChange();
+    return {
+        update(_group) {
+            checked = _group.includes(value);
+        }
+    };
+}
+function onChange() {
+    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
+    // This workaround is taken from:
+    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
+    const index = group.indexOf(value);
+    if (checked === undefined)
+        checked = index >= 0;
+    if (checked) {
+        if (index < 0) {
+            group.push(value);
+            group = group;
+        }
+    }
+    else {
+        if (index >= 0) {
+            group.splice(index, 1);
+            group = group;
+        }
+    }
+}
+let buttonClass;
+$: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
+</script>
+
+<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+  <input
+    use:init={group}
+    type="checkbox"
+    bind:checked
+    {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={onChange}
+    on:change />
+  <slot />
+</Button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let group: (string | number)[] = [];
+@prop export let value: string | number = 'on';
+@prop export let checked: boolean | undefined = undefined;
+@prop export let inline: boolean = true;
+@prop export let pill: boolean = false;
+@prop export let outline: boolean = false;
+@prop export let size: SizeType | undefined = undefined;
+@prop export let color: ButtonColorType | undefined = undefined;
+@prop export let shadow: boolean = false;
+-->