flowbite-svelte 0.13.8 → 0.14.1

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 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.1](https://github.com/shinokada/flowbite-svelte/compare/v0.13.10...v0.14.1) (2022-04-18)
+
+
+### Features
+
+* add ImgDropdown ([30e9d01](https://github.com/shinokada/flowbite-svelte/commit/30e9d01dcd51559f6771ebaeef57100cf198c452))
+
+### [0.13.10](https://github.com/shinokada/flowbite-svelte/compare/v0.13.9...v0.13.10) (2022-04-16)
+
+
+### Bug Fixes
+
+* add a space in front of from /index ([32beb0e](https://github.com/shinokada/flowbite-svelte/commit/32beb0e9d3fd7c9c92e34ccc8d690a9f8361c780))
+* add Breadcrumb to md files ([6ea1d24](https://github.com/shinokada/flowbite-svelte/commit/6ea1d246ef2ed47f87ec764634fad6729700d286))
+* add btnLabel=Read more ([0730167](https://github.com/shinokada/flowbite-svelte/commit/073016733d50fddc70e78e38520eabf0a912236c))
+* update h1 for breadcrumb ([8bfef6a](https://github.com/shinokada/flowbite-svelte/commit/8bfef6a93f69dbbf4fb667ba0d177059181b6cdb))
+* update h1 in index pages ([e4d1a52](https://github.com/shinokada/flowbite-svelte/commit/e4d1a5284c5ce5f1d981e377263f97c2a2d00485))
+* update layouts for breadcrumb ([1c07955](https://github.com/shinokada/flowbite-svelte/commit/1c07955215fe7a48e3e5573c5c657d59978b5fe4))
+
+### [0.13.9](https://github.com/shinokada/flowbite-svelte/compare/v0.13.8...v0.13.9) (2022-04-16)
+
+
+### Features
+
+* add focus on load to Input component ([5d0c7fb](https://github.com/shinokada/flowbite-svelte/commit/5d0c7fb7750aac2dc0df2ddd24a7c11cd66404c6))
+
+
+### Bug Fixes
+
+* add 100% to pre tag ([3c8eaf2](https://github.com/shinokada/flowbite-svelte/commit/3c8eaf257697c48121cc79496885e05309b302bc))
+* Input padding uses p-4, p-2.5 and p-2 depends on the size ([632bd5d](https://github.com/shinokada/flowbite-svelte/commit/632bd5d550b0268a93eec91598b35a854a45c081))
+* logo ([c28e9f3](https://github.com/shinokada/flowbite-svelte/commit/c28e9f3683140e1bb12f4667e26e5d7805d4ddb9))
+* moved p-tag and h3 tag css to app.css ([cb3d08e](https://github.com/shinokada/flowbite-svelte/commit/cb3d08edb98d96cadad9975e20488af55f4fa344))
+* refresh dev environment ([3a1b452](https://github.com/shinokada/flowbite-svelte/commit/3a1b452f925e14b2d159456c8f1f50b2972ae52b))
+* update carousel page ([27c621b](https://github.com/shinokada/flowbite-svelte/commit/27c621b5f7a97896635ddbc2aa9cccf624275e80))
+* update main nav. add transition to carousel ([3a9f572](https://github.com/shinokada/flowbite-svelte/commit/3a9f5723af8f54ef58c6902af5599114cc81fb86))
+
 ### [0.13.8](https://github.com/shinokada/flowbite-svelte/compare/v0.13.7...v0.13.8) (2022-04-14)
 
 

package/README.md

@@ -31,6 +31,10 @@
 - [Icon badge](https://flowbite-svelte.vercel.app/badges/badge-icon)
 - [Link badge](https://flowbite-svelte.vercel.app/badges/badge-link)
 
+## Breadcrumb components
+
+- [Breadcrumb](https://flowbite-svelte.vercel.app/breadcrumbs)
+
 ## Button group compnents
 
 - [Default button group](https://flowbite-svelte.vercel.app/button-groups/default)
@@ -57,13 +61,18 @@
 - [List Card](https://flowbite-svelte.vercel.app/cards/list)
 - [Signin Card](https://flowbite-svelte.vercel.app/cards/signin)
 
+## Carousel components
+
+- [Carousel](https://flowbite-svelte.vercel.app/carousels)
+
 ## Dark mode components
 
 - [Dark mode](https://flowbite-svelte.vercel.app/darkmode)
 
 ## Dropdown components
 
-- [Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
+- [Dropdown](https://flowbite-svelte.vercel.app/dropdowns/default)
+- [Dropdown with Image](https://flowbite-svelte.vercel.app/dropdowns/image)
 
 ## Form components
 
@@ -150,4 +159,13 @@ Run:
 
 ```sh
 npm run test
-```
+```
+
+## Create props
+
+```sh
+cd scripts
+node createProps.js
+```
+
+This will pull all props from components and replace files in `/src/routes/props` directory.

package/breadcrumbs/Breadcrumb.svelte

@@ -0,0 +1,49 @@
+<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;
+let navClass = 'flex';
+if (solid) {
+    navClass =
+        'flex py-3 px-5 text-gray-700 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+}
+</script>
+
+<nav class={navClass} aria-label="Breadcrumb">
+	<ol class="inline-flex items-center space-x-1 md:space-x-3">
+		{#each crumbs as crumb}
+			{#if crumb.href === '/'}
+				<li class="inline-flex items-center">
+					<a href={crumb.href} class={homeClass}>
+						<svg
+							class="mr-2 w-4 h-4"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+							/></svg
+						>
+						{crumb.label}</a
+					>
+				</li>
+			{:else}
+				<li>
+					<div class="flex items-center">
+						<svg
+							class="w-6 h-6 text-gray-400"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								fill-rule="evenodd"
+								d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+								clip-rule="evenodd"
+							/></svg
+						><a href={crumb.href} class={crumbClass}>{crumb.label}</a>
+					</div>
+				</li>
+			{/if}
+		{/each}
+	</ol>
+</nav>

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CrumbType } from '../types';
+declare const __propDef: {
+    props: {
+        crumbs?: CrumbType[];
+        homeClass?: string;
+        crumbClass?: string;
+        solid?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BreadcrumbProps = typeof __propDef.props;
+export declare type BreadcrumbEvents = typeof __propDef.events;
+export declare type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};

package/cards/Card.svelte

@@ -2,40 +2,48 @@
 export let rel = '';
 export let alt = '';
 export let img = '';
-export let btnLabel = 'Read more';
+export let btnLabel = '';
 export let btnColor = 'blue';
 export let textdivClass = 'p-5';
-export let paragraphClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
 export let headerClass = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
-export let header = 'Lorem ipsum';
+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;
 if (btnColor === 'blue') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 else if (btnColor === 'gray') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnColor === 'red') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnColor === 'yellow') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnColor === 'green') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnColor === 'indigo') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnColor === 'purple') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnColor === 'pink') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    buttonClass =
+        'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 
@@ -50,26 +58,36 @@ else {
 		{/if}
 	{/if}
 	<div class={textdivClass}>
-		{#if link}
-			<a href={link} {rel}>
+		{#if header}
+			{#if link}
+				<a href={link} {rel}>
+					<h3 class={headerClass}>
+						{header}
+					</h3>
+				</a>
+			{:else}
 				<h3 class={headerClass}>
 					{header}
 				</h3>
-			</a>
-		{:else}
-			<h3 class={headerClass}>
-				{header}
-			</h3>
+			{/if}
 		{/if}
 		{#if $$slots.paragraph}
-			<p class={paragraphClass}>
-				<slot name="paragraph" />
-			</p>
+			<slot name="paragraph" />
 		{/if}
-		{#if link}
+		{#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>
+				<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>

package/cards/Card.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         btnLabel?: string;
         btnColor?: Colors;
         textdivClass?: string;
-        paragraphClass?: string;
         headerClass?: string;
         header?: string;
         divClass?: string;

package/carousels/Caption.svelte

@@ -1,6 +1,7 @@
 <script >export let caption = '';
+export let captionClass = '';
 </script>
 
-<div class="h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center">
+<div class={captionClass}>
   <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
 </div>

package/carousels/Caption.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         caption?: string;
+        captionClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/carousels/Carousel.svelte

@@ -1,5 +1,4 @@
-<script >// import { images } from './imageData.js';
-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';
@@ -8,8 +7,17 @@ export let showCaptions = true;
 export let showThumbs = true;
 export let images;
 export let slideControls = true;
+// 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';
+// Caption
+export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+// Indicator
+export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+// Slide
+export let slideClass = '';
 let imageShowingIndex = 0;
-$: console.log(imageShowingIndex);
+// $: console.log(imageShowingIndex);
 $: image = images[imageShowingIndex];
 const nextSlide = () => {
     if (imageShowingIndex === images.length - 1) {
@@ -32,42 +40,93 @@ let thumbWidth = 100 / images.length;
 </script>
 
 <div id="default-carousel" class="relative">
-  <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
-    <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} />
-  </div>
-  {#if showIndicators}
-    <!-- Slider indicators -->
-    <div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
-      {#each images as { id, imgurl, name, attribution }}
-        <Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
-      {/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>
-        <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>
-        <span class="hidden">Next</span>
-      </span>
-    </button>
-  {/if}
+	<div class={divClass}>
+		<Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
+	</div>
+	{#if showIndicators}
+		<!-- Slider indicators -->
+		<div class={indicatorDivClass}>
+			{#each images as { id, imgurl, name, attribution }}
+				<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
+				>
+				<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
+				>
+				<span class="hidden">Next</span>
+			</span>
+		</button>
+	{/if}
 </div>
 
 {#if showCaptions}
-  <Caption caption={images[imageShowingIndex].name} />
+	<Caption caption={images[imageShowingIndex].name} {captionClass} />
 {/if}
 
 {#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)} />
-    {/each}
-  </div>
+	<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)}
+			/>
+		{/each}
+	</div>
 {/if}

package/carousels/Carousel.svelte.d.ts

@@ -6,6 +6,11 @@ declare const __propDef: {
         showThumbs?: boolean;
         images: any[];
         slideControls?: boolean;
+        divClass?: string;
+        indicatorDivClass?: string;
+        captionClass?: string;
+        indicatorClass?: string;
+        slideClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/carousels/CarouselTransition.svelte

@@ -0,0 +1,155 @@
+<script >import { fade, blur, fly, slide } from 'svelte/transition';
+import Slide from './Slide.svelte';
+import Thumbnail from './Thumbnail.svelte';
+import Caption from './Caption.svelte';
+import Indicator from './Indicator.svelte';
+export let showIndicators = true;
+export let showCaptions = true;
+export let showThumbs = true;
+export let images;
+export let slideControls = true;
+export let transitionType;
+export let transitionParams = {};
+// have a custom transition function that returns the desired transition
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
+// 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';
+// Caption
+export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+// Indicator
+export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+// Slide
+// export let slideClass: string = 'hidden';
+let imageShowingIndex = 1;
+// $: console.log(imageShowingIndex);
+// $: image = images[imageShowingIndex];
+const nextSlide = () => {
+    if (imageShowingIndex === images.length - 1) {
+        imageShowingIndex = 0;
+    }
+    else {
+        imageShowingIndex += 1;
+    }
+};
+const prevSlide = () => {
+    if (imageShowingIndex === 0) {
+        imageShowingIndex = images.length - 1;
+    }
+    else {
+        imageShowingIndex -= 1;
+    }
+};
+const goToSlide = (number) => (imageShowingIndex = number);
+let thumbWidth = 100 / images.length;
+</script>
+
+<div id="default-carousel" class="relative">
+	<div class={divClass}>
+		{#each images as { id, imgurl, name, attribution }}
+			{#if imageShowingIndex === id}
+				<div transition:multiple={transitionParams}>
+					<Slide image={imgurl} altTag={name} attr={attribution} />
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	{#if showIndicators}
+		<!-- Slider indicators -->
+		<div class={indicatorDivClass}>
+			{#each images as { id, imgurl, name, attribution }}
+				<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
+				>
+				<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
+				>
+				<span class="hidden">Next</span>
+			</span>
+		</button>
+	{/if}
+</div>
+
+{#if showCaptions}
+	<Caption caption={images[imageShowingIndex].name} {captionClass} />
+{/if}
+
+{#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)}
+			/>
+		{/each}
+	</div>
+{/if}

package/carousels/CarouselTransition.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TransitionTypes, TransitionParamTypes } from '../types';
+declare const __propDef: {
+    props: {
+        showIndicators?: boolean;
+        showCaptions?: boolean;
+        showThumbs?: boolean;
+        images: any[];
+        slideControls?: boolean;
+        transitionType: TransitionTypes;
+        transitionParams?: TransitionParamTypes;
+        divClass?: string;
+        indicatorDivClass?: string;
+        captionClass?: string;
+        indicatorClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CarouselTransitionProps = typeof __propDef.props;
+export declare type CarouselTransitionEvents = typeof __propDef.events;
+export declare type CarouselTransitionSlots = typeof __propDef.slots;
+export default class CarouselTransition extends SvelteComponentTyped<CarouselTransitionProps, CarouselTransitionEvents, CarouselTransitionSlots> {
+}
+export {};

package/carousels/Indicator.svelte

@@ -1,8 +1,9 @@
 <script >export let name = '';
 export let selected = false;
+export let indicatorClass = '';
 </script>
 
-<button type="button" class="w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60" class:active={selected} aria-label={name} on:click />
+<button type="button" class={indicatorClass} class:active={selected} aria-label={name} on:click />
 
 <style>
   .active {