flowbite-svelte 1.19.1 → 1.20.0

package/dist/clipboard/Clipboard.svelte

@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L431)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
 ## Props
 @prop children
 @prop embedded = false

package/dist/clipboard/Clipboard.svelte.d.ts

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

package/dist/darkmode/DarkMode.svelte

@@ -64,7 +64,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
 ## Props
 @prop class: className
 @prop lightIcon

package/dist/darkmode/DarkMode.svelte.d.ts

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

package/dist/datepicker/Datepicker.svelte

@@ -9,7 +9,41 @@
   import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
   import { getTheme } from "../theme/themeUtils";
 
-  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), availableFrom = null, availableTo = null, locale = "default", translationLocale = locale, firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className, elementRef = $bindable(), actionSlot, inputProps = {} }: DatepickerProps = $props();
+  let {
+    value = $bindable(),
+    defaultDate = null,
+    range = false,
+    rangeFrom = $bindable(),
+    rangeTo = $bindable(),
+    availableFrom = null,
+    availableTo = null,
+    locale = "default",
+    translationLocale = locale,
+    firstDayOfWeek = 0,
+    dateFormat,
+    placeholder = "Select date",
+    disabled = false,
+    required = false,
+    inputClass = "",
+    color = "primary",
+    inline = false,
+    autohide = true,
+    showActionButtons = false,
+    title = "",
+    onselect,
+    onclear,
+    onapply,
+    btnClass,
+    inputmode = "none",
+    classes,
+    monthColor = "alternative",
+    monthBtnSelected = "bg-primary-500 text-white",
+    monthBtn = "text-gray-700 dark:text-gray-300",
+    class: className,
+    elementRef = $bindable(),
+    actionSlot,
+    inputProps = {}
+  }: DatepickerProps = $props();
 
   const theme = getTheme("datepicker");
 
@@ -326,7 +360,9 @@
 
     // Use translationLocale for aria-label
     setTimeout(() => {
-      const focusedButton = calendarRef?.querySelector(`button[aria-label="${focusedDate!.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`) as HTMLButtonElement | null;
+      const focusedButton = calendarRef?.querySelector(
+        `button[aria-label="${focusedDate!.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`
+      ) as HTMLButtonElement | null;
       focusedButton?.focus();
     }, 0);
   }
@@ -377,10 +413,32 @@
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input {...inputProps} bind:this={inputElement} type="text" class={input({ color, class: clsx(theme?.input, inputClass) })} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} onchange={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
-      <button type="button" class={button({ class: clsx(btnClass, theme?.button, classes?.button) })} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
+      <input
+        {...inputProps}
+        bind:this={inputElement}
+        type="text"
+        class={input({ color, class: clsx(theme?.input, inputClass) })}
+        {placeholder}
+        value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)}
+        onfocus={() => (isOpen = true)}
+        onchange={handleInputChangeWithDateFns}
+        onkeydown={handleInputKeydown}
+        {disabled}
+        {required}
+        {inputmode}
+        aria-haspopup="dialog"
+      />
+      <button
+        type="button"
+        class={button({ class: clsx(btnClass, theme?.button, classes?.button) })}
+        onclick={() => (isOpen = !isOpen)}
+        {disabled}
+        aria-label={isOpen ? "Close date picker" : "Open date picker"}
+      >
         <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-          <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
+          <path
+            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
+          ></path>
         </svg>
       </button>
     </div>
@@ -418,7 +476,12 @@
       {:else}
         <div class={nav({ class: clsx(classes?.nav) })}>
           {@render navButton(false)}
-          <Button type="button" class={polite({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", classes?.polite) })} aria-live="polite" onclick={(event: MouseEvent) => toggleMonthSelector(event)}>
+          <Button
+            type="button"
+            class={polite({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", classes?.polite) })}
+            aria-live="polite"
+            onclick={(event: MouseEvent) => toggleMonthSelector(event)}
+          >
             {currentMonth.toLocaleString(translationLocale, { month: "long", year: "numeric" })}
           </Button>
           {@render navButton(true)}

package/dist/device-mockups/Android.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
-  warnThemeDeprecation("Android", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class }, { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" });
+  warnThemeDeprecation(
+    "Android",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class },
+    { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" }
+  );
 
   const styling = $derived(
     classes ?? {
@@ -39,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L513)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L514)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Android.svelte.d.ts

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

package/dist/device-mockups/DefaultMockup.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
 
-  warnThemeDeprecation("DefaultMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "DefaultMockup",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       top: div2Class,
@@ -36,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L524)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L525)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/DefaultMockup.svelte.d.ts

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

package/dist/device-mockups/Desktop.svelte

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

package/dist/device-mockups/Desktop.svelte.d.ts

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

package/dist/device-mockups/DeviceMockup.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L492)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L493)
 ## Props
 @prop children
 @prop device = "default"

package/dist/device-mockups/DeviceMockup.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DeviceMockupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L492)
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L493)
  * ## Props
  * @prop children
  * @prop device = "default"

package/dist/device-mockups/Ios.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: IosProps = $props();
 
-  warnThemeDeprecation("Ios", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Ios",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       top: div2Class,
@@ -36,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L534)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L535)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Ios.svelte.d.ts

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

package/dist/device-mockups/Laptop.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: LaptopProps = $props();
 
-  warnThemeDeprecation("Laptop", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Laptop",
+    { divClass, div2Class, div3Class, div4Class },
+    { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       inner: div2Class,
@@ -36,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L505)
+[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L506)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Laptop.svelte.d.ts

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

package/dist/device-mockups/Smartwatch.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: SmartwatchProps = $props();
 
-  warnThemeDeprecation("Smartwatch", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "rightTop", div4Class: "rightBot", div5Class: "bot", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Smartwatch",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "top", div3Class: "rightTop", div4Class: "rightBot", div5Class: "bot", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       top: div2Class,
@@ -37,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L544)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L545)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Smartwatch.svelte.d.ts

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

package/dist/device-mockups/Tablet.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: TabletProps = $props();
 
-  warnThemeDeprecation("Tablet", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Tablet",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       leftTop: div2Class,
@@ -36,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L554)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L555)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Tablet.svelte.d.ts

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

