flowbite-svelte 1.10.22 → 1.11.0

package/dist/alert/Alert.svelte

@@ -4,8 +4,9 @@
   import clsx from "clsx";
   import { type AlertProps, type ParamsType, CloseButton } from "..";
   import { getTheme } from "../theme/themeUtils";
+  import { createDismissableContext } from "../utils/dismissable.svelte";
 
-  let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclick = () => (alertStatus = false), ...restProps }: AlertProps = $props();
+  let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclose, ...restProps }: AlertProps = $props();
 
   // Theme context
   const theme = getTheme("alert");
@@ -20,10 +21,20 @@
       class: clsx(theme, className)
     })
   );
+
+  let ref: HTMLDivElement | undefined = $state(undefined);
+
+  function close(event: MouseEvent) {
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      alertStatus = false;
+    }
+  }
+
+  createDismissableContext(close);
 </script>
 
 {#if alertStatus}
-  <div role="alert" {...restProps} transition:transition={params as ParamsType} class={divCls}>
+  <div role="alert" bind:this={ref} {...restProps} {onclose} transition:transition={params as ParamsType} class={divCls}>
     {#if icon}
       {@render icon()}
     {/if}
@@ -38,11 +49,11 @@
 
     {#if dismissable}
       {#if CloseIcon}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5 dark:hover:bg-gray-700" {color} ariaLabel="Remove alert" {onclick}>
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert">
           <CloseIcon />
         </CloseButton>
       {:else}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5 dark:hover:bg-gray-700" {color} ariaLabel="Remove alert" {onclick} />
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert" />
       {/if}
     {/if}
   </div>
@@ -65,6 +76,6 @@
 @prop dismissable
 @prop transition = fade
 @prop params
-@prop onclick = ()
+@prop onclose
 @prop ...restProps
 -->

package/dist/alert/Alert.svelte.d.ts

@@ -15,7 +15,7 @@ import { type AlertProps } from "..";
  * @prop dismissable
  * @prop transition = fade
  * @prop params
- * @prop onclick = ()
+ * @prop onclose
  * @prop ...restProps
  */
 declare const Alert: import("svelte").Component<AlertProps, {}, "alertStatus">;

package/dist/badge/Badge.svelte

@@ -4,6 +4,7 @@
   import clsx from "clsx";
   import { fade } from "svelte/transition";
   import { badge } from ".";
+  import { createDismissableContext } from "../utils/dismissable.svelte";
 
   let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, classes, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
 
@@ -16,14 +17,19 @@
 
   const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border }));
 
+  let ref: HTMLDivElement | undefined = $state(undefined);
+
   const close = (ev: MouseEvent) => {
-    onclose?.(ev);
-    if (!ev.defaultPrevented) badgeStatus = false;
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      badgeStatus = false;
+    }
   };
