flowbite-svelte 0.22.13 → 0.22.16

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.22.16](https://github.com/themesberg/flowbite-svelte/compare/v0.22.15...v0.22.16) (2022-07-26)
+
+
+### Bug Fixes
+
+* cards/index.md, buttons ([9b2ca39](https://github.com/themesberg/flowbite-svelte/commit/9b2ca3914681439e667b5b6026f6c6e22b56b6fd))
+
+### [0.22.15](https://github.com/themesberg/flowbite-svelte/compare/v0.22.14...v0.22.15) (2022-07-26)
+
+
+### Features
+
+* cards - re-written ([1084f38](https://github.com/themesberg/flowbite-svelte/commit/1084f38514e4cac5662ae6b969dde27e829ea24e))
+* cards - re-written ([52716e0](https://github.com/themesberg/flowbite-svelte/commit/52716e08ac0f4446e3c7160fc3dc83e515201d7d))
+* cards - wip ([0948c89](https://github.com/themesberg/flowbite-svelte/commit/0948c89a124662b7c5c238350df341e0956dac8a))
+
+
+### Bug Fixes
+
+* cards layout on index.md pages ([2080f8e](https://github.com/themesberg/flowbite-svelte/commit/2080f8ee29163a8ad5208f37c95ebf498be92c39))
+
+### [0.22.14](https://github.com/themesberg/flowbite-svelte/compare/v0.22.13...v0.22.14) (2022-07-25)
+
+
+### Bug Fixes
+
+* $$restProps before $$props.class ([9378cf5](https://github.com/themesberg/flowbite-svelte/commit/9378cf5349446ec8355317e98e462e379350a697))
+* add padding to w-full ([e1008c9](https://github.com/themesberg/flowbite-svelte/commit/e1008c9620f18b42664059595ae3fe1e421e097b))
+* layout and Toc padding ([6a67345](https://github.com/themesberg/flowbite-svelte/commit/6a6734545429c7228a1bf3cbc58f7e4739dbfe65))
+* various minor fixes ([9ac3296](https://github.com/themesberg/flowbite-svelte/commit/9ac3296635db9e7af2a45cc928477ac15e831dc4))
+
 ### [0.22.13](https://github.com/themesberg/flowbite-svelte/compare/v0.22.12...v0.22.13) (2022-07-24)
 
 ### [0.22.12](https://github.com/themesberg/flowbite-svelte/compare/v0.22.11...v0.22.12) (2022-07-24)

package/badges/Badge.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
 export let color = 'blue';
 export let large = false;
-export let href;
+export let href = undefined;
 export let rounded = false;
 let badgeClass;
 const colors = {

package/badges/Badge.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         color?: Colors;
         large?: boolean;
-        href: string;
+        href?: string;
         rounded?: boolean;
     };
     events: {

package/buttons/Button.svelte

@@ -3,6 +3,7 @@ export let pill = false;
 export let outline = false;
 export let gradient = false;
 export let size = 'md';
+export let href = undefined;
 export let color = 'blue';
 export let shadow = null;
 const colorClasses = {
@@ -64,7 +65,13 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');
 </script>
 
-<button type="button" {...$$restProps} class={buttonClass} on:click>
+<svelte:element
+	this={href ? 'a' : 'button'}
+	type={href ? undefined : 'button'}
+	{...$$restProps}
+	class={buttonClass}
+	on:click
+>
 	{#if outline && gradient}
 		<!-- Trick to prentend outline without using border
 		This has a limitation of no supporting transparency as
@@ -73,4 +80,4 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
 	{:else}
 		<slot />
 	{/if}
-</button>
+</svelte:element>

package/buttons/Button.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         outline?: boolean;
         gradient?: boolean;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        href?: string;
         color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
         shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
     };

package/cards/Card.svelte

@@ -1,90 +1,32 @@
-<script>export let link = '';
-export let rel = '';
-export let alt = '';
-export let img = '';
-export let btnLabel = '';
-export let btnColor = 'blue';
-export let textdivClass = 'p-5';
-export let headerClass = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
-export let header = '';
-export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
-let buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white focus:ring-4 ';
-if (btnColor === 'gray') {
-    buttonClass +=
-        'bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnColor === 'red') {
-    buttonClass +=
-        'bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnColor === 'yellow') {
-    buttonClass +=
-        'bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnColor === 'green') {
-    buttonClass +=
-        'bg-green-700 rounded-lg hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnColor === 'indigo') {
-    buttonClass +=
-        'bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnColor === 'purple') {
-    buttonClass +=
-        'bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnColor === 'pink') {
-    buttonClass +=
-        'bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    buttonClass +=
-        'bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
+<script>import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let href = undefined;
+export let horizontal = false;
+export let reverse = false;
+export let img = undefined;
+export let padding = 'lg';
+setContext('background', true);
+const paddings = {
+    sm: 'p-4',
+    md: 'p-5',
+    lg: 'p-6',
+    xl: 'p-8'
+};
+let innerPdding;
+$: innerPdding = paddings[padding];
+let cardClass;
+$: cardClass = classNames('block max-w-sm', 'flex', reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 'bg-white dark:bg-gray-800 shadow-md', 'text-gray-500 dark:text-gray-400', 'rounded-lg border border-gray-200 dark:border-gray-700', href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
+let imgClass;
+$: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
 
-<div class={divClass} class:has-paragraph={$$slots.paragraph}>
+<svelte:element this={href ? 'a' : 'div'} {href} class={cardClass}>
 	{#if img}
-		{#if link}
-			<a href={link} {rel}>
-				<img class="rounded-t-lg" src={img} {alt} />
-			</a>
-		{:else}
-			<img class="rounded-t-lg" src={img} {alt} />
-		{/if}
+		<img class={imgClass} src={img} alt="" />
+		<div class={innerPdding}>
+			<slot />
+		</div>
+	{:else}
+		<div><slot /></div>
 	{/if}
-	<div class={textdivClass}>
-		{#if header}
-			{#if link}
-				<a href={link} {rel}>
-					<h3 class={headerClass}>
-						{header}
-					</h3>
-				</a>
-			{:else}
-				<h3 class={headerClass}>
-					{header}
-				</h3>
-			{/if}
-		{/if}
-		{#if $$slots.paragraph}
-			<slot name="paragraph" />
-		{/if}
-		{#if link && btnLabel}
-			<a href={link} {rel} class={buttonClass}>
-				{btnLabel}
-				<svg
-					class="ml-2 -mr-1 w-4 h-4"
-					fill="currentColor"
-					viewBox="0 0 20 20"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						fill-rule="evenodd"
-						d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</a>
-		{/if}
-	</div>
-</div>
+</svelte:element>

package/cards/Card.svelte.d.ts

@@ -1,23 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        link?: string;
-        rel?: string;
-        alt?: string;
+        [x: string]: any;
+        href?: string;
+        horizontal?: boolean;
+        reverse?: boolean;
         img?: string;
-        btnLabel?: string;
-        btnColor?: Colors;
-        textdivClass?: string;
-        headerClass?: string;
-        header?: string;
-        divClass?: string;
+        padding?: 'sm' | 'md' | 'lg';
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        paragraph: {};
+        default: {};
     };
 };
 export declare type CardProps = typeof __propDef.props;

package/cards/EcommerceCard.svelte

@@ -1,4 +1,7 @@
-<script>export let img;
+<script>import Badge from '../badges/Badge.svelte';
+import Rating from '../ratings/Rating.svelte';
+import Card from './Card.svelte';
+export let img;
 export let href = '/';
 export let btnColor = 'blue';
 export let rel = '';
@@ -7,86 +10,43 @@ export let stars = 0;
 export let price = '';
 export let btnText = '';
 export let headerClass = 'text-xl font-semibold tracking-tight text-gray-900 dark:text-white';
-export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
 export let priceClass = 'text-3xl font-bold text-gray-900 dark:text-white';
-let spanClass = 'text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ml-3 ';
+let spanClass = 'flex items-center text-xs font-semibold mr-2 py-0.5 rounded';
 let linkClass = 'text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
-if (btnColor === 'gray') {
-    spanClass += 'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-800';
-    linkClass +=
-        'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnColor === 'red') {
-    spanClass += 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-800';
-    linkClass +=
-        'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnColor === 'yellow') {
-    spanClass += 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-800';
-    linkClass +=
-        'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnColor === 'green') {
-    spanClass += 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-800';
-    linkClass +=
-        'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnColor === 'indigo') {
-    spanClass += 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-800';
-    linkClass +=
-        'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnColor === 'purple') {
-    spanClass += 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-800';
-    linkClass +=
-        'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnColor === 'pink') {
-    spanClass += 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-800';
-    linkClass +=
-        'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    spanClass += 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800';
-    linkClass +=
-        'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
+const linkColors = {
+    gray: 'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800',
+    red: 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800',
+    yellow: 'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800',
+    green: 'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
+    indigo: 'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800',
+    purple: 'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800',
+    pink: 'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800',
+    blue: 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
+};
 </script>
 
-<div class={divClass}>
+<Card padding="sm">
 	<a {href} {rel}>
-		<img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
+		<img class="p-3 rounded-t-lg" src={img.src} alt={img.alt} />
 	</a>
-	<div class="px-5 pb-5">
-		<a {href} {rel}>
-			<h3 class={headerClass}>
-				{title}
-			</h3>
-		</a>
-		<div class="flex items-center mt-2.5 mb-5">
-			{#if stars}
-				{#each { length: stars } as _, i}
-					<svg
-						class="w-5 h-5 text-yellow-300"
-						fill="currentColor"
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-						/></svg
-					>
-				{/each}
-				<span class={spanClass}>{stars}</span>
-			{/if}
-		</div>
-		<slot />
-		<div class="flex justify-between items-center">
-			{#if price}
-				<span class={priceClass}>{price}</span>
-			{/if}
-			{#if btnText}
-				<a {href} {rel} class={linkClass}>{btnText}</a>
-			{/if}
-		</div>
+
+	<a {href} {rel}>
+		<h3 class={headerClass}>
+			{title}
+		</h3>
+	</a>
+	{#if stars}
+		<Rating rating={stars} divClass={spanClass}>
+			<Badge slot="text" color={btnColor}>5</Badge>
+		</Rating>
+	{/if}
+	<slot />
+	<div class="flex justify-between items-center">
+		{#if price}
+			<span class={priceClass}>{price}</span>
+		{/if}
+		{#if btnText}
+			<a {href} {rel} class="{linkClass} {linkColors[btnColor]}">{btnText}</a>
+		{/if}
 	</div>
-</div>
+</Card>

package/cards/EcommerceCard.svelte.d.ts

@@ -11,7 +11,6 @@ declare const __propDef: {
         price?: string;
         btnText?: string;
         headerClass?: string;
-        divClass?: string;
         priceClass?: string;
     };
     events: {

package/cards/SignInCard.svelte

@@ -1,4 +1,9 @@
 <script>import Alert from '../alerts/Alert.svelte';
+import Button from '../buttons/Button.svelte';
+import Input from '../forms/Input.svelte';
+import Card from './Card.svelte';
+import Label from '../forms/Label.svelte';
+import Checkbox from '../forms/Checkbox.svelte';
 export let login;
 export let title = 'Sign in';
 export let btnSignInColor = 'blue';
@@ -8,60 +13,33 @@ export let lostPassword;
 let email;
 let password;
 let error;
-let submitClass = 'w-full text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
-if (btnSignInColor === 'blue') {
-    submitClass += 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-else if (btnSignInColor === 'gray') {
-    submitClass += 'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnSignInColor === 'red') {
-    submitClass += 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnSignInColor === 'yellow') {
-    submitClass += 'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnSignInColor === 'green') {
-    submitClass += 'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnSignInColor === 'indigo') {
-    submitClass += 'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnSignInColor === 'purple') {
-    submitClass += 'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnSignInColor === 'pink') {
-    submitClass += 'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    submitClass += 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
 </script>
 
-<div class="p-4 max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700">
-	<form class="space-y-6" on:submit|preventDefault={login}>
+<Card>
+	<form class="flex flex-col space-y-6" on:submit|preventDefault={login}>
 		<h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
-		<div>
-			<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email</label>
-			<input type="email" name="email" id="email" bind:value={email} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
-		</div>
-		<div>
-			<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label>
-			<input type="password" name="password" id="password" placeholder="••••••••" bind:value={password} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
-		</div>
+
+		<Label class="space-y-2">
+			<span>Email</span>
+			<Input type="email" name="email" bind:value={email} placeholder="name@company.com" required />
+		</Label>
+
+		<Label class="space-y-2">
+			<span>Your password</span>
+			<Input type="password" name="password" placeholder="•••••" bind:value={password} required />
+		</Label>
+
 		<div class="flex items-start">
 			{#if rememberMe}
-				<div class="flex items-start">
-					<div class="flex items-center h-5">
-						<input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" />
-					</div>
-					<div class="ml-3 text-sm">
-						<label for="remember" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
-					</div>
-				</div>
+				<Checkbox>Remember me</Checkbox>
 			{/if}
 			{#if lostPassword}
-				<a href={lostPassword.href} rel={lostPassword.rel} class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">{lostPassword.name}</a>
+				<a
+					href={lostPassword.href}
+					rel={lostPassword.rel}
+					class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
+					>{lostPassword.name}</a
+				>
 			{/if}
 		</div>
 		{#if error}
@@ -71,11 +49,15 @@ else {
 				</Alert>
 			</div>
 		{/if}
-		<button type="submit" class={submitClass}>Login to your account</button>
+		<Button type="submit" color={btnSignInColor} class="w-full1">Login to your account</Button>
 		{#if signup}
 			<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-				Not registered? <a href={signup.href} rel={signup.rel} class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a>
+				Not registered? <a
+					href={signup.href}
+					rel={signup.rel}
+					class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a
+				>
 			</div>
 		{/if}
 	</form>
-</div>
+</Card>

package/forms/Input.svelte

@@ -1,15 +1,18 @@
 <script>import classNames from 'classnames';
+import { getContext } from 'svelte';
 export let type = 'text';
 export let value = '';
 export let size = 'md';
 export let inputClass = 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg';
 export let color = 'base';
 const colorClasses = {
-    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
+    base: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
     green: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
     red: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500'
 };
 export let ref = null;
+// tinted if put in component having its own background
+let background = getContext('background');
 // you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;
@@ -25,6 +28,10 @@ function setType(node) {
 	class={classNames(
 		inputClass,
 		colorClasses[color],
+		color === 'base' &&
+			(background
+				? 'dark:bg-gray-600 dark:border-gray-500'
+				: 'dark:bg-gray-700 dark:border-gray-600'),
 		{
 			'p-2 sm:text-xs': size === 'sm',
 			'p-2.5 text-sm': size === 'md',

package/forms/Toggle.svelte

@@ -23,18 +23,10 @@ const sizes = {
     large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6'
 };
 let divClass;
-$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size]);
+$: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
 </script>
 
-<Checkbox
-	custom
-	class="relative {$$props.class}"
-	{value}
-	bind:checked
-	bind:group
-	{...$$restProps}
-	on:click
->
+<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click>
 	<div class={divClass} />
 	<slot />
 </Checkbox>

package/list-group/List.svelte

@@ -6,7 +6,7 @@ export let active = false;
 setContext('background', true);
 $: setContext('active', active);
 let groupClass;
-$: groupClass = classNames('rounded-lg border border-gray-200 dark:border-gray-600', 'divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
+$: groupClass = classNames('text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700', 'rounded-lg border border-gray-200 dark:border-gray-600', 'divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
 </script>
 
 <svelte:element this={active ? 'div' : 'ul'} class={groupClass}>

package/list-group/ListItem.svelte

@@ -8,7 +8,7 @@ export let href = '';
 let dispatch = createEventDispatcher();
 const states = {
     current: 'text-white bg-blue-700 dark:text-white dark:bg-gray-800',
-    normal: 'text-gray-900 bg-white dark:text-gray-200 dark:bg-gray-700',
+    normal: '',
     disabled: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400'
 };
 let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-gray-500 dark:focus:text-white';

package/megamenu/MegaMenu.svelte

@@ -12,18 +12,9 @@ function init(node) {
         node.parentElement.classList.add('inset-x-0');
     }
 }
-let wrapper;
-afterUpdate(() => {
-    if (wrapper) {
-        const width = wrapper.getBoundingClientRect();
-        // wrapper.style.marginLeft = '-50%';
-        // console.log('after', width);
-        // console.log(wrapper.clientWidth);
-    }
-});
 </script>
 
-<div class={wrapperClass} use:init bind:this={wrapper}>
+<div class={wrapperClass} use:init>
 	<div class="flex flex-col md:flex-row p-4 max-w-screen-xl justify-center mx-auto">
 		<ul class={ulClass}>
 			{#each items as item, index}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.13",
+  "version": "0.22.16",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -233,6 +233,7 @@
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
+    "./utils/OptsButton.svelte": "./utils/OptsButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/generateId": "./utils/generateId.js"
   },

package/utils/CloseButton.svelte

@@ -12,14 +12,14 @@ const colors = {
     default: 'focus:ring-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
 };
 let buttonClass = '';
-$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 h-8 w-8 focus:outline-none', colors[color], $$props.class);
+$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 focus:outline-none', colors[color], $$props.class);
 </script>
 
 <button on:click type="button" class={buttonClass} aria-label="Close">
 	<slot>
 		<span class="sr-only">Close</span>
-		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-			><path
+		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<path
 				fill-rule="evenodd"
 				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
 				clip-rule="evenodd"

package/utils/OptsButton.svelte

@@ -0,0 +1,18 @@
+<script>
+	import CloseButton from './CloseButton.svelte';
+</script>
+
+<CloseButton on:click {...$$props}>
+	<span class="sr-only">Open options</span>
+	<svg
+		class="w-6 h-6"
+		aria-hidden="true"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"
+		/>
+	</svg>
+</CloseButton>

package/utils/OptsButton.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  OptsButtonProps */
+/** @typedef {typeof __propDef.events}  OptsButtonEvents */
+/** @typedef {typeof __propDef.slots}  OptsButtonSlots */
+export default class OptsButton extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type OptsButtonProps = typeof __propDef.props;
+export type OptsButtonEvents = typeof __propDef.events;
+export type OptsButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};