package/dist/dialog/Dialog.svelte

@@ -8,7 +8,26 @@
   import { fade } from "svelte/transition";
   import { dialog } from "./theme";
 
-  let { children, onaction = () => true, oncancel, onsubmit, ontoggle, form = false, modal = true, autoclose = false, focustrap = false, open = $bindable(false), permanent = false, dismissable = true, outsideclose = true, class: className, classes, transition = fade, transitionParams, ...restProps }: DialogProps = $props();
+  let {
+    children,
+    onaction = () => true,
+    oncancel,
+    onsubmit,
+    ontoggle,
+    form = false,
+    modal = true,
+    autoclose = false,
+    focustrap = false,
+    open = $bindable(false),
+    permanent = false,
+    dismissable = true,
+    outsideclose = true,
+    class: className,
+    classes,
+    transition = fade,
+    transitionParams,
+    ...restProps
+  }: DialogProps = $props();
 
   const paramsOptions = $derived(transitionParams ?? { duration: 100, easing: sineIn });
 
@@ -132,7 +151,19 @@
 {/snippet}
 
 {#if open}
-  <dialog {@attach init} bind:this={ref} use:focusTrap tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps} class={base({ class: clsx(className) })}>
+  <dialog
+    {@attach init}
+    bind:this={ref}
+    use:focusTrap
+    tabindex="-1"
+    onsubmit={_onsubmit}
+    oncancel={_oncancel}
+    onclick={_onclick}
+    ontoggle={_ontoggle}
+    transition:transition|global={paramsOptions as ParamsType}
+    {...restProps}
+    class={base({ class: clsx(className) })}
+  >
     {#if form}
       <form method="dialog" class={formCls({ class: clsx(classes?.form) })}>
         {@render content()}
@@ -147,7 +178,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L566)
+[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L567)
 ## Props
 @prop children
 @prop onaction = ()

package/dist/dialog/Dialog.svelte.d.ts

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

package/dist/drawer/Drawer.svelte

@@ -8,7 +8,22 @@
   import { drawer } from "./theme";
   import { setContext, tick } from "svelte";
 
-  let { children, open = $bindable(false), hidden = $bindable(), modal, offset, width, dismissable = offset ? false : undefined, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
+  let {
+    children,
+    open = $bindable(false),
+    hidden = $bindable(),
+    modal,
+    offset,
+    width,
+    dismissable = offset ? false : undefined,
+    placement = "left",
+    class: className,
+    transitionParams,
+    transition = fly,
+    outsideclose,
+    activateClickOutside,
+    ...restProps
+  }: DrawerProps = $props();
 
   setContext("drawer", {
     get placement() {
@@ -94,7 +109,19 @@
   }
 </script>
 
-<Dialog {@attach init} bind:open {modal} {dismissable} {transition} {outsideclose} transitionParams={transition_params} {...restProps} {onintrostart} {onoutrostart} class={base({ class: clsx(theme?.base, className) })}>
+<Dialog
+  {@attach init}
+  bind:open
+  {modal}
+  {dismissable}
+  {transition}
+  {outsideclose}
+  transitionParams={transition_params}
+  {...restProps}
+  {onintrostart}
+  {onoutrostart}
+  class={base({ class: clsx(theme?.base, className) })}
+>
   {@render children?.()}
 </Dialog>
 
@@ -108,7 +135,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L580)
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L581)
 ## Props
 @prop children
 @prop open = $bindable(false)

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

@@ -2,7 +2,7 @@ import type { DrawerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L580)
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L581)
  * ## Props
  * @prop children
  * @prop open = $bindable(false)

package/dist/drawer/DrawerHandle.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerHandleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L588)
+[DrawerHandleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L589)
 ## Props
 @prop children
 @prop placement

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

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

package/dist/drawer/Drawerhead.svelte

@@ -34,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L590)
+[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L591)
 ## Props
 @prop closeIcon
 @prop children

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

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

package/dist/dropdown/Dropdown.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L597)
+[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L598)
 ## Props
 @prop children
 @prop simple = false

package/dist/dropdown/Dropdown.svelte.d.ts

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

package/dist/dropdown/DropdownDivider.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L603)
+[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L604)
 ## Props
 @prop class: className
 @prop ...restProps

package/dist/dropdown/DropdownDivider.svelte.d.ts

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

package/dist/dropdown/DropdownGroup.svelte

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

package/dist/dropdown/DropdownGroup.svelte.d.ts

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

package/dist/dropdown/DropdownHeader.svelte

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

package/dist/dropdown/DropdownHeader.svelte.d.ts

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