+
+  createDismissableContext(close);
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} transition:transition={params as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
+  <div {...restProps} bind:this={ref} transition:transition={params as ParamsType} {onclose} class={base({ class: clsx(theme?.base, className) })}>
     {#if href}
       <a {href} {target} class={linkClass({ class: clsx(theme?.linkClass, styling.linkClass) })}>
         {@render children()}
@@ -34,12 +40,11 @@
 
     {#if dismissable}
       {#if icon}
-        <button type="button" class="text-primary-500 hover:bg-primary-200 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300 m-0.5 ms-1.5 -me-1.5 rounded-sm p-0.5 whitespace-normal focus:ring-1 focus:outline-hidden" aria-label="Remove badge" onclick={close}>
-          <span class="sr-only">Remove badge</span>
+        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge">
           {@render icon()}
-        </button>
+        </CloseButton>
       {:else}
-        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge" onclick={close} />
+        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge" />
       {/if}
     {/if}
   </div>

package/dist/banner/Banner.svelte

@@ -4,8 +4,9 @@
   import clsx from "clsx";
   import { type ParamsType, type BannerProps, CloseButton } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { createDismissableContext } from "../utils/dismissable.svelte";
 
-  let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, classes, innerClass, transition = fade, params, closeClass, ...restProps }: BannerProps = $props();
+  let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, classes, innerClass, transition = fade, params, closeClass, onclose, ...restProps }: BannerProps = $props();
 
   warnThemeDeprecation("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
 
@@ -15,24 +16,25 @@
   const theme = getTheme("banner");
 
   const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
+
+  let ref: HTMLDivElement | undefined = $state(undefined);
+  function close(event: MouseEvent) {
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      open = false;
+    }
+  }
+  createDismissableContext(close);
 </script>
 
 {#if open}
-  <div tabindex="-1" class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
+  <div tabindex="-1" bind:this={ref} {onclose} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
     <div class={insideDiv({ class: clsx(theme?.insideDiv, styling.insideDiv) })}>
       {@render children?.()}
     </div>
 
     {#if dismissable}
       <div class="flex items-center justify-end">
-        <CloseButton
-          class={dismissableClass({ class: clsx(theme?.dismissable, styling.dismissable) })}
-          {color}
-          ariaLabel="Remove banner"
-          onclick={() => {
-            open = false;
-          }}
-        />
+        <CloseButton class={dismissableClass({ class: clsx(theme?.dismissable, styling.dismissable) })} {color} ariaLabel="Remove banner" />
       </div>
     {/if}
   </div>
@@ -56,5 +58,6 @@
 @prop transition = fade
 @prop params
 @prop closeClass
+@prop onclose
 @prop ...restProps
 -->

package/dist/banner/Banner.svelte.d.ts

@@ -16,6 +16,7 @@ import { type BannerProps } from "..";
  * @prop transition = fade
  * @prop params
  * @prop closeClass
+ * @prop onclose
  * @prop ...restProps
  */
 declare const Banner: import("svelte").Component<BannerProps, {}, "open">;

package/dist/drawer/Drawer.svelte

@@ -5,8 +5,9 @@
   import { sineIn } from "svelte/easing";
   import { drawer } from ".";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { createDismissableContext } from "../utils/dismissable.svelte";
 
-  let { children, hidden = $bindable(), closeDrawer = () => (hidden = true), activateClickOutside = true, position, width, backdrop = true, backdropClass, placement = "left", class: className, classes, transitionParams, transitionType = fly, bodyScrolling = false, ...restProps }: DrawerProps = $props();
+  let { children, hidden = $bindable(), activateClickOutside = true, position, width, backdrop = true, backdropClass, placement = "left", class: className, classes, transitionParams, transitionType = fly, bodyScrolling = false, onclose, ...restProps }: DrawerProps = $props();
 
   warnThemeDeprecation("Drawer", { backdropClass }, { backdropClass: "backdrop" });
   const styling = $derived(classes ?? { backdrop: backdropClass });
@@ -29,13 +30,21 @@
   let y = $derived(placement === "top" ? -100 : placement === "bottom" ? innerHeight + 100 : undefined);
 
   let transition_params = $derived(Object.assign({}, { x, y, duration: 200, easing: sineIn }));
+
+  let ref: HTMLDivElement | undefined = $state(undefined);
+  function close(ev: MouseEvent) {
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      hidden = true;
+    }
+  }
+  createDismissableContext(close);
 </script>
 
 <svelte:window bind:innerWidth bind:innerHeight />
 
 {#if !hidden}
-  <div role="presentation" class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })} onclick={activateClickOutside ? closeDrawer : undefined} style={bodyScrolling ? "pointer-events: none;" : ""}></div>
-  <div use:trapFocus={{ onEscape: closeDrawer }} {...restProps} class={base({ class: clsx(theme?.base, className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
+  <div role="presentation" bind:this={ref} {onclose} class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })} onclick={activateClickOutside ? close : undefined} style={bodyScrolling ? "pointer-events: none;" : ""}></div>
+  <div use:trapFocus={{ onEscape: close as () => void }} {...restProps} class={base({ class: clsx(theme?.base, className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
     {@render children?.()}
   </div>
 {/if}
@@ -48,7 +57,6 @@
 ## Props
 @prop children
 @prop hidden = $bindable()
-@prop closeDrawer = ()
 @prop activateClickOutside = true
 @prop position
 @prop width
@@ -60,5 +68,6 @@
 @prop transitionParams
 @prop transitionType = fly
 @prop bodyScrolling = false
+@prop onclose
 @prop ...restProps
 -->

package/dist/drawer/Drawer.svelte.d.ts

@@ -6,7 +6,6 @@ import { type DrawerProps } from "..";
  * ## Props
  * @prop children
  * @prop hidden = $bindable()
- * @prop closeDrawer = ()
  * @prop activateClickOutside = true
  * @prop position
  * @prop width
@@ -18,6 +17,7 @@ import { type DrawerProps } from "..";
  * @prop transitionParams
  * @prop transitionType = fly
  * @prop bodyScrolling = false
+ * @prop onclose
  * @prop ...restProps
  */
 declare const Drawer: import("svelte").Component<DrawerProps, {}, "hidden">;

package/dist/forms/fileupload/Fileupload.svelte

@@ -3,6 +3,7 @@
   import clsx from "clsx";
   import { CloseButton, type FileuploadProps } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable.svelte";
 
   let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, classes, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, wrapperClass, ...restProps }: FileuploadProps = $props();
 
@@ -20,12 +21,14 @@
     }
     if (clearableOnClick) clearableOnClick();
   };
+
+  createDismissableContext(clearAll);
 </script>
 
 <div class={wrapper({ class: clsx(theme?.wrapper, styling.wrapper) })}>
   <input type="file" bind:files bind:this={elementRef} {...restProps} class={base({ size, class: clsx(theme?.base, className) })} />
   {#if files && files.length > 0 && clearable}
-    <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear selected files" svgClass={clsx(styling.svg)} />
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear selected files" svgClass={clsx(styling.svg)} />
   {/if}
 </div>
 

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -4,6 +4,7 @@
   import clsx from "clsx";
   import { type FloatingLabelInputProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable.svelte";
 
   let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: className, classes, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: FloatingLabelInputProps = $props();
 
@@ -134,6 +135,8 @@
     selectedIndex = -1;
     elementRef?.focus();
   }
+
+  createDismissableContext(clearAll);
 </script>
 
 {#if clearable}
@@ -143,7 +146,7 @@
 <div class={base({ class: clsx(isCombobox ? "relative" : "", theme?.base, className) })}>
   <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={input({ class: clsx(theme?.input, styling.input) })} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
   {/if}
   <label for={id} class={label({ class: clsx(theme?.label, styling.label) })}>
     {@render children()}

package/dist/forms/input-field/Input.svelte

@@ -4,6 +4,7 @@
   import { CloseButton, type SizeType, type InputProps, type InputValue } from "../..";
   import { input, clampSize } from ".";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable.svelte";
 
   let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, classes, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, comboItemClass, onInput, onFocus, onBlur, onKeydown, oninput, onfocus, onblur, onkeydown, ...restProps }: InputProps<InputValue> = $props();
 
@@ -56,6 +57,8 @@
     if (clearableOnClick) clearableOnClick();
   };
 
+  createDismissableContext(clearAll);
+
   // Combobox functionality
   let isFocused = $state(false);
   let filteredSuggestions: string[] = $state([]);
@@ -254,7 +257,7 @@
   {:else}
     <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={inputCls({ class: clsx(theme?.input, className) })} />
     {#if value !== undefined && value !== "" && clearable}
-      <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+      <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
     {/if}
   {/if}
   {#if right}

package/dist/forms/search/Search.svelte

@@ -3,6 +3,7 @@
   import clsx from "clsx";
   import { CloseButton, type SearchProps } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable.svelte";
 
   let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, class: className, classes, ...restProps }: SearchProps = $props();
 
@@ -20,6 +21,8 @@
     }
     if (clearableOnClick) clearableOnClick();
   };
+
+  createDismissableContext(clearAll);
 </script>
 
 <div class={base({ class: clsx(theme?.base, className) })}>
@@ -35,7 +38,7 @@
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
   {/if}
 </div>
 

package/dist/forms/select/MultiSelect.svelte

@@ -4,6 +4,7 @@
   import { multiSelect } from ".";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { onMount } from "svelte";
+  import { createDismissableContext } from "../../utils/dismissable.svelte";
 
   // Consider reusing that component - https://svelecte.vercel.app/
 
@@ -74,6 +75,8 @@
     }
   };
 
