flowbite-svelte 0.26.2 → 0.26.5

package/CHANGELOG.md

@@ -2,6 +2,47 @@
 
 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.26.5](https://github.com/themesberg/flowbite-svelte/compare/v0.26.4...v0.26.5) (2022-09-02)
+
+
+### Features
+
+* add DescriptionList, List, Span components ([495b61e](https://github.com/themesberg/flowbite-svelte/commit/495b61eb0d81eb9ae06a34fa981dd42a81983ea6))
+* add Ul, Li, Span component ([86d8b66](https://github.com/themesberg/flowbite-svelte/commit/86d8b661f2524f25162a99b6d3b8df761a85b01b))
+
+
+### Bug Fixes
+
+* blockquote page formating ([1641d45](https://github.com/themesberg/flowbite-svelte/commit/1641d45bdc032c01cd201967bf362d9f8a19a422))
+* Heading to the original code ([5604da5](https://github.com/themesberg/flowbite-svelte/commit/5604da5f348420f8878e44d591e9a8704b23e4a0))
+* List in cards page to Listgroup ([b8e05f4](https://github.com/themesberg/flowbite-svelte/commit/b8e05f4f97fbbb0236872b2b5f18f0928c34ad55))
+* rebase merge conflict Alert.svelte ([38df84a](https://github.com/themesberg/flowbite-svelte/commit/38df84a21124d3d3c3c1d716ff21bd678b156b09))
+* removed Ol component ([569f2e3](https://github.com/themesberg/flowbite-svelte/commit/569f2e3a51a59abba641c669949b4b5372c56a01))
+* rename List to Listgroup and ListItem to ListgroupItem ([1b70110](https://github.com/themesberg/flowbite-svelte/commit/1b7011062a729452604b3a0dd1ed54f28ab49132))
+
+### [0.26.4](https://github.com/themesberg/flowbite-svelte/compare/v0.26.3...v0.26.4) (2022-09-02)
+
+
+### Bug Fixes
+
+* programatic popper open merged ([86f9874](https://github.com/themesberg/flowbite-svelte/commit/86f9874e1c2390e3571b6df96acfa61af23fd865))
+
+### [0.26.3](https://github.com/themesberg/flowbite-svelte/compare/v0.26.2...v0.26.3) (2022-09-01)
+
+
+### Features
+
+* frame abstraction ([47e4126](https://github.com/themesberg/flowbite-svelte/commit/47e4126fa02ff6b9c93d3ee7e17fee79195ac1d3))
+
+
+### Bug Fixes
+
+* docs fixes due to dropdown api change ([869f8d7](https://github.com/themesberg/flowbite-svelte/commit/869f8d7bdea3a7ba97702e31b52f0e33fce3c911))
+* remove flowbite-svelte-blocks page, add a link ([2b9e3d3](https://github.com/themesberg/flowbite-svelte/commit/2b9e3d3f72731ace8abb563e28e98309dbc58b3b))
+* remove heros icons from ([203f14c](https://github.com/themesberg/flowbite-svelte/commit/203f14c578e57429892e0df41452abbdef1b3a4e))
+* remove svelte-flag-icons from devDependencies ([8f48867](https://github.com/themesberg/flowbite-svelte/commit/8f488677958313a2debaa3f953314d6452a63013))
+* update svelte-sidebar-menu version ([1106d16](https://github.com/themesberg/flowbite-svelte/commit/1106d161d06244d5db61641babc7691d28388fbd))
+
 ### [0.26.2](https://github.com/themesberg/flowbite-svelte/compare/v0.26.1...v0.26.2) (2022-08-30)
 
 

package/alerts/Alert.svelte

@@ -1,86 +1,44 @@
-<script>import { setContext } from 'svelte';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
 import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
+import Frame from '../utils/Frame.svelte';
 const dispatch = createEventDispatcher();
-setContext('background', true);
 export let color = 'blue';
 export let dismissable = false;
 export let rounded = true;
 export let accent = false;
-export let customBgClass = '';
-export let customBorderAccentClass = '';
-export let customTextColor = '';
 let hidden = false;
-const handleAlert = () => {
-    dispatch('handleAlert');
-};
 const handleHide = () => {
     hidden = !hidden;
-};
-const bgClasses = {
-    gray: 'bg-gray-100 dark:bg-gray-200 ',
-    red: 'bg-red-100 dark:bg-red-200',
-    yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
-    green: 'bg-green-100 dark:bg-green-200 ',
-    indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
-    purple: 'bg-purple-100 dark:bg-purple-200 ',
-    pink: 'bg-pink-100 dark:bg-pink-200 ',
-    blue: 'bg-blue-100 dark:bg-blue-200 ',
-    dark: 'bg-gray-50 dark:bg-gray-700',
-    custom: customBgClass
-};
-const borderAccentClasses = {
-    gray: 'border-gray-500 dark:bg-gray-200 ',
-    red: 'border-red-500 dark:bg-red-200 ',
-    yellow: 'border-yellow-500 dark:bg-tellow-200 ',
-    green: 'border-green-500 dark:bg-green-200 ',
-    indigo: 'border-indigo-500 dark:bg-indigo-200 ',
-    purple: 'border-purple-500 dark:bg-purple-200 ',
-    pink: 'border-pink-500 dark:bg-pink-200 ',
-    blue: 'border-blue-500 dark:bg-blue-200 ',
-    dark: 'border-gray-500',
-    custom: customBorderAccentClass
-};
-const textColors = {
-    gray: 'text-gray-700 dark:text-gray-800',
-    red: 'text-red-700 dark:text-red-800',
-    yellow: 'text-yellow-700 dark:text-yellow-800',
-    green: 'text-green-700 dark:text-green-800',
-    indigo: 'text-indigo-700 dark:text-indigo-800',
-    purple: 'text-purple-700 dark:text-purple-800',
-    pink: 'text-pink-700 dark:text-pink-800',
-    blue: 'text-blue-700 dark:text-blue-800',
-    dark: 'text-gray-700  dark:text-gray-300',
-    custom: customTextColor
+    dispatch('handleAlert');
+    dispatch('close'); // preffered name
 };
 let divClass;
-$: divClass = classNames('p-4 text-sm', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', textColors[color], $$props.class);
+$: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidden', $$props.class);
 </script>
 
-<div id={$$props.id} class:hidden class={divClass} role="alert">
-	<div class="flex items-center whitespace-pre-wrap">
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{/if}
+<Frame {color} {rounded} {...$$restProps} class={divClass} role="alert">
+  <div class="flex items-center whitespace-pre-wrap">
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
 
-		<slot />
+    <slot />
 
-		{#if dismissable}
-			<CloseButton
-				class="-mx-1.5 -my-1.5"
-				{color}
-				on:click={handleHide}
-				on:click={handleAlert}
-				on:click
-				on:change
-				on:keydown
-				on:keyup
-				on:focus
-				on:blur
-				on:mouseenter
-				on:mouseleave />
-		{/if}
-	</div>
-	<slot name="extra" />
-</div>
+    {#if dismissable}
+      <CloseButton
+        class="-mx-1.5 -my-1.5"
+        {color}
+        on:click={handleHide}
+        on:click
+        on:change
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:mouseenter
+        on:mouseleave />
+    {/if}
+  </div>
+  <slot name="extra" />
+</Frame>

package/alerts/Alert.svelte.d.ts

@@ -6,9 +6,6 @@ declare const __propDef: {
         dismissable?: boolean;
         rounded?: boolean;
         accent?: boolean;
-        customBgClass?: string;
-        customBorderAccentClass?: string;
-        customTextColor?: string;
     };
     events: {
         click: MouseEvent;
@@ -20,6 +17,7 @@ declare const __propDef: {
         mouseenter: CustomEvent<any>;
         mouseleave: CustomEvent<any>;
         handleAlert: CustomEvent<any>;
+        close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/cards/Card.svelte

@@ -1,12 +1,11 @@
 <script>import classNames from 'classnames';
-import { setContext } from 'svelte';
+import Frame from '../utils/Frame.svelte';
 export let href = undefined;
 export let horizontal = false;
 export let reverse = false;
 export let img = undefined;
 export let padding = 'lg';
 export let size = 'sm';
-setContext('background', true);
 const paddings = {
     none: 'p-0',
     sm: 'p-4',
@@ -24,12 +23,12 @@ const sizes = {
 let innerPdding;
 $: innerPdding = paddings[padding];
 let cardClass;
-$: cardClass = classNames('flex', sizes[size], 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);
+$: cardClass = classNames('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 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>
 
-<svelte:element this={href ? 'a' : 'div'} {href} class={cardClass}>
+<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} class={cardClass}>
 	{#if img}
 		<img class={imgClass} src={img} alt="" />
 		<div class={innerPdding}>
@@ -38,4 +37,4 @@ $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal &
 	{:else}
 		<slot />
 	{/if}
-</svelte:element>
+</Frame>

package/dropdowns/Dropdown.svelte

@@ -1,12 +1,11 @@
-<script>import { setContext } from 'svelte';
-import Button from '../buttons/Button.svelte';
+<script>import Button from '../buttons/Button.svelte';
+import Frame from '../utils/Frame.svelte';
 import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
 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;
@@ -14,8 +13,6 @@ export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4
 export let placement = 'bottom';
 export let open = false;
 export let triggeredBy = undefined;
-let id = generateId();
-setContext('background', true);
 const icons = {
     top: ChevronUp,
     right: ChevronRight,
@@ -25,13 +22,13 @@ const icons = {
 // @ts-ignore
 $: icon = icons[placement.split('-')[0]];
 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);
+$: popoverClass = classNames('outline-none', $$props.class);
 </script>
 
 {#if label}
 	<slot name="trigger">
 		{#if inline}
-			<button {id} class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
+			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -40,7 +37,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 				{/if}
 			</button>
 		{:else}
-			<Button {id} {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
+			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -52,19 +49,12 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 	</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 />
-		</ul>
-	</slot>
+<Popper activeContent={true} arrow={false} {placement} trigger="click" on:show bind:open {triggeredBy}>
+	<Frame class={popoverClass} rounded border shadow>
+		<slot name="content">
+			<ul class="py-1">
+				<slot />
+			</ul>
+		</slot>
+	</Frame>
 </Popper>

package/index.d.ts

@@ -43,8 +43,8 @@ export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
 export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
-export { default as List } from './list-group/List.svelte';
-export { default as ListItem } from './list-group/ListItem.svelte';
+export { default as Listgroup } from './list-group/Listgroup.svelte';
+export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
 export { default as Modal } from './modals/Modal.svelte';
 export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 export { default as Navbar } from './navbar/Navbar.svelte';
@@ -108,13 +108,17 @@ export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
 export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
+export { default as DescriptionList } from './typography/DescriptionList.svelte';
 export { default as Heading } from './typography/Heading.svelte';
 export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
 export { default as Img } from './typography/Img.svelte';
+export { default as Li } from './typography/Li.svelte';
 export { default as Mark } from './typography/Mark.svelte';
+export { default as List } from './typography/List.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';
+export { default as Span } from './typography/Span.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';

package/index.js

@@ -59,8 +59,8 @@ export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
 export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
 export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
 // List
-export { default as List } from './list-group/List.svelte';
-export { default as ListItem } from './list-group/ListItem.svelte';
+export { default as Listgroup } from './list-group/Listgroup.svelte';
+export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
 // Modals
 export { default as Modal } from './modals/Modal.svelte';
 // MegaMenu
@@ -141,13 +141,17 @@ export { default as Tooltip } from './tooltips/Tooltip.svelte';
 // Typography
 export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
+export { default as DescriptionList } from './typography/DescriptionList.svelte';
 export { default as Heading } from './typography/Heading.svelte';
 export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
 export { default as Img } from './typography/Img.svelte';
+export { default as Li } from './typography/Li.svelte';
 export { default as Mark } from './typography/Mark.svelte';
+export { default as List } from './typography/List.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';
+export { default as Span } from './typography/Span.svelte';
 export { default as TextGradient } from './typography/TextGradient.svelte';
 export { default as Underline } from './typography/Underline.svelte';
 // utils

package/list-group/Listgroup.svelte

@@ -0,0 +1,18 @@
+<script>import { setContext } from 'svelte';
+import classNames from 'classnames';
+import ListgroupItem from './ListgroupItem.svelte';
+import Frame from '../utils/Frame.svelte';
+export let items = [];
+export let active = false;
+$: setContext('active', active);
+let groupClass;
+$: groupClass = classNames('divide-y divide-gray-200 dark:divide-gray-600', $$props.class);
+</script>
+
+<Frame tag={active ? 'div' : 'ul'} rounded border class={groupClass}>
+  {#each items as item, index}
+    <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
+  {:else}
+    <slot />
+  {/each}
+</Frame>

package/list-group/Listgroup.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ListGroupItemType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        items?: ListGroupItemType[];
+        active?: boolean;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ListgroupProps = typeof __propDef.props;
+export declare type ListgroupEvents = typeof __propDef.events;
+export declare type ListgroupSlots = typeof __propDef.slots;
+export default class Listgroup extends SvelteComponentTyped<ListgroupProps, ListgroupEvents, ListgroupSlots> {
+}
+export {};

package/list-group/{ListItem.svelte.d.ts → ListgroupItem.svelte.d.ts}

@@ -27,9 +27,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type ListItemProps = typeof __propDef.props;
-export declare type ListItemEvents = typeof __propDef.events;
-export declare type ListItemSlots = typeof __propDef.slots;
-export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+export declare type ListgroupItemProps = typeof __propDef.props;
+export declare type ListgroupItemEvents = typeof __propDef.events;
+export declare type ListgroupItemSlots = typeof __propDef.slots;
+export default class ListgroupItem extends SvelteComponentTyped<ListgroupItemProps, ListgroupItemEvents, ListgroupItemSlots> {
 }
 export {};

package/modals/Modal.svelte

@@ -1,4 +1,5 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
+<script>import Frame from '../utils/Frame.svelte';
+import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import focusTrap from '../utils/focusTrap';
 export let open = false;
@@ -8,7 +9,6 @@ export let placement = 'center';
 export let autoclose = true;
 export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
 const dispatch = createEventDispatcher();
-setContext('background', true);
 const allPlacementClasses = [
     'justify-start',
     'justify-center',
@@ -110,13 +110,10 @@ const hide = () => {
 	role={open ? 'dialog' : undefined}
 	use:init={open}
 	use:focusTrap={open}
-	on:click={onButtonsClick}
->
+	on:click={onButtonsClick}>
 	<div class="relative p-4 w-full {sizes[size]} h-full md:h-auto">
 		<!-- Modal content -->
-		<div
-			class="relative bg-white rounded-lg shadow dark:bg-gray-700 text-gray-500 dark:text-gray-400"
-		>
+		<Frame rounded shadow class="relative">
 			<!-- Modal header -->
 			{#if $$slots.header || title}
 				<div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
@@ -136,12 +133,10 @@ const hide = () => {
 			</div>
 			<!-- Modal footer -->
 			{#if $$slots.footer}
-				<div
-					class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600"
-				>
+				<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
 					<slot name="footer" />
 				</div>
 			{/if}
-		</div>
+		</Frame>
 	</div>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.2",
+  "version": "0.26.5",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -31,9 +31,8 @@
     "prism-themes": "^1.9.0",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
-    "svelte-flag-icons": "^0.1.1",
     "svelte-preprocess": "^4.10.7",
-    "svelte-sidebar-menu": "^0.8.11",
+    "svelte-sidebar-menu": "^0.9.11",
     "svelte2tsx": "^0.5.13",
     "tailwindcss": "^3.1.8",
     "tslib": "^2.4.0",
@@ -84,8 +83,7 @@
     "@floating-ui/dom": "^1.0.1",
     "@popperjs/core": "^2.11.6",
     "classnames": "^2.3.1",
-    "flowbite": "^1.5.2",
-    "svelte-heros": "^2.3.3"
+    "flowbite": "^1.5.2"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -153,8 +151,8 @@
     "./kbd/ArrowKeyRight.svelte": "./kbd/ArrowKeyRight.svelte",
     "./kbd/ArrowKeyUp.svelte": "./kbd/ArrowKeyUp.svelte",
     "./kbd/Kbd.svelte": "./kbd/Kbd.svelte",
-    "./list-group/List.svelte": "./list-group/List.svelte",
-    "./list-group/ListItem.svelte": "./list-group/ListItem.svelte",
+    "./list-group/Listgroup.svelte": "./list-group/Listgroup.svelte",
+    "./list-group/ListgroupItem.svelte": "./list-group/ListgroupItem.svelte",
     "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
     "./modals/Modal.svelte": "./modals/Modal.svelte",
     "./navbar/Menu.svelte": "./navbar/Menu.svelte",
@@ -222,20 +220,26 @@
     "./types": "./types.js",
     "./typography/A.svelte": "./typography/A.svelte",
     "./typography/Blockquote.svelte": "./typography/Blockquote.svelte",
+    "./typography/DescriptionList.svelte": "./typography/DescriptionList.svelte",
     "./typography/Heading.svelte": "./typography/Heading.svelte",
     "./typography/Highlight.svelte": "./typography/Highlight.svelte",
     "./typography/Hr.svelte": "./typography/Hr.svelte",
     "./typography/Img.svelte": "./typography/Img.svelte",
+    "./typography/Li.svelte": "./typography/Li.svelte",
+    "./typography/List.svelte": "./typography/List.svelte",
     "./typography/Mark.svelte": "./typography/Mark.svelte",
     "./typography/P.svelte": "./typography/P.svelte",
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
+    "./typography/Span.svelte": "./typography/Span.svelte",
     "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
+    "./typography/Ul.svelte": "./typography/Ul.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/Frame.svelte": "./utils/Frame.svelte",
     "./utils/InformationCircle.svelte": "./utils/InformationCircle.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/UserCircle.svelte": "./utils/UserCircle.svelte",

package/popover/Popover.svelte

@@ -1,22 +1,20 @@
 <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} {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">
-			<slot name="title">
-				<h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
-			</slot>
-		</div>
-	{/if}
-	<div class="py-2 px-3">
-		<slot />
-	</div>
+<Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
+  {#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">
+      <slot name="title">
+        <h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
+      </slot>
+    </div>
+  {/if}
+  <div class="py-2 px-3">
+    <slot />
+  </div>
 </Popper>

package/popover/Popover.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title?: string;
-        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -11,9 +10,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {
-            slot: string;
-        };
         title: {};
         default: {};
     };

package/toasts/Toast.svelte

@@ -1,29 +1,12 @@
-<script>import classNames from 'classnames';
-import * as transitions from 'svelte/transition';
+<script>import Frame from '../utils/Frame.svelte';
+import classNames from 'classnames';
 import CloseButton from '../utils/CloseButton.svelte';
 export let color = 'blue';
 export let simple = false;
-// Export a prop through which you can set a desired transition
-export let transition = 'fade';
-// Pass in extra transition params
-export let params = {};
 // Absolute position
 export let position = undefined; // default not set
 export let visible = true;
-export let divClass = 'w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
-const colors = {
-    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
-    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
-    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
-    gray: 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200',
-    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
-    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
-    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200',
-    pink: 'text-pink-500 bg-pink-100 dark:bg-pink-800 dark:text-pink-200'
-};
-// have a custom transition function that returns the desired transition
-let transitionFunc;
-$: transitionFunc = transitions[transition] ?? transitions.fade;
+export let divClass = 'w-full max-w-xs p-4';
 $: classDiv = classNames(divClass, {
     'absolute top-5 left-5': position == 'tl',
     'absolute top-5 right-5': position == 'tr',
@@ -31,14 +14,14 @@ $: classDiv = classNames(divClass, {
     'absolute bottom-5 right-5': position == 'br'
 }, $$props.class);
 let iconClass;
-$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 rounded-lg w-8 h-8 mr-3', colors[color]);
+$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3');
 </script>
 
 {#if visible}
-	<div transition:transitionFunc={params} class={classDiv} role="alert">
+	<Frame rounded border transition="fade" {...$$restProps} class={classDiv} role="alert">
 		<div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
 			{#if $$slots.icon}
-				<div class={iconClass}><slot name="icon" /></div>
+				<Frame {color} rounded class={iconClass}><slot name="icon" /></Frame>
 			{/if}
 
 			<div class="text-sm font-normal w-full">
@@ -49,5 +32,5 @@ $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0
 				<CloseButton on:click={() => (visible = false)} />
 			{/if}
 		</div>
-	</div>
+	</Frame>
 {/if}

package/toasts/Toast.svelte.d.ts

@@ -1,12 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors, TransitionTypes, TransitionParamTypes } from '../types';
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         color?: Colors;
         simple?: boolean;
-        transition?: TransitionTypes;
-        params?: TransitionParamTypes;
         position?: 'tl' | 'tr' | 'bl' | 'br';
         visible?: boolean;
         divClass?: string;

package/typography/DescriptionList.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let tag;
+export let dtClass = 'text-gray-500 md:text-lg dark:text-gray-400';
+export let ddClass = 'text-lg font-semibold';
+let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
+</script>
+
+<svelte:element this={tag} class={classDesc}>
+  <slot />
+</svelte:element>

package/typography/DescriptionList.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag: 'dt' | 'dd';
+        dtClass?: string;
+        ddClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DescriptionListProps = typeof __propDef.props;
+export declare type DescriptionListEvents = typeof __propDef.events;
+export declare type DescriptionListSlots = typeof __propDef.slots;
+export default class DescriptionList extends SvelteComponentTyped<DescriptionListProps, DescriptionListEvents, DescriptionListSlots> {
+}
+export {};

package/typography/Heading.svelte

@@ -13,8 +13,7 @@ const textSizes = {
 </script>
 
 <svelte:element
-	this={tag}
-	class={classNames(customSize ? customSize : textSizes[tag], textColor, 'w-full', $$props.class)}
->
-	<slot />
+  this={tag}
+  class={classNames(customSize ? customSize : textSizes[tag], textColor, 'w-full', $$props.class)}>
+  <slot />
 </svelte:element>

package/typography/Li.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let icon = false;
+export let liClass = '';
+let classLi = classNames(liClass, icon && 'flex items-center', $$props.class);
+</script>
+
+<li class={classLi}>
+  <slot />
+</li>

package/typography/Li.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: boolean;
+        liClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LiProps = typeof __propDef.props;
+export declare type LiEvents = typeof __propDef.events;
+export declare type LiSlots = typeof __propDef.slots;
+export default class Li extends SvelteComponentTyped<LiProps, LiEvents, LiSlots> {
+}
+export {};

package/typography/List.svelte

@@ -0,0 +1,23 @@
+<script>import classNames from 'classnames';
+export let tag = 'ul';
+export let list = 'disc';
+export let position = 'inside';
+export let color = 'text-gray-500 dark:text-gray-400';
+export let olClass = 'list-decimal list-inside';
+export let ulClass = 'max-w-md';
+export let dlClass = 'max-w-md divide-y divide-gray-200  dark:divide-gray-700';
+let lists = {
+    disc: 'list-disc',
+    none: 'list-none',
+    decimal: 'list-decimal'
+};
+let positions = {
+    inside: 'list-inside',
+    outside: 'list-outside'
+};
+let classList = classNames(color, tag === 'ul' ? ulClass : 'ol' ? olClass : dlClass, lists[list], positions[position], $$props.class);
+</script>
+
+<svelte:element this={tag} class={classList}>
+  <slot />
+</svelte:element>

package/{list-group → typography}/List.svelte.d.ts

@@ -1,14 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ListGroupItemType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        items?: ListGroupItemType[];
-        active?: boolean;
+        tag?: 'ul' | 'ol' | 'dl';
+        list?: 'disc' | 'none' | 'decimal';
+        position?: 'inside' | 'outside';
+        color?: string;
+        olClass?: string;
+        ulClass?: string;
+        dlClass?: string;
     };
     events: {
-        click: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/typography/Span.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let classSpan = classNames('font-semibold text-gray-900 dark:text-white', $$props.class);
+</script>
+
+<span class={classSpan}>
+  <slot />
+</span>

package/typography/Span.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        classSpan?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SpanProps = typeof __propDef.props;
+export declare type SpanEvents = typeof __propDef.events;
+export declare type SpanSlots = typeof __propDef.slots;
+export default class Span extends SvelteComponentTyped<SpanProps, SpanEvents, SpanSlots> {
+}
+export {};

package/typography/Ul.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let list = 'disc';
+export let position = 'inside';
+export let ulClass = 'max-w-md text-gray-500 dark:text-gray-400';
+let lists = {
+    disc: 'list-disc',
+    none: 'list-none',
+    decimal: 'list-decimal'
+};
+let positions = {
+    inside: 'list-inside',
+    outside: 'list-outside'
+};
+let classUl = classNames(ulClass, lists[list], positions[position], $$props.class);
+console.log('list', list);
+</script>
+
+<ul class={classUl} {list}>
+  <slot />
+</ul>

package/typography/Ul.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        list?: 'disc' | 'none' | 'decimal';
+        position?: 'inside' | 'outside';
+        ulClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type UlProps = typeof __propDef.props;
+export declare type UlEvents = typeof __propDef.events;
+export declare type UlSlots = typeof __propDef.slots;
+export default class Ul extends SvelteComponentTyped<UlProps, UlEvents, UlSlots> {
+}
+export {};

package/utils/Frame.svelte

@@ -0,0 +1,73 @@
+<script>import classNames from 'classnames';
+import { setContext } from 'svelte';
+import * as transitions from 'svelte/transition';
+setContext('background', true);
+$: setContext('color', color);
+export let tag = 'div';
+export let color = 'default';
+export let rounded = false;
+export let border = false;
+export let shadow = false;
+// Export a prop through which you can set a desired transition
+export let transition = undefined;
+// Pass in extra transition params
+export let params = {};
+// your script goes here
+const bgColors = {
+    gray: 'bg-gray-100 dark:bg-gray-200 ',
+    red: 'bg-red-100 dark:bg-red-200',
+    yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
+    green: 'bg-green-100 dark:bg-green-200 ',
+    indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
+    purple: 'bg-purple-100 dark:bg-purple-200 ',
+    pink: 'bg-pink-100 dark:bg-pink-200 ',
+    blue: 'bg-blue-100 dark:bg-blue-200 ',
+    light: 'bg-gray-50 dark:bg-gray-700',
+    dark: 'bg-gray-100 dark:bg-gray-700',
+    default: 'bg-white dark:bg-gray-800',
+    none: ''
+};
+const textColors = {
+    gray: 'text-gray-700 dark:text-gray-800',
+    red: 'text-red-700 dark:text-red-800',
+    yellow: 'text-yellow-700 dark:text-yellow-800',
+    green: 'text-green-700 dark:text-green-800',
+    indigo: 'text-indigo-700 dark:text-indigo-800',
+    purple: 'text-purple-700 dark:text-purple-800',
+    pink: 'text-pink-700 dark:text-pink-800',
+    blue: 'text-blue-700 dark:text-blue-800',
+    light: 'text-gray-700 dark:text-gray-300',
+    dark: 'text-gray-700 dark:text-gray-300',
+    default: 'text-gray-500 dark:text-gray-400',
+    none: ''
+};
+const borderColors = {
+    gray: 'border-gray-500 dark:bg-gray-200 ',
+    red: 'border-red-500 dark:bg-red-200 ',
+    yellow: 'border-yellow-500 dark:bg-tellow-200 ',
+    green: 'border-green-500 dark:bg-green-200 ',
+    indigo: 'border-indigo-500 dark:bg-indigo-200 ',
+    purple: 'border-purple-500 dark:bg-purple-200 ',
+    pink: 'border-pink-500 dark:bg-pink-200 ',
+    blue: 'border-blue-500 dark:bg-blue-200 ',
+    light: 'border-gray-500',
+    dark: 'border-gray-500',
+    default: 'border-gray-200 dark:border-gray-700',
+    none: ''
+};
+// have a custom transition function that returns the desired transition
+let transitionFunc;
+$: transitionFunc = transitions[transition];
+let divClass;
+$: divClass = classNames(bgColors[color], textColors[color], rounded && 'rounded-lg ', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
+</script>
+
+{#if transitionFunc}
+	<svelte:element this={tag} transition:transitionFunc={params} {...$$restProps} class={divClass}>
+		<slot />
+	</svelte:element>
+{:else}
+	<svelte:element this={tag} {...$$restProps} class={divClass}>
+		<slot />
+	</svelte:element>
+{/if}

package/utils/Frame.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TransitionTypes, TransitionParamTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: string;
+        color?: string;
+        rounded?: boolean;
+        border?: boolean;
+        shadow?: boolean;
+        transition?: TransitionTypes;
+        params?: TransitionParamTypes;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FrameProps = typeof __propDef.props;
+export declare type FrameEvents = typeof __propDef.events;
+export declare type FrameSlots = typeof __propDef.slots;
+export default class Frame extends SvelteComponentTyped<FrameProps, FrameEvents, FrameSlots> {
+}
+export {};

package/utils/Popper.svelte

@@ -9,21 +9,22 @@ export let arrow = true;
 export let offset = 8;
 export let placement = 'top';
 export let trigger = 'hover';
-export let triggeredBy;
+export let triggeredBy = undefined;
+export let open = false;
 const dispatch = createEventDispatcher();
-let open = false;
 let clickable;
 $: clickable = trigger === 'click';
 $: dispatch('show', triggerEl, open);
 let triggerEl;
+let contentEl;
 let triggerEls = [];
 let popper;
 let _blocked = false; // managment of the race condition between focusin and click events
 const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
 const showHandler = (ev) => {
     if (triggerEl === undefined)
-        triggerEl = ev.target;
-    else if (triggerEls.includes(ev.target) && triggerEl !== ev.target) {
+        console.error('trigger undefined');
+    if (triggerEls.includes(ev.target) && triggerEl !== ev.target) {
         triggerEl = ev.target;
         block();
     }
@@ -32,7 +33,7 @@ const showHandler = (ev) => {
     open = clickable && ev.type === 'click' && !_blocked ? !open : true;
 };
 // reactivity
-$: popper && (popper.state.elements.reference = triggerEl) && popper.setOptions({ placement });
+$: popper && popper.setOptions({ placement });
 // typescript typeguards - poper.state.element.reference: Element|HTMLElement|VirtualElement
 const hasHover = (el) => el.matches && el.matches(':hover');
 const hasFocus = (el) => el.contains && el.contains(document.activeElement);
@@ -50,8 +51,8 @@ const hideHandler = (ev) => {
     else
         open = false;
 };
-function init(node, _open) {
-    popper = createPopper(triggerEl, node, {
+function init(node, _triggerEl) {
+    popper = createPopper(_triggerEl, node, {
         placement,
         modifiers: [
             { name: 'offset', options: { offset: [0, offset] } },
@@ -59,6 +60,10 @@ function init(node, _open) {
         ]
     });
     return {
+        update(_triggerEl) {
+            popper.state.elements.reference = _triggerEl;
+            popper.update();
+        },
         destroy() {
             popper.destroy();
         }
@@ -73,8 +78,12 @@ onMount(() => {
         ['mouseleave', hideHandler, !clickable]
     ];
     triggerEls = [...document.querySelectorAll(triggeredBy)];
-    if (!triggerEls.length)
-        console.error('no triggers given');
+    if (!triggerEls.length) {
+        if (contentEl.previousElementSibling)
+            triggerEls.push(contentEl.previousElementSibling);
+        else
+            console.error('No triggers found.');
+    }
     triggerEls.forEach((element) => {
         if (element.tabIndex < 0)
             element.tabIndex = 0; // trigger must be focusable
@@ -82,8 +91,8 @@ onMount(() => {
             if (cond)
                 element.addEventListener(name, handler);
     });
+    triggerEl = triggerEls[0];
     return () => {
-        triggerEl = undefined;
         triggerEls.forEach((element) => {
             if (element) {
                 for (const [name, handler] of events)
@@ -94,9 +103,13 @@ onMount(() => {
 });
 </script>
 
-{#if open}
+{#if !triggerEl}
+	<div id="empty" bind:this={contentEl} />
+{/if}
+
+{#if open && triggerEl}
 	<div
-		use:init={open}
+		use:init={triggerEl}
 		transition:fade={{ duration: animation ? animation : 0 }}
 		role="tooltip"
 		tabIndex={activeContent ? -1 : undefined}

package/utils/Popper.svelte.d.ts

@@ -9,7 +9,8 @@ declare const __propDef: {
         offset?: number;
         placement?: Placement;
         trigger?: 'hover' | 'click';
-        triggeredBy: string;
+        triggeredBy?: string;
+        open?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/list-group/List.svelte

@@ -1,18 +0,0 @@
-<script>import { setContext } from 'svelte';
-import classNames from 'classnames';
-import ListItem from './ListItem.svelte';
-export let items = [];
-export let active = false;
-setContext('background', true);
-$: setContext('active', active);
-let groupClass;
-$: 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}>
-	{#each items as item, index}
-		<ListItem {active} {...item} {index} on:click><slot {item} {index} /></ListItem>
-	{:else}
-		<slot />
-	{/each}
-</svelte:element>