flowbite-svelte 0.26.7 → 0.26.10

package/CHANGELOG.md

@@ -2,6 +2,54 @@
 
 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.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)
+
+
+### Features
+
+* add id to typograpy components ([64cbe1b](https://github.com/themesberg/flowbite-svelte/commit/64cbe1b6f2cbe43fdf5cb71a0d82e3a5caad1586))
+* add placement to Drawer component ([1b91e52](https://github.com/themesberg/flowbite-svelte/commit/1b91e52618da8935b326a69161d01f0cc7739158))
+* working on drawer ([07a8e02](https://github.com/themesberg/flowbite-svelte/commit/07a8e02ceac450e7e7ceeb2ad9b98bfac7c7c1cf))
+
+
+### Bug Fixes
+
+* folder names without s and update tests ([4e9c9ce](https://github.com/themesberg/flowbite-svelte/commit/4e9c9ce69e06b1a8e4394c3920c75606894c06d3))
+* no dropdown docs ([4f92d9b](https://github.com/themesberg/flowbite-svelte/commit/4f92d9b56a53677bed7264b6f044e64a10c42c7e))
+* update Htwo using scroll-mt-20 ([2006490](https://github.com/themesberg/flowbite-svelte/commit/200649069a05c6df4ed0e269d3479526092afe01))
+
+### [0.26.8](https://github.com/themesberg/flowbite-svelte/compare/v0.26.7...v0.26.8) (2022-09-03)
+
+
+### Features
+
+* dropdown button ([f6347f2](https://github.com/themesberg/flowbite-svelte/commit/f6347f280cbfc552d001aa22128026174b46a6f3))
+* more Frame inheritance ([bb72d69](https://github.com/themesberg/flowbite-svelte/commit/bb72d6952386bd0f6dec4711795e3591a6837c02))
+* popover finalization ([c71481e](https://github.com/themesberg/flowbite-svelte/commit/c71481ec18e2850488d86cfdb583587eae4a19b2))
+
+
+### Bug Fixes
+
+* missing 683restProps ([0d52fd1](https://github.com/themesberg/flowbite-svelte/commit/0d52fd1b4168c8cc707c174dc2c18f532cf2e93c))
+* no triggers error ([83075e1](https://github.com/themesberg/flowbite-svelte/commit/83075e1a969bdf93a520bd9e35b339e36bf4f325))
+* remove unused imports ([acb58b9](https://github.com/themesberg/flowbite-svelte/commit/acb58b9144948feeb3c1c14b41a71d2122187340))
+
 ### [0.26.7](https://github.com/themesberg/flowbite-svelte/compare/v0.26.6...v0.26.7) (2022-09-03)
 
 

package/buttons/Button.svelte

@@ -77,7 +77,7 @@ const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
-    : classNames('group text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none', outline && gradient
+    : classNames('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none', outline && gradient
         ? 'p-0.5'
         : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
         (background
@@ -93,24 +93,23 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
 </script>
 
 <svelte:element
-	this={href ? 'a' : 'button'}
-	type={href ? undefined : type}
-	{href}
-	{...$$restProps}
-	class={buttonClass}
-	on:click
-	on:change
-	on:keydown
-	on:keyup
-	on:mouseenter
-	on:mouseleave
->
-	{#if outline && gradient}
-		<!-- Trick to prentend outline without using border
+  this={href ? 'a' : 'button'}
+  type={href ? undefined : type}
+  {href}
+  {...$$restProps}
+  class={buttonClass}
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:mouseenter
+  on:mouseleave>
+  {#if outline && gradient}
+    <!-- Trick to prentend outline without using border
 		This has a limitation of no supporting transparency as
 		background is set to bg-white dark:bg-gray-900 -->
-		<span class={gradientOutlineClass}><slot /></span>
-	{:else}
-		<slot />
-	{/if}
+    <span class={gradientOutlineClass}><slot /></span>
+  {:else}
+    <slot />
+  {/if}
 </svelte:element>

package/drawer/Drawer.svelte

@@ -0,0 +1,55 @@
+<script>import classNames from 'classnames';
+import { fly, slide, blur, fade } from 'svelte/transition';
+import { clickOutside } from '../utils/clickOutside';
+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';
+export let transitionParams = {};
+export let transitionType = 'fly';
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
+const placements = {
+    left: 'inset-y-0 left-0',
+    right: 'inset-y-0 right-0',
+    top: 'inset-x-0 top-0',
+    bottom: 'inset-x-0 bottom-0'
+};
+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={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+  {/if}
+  <div
+    use:clickOutside={() => !hidden && handleDrawer()}
+    {id}
+    {...$$restProps}
+    class={classNames(divClass, width, position, placements[placement], $$props.class)}
+    transition:multiple={transitionParams}
+    tabindex="-1"
+    aria-controls={id}
+    aria-labelledby={id}>
+    <slot {hidden} />
+  </div>
+{/if}

package/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        hidden?: boolean;
+        position?: 'fixed' | 'absolute';
+        width?: string;
+        backdrop?: boolean;
+        bgColor?: string;
+        bgOpacity?: string;
+        placement?: 'left' | 'right' | 'top' | 'bottom';
+        id?: string;
+        divClass?: string;
+        transitionParams?: drawerTransitionParamTypes;
+        transitionType?: drawerTransitionTypes;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            hidden: boolean;
+        };
+    };
+};
+export declare type DrawerProps = typeof __propDef.props;
+export declare type DrawerEvents = typeof __propDef.events;
+export declare type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/dropdowns/Dropdown.svelte

@@ -1,26 +1,14 @@
-<script>import Button from '../buttons/Button.svelte';
-import Frame from '../utils/Frame.svelte';
+<script>import classNames from 'classnames';
+import Button from '../buttons/Button.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 Chevron from '../utils/Chevron.svelte';
 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;
-const icons = {
-    top: ChevronUp,
-    right: ChevronRight,
-    bottom: ChevronDown,
-    left: ChevronLeft
-};
-// @ts-ignore
-$: icon = icons[placement.split('-')[0]];
+export let color = 'dropdown';
 let popoverClass;
 $: popoverClass = classNames('outline-none', $$props.class);
 </script>
@@ -28,33 +16,40 @@ $: popoverClass = classNames('outline-none', $$props.class);
 {#if label}
 	<slot name="trigger">
 		{#if inline}
-			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
-				<slot name="label">{label}</slot>
+			<button class={labelClass}>
 				{#if arrowIcon}
-					<svelte:component
-						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
+					<Chevron {placement}><slot name="label">{label}</slot></Chevron>
+				{:else}
+					<slot name="label">{label}</slot>
 				{/if}
 			</button>
 		{:else}
-			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
-				<slot name="label">{label}</slot>
+			<Button>
 				{#if arrowIcon}
-					<svelte:component
-						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
+					<Chevron {placement}><slot name="label">{label}</slot></Chevron>
+				{:else}
+					<slot name="label">{label}</slot>
 				{/if}
 			</Button>
 		{/if}
 	</slot>
 {/if}
 
-<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
+	rounded
+	shadow
+	activeContent
+	{color}
+	arrow={false}
+	{placement}
+	trigger="click"
+	{...$$restProps}
+	class={popoverClass}
+	on:show
+	bind:open>
+	<slot name="content">
+		<ul class="py-1">
+			<slot />
+		</ul>
+	</slot>
 </Popper>

package/dropdowns/Dropdown.svelte.d.ts

@@ -7,9 +7,9 @@ declare const __propDef: {
         inline?: boolean;
         arrowIcon?: boolean;
         labelClass?: string;
-        placement?: 'auto' | Placement;
+        placement?: Placement;
         open?: boolean;
-        triggeredBy?: string;
+        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 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="0"
->
-	<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,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         liClass?: string;
         color?: string;
+        href?: string;
     };
     events: {
         click: MouseEvent;

package/index.d.ts

@@ -11,6 +11,7 @@ export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
+export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
@@ -49,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';
@@ -124,5 +124,6 @@ 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';

package/index.js

@@ -22,6 +22,8 @@ export { default as CarouselTransition } from './carousels/CarouselTransition.sv
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 // Datepicker
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
+// Drawer
+export { default as Drawer } from './drawer/Drawer.svelte';
 // Dropdown
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
@@ -68,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';
@@ -158,5 +159,6 @@ 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';

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,13 +1,15 @@
 <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>
-	<a
+	<svelte:element
+		this={href ? 'a' : 'div'}
 		{href}
 		{...$$restProps}
 		on:blur
@@ -20,8 +22,7 @@ $: aClass = active ? activeClass : nonActiveClass;
 		on:mouseenter
 		on:mouseleave
 		on:mouseover
-		class={classNames(aClass, $$props.class)}
-	>
+		class={liClass}>
 		<slot />
-	</a>
+	</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.7",
+  "version": "0.26.10",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -118,6 +118,7 @@
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
     "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
     "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
+    "./drawer/Drawer.svelte": "./drawer/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
     "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
@@ -232,7 +233,7 @@
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
     "./typography/Span.svelte": "./typography/Span.svelte",
     "./typography/Ul.svelte": "./typography/Ul.svelte",
-    "./typography/Underline.svelte": "./typography/Underline.svelte",
+    "./utils/Chevron.svelte": "./utils/Chevron.svelte",
     "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
     "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",
     "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
@@ -243,6 +244,7 @@
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/UserCircle.svelte": "./utils/UserCircle.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",
+    "./utils/backdrop": "./utils/backdrop.js",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/createEventDispatcher": "./utils/createEventDispatcher.js",
     "./utils/focusTrap": "./utils/focusTrap.js",