flowbite-svelte 0.36.4 → 0.37.1

package/dist/kbd/Kbd.svelte.d.ts

@@ -14,6 +14,34 @@ declare const __propDef: {
 export type KbdProps = typeof __propDef.props;
 export type KbdEvents = typeof __propDef.events;
 export type KbdSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * - Setup
+ * - Default KBD
+ * - KBD inside text
+ * - KBD inside table
+ * - Arrow keys
+ * - Letter keys
+ * - Number keys
+ * - Function keys
+ * ## Props
+ * @prop kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Kbd } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Kbd class='px-2 py-1.5'>Shift</Kbd>
+ * <Kbd class='px-2 py-1.5'>Ctrl</Kbd>
+ * <Kbd class='px-2 py-1.5'>Tab</Kbd>
+ * <Kbd class='px-2 py-1.5'>Caps Lock</Kbd>
+ * <Kbd class='px-2 py-1.5'>Esc</Kbd>
+ * <Kbd class='px-4 py-1.5'>Spacebar</Kbd>
+ * <Kbd class='px-2 py-1.5'>Enter</Kbd>
+ * ```
+ */
 export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
 }
 export {};

package/dist/kbd/Kbd.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/Kbd.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}
+{"version":3,"file":"Kbd.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/Kbd.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}

package/dist/list-group/Listgroup.svelte

@@ -17,3 +17,24 @@ $: groupClass = classNames(defaultClass, $$props.class);
     <slot />
   {/each}
 </Frame>
+
+<!--
+  @component
+  ## Features
+  [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+  ## Props
+  @prop items: ListGroupItemType[] = [];
+  @prop active: boolean = false;
+  @prop defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+  ## Example
+  ```
+  <script>
+    import { Listgroup } from 'flowbite-svelte'
+    let simpleList = ["Profile", "Settings", "Messages", "Download"]
+  </script>
+
+  <Listgroup items={simpleList} let:item class="w-48">
+    {item}
+  </Listgroup>
+  ```
+-->

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

@@ -258,6 +258,25 @@ declare const __propDef: {
 export type ListgroupProps = typeof __propDef.props;
 export type ListgroupEvents = typeof __propDef.events;
 export type ListgroupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+ * ## Props
+ * @prop items: ListGroupItemType[] = [];
+ * @prop active: boolean = false;
+ * @prop defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Listgroup } from 'flowbite-svelte'
+ *   let simpleList = ["Profile", "Settings", "Messages", "Download"]
+ * </script>
+ *
+ * <Listgroup items={simpleList} let:item class="w-48">
+ *   {item}
+ * </Listgroup>
+ * ```
+ */
 export default class Listgroup extends SvelteComponentTyped<ListgroupProps, ListgroupEvents, ListgroupSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAqClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAuClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/list-group/ListgroupItem.svelte

