flowbite-svelte 0.25.21 → 0.25.24

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.25.24](https://github.com/themesberg/flowbite-svelte/compare/v0.25.23...v0.25.24) (2022-08-28)
+
+
+### Features
+
+* popper reloaded ([a4b851e](https://github.com/themesberg/flowbite-svelte/commit/a4b851e2409356a90fd6aaae62db327b505bdcb2))
+* popper reloaded part 2 ([2482870](https://github.com/themesberg/flowbite-svelte/commit/2482870842386c8c1e5824869ce7822b8682e8a0))
+
+
+### Bug Fixes
+
+* tab page timeline ([ab598a5](https://github.com/themesberg/flowbite-svelte/commit/ab598a59a3d373f14740a42bbaec3cb276eed34b))
+
+### [0.25.23](https://github.com/themesberg/flowbite-svelte/compare/v0.25.22...v0.25.23) (2022-08-28)
+
+
+### Bug Fixes
+
+* BREAKING CHANGE for timeline components ([8b30105](https://github.com/themesberg/flowbite-svelte/commit/8b30105060d150d632ea6fbfac8e1f5639f82546))
+
+### [0.25.22](https://github.com/themesberg/flowbite-svelte/compare/v0.25.21...v0.25.22) (2022-08-28)
+
+
+### Bug Fixes
+
+* create icon slot for Alert so that users can add svg or svelte component ([45244ec](https://github.com/themesberg/flowbite-svelte/commit/45244ec05f99298d150751209980dce519873163))
+* remove heros from: ([57f6928](https://github.com/themesberg/flowbite-svelte/commit/57f69282190f5d33d7ac17c6adeab36b89184f47))
+* update Alert color type ([fd819fb](https://github.com/themesberg/flowbite-svelte/commit/fd819fb59d2d01f900ad76449afabfa22de6d5b1))
+* update Timeline components ([4b47d6b](https://github.com/themesberg/flowbite-svelte/commit/4b47d6b5d09abad3b2d8fc29c2b38287726c44d7))
+
 ### [0.25.21](https://github.com/themesberg/flowbite-svelte/compare/v0.25.20...v0.25.21) (2022-08-27)
 
 

package/alerts/Alert.svelte

@@ -5,7 +5,6 @@ import CloseButton from '../utils/CloseButton.svelte';
 const dispatch = createEventDispatcher();
 setContext('background', true);
 export let color = 'blue';
-export let icon = null;
 export let dismissable = false;
 export let rounded = true;
 export let accent = false;
@@ -61,8 +60,8 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 
 <div id={$$props.id} class:hidden class={divClass} role="alert">
 	<div class="flex items-center whitespace-pre-wrap">
-		{#if icon}
-			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 mr-3" />
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{/if}
 
 		<slot />
@@ -80,8 +79,7 @@ $: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, acce
 				on:focus
 				on:blur
 				on:mouseenter
-				on:mouseleave
-			/>
+				on:mouseleave />
 		{/if}
 	</div>
 	<slot name="extra" />

package/alerts/Alert.svelte.d.ts

@@ -1,11 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
-import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: Colors;
-        icon?: typeof SvelteComponent | null;
+        color?: 'gray' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'dark' | 'custom';
         dismissable?: boolean;
         rounded?: boolean;
         accent?: boolean;
@@ -27,6 +24,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         default: {};
         extra: {};
     };

package/avatar/Avatar.svelte

@@ -22,17 +22,17 @@ $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1
 
 <Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
 	{#if src}
-		<img class={avatarClass} {alt} {src} />
+		<img {alt} {src} {...$$restProps} class={avatarClass} />
 	{:else if $$slots.default}
 		<svelte:element
 			this={href ? 'a' : 'div'}
-			class="flex justify-center items-center text-xs font-medium {avatarClass}"
 			{href}
-		>
+			{...$$restProps}
+			class="flex justify-center items-center text-xs font-medium {avatarClass}">
 			<slot />
 		</svelte:element>
 	{:else}
-		<svelte:element this={href ? 'a' : 'div'} class={avatarClass}>
+		<svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
 			<AvatarPlaceholder {rounded} />
 		</svelte:element>
 	{/if}

package/dropdowns/Dropdown.svelte

@@ -2,13 +2,19 @@
 import Button from '../buttons/Button.svelte';
 import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
-import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from 'svelte-heros';
+import ChevronUp from '../utils/ChevronUp.svelte';
+import ChevronRight from '../utils/ChevronRight.svelte';
+import ChevronDown from '../utils/ChevronDown.svelte';
+import ChevronLeft from '../utils/ChevronLeft.svelte';
+import generateId from '../utils/generateId';
 export let label = '';
 export let inline = false;
 export let arrowIcon = true;
 export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
 export let placement = 'bottom';
 export let open = false;
+export let triggeredBy = undefined;
+let id = generateId();
 setContext('background', true);
 const icons = {
     top: ChevronUp,
@@ -22,39 +28,40 @@ let popoverClass;
 $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', 'outline-none', $$props.class);
 </script>
 
-<Popper
-	activeContent={true}
-	arrow={false}
-	{placement}
-	{...$$restProps}
-	class={popoverClass}
-	trigger="click"
-	on:show
-	bind:open
->
-	<slot name="trigger" slot="trigger">
+{#if label}
+	<slot name="trigger">
 		{#if inline}
-			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
+			<button {id} class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
 						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
-					/>
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
 				{/if}
 			</button>
 		{:else}
-			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
+			<Button {id} {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
 						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')}
-					/>
+						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
 				{/if}
 			</Button>
 		{/if}
 	</slot>
+{/if}
+
+<Popper
+	activeContent={true}
+	arrow={false}
+	{placement}
+	{...$$restProps}
+	class={popoverClass}
+	trigger="click"
+	on:show
+	bind:open
+	triggeredBy={triggeredBy ?? '#' + id}>
 	<slot name="content">
 		<ul class="py-1">
 			<slot />

package/dropdowns/Dropdown.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         labelClass?: string;
         placement?: 'auto' | Placement;
         open?: boolean;
+        triggeredBy?: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -16,9 +17,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {
-            slot: string;
-        };
+        trigger: {};
         label: {};
         content: {};
         default: {};

package/dropdowns/DropdownItem.svelte

@@ -18,6 +18,7 @@ const colors = {
 	on:blur
 	on:mouseenter
 	on:mouseleave
+	tabindex="0"
 >
 	<slot />
 </li>

package/index.d.ts

@@ -124,3 +124,7 @@ export { default as Secondary } from './typography/Secondary.svelte';
 export { default as TextGradient } from './typography/TextGradient.svelte';
 export { default as Underline } from './typography/Underline.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as ChevronDown } from './utils/ChevronDown.svelte';
+export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
+export { default as ChevronRight } from './utils/ChevronRight.svelte';
+export { default as ChevronUp } from './utils/ChevronUp.svelte';

package/index.js

@@ -158,3 +158,7 @@ export { default as TextGradient } from './typography/TextGradient.svelte';
 export { default as Underline } from './typography/Underline.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as ChevronDown } from './utils/ChevronDown.svelte';
+export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
+export { default as ChevronRight } from './utils/ChevronRight.svelte';
+export { default as ChevronUp } from './utils/ChevronUp.svelte';

package/navbar/Menu.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.75C3 6.33579 3.33579 6 3.75 6H20.25C20.6642 6 21 6.33579 21 6.75C21 7.16421 20.6642 7.5 20.25 7.5H3.75C3.33579 7.5 3 7.16421 3 6.75ZM3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12ZM3 17.25C3 16.8358 3.33579 16.5 3.75 16.5H20.25C20.6642 16.5 21 16.8358 21 17.25C21 17.6642 20.6642 18 20.25 18H3.75C3.33579 18 3 17.6642 3 17.25Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'bars 3';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/navbar/Menu.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type MenuProps = typeof __propDef.props;
+export declare type MenuEvents = typeof __propDef.events;
+export declare type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/navbar/NavHamburger.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-import { Menu } from 'svelte-heros';
+import Menu from './Menu.svelte';
 export let btnClass = 'ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden';
 </script>
 
@@ -7,8 +7,7 @@ export let btnClass = 'ml-3 inline-flex items-center rounded-lg p-2 text-sm text
 	{...$$restProps}
 	class={classNames(btnClass, $$props.class)}
 	data-testid="navbar-toggle"
-	on:click
->
+	on:click>
 	<span class="sr-only">Open main menu</span>
 	<Menu class="h-6 w-6 shrink-0" />
 </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.21",
+  "version": "0.25.24",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -157,6 +157,7 @@
     "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
     "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
     "./modals/Modal.svelte": "./modals/Modal.svelte",
+    "./navbar/Menu.svelte": "./navbar/Menu.svelte",
     "./navbar/NavBrand.svelte": "./navbar/NavBrand.svelte",
     "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
     "./navbar/NavHamburger.svelte": "./navbar/NavHamburger.svelte",
@@ -174,6 +175,7 @@
     "./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
     "./ratings/Review.svelte": "./ratings/Review.svelte",
     "./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
+    "./ratings/Star.svelte": "./ratings/Star.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./sidebars/SidebarBrand.svelte": "./sidebars/SidebarBrand.svelte",
     "./sidebars/SidebarCta.svelte": "./sidebars/SidebarCta.svelte",
@@ -234,6 +236,10 @@
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
     "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
     "./typography/Underline.svelte": "./typography/Underline.svelte",
+    "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
+    "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",
+    "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
+    "./utils/ChevronUp.svelte": "./utils/ChevronUp.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",

package/popover/Popover.svelte

@@ -1,16 +1,16 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
 export let title = '';
+export let triggeredBy;
 let popoverClass;
 $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', $$props.class);
 </script>
 
-<Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
+<Popper activeContent={true} {triggeredBy} {...$$restProps} class={popoverClass} on:show>
 	<slot name="trigger" slot="trigger" />
 	{#if $$slots.title || title}
 		<div
-			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700"
-		>
+			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
 			<slot name="title">
 				<h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
 			</slot>

package/popover/Popover.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title?: string;
+        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;

package/ratings/Rating.svelte

@@ -1,4 +1,4 @@
-<script>import { Star } from 'svelte-heros';
+<script>import Star from './Star.svelte';
 export let divClass = 'flex items-center';
 export let size = '24';
 export let total = 5;

package/ratings/RatingComment.svelte

@@ -1,5 +1,5 @@
 <script>import Button from '../buttons/Button.svelte';
-import { Star } from 'svelte-heros';
+import Star from './Star.svelte';
 // default is floor
 export let ceil = false;
 export let helpfullink = '';
@@ -16,8 +16,7 @@ let grayStars = comment.total - roundedRating;
 			<p>
 				{comment.user.name}
 				<time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
-					>{comment.user.joined}</time
-				>
+					>{comment.user.joined}</time>
 			</p>
 		</div>
 	</div>
@@ -29,7 +28,7 @@ let grayStars = comment.total - roundedRating;
 		{/each}
 		{#each Array(grayStars) as _, star}
 			<slot name="ratingDown">
-				<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
+				<Star size="24" class="px-0.5 text-gray-300 dark:text-gray-500" />
 			</slot>
 		{/each}
 		{#if comment.heading}
@@ -57,8 +56,7 @@ let grayStars = comment.total - roundedRating;
 					<a
 						href={abuselink}
 						class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-						>Report abuse</a
-					>
+						>Report abuse</a>
 				{/if}
 			</div>
 		{/if}

package/ratings/Star.svelte

@@ -0,0 +1,36 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M11.4806 3.49883C11.6728 3.03685 12.3272 3.03685 12.5193 3.49883L14.6453 8.61028C14.7263 8.80504 14.9095 8.93811 15.1197 8.95497L20.638 9.39736C21.1367 9.43735 21.339 10.0598 20.959 10.3853L16.7546 13.9867C16.5945 14.1239 16.5245 14.3392 16.5734 14.5444L17.8579 19.9293C17.974 20.416 17.4446 20.8007 17.0176 20.5398L12.2932 17.6542C12.1132 17.5443 11.8868 17.5443 11.7068 17.6542L6.98238 20.5398C6.55539 20.8007 6.02594 20.416 6.14203 19.9293L7.42652 14.5444C7.47546 14.3392 7.4055 14.1239 7.24531 13.9867L3.04099 10.3853C2.661 10.0598 2.86323 9.43735 3.36197 9.39736L8.88022 8.95497C9.09048 8.93811 9.27363 8.80504 9.35464 8.61028L11.4806 3.49883Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.2108C11.2364 2.13286 12.7635 2.13286 13.2118 3.2108L15.2938 8.21652L20.6979 8.64976C21.8616 8.74306 22.3335 10.1953 21.4469 10.9549L17.3295 14.4818L18.5874 19.7553C18.8583 20.8909 17.6229 21.7884 16.6266 21.1799L11.9999 18.354L7.37329 21.1799C6.37697 21.7884 5.14158 20.8909 5.41246 19.7553L6.67038 14.4818L2.55303 10.9549C1.66639 10.1953 2.13826 8.74306 3.302 8.64976L8.70609 8.21652L10.7881 3.2108Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'star';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/ratings/Star.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type StarProps = typeof __propDef.props;
+export declare type StarEvents = typeof __propDef.events;
+export declare type StarSlots = typeof __propDef.slots;
+export default class Star extends SvelteComponentTyped<StarProps, StarEvents, StarSlots> {
+}
+export {};

package/sidebars/SidebarDropdownWrapper.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
 import { slide } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
-import { ChevronDown } from 'svelte-heros';
+import ChevronDown from '../utils/ChevronDown.svelte';
 export let btnClass = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
 export let label = '';
 export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
@@ -19,14 +19,12 @@ const handleDropdown = () => {
 		on:click={() => handleDropdown()}
 		type="button"
 		class={classNames(btnClass, $$props.class)}
-		aria-controls="sidebar-dropdown"
-	>
+		aria-controls="sidebar-dropdown">
 		<svelte:component
 			this={icon.name}
 			size={icon.size}
 			color={icon.color}
-			class="mr-2 {icon.class}"
-		/>
+			class="mr-2 {icon.class}" />
 		<span class={spanClass} sidebar-toggle-item>{label}</span>
 		<ChevronDown />
 	</button>
@@ -34,8 +32,7 @@ const handleDropdown = () => {
 		<ul
 			id="dropdown"
 			class={ulClass}
-			transition:slide={{ delay: 250, duration: 300, easing: quintOut }}
-		>
+			transition:slide={{ delay: 250, duration: 300, easing: quintOut }}>
 			<slot />
 		</ul>
 	{/if}

package/timelines/Timeline.svelte

@@ -1,6 +1,17 @@
-<script>export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+<script>import { setContext } from 'svelte';
+export let customClass = '';
+export let order = 'default';
+setContext('order', order);
+let olClasses = {
+    group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
+    horizontal: 'items-center sm:flex',
+    activity: 'relative border-l border-gray-200 dark:border-gray-700',
+    vertical: 'relative border-l border-gray-200 dark:border-gray-700',
+    default: 'relative border-l border-gray-200 dark:border-gray-700',
+    custom: customClass
+};
 </script>
 
-<ol class={olClass}>
+<ol class={olClasses[order]}>
 	<slot />
 </ol>

package/timelines/Timeline.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        olClass?: string;
+        customClass?: string;
+        order?: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' | 'custom';
     };
     events: {
         [evt: string]: CustomEvent<any>;