flowbite-svelte 0.36.5 → 0.37.2

package/dist/modals/Modal.svelte

@@ -73,7 +73,7 @@ const hide = (e) => {
     open = false;
 };
 let frameClass;
-$: frameClass = classNames(defaultClass, $$props.class);
+$: frameClass = classNames(defaultClass, 'w-full', $$props.class);
 const isScrollable = (e) => [
     e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
     e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
@@ -93,7 +93,7 @@ function handleKeys(e) {
     on:wheel|preventDefault|nonpassive
     use:prepareFocus
     use:focusTrap
-    on:click={autoclose ? onAutoClose : 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()
@@ -139,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

@@ -22,7 +22,7 @@ declare const __propDef: {
         draggable?: import("svelte/elements").Booleanish | null | undefined;
         enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
-        id?: string | undefined;
+        id?: string | null | undefined;
         lang?: string | null | undefined;
         part?: string | null | undefined;
         placeholder?: string | null | undefined;
@@ -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;AAqK3C,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;AAsK3C,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

@@ -34,3 +34,13 @@ $: switch (variation) {
   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

@@ -5,3 +5,37 @@ export let href = '';
 <a {href} {...$$restProps} class={classNames('flex items-center', $$props.class)}>
   <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="/images/flowbite-svelte-icon-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="/images/flowbite-svelte-icon-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="/images/flowbite-svelte-icon-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/NavDropdown.svelte.d.ts

@@ -30,6 +30,54 @@ declare const __propDef: {
 export type NavDropdownProps = typeof __propDef.props;
 export type NavDropdownEvents = typeof __propDef.events;
 export type NavDropdownSlots = typeof __propDef.slots;
+/**
+ * [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="/images/flowbite-svelte-icon-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 NavDropdown extends SvelteComponentTyped<NavDropdownProps, NavDropdownEvents, NavDropdownSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavDropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA8C3C,QAAA,MAAM,SAAS;;;cAD6L,MAAM;;;qCAA2E,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAClR,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"NavDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavDropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAgD3C,QAAA,MAAM,SAAS;;;cAD6L,MAAM;;;qCAA2E,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAClR,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/navbar/NavHamburger.svelte

@@ -7,3 +7,37 @@ export let btnClass = 'ml-3 md:hidden';
 <ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
   <Menu class="h-6 w-6 shrink-0" />
 </ToolbarButton>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop btnClass: string = 'ml-3 md:hidden';
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="/images/flowbite-svelte-icon-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/NavHamburger.svelte.d.ts

@@ -14,6 +14,38 @@ declare const __propDef: {
 export type NavHamburgerProps = typeof __propDef.props;
 export type NavHamburgerEvents = typeof __propDef.events;
 export type NavHamburgerSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop btnClass: string = 'ml-3 md:hidden';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="/images/flowbite-svelte-icon-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 NavHamburger extends SvelteComponentTyped<NavHamburgerProps, NavHamburgerEvents, NavHamburgerSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"NavHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/navbar/NavLi.svelte

@@ -28,3 +28,42 @@ $: liClass = classNames('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', activ
     <slot />
   </svelte:element>
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop href: string = '';
+  @prop active: boolean = false;
+  @prop activeClass: string | undefined = undefined;
+  @prop nonActiveClass: 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
+  ```
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img src="/images/flowbite-svelte-icon-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/NavLi.svelte.d.ts

@@ -28,6 +28,43 @@ declare const __propDef: {
 export type NavLiProps = typeof __propDef.props;
 export type NavLiEvents = typeof __propDef.events;
 export type NavLiSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop href: string = '';
+ * @prop active: boolean = false;
+ * @prop activeClass: string | undefined = undefined;
+ * @prop nonActiveClass: 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
+ * ```
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img src="/images/flowbite-svelte-icon-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 NavLi extends SvelteComponentTyped<NavLiProps, NavLiEvents, NavLiSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavLi.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavLi.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;sBAD8I,MAAM,GAAG,SAAS;yBAAmB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,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":"NavLi.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavLi.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmCD,QAAA,MAAM,SAAS;;;;;sBAD8I,MAAM,GAAG,SAAS;yBAAmB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/NavSidebarHamburger.svelte

@@ -7,3 +7,37 @@ export let btnClass = 'ml-3 md:hidden';
 <ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
   <SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
 </ToolbarButton>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop btnClass: string = 'ml-3 md:hidden';
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="/images/flowbite-svelte-icon-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/NavSidebarHamburger.svelte.d.ts

@@ -14,6 +14,38 @@ declare const __propDef: {
 export type NavSidebarHamburgerProps = typeof __propDef.props;
 export type NavSidebarHamburgerEvents = typeof __propDef.events;
 export type NavSidebarHamburgerSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop btnClass: string = 'ml-3 md:hidden';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="/images/flowbite-svelte-icon-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 NavSidebarHamburger extends SvelteComponentTyped<NavSidebarHamburgerProps, NavSidebarHamburgerEvents, NavSidebarHamburgerSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavSidebarHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavSidebarHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
+{"version":3,"file":"NavSidebarHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavSidebarHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}