+  createDismissableContext(clearAll);
+
   const clearThisOption = (select: SelectOptionType<any>) => {
     if (disabled) return;
 
@@ -216,7 +219,7 @@
   </span>
   <div class="ms-auto flex items-center gap-2">
     {#if selectItems.length}
-      <CloseButton {size} onclick={clearAll} color="none" class={close({ class: clsx(theme?.close, classes?.close) })} {disabled} />
+      <CloseButton {size} color="none" class={close({ class: clsx(theme?.close, classes?.close) })} {disabled} />
     {/if}
 
     <svg class={clsx(svg(), disabled && "cursor-not-allowed", classes?.svg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">

package/dist/forms/select/Select.svelte

@@ -3,6 +3,7 @@
   import clsx from "clsx";
   import { type SelectProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable.svelte";
 
   let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, placeholder = "Choose option ...", clearable, clearableColor = "none", clearableOnClick, onClear, clearableSvgClass, clearableClass, selectClass, class: className, classes, ...restProps }: SelectProps<T> = $props();
 
@@ -29,6 +30,8 @@
     // remove this in next major version
     if (clearableOnClick) clearableOnClick();
   };
+
+  createDismissableContext(clearAll);
 </script>
 
 <div class={base({ class: clsx(theme?.base, className) })}>
@@ -48,6 +51,6 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} {disabled} />
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} {disabled} />
   {/if}
 </div>

package/dist/forms/textarea/Textarea.svelte

@@ -3,6 +3,7 @@
   import clsx from "clsx";
   import { type TextareaProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { createDismissableContext } from "../../utils/dismissable.svelte";
 
   let { header, footer, addon, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, addonClass, disabled, class: className, classes, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, textareaClass, ...restProps }: TextareaProps = $props();
 
@@ -36,6 +37,8 @@
     }
     if (clearableOnClick) clearableOnClick();
   };
