flowbite-svelte 0.14.13 → 0.14.16

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.14.16](https://github.com/themesberg/flowbite-svelte/compare/v0.14.15...v0.14.16) (2022-04-24)
+
+
+### Features
+
+* update svelte to 3.47.0 ([2c51f1c](https://github.com/themesberg/flowbite-svelte/commit/2c51f1c21907f7a977249e3dfe7c2fe46dd85553))
+
+### [0.14.15](https://github.com/themesberg/flowbite-svelte/compare/v0.14.14...v0.14.15) (2022-04-23)
+
+
+### Features
+
+* add loop to carousel components ([0ae0d66](https://github.com/themesberg/flowbite-svelte/commit/0ae0d66aaf74c7b588978ce88ab7c5117ee4a4e2))
+
+### [0.14.14](https://github.com/themesberg/flowbite-svelte/compare/v0.14.13...v0.14.14) (2022-04-21)
+
+
+### Features
+
+* add Rating, AdvancedRating, and ScoreRating components ([8c91712](https://github.com/themesberg/flowbite-svelte/commit/8c91712d703364948b00c387a2b3f1d42be6159f))
+
 ### [0.14.13](https://github.com/themesberg/flowbite-svelte/compare/v0.14.12...v0.14.13) (2022-04-20)
 
 

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 Shinichi Okada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -1,5 +1,16 @@
 # FLOWBITE-SVELTE
 
+[![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
+[![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
+[![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
+[![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
+[![license](https://badgen.net/npm/license/themesberg/flowbite-svelte)](https://github.com/shinokada/svelte-feathericons/blob/main/LICENSE)
+
+
+
+
+
+
 [Flowbite-Svelte](https://flowbite-svelte.vercel.app/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
 
 ## Installation

package/accordions/AccordionDefault.svelte

@@ -1,4 +1,4 @@
-<script >import { onDestroy } from 'svelte';
+<script>import { onDestroy } from 'svelte';
 import { setContext } from 'svelte';
 import { createEventDispatcher } from 'svelte';
 import { writable } from 'svelte/store';

package/accordions/AccordionItem.svelte

@@ -1,4 +1,4 @@
-<script >import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import collapse from 'svelte-collapse';
 import { ChevronDownIconSolid, ChevronUpIconSolid } from '@codewithshin/svelte-heroicons';
 export let id = '';

package/alerts/Alert.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let color = 'blue';
 export let alertId = 'alert-1';

package/alerts/BorderAlert.svelte

@@ -1,4 +1,4 @@
-<script >export let color = 'blue';
+<script>export let color = 'blue';
 export let alertId = 'alert-border-1';
 export let closeBtn = false;
 let hidden = false;

package/alerts/InfoAlert.svelte

@@ -1,4 +1,4 @@
-<script >export let color = 'blue';
+<script>export let color = 'blue';
 export let alertId = 'alert-additional-content-1';
 export let infoLink = undefined;
 export let closeBtn = false;

package/auth/Confirm.svelte

@@ -1,4 +1,4 @@
-<script >import { Button, Alert, Spinner } from '../index';
+<script>import { Button, Alert, Spinner } from '../index';
 export let loginLink;
 export let success;
 export let error;

package/auth/ForgotPassword.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 export let forgot = undefined;
 export let email = '';
 export let error = '';

package/auth/Login.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 export let login = undefined;
 export let title = 'Sign in';
 export let btnSignInColor = 'blue';

package/auth/Register.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let register = undefined;

package/auth/Reset.svelte

@@ -1,4 +1,4 @@
-<script >import { Alert } from '../index';
+<script>import { Alert } from '../index';
 export let resetpw = undefined;
 export let password = '';
 export let email = '';

package/avatar/Avatar.svelte

@@ -1,4 +1,4 @@
-<script >export let avatar = {};
+<script>export let avatar = {};
 let isCircle = avatar.round ? 'rounded-full' : 'rounded';
 let isBorder = avatar.border ? 'p-1 ring-2 ring-gray-300 dark:ring-gray-500' : '';
 export let avatarClass = `w-${avatar.size} h-${avatar.size} ${isCircle} ${isBorder}`;

package/badges/Badge.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-xs';
+<script>export let textSize = 'text-xs';
 export let name = 'Read more';
 export let color = 'blue';
 let badgeClass;

package/badges/BadgeIcon.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-xs';
+<script>export let textSize = 'text-xs';
 export let name = '';
 export let color = 'blue';
 let badgeClass;

package/badges/BadgeLink.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-xs';
+<script>export let textSize = 'text-xs';
 export let name = 'Read more';
 export let color = 'blue';
 export let href = '/';

package/breadcrumbs/Breadcrumb.svelte

@@ -1,4 +1,4 @@
-<script >export let crumbs = [];
+<script>export let crumbs = [];
 export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 export let crumbClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
 export let solid = false;

package/buttongroups/ButtonGroup.svelte

@@ -1,4 +1,4 @@
-<script >export let buttons;
+<script>export let buttons;
 let btnLength = buttons.length;
 let classFirst = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
 let classMiddle = 'inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';

package/buttongroups/ButtonGroupOutline.svelte

@@ -1,4 +1,4 @@
-<script >export let buttons;
+<script>export let buttons;
 let btnLength = buttons.length;
 let classFirst = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent rounded-l-lg border border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
 let classMiddle = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent border-t border-b border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';

package/buttons/Button.svelte

@@ -1,4 +1,4 @@
-<script >export let rounded = false;
+<script>export let rounded = false;
 export let textSize = 'text-sm';
 export let name = 'Read more';
 export let btnColor = 'blue';

package/buttons/ColorShadowButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;

package/buttons/GradientDuotoneButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'purple2blue';
 export let name = 'Read more';
 let btnClass;

package/buttons/GradientMonochromeButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;

package/buttons/GradientOutlineButton.svelte

@@ -1,4 +1,4 @@
-<script >export let textSize = 'text-sm';
+<script>export let textSize = 'text-sm';
 export let color = 'purple2blue';
 export let name = 'Read more';
 export let type = 'button';

package/cards/Card.svelte

@@ -1,4 +1,4 @@
-<script >export let link = '';
+<script>export let link = '';
 export let rel = '';
 export let alt = '';
 export let img = '';

package/cards/CtaCard.svelte

@@ -1,4 +1,4 @@
-<script >import Button from '../buttons/Button.svelte';
+<script>import Button from '../buttons/Button.svelte';
 export let title = 'Work fast from anywhere';
 export let headColor = 'gray';
 export let btns;

package/cards/EcommerceCard.svelte

@@ -1,4 +1,4 @@
-<script >export let img;
+<script>export let img;
 export let href = '/';
 export let btnColor = 'blue';
 export let rel = '';

package/cards/HorizontalCard.svelte

@@ -1,4 +1,4 @@
-<script >export let link = '';
+<script>export let link = '';
 export let rel = '';
 export let img = '/images/image-4.jpeg';
 export let alt = '';

package/cards/InteractiveCard.svelte

@@ -1,4 +1,4 @@
-<script >let isOpen = true;
+<script>let isOpen = true;
 const toggleDropdown = () => {
     isOpen = !isOpen;
 };

package/cards/ListCard.svelte

@@ -1,4 +1,4 @@
-<script >export let lists;
+<script>export let lists;
 export let title = 'Latest Customers';
 export let action;
 export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';

package/cards/SignInCard.svelte

@@ -1,4 +1,4 @@
-<script >import Alert from '../alerts/Alert.svelte';
+<script>import Alert from '../alerts/Alert.svelte';
 export let login;
 export let title = 'Sign in';
 export let btnSignInColor = 'blue';

package/carousels/Caption.svelte

@@ -1,4 +1,4 @@
-<script >export let caption = '';
+<script>export let caption = '';
 export let captionClass = '';
 </script>
 

package/carousels/Carousel.svelte

@@ -1,4 +1,4 @@
-<script >import Slide from './Slide.svelte';
+<script>import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
 import Indicator from './Indicator.svelte';
@@ -7,6 +7,8 @@ export let showCaptions = true;
 export let showThumbs = true;
 export let images;
 export let slideControls = true;
+export let loop = false;
+export let duration = 2000;
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
@@ -37,6 +39,11 @@ const prevSlide = () => {
 };
 const goToSlide = (number) => (imageShowingIndex = number);
 let thumbWidth = 100 / images.length;
+if (loop) {
+    setInterval(() => {
+        nextSlide();
+    }, duration);
+}
 </script>
 
 <div id="default-carousel" class="relative">
@@ -47,64 +54,21 @@ let thumbWidth = 100 / images.length;
 		<!-- Slider indicators -->
 		<div class={indicatorDivClass}>
 			{#each images as { id, imgurl, name, attribution }}
-				<Indicator
-					{name}
-					selected={imageShowingIndex === id}
-					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+				<Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
 			{/each}
 		</div>
 	{/if}
 	{#if slideControls}
 		<!-- Slider controls -->
-		<button
-			on:click={prevSlide}
-			type="button"
-			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev
-		>
-			<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"
-			>
-				<svg
-					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-					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="M15 19l-7-7 7-7"
-					/></svg
-				>
+		<button on:click={prevSlide} type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
+			<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">
+				<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" 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="M15 19l-7-7 7-7" /></svg>
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
-		<button
-			on:click={nextSlide}
-			type="button"
-			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next
-		>
-			<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"
-			>
-				<svg
-					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-					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"
-					/></svg
-				>
+		<button on:click={nextSlide} type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
+			<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">
+				<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" 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" /></svg>
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -118,15 +82,7 @@ let thumbWidth = 100 / images.length;
 {#if showThumbs}
 	<div class="flex flex-row justify-center bg-gray-100">
 		{#each images as { id, imgurl, name, attribution }}
-			<Thumbnail
-				{thumbWidth}
-				thumbImg={imgurl}
-				altTag={name}
-				titleLink={attribution}
-				{id}
-				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+			<Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/Carousel.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         showThumbs?: boolean;
         images: any[];
         slideControls?: boolean;
+        loop?: boolean;
+        duration?: number;
         divClass?: string;
         indicatorDivClass?: string;
         captionClass?: string;

package/carousels/CarouselTransition.svelte

@@ -1,4 +1,4 @@
-<script >import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import { fade, blur, fly, slide } from 'svelte/transition';
 import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
@@ -10,6 +10,8 @@ export let images;
 export let slideControls = true;
 export let transitionType;
 export let transitionParams = {};
+export let loop = false;
+export let duration = 2000;
 // have a custom transition function that returns the desired transition
 function multiple(node, params) {
     switch (transitionType) {
@@ -53,6 +55,11 @@ const prevSlide = () => {
 };
 const goToSlide = (number) => (imageShowingIndex = number);
 let thumbWidth = 100 / images.length;
+if (loop) {
+    setInterval(() => {
+        nextSlide();
+    }, duration);
+}
 </script>
 
 <div id="default-carousel" class="relative">
@@ -70,64 +77,21 @@ let thumbWidth = 100 / images.length;
 		<!-- Slider indicators -->
 		<div class={indicatorDivClass}>
 			{#each images as { id, imgurl, name, attribution }}
-				<Indicator
-					{name}
-					selected={imageShowingIndex === id}
-					on:click={() => goToSlide(id)}
-					{indicatorClass}
-				/>
+				<Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} {indicatorClass} />
 			{/each}
 		</div>
 	{/if}
 	{#if slideControls}
 		<!-- Slider controls -->
-		<button
-			on:click={prevSlide}
-			type="button"
-			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev
-		>
-			<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"
-			>
-				<svg
-					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-					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="M15 19l-7-7 7-7"
-					/></svg
-				>
+		<button on:click={prevSlide} type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
+			<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">
+				<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" 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="M15 19l-7-7 7-7" /></svg>
 				<span class="hidden">Previous</span>
 			</span>
 		</button>
-		<button
-			on:click={nextSlide}
-			type="button"
-			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next
-		>
-			<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"
-			>
-				<svg
-					class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-					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"
-					/></svg
-				>
+		<button on:click={nextSlide} type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
+			<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">
+				<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300" 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" /></svg>
 				<span class="hidden">Next</span>
 			</span>
 		</button>
@@ -141,15 +105,7 @@ let thumbWidth = 100 / images.length;
 {#if showThumbs}
 	<div class="flex flex-row justify-center bg-gray-100">
 		{#each images as { id, imgurl, name, attribution }}
-			<Thumbnail
-				{thumbWidth}
-				thumbImg={imgurl}
-				altTag={name}
-				titleLink={attribution}
-				{id}
-				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)}
-			/>
+			<Thumbnail {thumbWidth} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
 		{/each}
 	</div>
 {/if}

package/carousels/CarouselTransition.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         slideControls?: boolean;
         transitionType: TransitionTypes;
         transitionParams?: TransitionParamTypes;
+        loop?: boolean;
+        duration?: number;
         divClass?: string;
         indicatorDivClass?: string;
         captionClass?: string;

package/carousels/Indicator.svelte

@@ -1,4 +1,4 @@
-<script >export let name = '';
+<script>export let name = '';
 export let selected = false;
 export let indicatorClass = '';
 </script>

package/carousels/Slide.svelte

@@ -1,4 +1,4 @@
-<script >export let image = '';
+<script>export let image = '';
 export let altTag = '';
 export let attr = '';
 export let slideClass = '';

package/carousels/Thumbnail.svelte

@@ -1,4 +1,4 @@
-<script >export let thumbImg = '';
+<script>export let thumbImg = '';
 export let altTag = '';
 export let titleLink = '';
 export let id;

package/darkmode/DarkMode.svelte

@@ -1,4 +1,4 @@
-<script >import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
 let mode;
 const toggleTheme = () => {

package/dropdowns/DropdownDefault.svelte

@@ -1,4 +1,4 @@
-<script >import { dropdownIdStore } from './dropdownStores';
+<script>import { dropdownIdStore } from './dropdownStores';
 import { get } from 'svelte/store';
 export let id = 'dropdown';
 export let label = 'Dropdown button';

package/dropdowns/ImgDropdown.svelte

@@ -1,4 +1,4 @@
-<script >let imgDropdownToggle = true;
+<script>let imgDropdownToggle = true;
 const handleToggle = () => {
     console.log('toggle clicked.');
     imgDropdownToggle = !imgDropdownToggle;

package/footer/LogoFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let footerClass = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
 export let divClass = 'sm:flex sm:items-center sm:justify-between';

package/footer/SimpleFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let footerClass = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
 export let siteNameClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';

package/footer/SitemapFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let socialMedia;
 export let footerClass = 'bg-white dark:bg-gray-800';

package/footer/SocialMediaFooter.svelte

@@ -1,4 +1,4 @@
-<script >export let site;
+<script>export let site;
 export let links;
 export let socialMedia;
 export let footerClass = 'p-4 bg-white sm:p-6 dark:bg-gray-800';

package/forms/Checkbox.svelte

@@ -1,4 +1,4 @@
-<script >export let legend = 'Checkbox variants';
+<script>export let legend = 'Checkbox variants';
 export let divClass = 'flex items-center mb-4';
 export let inputClass = 'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
 export let labelClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';

package/forms/Fileupload.svelte

@@ -1,4 +1,4 @@
-<script >export let value = '';
+<script>export let value = '';
 export let id = 'user_avatar';
 export let label = 'Upload file';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="user_avatar';

package/forms/FloatingLabelInput.svelte

@@ -1,4 +1,4 @@
-<script >import generateId from '../utils/generateId.js';
+<script>import generateId from '../utils/generateId.js';
 export let id = generateId();
 export let type;
 export let value = '';