flowbite-svelte 0.26.9 → 0.26.12

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.12](https://github.com/themesberg/flowbite-svelte/compare/v0.26.11...v0.26.12) (2022-09-05)
+
+
+### Features
+
+* add labelInsideClass to progressbar component ([fe20cd7](https://github.com/themesberg/flowbite-svelte/commit/fe20cd7f693f21e052dc5adb3fd3eb4bcfa80b76))
+
+### [0.26.11](https://github.com/themesberg/flowbite-svelte/compare/v0.26.10...v0.26.11) (2022-09-05)
+
+
+### Features
+
+* range - clean up ([79d35ca](https://github.com/themesberg/flowbite-svelte/commit/79d35ca127094efb20e12ad3e14635cf607edddc))
+* video component and page ([27cd7df](https://github.com/themesberg/flowbite-svelte/commit/27cd7df226dde37e8a598b6693ae8278671d5782))
+
+
+### Bug Fixes
+
+* [#266](https://github.com/themesberg/flowbite-svelte/issues/266) change {id} to  {...$$restProps} ([b02822f](https://github.com/themesberg/flowbite-svelte/commit/b02822f273fe5b14613ec77e39285078a740cda0))
+* github issue template ([b6b8fd4](https://github.com/themesberg/flowbite-svelte/commit/b6b8fd46aa7491e29935fe62ca5dc617513ee5ee))
+* github issue template 2 ([343c102](https://github.com/themesberg/flowbite-svelte/commit/343c102ee1901c8d14fc75ab06a0fe28ac594a98))
+* github issue template 3 ([e8c6a1b](https://github.com/themesberg/flowbite-svelte/commit/e8c6a1b7d148d0137ca0e395bf5904e3a2ed408c))
+* github issue template 4 ([5565625](https://github.com/themesberg/flowbite-svelte/commit/5565625e343c197bd4d903878a2955eaae08b788))
+* video component and page ([cc8dcb5](https://github.com/themesberg/flowbite-svelte/commit/cc8dcb54843ecff1f9aacc82d9139aedf7d6e0c1))
+
+### [0.26.10](https://github.com/themesberg/flowbite-svelte/compare/v0.26.9...v0.26.10) (2022-09-05)
+
+
+### Features
+
+* add bgColor and bgOpacity to Drawer component ([8dc01fb](https://github.com/themesberg/flowbite-svelte/commit/8dc01fb9ec82b14d5f893d1255b646630e205ce2))
+
+
+### Bug Fixes
+
+* 683restProps for toolbarbutton ([6ce830c](https://github.com/themesberg/flowbite-svelte/commit/6ce830c2657c6727835ded2b01728c8830a1a7d2))
+* change ml-2 after get access to ml-1 ([b8ffc2c](https://github.com/themesberg/flowbite-svelte/commit/b8ffc2ca5016737da2d40ed5b83d4ef5fdc07e08))
+* megamenu fullscreen position ([eaf0729](https://github.com/themesberg/flowbite-svelte/commit/eaf07294a728b524f2873df26f8250d23682dd81))
+* navbar updates ([468839b](https://github.com/themesberg/flowbite-svelte/commit/468839bd2efee738787b428ef902cecee3f70e12))
+* remove Figma from image page ([0276b51](https://github.com/themesberg/flowbite-svelte/commit/0276b517fc828e77bfd383be122b514bb0793da0))
+
 ### [0.26.9](https://github.com/themesberg/flowbite-svelte/compare/v0.26.8...v0.26.9) (2022-09-04)
 
 

package/drawer/Drawer.svelte

@@ -5,6 +5,8 @@ export let hidden = true;
 export let position = 'fixed';
 export let width = 'w-80';
 export let backdrop = true;
+export let bgColor = 'bg-gray-900';
+export let bgOpacity = 'bg-opacity-75';
 export let placement = 'left';
 export let id = 'drawer-example';
 export let divClass = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
@@ -32,13 +34,12 @@ const handleDrawer = () => {
     hidden = !hidden;
     console.log('clicked');
 };
+let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
 </script>
 
 {#if !hidden}
   {#if backdrop}
-    <div
-      class="fixed top-0 left-0 z-50 w-full h-full bg-gray-900/70"
-      on:click={() => !hidden && handleDrawer()} />
+    <div class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
   {/if}
   <div
     use:clickOutside={() => !hidden && handleDrawer()}

package/drawer/Drawer.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         position?: 'fixed' | 'absolute';
         width?: string;
         backdrop?: boolean;
+        bgColor?: string;
+        bgOpacity?: string;
         placement?: 'left' | 'right' | 'top' | 'bottom';
         id?: string;
         divClass?: string;

package/dropdowns/Dropdown.svelte

@@ -8,6 +8,7 @@ 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 color = 'dropdown';
 let popoverClass;
 $: popoverClass = classNames('outline-none', $$props.class);
 </script>
@@ -36,9 +37,9 @@ $: popoverClass = classNames('outline-none', $$props.class);
 
 <Popper
 	rounded
-	border
 	shadow
 	activeContent
+	{color}
 	arrow={false}
 	{placement}
 	trigger="click"

package/dropdowns/Dropdown.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         labelClass?: string;
         placement?: Placement;
         open?: boolean;
+        color?: string;
     };
     events: {
         show: CustomEvent<any>;

package/dropdowns/DropdownItem.svelte

@@ -1,24 +1,27 @@
 <script>import classNames from 'classnames';
 export let liClass = 'block font-medium cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
 export let color = 'default';
-export let tabindex = 0;
+export let href = undefined;
 const colors = {
     default: 'text-gray-700 dark:text-gray-200 dark:hover:text-white',
     red: 'text-red-600 dark:text-red-500'
 };
 </script>
 
-<li
-	{...$$restProps}
-	class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
-	on:click
-	on:change
-	on:keydown
-	on:keyup
-	on:focus
-	on:blur
-	on:mouseenter
-	on:mouseleave
-	{tabindex}>
-	<slot />
+<li>
+	<svelte:element
+		this={href ? 'a' : 'div'}
+		{href}
+		{...$$restProps}
+		class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
+		on:click
+		on:change
+		on:keydown
+		on:keyup
+		on:focus
+		on:blur
+		on:mouseenter
+		on:mouseleave>
+		<slot />
+	</svelte:element>
 </li>

package/dropdowns/DropdownItem.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         liClass?: string;
         color?: string;
-        tabindex?: number;
+        href?: string;
     };
     events: {
         click: MouseEvent;

package/forms/Range.svelte

@@ -1,34 +1,22 @@
-<script>export let id = 'range';
-export let min;
-export let max;
+<script>import classNames from 'classnames';
 export let value;
-export let step;
-export let size;
-let inputClass = 'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 ';
-if (size === 'small') {
-    inputClass += 'h-1 mb-6 range-sm';
-}
-else if (size === 'large') {
-    inputClass += 'h-3 range-lg';
-}
-else {
-    inputClass += 'h-2 mb-6';
-}
+export let size = 'md';
+const sizes = {
+    sm: 'h-1 range-sm',
+    md: 'h-2',
+    lg: 'h-3 range-lg'
+};
+let inputClass;
+$: inputClass = classNames('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
 </script>
 
 <input
-	{...$$restProps}
-	{id}
-	name={id}
 	type="range"
-	{min}
-	{max}
 	bind:value
-	{step}
+	{...$$restProps}
 	class={inputClass}
 	on:change
 	on:click
 	on:keydown
 	on:keypress
-	on:keyup
-/>
+	on:keyup />

package/forms/Range.svelte.d.ts

@@ -2,12 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string;
-        min: number;
-        max: number;
         value: number;
-        step: number;
-        size: 'small' | 'large';
+        size?: 'sm' | 'md' | 'lg';
     };
     events: {
         change: Event;

package/index.d.ts

@@ -50,7 +50,6 @@ export { default as Modal } from './modals/Modal.svelte';
 export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 export { default as Navbar } from './navbar/Navbar.svelte';
 export { default as NavBrand } from './navbar/NavBrand.svelte';
-export { default as NavDropdown } from './navbar/NavDropdown.svelte';
 export { default as NavHamburger } from './navbar/NavHamburger.svelte';
 export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
@@ -125,5 +124,7 @@ 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';
+export { default as Chevron } from './utils/Chevron.svelte';
 export { default as InformationCircle } from './utils/InformationCircle.svelte';
 export { default as UserCircle } from './utils/UserCircle.svelte';
+export { default as Video } from './video/Video.svelte';

package/index.js

@@ -70,7 +70,6 @@ export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
 // Navbar
 export { default as Navbar } from './navbar/Navbar.svelte';
 export { default as NavBrand } from './navbar/NavBrand.svelte';
-export { default as NavDropdown } from './navbar/NavDropdown.svelte';
 export { default as NavHamburger } from './navbar/NavHamburger.svelte';
 export { default as NavLi } from './navbar/NavLi.svelte';
 export { default as NavUl } from './navbar/NavUl.svelte';
@@ -160,5 +159,8 @@ 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';
+export { default as Chevron } from './utils/Chevron.svelte';
 export { default as InformationCircle } from './utils/InformationCircle.svelte';
 export { default as UserCircle } from './utils/UserCircle.svelte';
+// video
+export { default as Video } from './video/Video.svelte';

package/megamenu/MegaMenu.svelte

@@ -1,12 +1,12 @@
-<script>import { setContext, afterUpdate } from 'svelte';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
+import Popper from '../utils/Popper.svelte';
 export let items = [];
 export let full = false;
-setContext('background', true);
+export let open = false;
 let wrapperClass;
-$: wrapperClass = classNames('border-gray-100 shadow-md dark:border-gray-700', full ? 'border-y' : 'rounded-lg border', full ? 'bg-white dark:bg-gray-800' : 'bg-white dark:bg-gray-700', $$props.class);
+$: wrapperClass = classNames(full && 'border-y w-full', $$props.class);
 let ulClass;
-$: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', 'text-gray-500 dark:text-gray-400', full && $$slots.extra && 'md:w-2/3');
+$: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3');
 const init = (node) => {
     if (full) {
         node.parentElement.classList.add('inset-x-0');
@@ -14,8 +14,20 @@ const init = (node) => {
 };
 </script>
 
-<div class={wrapperClass} use:init>
-	<div class="flex flex-col md:flex-row p-4 max-w-screen-xl justify-center mx-auto">
+<Popper
+	color={full ? 'default' : 'dropdown'}
+	border={!full}
+	rounded={!full}
+	activeContent
+	arrow={false}
+	trigger="click"
+	placement="bottom"
+	yOnly={full}
+	{...$$restProps}
+	class={wrapperClass}
+	on:show
+	bind:open>
+	<div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto">
 		<ul class={ulClass}>
 			{#each items as item, index}
 				<li>
@@ -27,4 +39,4 @@ const init = (node) => {
 		</ul>
 		{#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
 	</div>
-</div>
+</Popper>

package/megamenu/MegaMenu.svelte.d.ts

@@ -7,8 +7,11 @@ declare const __propDef: {
             [propName: string]: any;
         })[];
         full?: boolean;
+        open?: boolean;
     };
     events: {
+        show: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/navbar/NavHamburger.svelte

@@ -1,13 +1,9 @@
-<script>import classNames from 'classnames';
+<script>import ToolbarButton from '../toolbar/ToolbarButton.svelte';
+import classNames from 'classnames';
 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';
+export let btnClass = 'ml-3 md:hidden';
 </script>
 
-<button
-	{...$$restProps}
-	class={classNames(btnClass, $$props.class)}
-	data-testid="navbar-toggle"
-	on:click>
-	<span class="sr-only">Open main menu</span>
+<ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
 	<Menu class="h-6 w-6 shrink-0" />
-</button>
+</ToolbarButton>

package/navbar/NavLi.svelte

@@ -1,9 +1,10 @@
 <script>import classNames from 'classnames';
 export let href = '';
 export let active = false;
-export let activeClass = 'block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white';
-export let nonActiveClass = 'block py-2 pr-4 pl-3 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 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
-$: aClass = active ? activeClass : nonActiveClass;
+export let activeClass = 'text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent';
+export let nonActiveClass = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+let liClass;
+$: liClass = classNames('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass : nonActiveClass, $$props.class);
 </script>
 
 <li>
@@ -21,7 +22,7 @@ $: aClass = active ? activeClass : nonActiveClass;
 		on:mouseenter
 		on:mouseleave
 		on:mouseover
-		class={classNames(aClass, $$props.class)}>
+		class={liClass}>
 		<slot />
 	</svelte:element>
 </li>

package/navbar/NavUl.svelte

@@ -1,25 +1,27 @@
 <script>import classNames from 'classnames';
 import { slide } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
+import Frame from '../utils/Frame.svelte';
 export let divClass = 'w-full md:block md:w-auto';
-export let ulClass = 'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+export let ulClass = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
 export let hidden = true;
+let _divClass;
+$: _divClass = classNames(divClass, $$props.class);
+let _ulClass;
+$: _ulClass = classNames(ulClass, 
+// 'divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-700',
+$$props.class);
 </script>
 
 {#if !hidden}
-	<div
-		{...$$restProps}
-		class={classNames(divClass, $$props.class)}
-		id="mobile-menu"
-		transition:slide={{ delay: 250, duration: 500, easing: quintOut }}
-	>
-		<ul class={classNames(ulClass, $$props.class)}>
+	<div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
+		<Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
 			<slot />
-		</ul>
+		</Frame>
 	</div>
 {:else}
-	<div {...$$restProps} class={classNames(divClass, $$props.class)} {hidden} id="mobile-menu">
-		<ul class={classNames(ulClass, $$props.class)}>
+	<div {...$$restProps} class={_divClass} {hidden}>
+		<ul class={_ulClass}>
 			<slot />
 		</ul>
 	</div>

package/navbar/Navbar.svelte

@@ -1,31 +1,17 @@
-<script>import classNames from 'classnames';
-export let navClass = 'bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-gray-800';
+<script>import Frame from '../utils/Frame.svelte';
+import classNames from 'classnames';
+export let navClass = 'px-2 sm:px-4 py-2.5';
 export let navDivClass = 'mx-auto flex flex-wrap justify-between items-center ';
 export let fluid = true;
-export let rounded = false;
-export let border = false;
+export let color = 'navbar';
 let hidden = true;
 let toggle = () => {
     hidden = !hidden;
 };
 </script>
 
-<nav
-	{...$$restProps}
-	class={classNames(
-		navClass,
-		{
-			rounded: rounded,
-			border: border
-		},
-		$$props.class
-	)}
->
-	<div
-		class={classNames(navDivClass, {
-			container: fluid
-		})}
-	>
+<Frame tag="nav" {color} {...$$restProps} class={classNames(navClass, $$props.class)}>
+	<div class={classNames(navDivClass, fluid && 'container')}>
 		<slot {hidden} {toggle} />
 	</div>
-</nav>
+</Frame>

package/navbar/Navbar.svelte.d.ts

@@ -5,8 +5,7 @@ declare const __propDef: {
         navClass?: string;
         navDivClass?: string;
         fluid?: boolean;
-        rounded?: boolean;
-        border?: boolean;
+        color?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.9",
+  "version": "0.26.12",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -248,7 +248,8 @@
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/createEventDispatcher": "./utils/createEventDispatcher.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
-    "./utils/generateId": "./utils/generateId.js"
+    "./utils/generateId": "./utils/generateId.js",
+    "./video/Video.svelte": "./video/Video.svelte"
   },
   "svelte": "./index.js"
 }

package/progressbars/Progressbar.svelte

@@ -4,6 +4,7 @@ export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';
 export let color = 'blue';
+export let labelInsideClass = 'text-blue-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 // let barColor: string;
 const barColors = {
     blue: 'bg-blue-600',
@@ -17,20 +18,17 @@ const barColors = {
 </script>
 
 {#if labelOutside}
-	<div class="flex justify-between mb-1">
-		<span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
-		<span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
-	</div>
+  <div {...$$restProps} class={classNames('flex justify-between mb-1', $$props.class)}>
+    <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
+    <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
+  </div>
 {/if}
-<div class="w-full bg-gray-200 rounded-full {size} dark:bg-gray-700">
-	{#if labelInside}
-		<div
-			class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
-			style="width: {progress}%"
-		>
-			{progress}%
-		</div>
-	{:else}
-		<div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
-	{/if}
+<div class={classNames('w-full bg-gray-200 rounded-full dark:bg-gray-700', size, $$props.class)}>
+  {#if labelInside}
+    <div class={classNames(labelInsideClass, barColors[color])} style="width: {progress}%">
+      {progress}%
+    </div>
+  {:else}
+    <div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
+  {/if}
 </div>

package/progressbars/Progressbar.svelte.d.ts

@@ -2,11 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { Colors } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         progress?: string;
         size?: string;
         labelInside?: boolean;
         labelOutside?: string;
         color?: Colors;
+        labelInsideClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/toolbar/ToolbarButton.svelte

@@ -23,9 +23,7 @@ const sizing = {
 };
 let buttonClass;
 $: buttonClass = classNames('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
-    (background
-        ? 'hover:bg-gray-100 dark:hover:bg-gray-600'
-        : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
+    (background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
 const svgSizes = {
     xs: 'w-3 h-3',
     sm: 'w-3.5 h-3.5',
@@ -33,20 +31,14 @@ const svgSizes = {
 };
 </script>
 
-<button on:click type="button" class={buttonClass} aria-label={ariaLabel ?? name}>
+<button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
 	{#if name}<span class="sr-only">{name}</span>{/if}
 	<slot>
-		<svg
-			class={svgSizes[size]}
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-		>
+		<svg class={svgSizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
 			<path
 				fill-rule="evenodd"
 				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-				clip-rule="evenodd"
-			/>
+				clip-rule="evenodd" />
 		</svg>
 	</slot>
 </button>

package/typography/A.svelte

@@ -1,10 +1,9 @@
 <script>import classNames from 'classnames';
-export let id;
 export let href = '#';
 export let color = 'text-blue-600 dark:text-blue-500';
 export let aClass = 'inline-flex items-center hover:underline';
 </script>
 
-<a {href} {id} class={classNames(aClass, color, $$props.class)}>
+<a {...$$restProps} {href} class={classNames(aClass, color, $$props.class)}>
   <slot />
 </a>

package/typography/A.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         href?: string;
         color?: string;
         aClass?: string;

package/typography/Blockquote.svelte

@@ -1,5 +1,4 @@
 <script>import classNames from 'classnames';
-export let id;
 export let border = false;
 export let italic = true;
 export let borderClass = 'border-l-4 border-gray-300 dark:border-gray-500';
@@ -31,7 +30,7 @@ const sizes = {
 </script>
 
 <blockquote
-  {id}
+  {...$$restProps}
   class={classNames(
     baseClass,
     alignmentClasses[alignment],

package/typography/Blockquote.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         border?: boolean;
         italic?: boolean;
         borderClass?: string;

package/typography/DescriptionList.svelte

@@ -1,11 +1,10 @@
 <script>import classNames from 'classnames';
-export let id;
 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} {id} class={classDesc}>
+<svelte:element this={tag} {...$$restProps} class={classDesc}>
   <slot />
 </svelte:element>

package/typography/DescriptionList.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         tag: 'dt' | 'dd';
         dtClass?: string;
         ddClass?: string;

package/typography/Heading.svelte

@@ -2,7 +2,6 @@
 export let tag = 'h1';
 export let color = 'text-gray-900 dark:text-white';
 export let customSize;
-export let id;
 const textSizes = {
     h1: 'text-5xl font-extrabold',
     h2: 'text-4xl font-bold',
@@ -15,7 +14,7 @@ const textSizes = {
 
 <svelte:element
   this={tag}
-  {id}
+  {...$$restProps}
   class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
   <slot />
 </svelte:element>

package/typography/Heading.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
         color?: string;
         customSize: string;
-        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Hr.svelte

@@ -1,5 +1,4 @@
 <script>import classNames from 'classnames';
-export let id;
 export let icon = false;
 export let width = 'w-full';
 export let height = 'h-px';
@@ -14,7 +13,7 @@ let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass)
 </script>
 
 {#if $$slots}
-  <div class={classDiv} {id}>
+  <div {...$$restProps} class={classDiv}>
     <hr class={horizontalClass} />
     <div class={middleClass}>
       <slot />

package/typography/Hr.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         icon?: boolean;
         width?: string;
         height?: string;

package/typography/Img.svelte

@@ -1,5 +1,4 @@
 <script>import classNames from 'classnames';
-export let id;
 export let caption = undefined;
 export let src = undefined;
 export let srcset = undefined;
@@ -23,7 +22,7 @@ export let captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray
   </figure>
 {:else}
   <img
-    {id}
+    {...$$restProps}
     class={classNames(imgClass, size, alignment, effect, $$props.class)}
     {src}
     {srcset}

package/typography/Img.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         caption?: string | undefined;
         src?: string | undefined;
         srcset?: string | undefined;

package/typography/Layout.svelte

@@ -1,11 +1,10 @@
 <script>import classNames from 'classnames';
-export let id;
 export let divClass = 'grid';
 export let cols = 'grid-cols-1 sm:grid-cols-2';
 export let gap;
 let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
 </script>
 
-<div {id} class={classDiv}>
+<div {...$$restProps} class={classDiv}>
   <slot />
 </div>

package/typography/Layout.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id: string;
+        [x: string]: any;
         divClass?: string;
         cols?: string;
         gap: number;

package/typography/Li.svelte

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

package/typography/Li.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         icon?: boolean;
         liClass?: string;
     };

package/typography/List.svelte

@@ -1,5 +1,4 @@
 <script>import classNames from 'classnames';
-export let id;
 export let tag = 'ul';
 export let list = 'disc';
 export let position = 'inside';
@@ -19,6 +18,6 @@ let positions = {
 let classList = classNames(color, tag === 'ul' ? ulClass : 'ol' ? olClass : dlClass, lists[list], positions[position], $$props.class);
 </script>
 
-<svelte:element this={tag} {id} class={classList}>
+<svelte:element this={tag} {...$$restProps} class={classList}>
   <slot />
 </svelte:element>

package/typography/List.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         tag?: 'ul' | 'ol' | 'dl';
         list?: 'disc' | 'none' | 'decimal';
         position?: 'inside' | 'outside';

package/typography/Mark.svelte

@@ -1,10 +1,9 @@
 <script>import classNames from 'classnames';
-export let id;
 export let color = 'text-white dark:bg-blue-500';
 export let bgColor = 'bg-blue-600';
 export let markClass = 'px-2 rounded';
 </script>
 
-<mark {id} class={classNames(markClass, bgColor, color, $$props.class)}>
+<mark {...$$restProps} class={classNames(markClass, bgColor, color, $$props.class)}>
   <slot />
 </mark>

package/typography/Mark.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         color?: string;
         bgColor?: string;
         markClass?: string;

package/typography/P.svelte

@@ -1,5 +1,4 @@
 <script>import classNames from 'classnames';
-export let id;
 export let color = 'text-gray-900 dark:text-white';
 export let height = 'normal';
 export let align = 'left';
@@ -73,6 +72,6 @@ let colorAndopacity = color
 let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
-<p {id} class={classP}>
+<p {...$$restProps} class={classP}>
   <slot />
 </p>

package/typography/P.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         color?: string;
         height?: 'normal' | 'relaxed' | 'loose';
         align?: 'left' | 'center' | 'right';

package/typography/Secondary.svelte

@@ -1,9 +1,8 @@
 <script>import classNames from 'classnames';
-export let id;
 export let color = 'text-gray-500 dark:text-gray-400';
 export let secondaryClass = 'font-semibold';
 </script>
 
-<small {id} class={classNames(color, secondaryClass, $$props.class)}>
+<small {...$$restProps} class={classNames(color, secondaryClass, $$props.class)}>
   <slot />
 </small>

package/typography/Secondary.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         color?: string;
         secondaryClass?: string;
     };

package/typography/Span.svelte

@@ -1,5 +1,4 @@
 <script>import classNames from 'classnames';
-export let id;
 export let italic = false;
 export let underline = false;
 export let linethrough = false;
@@ -13,6 +12,6 @@ let underlineClass = classNames('underline', decorationClass);
 let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
 </script>
 
-<span {id} class={classSpan}>
+<span {...$$restProps} class={classSpan}>
   <slot />
 </span>

package/typography/Span.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         italic?: boolean;
         underline?: boolean;
         linethrough?: boolean;

package/typography/Ul.svelte

@@ -1,5 +1,4 @@
 <script>import classNames from 'classnames';
-export let id;
 export let list = 'disc';
 export let position = 'inside';
 export let ulClass = 'max-w-md text-gray-500 dark:text-gray-400';
@@ -16,6 +15,6 @@ let classUl = classNames(ulClass, lists[list], positions[position], $$props.clas
 console.log('list', list);
 </script>
 
-<ul {id} class={classUl} {list}>
+<ul {...$$restProps} class={classUl} {list}>
   <slot />
 </ul>

package/typography/Ul.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id: string;
         list?: 'disc' | 'none' | 'decimal';
         position?: 'inside' | 'outside';
         ulClass?: string;

package/utils/Chevron.svelte

@@ -2,7 +2,9 @@
 import ChevronLeft from './ChevronLeft.svelte';
 import ChevronUp from './ChevronUp.svelte';
 import ChevronRight from './ChevronRight.svelte';
+import Wrapper from './Wrapper.svelte';
 export let placement = 'bottom';
+export let aligned = false;
 const icons = {
     top: ChevronUp,
     right: ChevronRight,
@@ -14,10 +16,12 @@ let icon;
 $: icon = icons[placement.split('-')[0]] ?? ChevronDown;
 </script>
 
-{#if placement.split('-')[0] === 'left'}
-	<ChevronLeft class="h-4 w-4 mr-2" />
-	<slot />
-{:else}
-	<slot />
-	<svelte:component this={icon} class="h-4 w-4 ml-2" />
-{/if}
+<Wrapper class="flex items-center justify-between" show={aligned}>
+	{#if placement.split('-')[0] === 'left'}
+		<ChevronLeft class="h-4 w-4 mr-2" />
+		<slot />
+	{:else}
+		<slot />
+		<svelte:component this={icon} class="h-4 w-4 ml-2" />
+	{/if}
+</Wrapper>

package/utils/Chevron.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Placement } from '@popperjs/core';
 declare const __propDef: {
     props: {
         placement?: Placement;
+        aligned?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/utils/Frame.svelte

@@ -29,6 +29,10 @@ const bgColors = {
     light: 'bg-gray-50 dark:bg-gray-700',
     dark: 'bg-gray-100 dark:bg-gray-700',
     default: 'bg-white dark:bg-gray-800',
+    dropdown: 'bg-white dark:bg-gray-700',
+    navbar: 'bg-white dark:bg-gray-900',
+    navbarUl: 'bg-gray-50 dark:bg-gray-800',
+    form: 'bg-gray-50 dark:bg-gray-700',
     none: ''
 };
 const textColors = {
@@ -43,6 +47,10 @@ const textColors = {
     light: 'text-gray-700 dark:text-gray-300',
     dark: 'text-gray-700 dark:text-gray-300',
     default: 'text-gray-500 dark:text-gray-400',
+    dropdown: 'text-gray-500 dark:text-gray-400',
+    navbar: 'text-gray-700 dark:text-gray-200',
+    navbarUl: 'text-gray-700 dark:text-gray-400',
+    from: 'text-gray-900 dark:text-white',
     none: ''
 };
 const borderColors = {
@@ -57,6 +65,10 @@ const borderColors = {
     light: 'border-gray-500',
     dark: 'border-gray-500',
     default: 'border-gray-200 dark:border-gray-700',
+    dropdown: 'border-gray-100 dark:border-gray-700',
+    navbar: 'border-gray-100 dark:border-gray-700',
+    navbarUl: 'border-gray-100 dark:border-gray-700',
+    form: 'border-gray-300 dark:border-gray-700',
     none: ''
 };
 // have a custom transition function that returns the desired transition

package/utils/Frame.svelte.d.ts

@@ -4,7 +4,7 @@ import type { TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: 'div' | 'a';
+        tag?: 'div' | 'a' | 'nav' | 'ul';
         color?: string;
         rounded?: boolean;
         border?: boolean;

package/utils/Popper.svelte

@@ -9,7 +9,9 @@ export let offset = 8;
 export let placement = 'top';
 export let trigger = 'hover';
 export let triggeredBy = undefined;
+export let strategy = 'absolute';
 export let open = false;
+export let yOnly = false;
 const dispatch = createEventDispatcher();
 let clickable;
 $: clickable = trigger === 'click';
@@ -53,8 +55,16 @@ const hideHandler = (ev) => {
 function init(node, _triggerEl) {
     popper = createPopper(_triggerEl, node, {
         placement,
+        strategy,
         modifiers: [
-            { name: 'offset', options: { offset: [0, offset] } },
+            {
+                name: 'offset',
+                options: {
+                    offset: ({ placement, reference, popper }) => {
+                        return [yOnly ? popper.width / 2 - reference.width / 2 - reference.x : 0, offset];
+                    }
+                }
+            },
             { name: 'eventListeners', enabled: open }
         ]
     });

package/utils/Popper.svelte.d.ts

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

package/video/Video.svelte

@@ -0,0 +1,18 @@
+<script>import classNames from 'classnames';
+// export let width;
+// export let controls: boolean = true;
+// export let autoplay: boolean = false;
+export let src;
+export let type = 'video/mp4';
+// export let attribute = '';
+let videoClass = classNames($$props.class);
+// const setAttribute = (node, params) => {
+//   node.setAttribute(params, '');
+// };
+</script>
+
+<video {...$$restProps} class={videoClass}>
+  <source {src} {type} />
+  <slot />
+  Your browser does not support the video tag.
+</video>

package/video/Video.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        src: string;
+        type?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type VideoProps = typeof __propDef.props;
+export declare type VideoEvents = typeof __propDef.events;
+export declare type VideoSlots = typeof __propDef.slots;
+export default class Video extends SvelteComponentTyped<VideoProps, VideoEvents, VideoSlots> {
+}
+export {};