+
+  createDismissableContext(clearAll);
 </script>
 
 <div class={div({ class: clsx(theme?.div, styling.div) })}>
@@ -64,7 +67,7 @@
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
   {/if}
 </div>
 

package/dist/modal/Modal.svelte

@@ -5,6 +5,7 @@
   import { fade } from "svelte/transition";
   import { modal as modalStyle } from ".";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { createDismissableContext } from "../utils/dismissable.svelte";
 
   let { children, onaction = () => true, oncancel, onsubmit, ontoggle, form = false, modal = true, autoclose = false, focustrap = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, classes, params, transition = fade, fullscreen = false, ...restProps }: ModalProps = $props();
 
@@ -83,7 +84,19 @@
   }
 
   const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
-  const close_handler = (pred: boolean) => (pred ? undefined : () => (open = false));
+
+  let ref: HTMLDialogElement | undefined = $state(undefined);
+
+  function close_handler(ev: MouseEvent) {
+    if (form) {
+      // dialog/form mechanism will close the dialog
+      return;
+    }
+
+    ref?.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
+  }
+
+  createDismissableContext(close_handler);
 </script>
 
 {#snippet content()}
@@ -92,7 +105,7 @@
       {#if title}
         <h3>{title}</h3>
         {#if dismissable && !permanent}
-          <CloseButton type="submit" formnovalidate onclick={close_handler(form)} class={clsx(styling.close)} />
+          <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
         {/if}
       {:else if header}
         {@render header()}
@@ -108,12 +121,12 @@
     </div>
   {/if}
   {#if dismissable && !permanent && !title}
-    <CloseButton type="submit" formnovalidate onclick={close_handler(form)} class={closeCls({ class: clsx(theme?.close, styling.close) })} />
+    <CloseButton type="submit" formnovalidate class={closeCls({ class: clsx(theme?.close, styling.close) })} />
   {/if}
 {/snippet}
 
 {#if open}
-  <dialog {@attach init} use:focusTrap class={base({ fullscreen, class: clsx(theme?.base, className) })} tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps}>
+  <dialog {@attach init} bind:this={ref} use:focusTrap class={base({ fullscreen, class: clsx(theme?.base, className) })} tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps}>
     {#if form}
       <form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
         {@render content()}

package/dist/navbar/Menu.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1078)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

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

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1078)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1098)
 ## Props
 @prop children
 @prop class: className

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

@@ -2,7 +2,7 @@ import type { NavBrandProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1098)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/navbar/NavContainer.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1101)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
 ## Props
 @prop children
 @prop fluid

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

@@ -2,7 +2,7 @@ import type { NavContainerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1101)
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/navbar/NavHamburger.svelte

@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1105)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1104)
 ## Props
 @prop children
 @prop onclick

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

@@ -1,7 +1,7 @@
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1105)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1104)
  * ## Props
  * @prop children
  * @prop onclick

package/dist/navbar/NavLi.svelte

@@ -38,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1126)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1125)
 ## Props
 @prop children
 @prop activeClass

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

@@ -2,7 +2,7 @@ import type { NavLiProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1126)
+ * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1125)
  * ## Props
  * @prop children
  * @prop activeClass

package/dist/navbar/NavUl.svelte

@@ -77,7 +77,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1110)
 ## Props
 @prop children
 @prop activeUrl

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

@@ -2,7 +2,7 @@ import type { NavUlProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1110)
  * ## Props
  * @prop children
  * @prop activeUrl

package/dist/navbar/Navbar.svelte

@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1092)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1091)
 ## Props
 @prop children
 @prop fluid

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

@@ -2,7 +2,7 @@ import type { NavbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1092)
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1091)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/pagination/Pagination.svelte

@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1191)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1190)
 ## Props
 @prop pages = []
 @prop previous

package/dist/pagination/Pagination.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaginationProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1191)
+ * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1190)
  * ## Props
  * @prop pages = []
  * @prop previous