@@ -57,3 +57,25 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
     <slot item={$$props} />
   </button>
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+  ## Props
+  @prop active: boolean = getContext('active');
+  @prop current: boolean = false;
+  @prop disabled: boolean = false;
+  @prop href: string = '';
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+-->

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -30,6 +30,26 @@ declare const __propDef: {
 export type ListgroupItemProps = typeof __propDef.props;
 export type ListgroupItemEvents = typeof __propDef.events;
 export type ListgroupItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+ * ## Props
+ * @prop active: boolean = getContext('active');
+ * @prop current: boolean = false;
+ * @prop disabled: boolean = false;
+ * @prop href: string = '';
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ */
 export default class ListgroupItem extends SvelteComponentTyped<ListgroupItemProps, ListgroupItemEvents, ListgroupItemSlots> {
 }
 export {};

package/dist/list-group/ListgroupItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/megamenu/MegaMenu.svelte

@@ -35,3 +35,56 @@ $: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto
     {#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
   </div>
 </Popper>
+
+<!--
+  @component
+  ## Feature
+  [Go to Mega Menu](https://flowbite-svelte.com/docs/components/mega-menu)
+  - Setup
+  - Default mega menu
+  - Mega menu with icons
+  - Full width dropdown
+  - Full width with CTA
+  - Full width with image
+  ## Props
+  @prop items: LinkTypeLike[] = [];
+  @prop full: boolean = false;
+  @prop open: boolean = false;  
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, Chevron, MegaMenu } from 'flowbite-svelte'
+    let menu = [
+      {name: 'About us', href: '/about'},
+      {name: 'Blog', href: '/blog'},
+      {name: 'Contact us', href: '/contact'},
+      {name: 'Library', href: '/library'},
+      {name: 'Newsletter', href: '/news'},
+      {name: 'Support Center', href: '/support'},
+      {name: 'Resources', href: '/resource'},
+      {name: 'Playground', href: '/play'},
+      {name: 'Terms', href: '/terms'},
+      {name: 'Pro Version', href: '/pro'},
+      {name: 'License', href: '/license'},
+    ];
+  </script>
+  
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/">Home</NavLi>
+      <NavLi><Chevron aligned>Mega menu</Chevron></NavLi>
+      <MegaMenu items={menu} let:item>
+        <a href={item.href} class="hover:text-blue-600 dark:hover:text-blue-500">{item.name}</a>
+      </MegaMenu>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/services">Products</NavLi>
+      <NavLi href="/services">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

package/dist/megamenu/MegaMenu.svelte.d.ts

@@ -22,6 +22,57 @@ declare const __propDef: {
 export type MegaMenuProps = typeof __propDef.props;
 export type MegaMenuEvents = typeof __propDef.events;
 export type MegaMenuSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Mega Menu](https://flowbite-svelte.com/docs/components/mega-menu)
+ * - Setup
+ * - Default mega menu
+ * - Mega menu with icons
+ * - Full width dropdown
+ * - Full width with CTA
+ * - Full width with image
+ * ## Props
+ * @prop items: LinkTypeLike[] = [];
+ * @prop full: boolean = false;
+ * @prop open: boolean = false;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, Chevron, MegaMenu } from 'flowbite-svelte'
+ *   let menu = [
+ *     {name: 'About us', href: '/about'},
+ *     {name: 'Blog', href: '/blog'},
+ *     {name: 'Contact us', href: '/contact'},
+ *     {name: 'Library', href: '/library'},
+ *     {name: 'Newsletter', href: '/news'},
+ *     {name: 'Support Center', href: '/support'},
+ *     {name: 'Resources', href: '/resource'},
+ *     {name: 'Playground', href: '/play'},
+ *     {name: 'Terms', href: '/terms'},
+ *     {name: 'Pro Version', href: '/pro'},
+ *     {name: 'License', href: '/license'},
+ *   ];
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/">Home</NavLi>
+ *     <NavLi><Chevron aligned>Mega menu</Chevron></NavLi>
+ *     <MegaMenu items={menu} let:item>
+ *       <a href={item.href} class="hover:text-blue-600 dark:hover:text-blue-500">{item.name}</a>
+ *     </MegaMenu>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/services">Products</NavLi>
+ *     <NavLi href="/services">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class MegaMenu extends SvelteComponentTyped<MegaMenuProps, MegaMenuEvents, MegaMenuSlots> {
 }
 export {};

package/dist/megamenu/MegaMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AA6CzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AA+CzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/modals/Modal.svelte

@@ -12,7 +12,6 @@ export let permanent = false;
 export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 export let defaultClass = 'relative flex flex-col mx-auto';
 export let outsideclose = false;
-export let id = "modal";
 const dispatch = createEventDispatcher();
 $: dispatch(open ? 'open' : 'hide');
 function prepareFocus(node) {
@@ -65,20 +64,14 @@ const sizes = {
 const onAutoClose = (e) => {
     const target = e.target;
     if (autoclose && target?.tagName === 'BUTTON')
-        hide(e);
+        hide(e); // close on any button click
+    if (outsideclose && target === e.currentTarget)
+        hide(e); // close on click outside
 };
 const hide = (e) => {
     e.preventDefault();
     open = false;
 };
-function isHTMLElement(value) {
-    return value instanceof HTMLElement;
-}
-const hidebyOutside = (e) => {
-    if (isHTMLElement(e.target) && e.target.id === 'outerModal') {
-        open = false;
-    }
-};
 let frameClass;
 $: frameClass = classNames(defaultClass, $$props.class);
 const isScrollable = (e) => [
@@ -91,19 +84,16 @@ function handleKeys(e) {
 }
 </script>
 
-
 {#if open}
   <!-- backdrop -->
   <div class={classNames('fixed inset-0 z-40', backdropClasses)} />
   <!-- dialog -->
   <div
-    id='outerModal'
     on:keydown={handleKeys}
     on:wheel|preventDefault|nonpassive
     use:prepareFocus
     use:focusTrap
-    on:click={autoclose ? onAutoClose : null}
-    on:click={outsideclose? hidebyOutside: null}
+    on:click={onAutoClose}
     class={classNames(
       'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex',
       ...getPlacementClasses()
@@ -111,7 +101,7 @@ function handleKeys(e) {
     tabindex="-1"
     aria-modal="true"
     role="dialog">
-    <div class="flex relative {sizes[size]} w-full max-h-full" {id} >
+    <div class="flex relative {sizes[size]} w-full max-h-full">
       <!-- Modal content -->
       <Frame rounded shadow {...$$restProps} class={frameClass}>
         <!-- Modal header -->
@@ -149,3 +139,50 @@ function handleKeys(e) {
     </div>
   </div>
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Modal](https://flowbite-svelte.com/docs/components/modal)
+  - Setup
+  - Default modal
+  - Closing by clicking outside
+  - Pop-up modal
+  - Form element
+  - Crypto wallet
+  - Sizes
+  - Placement
+  - Colors
+  - Scrolling behaviour
+  ## Props
+  @prop open: boolean = false;
+  @prop title: string = '';
+  @prop size: SizeType = 'md';
+  @prop placement: ModalPlacementType = 'center';
+  @prop autoclose: boolean = false;
+  @prop permanent: boolean = false;
+  @prop backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+  @prop defaultClass: string = 'relative flex flex-col mx-auto';
+  @prop outsideclose: boolean = false; 
+  ## Example
+  ```
+  <script>
+    import { Button, Modal } from 'flowbite-svelte'
+    let defaultModal = false;
+  </script>
+
+  <Button on:click={() => defaultModal = true}>Default modal</Button>
+  <Modal id="default-modal" title="Terms of Service" bind:open={defaultModal} autoclose>
+    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+      With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+    </p>
+    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+      The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+    </p>
+    <svelte:fragment slot='footer'>
+      <Button on:click={() => alert('Handle "success"')}>I accept</Button>
+      <Button color="alternative">Decline</Button>
+    </svelte:fragment>
+  </Modal>
+  ``` 
+-->

package/dist/modals/Modal.svelte.d.ts

@@ -266,6 +266,51 @@ declare const __propDef: {
 export type ModalProps = typeof __propDef.props;
 export type ModalEvents = typeof __propDef.events;
 export type ModalSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Modal](https://flowbite-svelte.com/docs/components/modal)
+ * - Setup
+ * - Default modal
+ * - Closing by clicking outside
+ * - Pop-up modal
+ * - Form element
+ * - Crypto wallet
+ * - Sizes
+ * - Placement
+ * - Colors
+ * - Scrolling behaviour
+ * ## Props
+ * @prop open: boolean = false;
+ * @prop title: string = '';
+ * @prop size: SizeType = 'md';
+ * @prop placement: ModalPlacementType = 'center';
+ * @prop autoclose: boolean = false;
+ * @prop permanent: boolean = false;
+ * @prop backdropClasses: string = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop defaultClass: string = 'relative flex flex-col mx-auto';
+ * @prop outsideclose: boolean = false;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Button, Modal } from 'flowbite-svelte'
+ *   let defaultModal = false;
+ * </script>
+ *
+ * <Button on:click={() => defaultModal = true}>Default modal</Button>
+ * <Modal id="default-modal" title="Terms of Service" bind:open={defaultModal} autoclose>
+ *   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ *     With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+ *   </p>
+ *   <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ *     The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+ *   </p>
+ *   <svelte:fragment slot='footer'>
+ *     <Button on:click={() => alert('Handle "success"')}>I accept</Button>
+ *     <Button color="alternative">Decline</Button>
+ *   </svelte:fragment>
+ * </Modal>
+ * ```
+ */
 export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
 }
 export {};

package/dist/modals/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAgL3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAuK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/Menu.svelte

@@ -22,15 +22,25 @@ $: switch (variation) {
 </script>
 
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	class={$$props.class}
-	{...$$restProps}
-	aria-label={ariaLabel}
-	fill="none"
-	{viewBox}
-	stroke-width="2"
-	on:click>
-	{@html svgpath}
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  class={$$props.class}
+  {...$$restProps}
+  aria-label={ariaLabel}
+  fill="none"
+  {viewBox}
+  stroke-width="2"
+  on:click>
+  {@html svgpath}
 </svg>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop size = '24';
+  @prop color = 'currentColor';
+  @prop variation: 'solid' | 'outline' = 'outline';
+  @prop ariaLabel = 'bars 3';
+-->

package/dist/navbar/Menu.svelte.d.ts

@@ -17,6 +17,14 @@ declare const __propDef: {
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop size = '24';
+ * @prop color = 'currentColor';
+ * @prop variation: 'solid' | 'outline' = 'outline';
+ * @prop ariaLabel = 'bars 3';
+ */
 export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
 }
 export {};

package/dist/navbar/Menu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Menu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}
+{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Menu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}

package/dist/navbar/NavBrand.svelte

@@ -3,5 +3,39 @@ export let href = '';
 </script>
 
 <a {href} {...$$restProps} class={classNames('flex items-center', $$props.class)}>
-	<slot />
+  <slot />
 </a>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop href: string = '';
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="https://flowbite.com/docs/images/logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

package/dist/navbar/NavBrand.svelte.d.ts

@@ -14,6 +14,38 @@ declare const __propDef: {
 export type NavBrandProps = typeof __propDef.props;
 export type NavBrandEvents = typeof __propDef.events;
 export type NavBrandSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop href: string = '';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="https://flowbite.com/docs/images/logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class NavBrand extends SvelteComponentTyped<NavBrandProps, NavBrandEvents, NavBrandSlots> {
 }
 export {};

package/dist/navbar/NavBrand.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"NavBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/navbar/NavDropdown.svelte

@@ -50,3 +50,53 @@ let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-
     </slot>
   </div>
 </li>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop liButtonClass: string = 'flex items-center justify-between w-full';
+  @prop name: string;
+  @prop child: NavbarType[] = [];
+  @prop dropdownDiv: string = '';
+  @prop dropdownLinkClassWithChild: string | undefined = undefined;
+  @prop rel: string | undefined = undefined;
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="https://flowbite.com/docs/images/logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->