flowbite-svelte 1.29.1 → 1.30.1

package/dist/datepicker/Datepicker.svelte

@@ -18,7 +18,7 @@
     availableFrom = null,
     availableTo = null,
     locale = "default",
-    translationLocale = locale,
+    translationLocale,
     firstDayOfWeek = 0,
     dateFormat,
     placeholder = "Select date",
@@ -48,9 +48,12 @@
   const theme = getTheme("datepicker");
 
   // If translationLocale is not explicitly provided, it will default to the value of locale. This ensures reactivity as both are directly exposed as props.
-  translationLocale = translationLocale ?? locale;
+  const finalTranslationLocale = $derived(translationLocale ?? locale);
 
-  let isOpen: boolean = $state(inline);
+  let isOpen: boolean = $state(false);
+  $effect(() => {
+    isOpen = inline;
+  });
   let showMonthSelector: boolean = $state(false);
   let inputElement: HTMLInputElement | null = $state(null);
 
@@ -60,7 +63,10 @@
     }
   });
   let datepickerContainerElement: HTMLDivElement;
-  let currentMonth: Date = $state(value || defaultDate || new Date());
+  let currentMonth: Date = $state(new Date());
+  $effect(() => {
+    currentMonth = value || defaultDate || new Date();
+  });
   let focusedDate: Date | null = null;
   let calendarRef: HTMLDivElement | null = $state(null);
 
@@ -86,13 +92,13 @@
 
   const getWeekdayNames = (): string[] => {
     const referenceDate = new Date(1970, 0, 4 + firstDayOfWeek);
-    return Array.from({ length: 7 }, (_, i) => addDays(referenceDate, i).toLocaleDateString(translationLocale, { weekday: "short" }));
+    return Array.from({ length: 7 }, (_, i) => addDays(referenceDate, i).toLocaleDateString(finalTranslationLocale, { weekday: "short" }));
   };
 
   let weekdays = $derived(getWeekdayNames());
 
   const getMonthNames = (): string[] => {
-    return Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleDateString(translationLocale, { month: "short" }));
+    return Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleDateString(finalTranslationLocale, { month: "short" }));
   };
   let monthNames = $derived(getMonthNames());
 
@@ -304,7 +310,7 @@
     }
   }
 
-  // Use locale for formatting (not translationLocale)
+  // Use locale for formatting (not finalTranslationLocale)
   const formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? "";
   const isSameDate = (date1?: Date, date2?: Date): boolean => (date1 && date2 ? isSameDay(date1, date2) : false);
   const isToday = (day: Date): boolean => isSameDate(day, new Date());
@@ -358,10 +364,10 @@
       currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
     }
 
-    // Use translationLocale for aria-label
+    // Use finalTranslationLocale for aria-label
     setTimeout(() => {
       const focusedButton = calendarRef?.querySelector(
-        `button[aria-label="${focusedDate!.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`
+        `button[aria-label="${focusedDate!.toLocaleDateString(finalTranslationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`
       ) as HTMLButtonElement | null;
       focusedButton?.focus();
     }, 0);
@@ -482,7 +488,7 @@
             aria-live="polite"
             onclick={(event: MouseEvent) => toggleMonthSelector(event)}
           >
-            {currentMonth.toLocaleString(translationLocale, { month: "long", year: "numeric" })}
+            {currentMonth.toLocaleString(finalTranslationLocale, { month: "long", year: "numeric" })}
           </Button>
           {@render navButton(true)}
         </div>
@@ -505,7 +511,7 @@
               })}
               onclick={() => handleDaySelect(day)}
               onkeydown={handleCalendarKeydown}
-              aria-label={day.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
+              aria-label={day.toLocaleDateString(finalTranslationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
               aria-selected={isSelected(day)}
               aria-disabled={!available}
               disabled={!available}

package/dist/device-mockups/Android.svelte

@@ -3,12 +3,13 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { android } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
   warnThemeDeprecation(
     "Android",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class })),
     { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" }
   );
 
@@ -43,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L551)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
 ## 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#L551)
+ * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/DefaultMockup.svelte

@@ -3,14 +3,16 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { defaultMockup } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
 
   warnThemeDeprecation(
     "DefaultMockup",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
+
   const styling = $derived(
     classes ?? {
       top: div2Class,
@@ -40,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L562)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L620)
 ## 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#L562)
+ * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L620)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Desktop.svelte

@@ -3,10 +3,16 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { desktop } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: DesktopProps = $props();
 
-  warnThemeDeprecation("Desktop", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" });
+  warnThemeDeprecation(
+    "Desktop",
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class })),
+    { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" }
+  );
+
   const styling = $derived(
     classes ?? {
       inner: div2Class,
@@ -32,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L535)
+[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L593)
 ## 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#L535)
+ * [DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L593)
  * ## 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#L530)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L588)
 ## 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#L530)
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L588)
  * ## Props
  * @prop children
  * @prop device = "default"

package/dist/device-mockups/Ios.svelte

@@ -3,14 +3,16 @@
   import type { IosProps } from "..";
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: IosProps = $props();
 
   warnThemeDeprecation(
     "Ios",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
+
   const styling = $derived(
     classes ?? {
       top: div2Class,
@@ -40,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L572)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L630)
 ## 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#L572)
+ * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L630)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Laptop.svelte

@@ -3,14 +3,16 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { laptop } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: LaptopProps = $props();
 
   warnThemeDeprecation(
     "Laptop",
-    { divClass, div2Class, div3Class, div4Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class })),
     { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
+
   const styling = $derived(
     classes ?? {
       inner: div2Class,
@@ -40,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L543)
+[LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L601)
 ## 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#L543)
+ * [LaptopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L601)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Smartwatch.svelte

@@ -3,14 +3,16 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { smartwatch } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: SmartwatchProps = $props();
 
   warnThemeDeprecation(
     "Smartwatch",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "top", div3Class: "rightTop", div4Class: "rightBot", div5Class: "bot", div6Class: "slot" }
   );
+
   const styling = $derived(
     classes ?? {
       top: div2Class,
@@ -41,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L582)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L640)
 ## 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#L582)
+ * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L640)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/Tablet.svelte

@@ -3,14 +3,16 @@
   import type { TabletProps } from "..";
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: TabletProps = $props();
 
   warnThemeDeprecation(
     "Tablet",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
+
   const styling = $derived(
     classes ?? {
       leftTop: div2Class,
@@ -40,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L592)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L650)
 ## 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#L592)
+ * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L650)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/device-mockups/theme.d.ts

@@ -5,8 +5,8 @@ declare const android: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftMid?: import("tailwind-merge").ClassNameValue;
@@ -17,8 +17,8 @@ declare const android: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftMid?: import("tailwind-merge").ClassNameValue;
@@ -37,8 +37,8 @@ declare const android: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftMid?: import("tailwind-merge").ClassNameValue;
@@ -67,8 +67,8 @@ declare const defaultMockup: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftBot?: import("tailwind-merge").ClassNameValue;
@@ -78,8 +78,8 @@ declare const defaultMockup: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftBot?: import("tailwind-merge").ClassNameValue;
@@ -96,8 +96,8 @@ declare const defaultMockup: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftBot?: import("tailwind-merge").ClassNameValue;
@@ -167,8 +167,8 @@ declare const ios: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftBot?: import("tailwind-merge").ClassNameValue;
@@ -178,8 +178,8 @@ declare const ios: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftBot?: import("tailwind-merge").ClassNameValue;
@@ -196,8 +196,8 @@ declare const ios: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             right?: import("tailwind-merge").ClassNameValue;
             leftTop?: import("tailwind-merge").ClassNameValue;
             leftBot?: import("tailwind-merge").ClassNameValue;
@@ -267,8 +267,8 @@ declare const smartwatch: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             bot?: import("tailwind-merge").ClassNameValue;
             rightTop?: import("tailwind-merge").ClassNameValue;
             rightBot?: import("tailwind-merge").ClassNameValue;
@@ -278,8 +278,8 @@ declare const smartwatch: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             bot?: import("tailwind-merge").ClassNameValue;
             rightTop?: import("tailwind-merge").ClassNameValue;
             rightBot?: import("tailwind-merge").ClassNameValue;
@@ -296,8 +296,8 @@ declare const smartwatch: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            top?: import("tailwind-merge").ClassNameValue;
             slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
             bot?: import("tailwind-merge").ClassNameValue;
             rightTop?: import("tailwind-merge").ClassNameValue;
             rightBot?: import("tailwind-merge").ClassNameValue;

package/dist/dialog/Dialog.svelte

@@ -177,7 +177,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L604)
+[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
 ## 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#L604)
+ * [DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
  * ## Props
  * @prop children
  * @prop onaction = ()

package/dist/drawer/Drawer.svelte

@@ -6,7 +6,8 @@
   import { sineIn } from "svelte/easing";
   import { fly } from "svelte/transition";
   import { drawer } from "./theme";
-  import { setContext, tick } from "svelte";
+  import { setDrawerContext } from "../context";
+  import { tick } from "svelte";
 
   let {
     children,
@@ -15,7 +16,7 @@
     modal,
     offset,
     width,
-    dismissable = offset ? false : undefined,
+    dismissable,
     placement = "left",
     class: className,
     transitionParams,
@@ -25,16 +26,24 @@
     ...restProps
   }: DrawerProps = $props();
 
-  setContext("drawer", {
+  // Set dismissable based on offset if not explicitly provided
+  const finalDismissable = $derived(dismissable ?? (offset ? false : undefined));
+
+  // Create reactive context using getter
+  const context = {
     get placement() {
       return placement;
     }
-  });
+  };
+
+  setDrawerContext(context);
 
   // back compatibility
   if (hidden !== undefined) console.warn("'hidden' property is deprecated. Please use the 'open' property to manage 'Drawer'.");
 
-  if (activateClickOutside !== undefined) console.warn("'activateClickOutside' property is deprecated. Please use the 'outsideclose' property to manage 'Drawer' behaviour.");
+  $effect(() => {
+    if (activateClickOutside !== undefined) console.warn("'activateClickOutside' property is deprecated. Please use the 'outsideclose' property to manage 'Drawer' behaviour.");
+  });
 
   $effect(() => {
     if (activateClickOutside !== undefined && outsideclose === undefined) {
@@ -113,7 +122,7 @@
   {@attach init}
   bind:open
   {modal}
-  {dismissable}
+  dismissable={finalDismissable}
   {transition}
   {outsideclose}
   transitionParams={transition_params}
@@ -126,7 +135,7 @@
 </Dialog>
 
 {#if offset && !open}
-  <Dialog {@attach init} open modal={false} {dismissable} {outsideclose} inert {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <Dialog {@attach init} open modal={false} dismissable={finalDismissable} {outsideclose} inert {...restProps} class={base({ class: clsx(theme?.base, className) })}>
     {@render children?.()}
   </Dialog>
 {/if}
@@ -135,7 +144,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L618)
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L676)
 ## Props
 @prop children
 @prop open = $bindable(false)
@@ -143,7 +152,7 @@
 @prop modal
 @prop offset
 @prop width
-@prop dismissable = offset ? false : undefined
+@prop dismissable
 @prop placement = "left"
 @prop class: className
 @prop transitionParams

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#L618)
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L676)
  * ## Props
  * @prop children
  * @prop open = $bindable(false)
@@ -10,7 +10,7 @@ import type { DrawerProps } from "..";
  * @prop modal
  * @prop offset
  * @prop width
- * @prop dismissable = offset ? false : undefined
+ * @prop dismissable
  * @prop placement = "left"
  * @prop class: className
  * @prop transitionParams

package/dist/drawer/DrawerHandle.svelte

@@ -3,11 +3,11 @@
   import type { DrawerHandleProps } from "..";
   import clsx from "clsx";
   import { drawerhandle } from "./theme";
-  import { getContext } from "svelte";
+  import { getDrawerContext } from "../context";
 
   let { children, placement, "aria-label": ariaLabel, class: className, classes, ...restProps }: DrawerHandleProps = $props();
 
-  const ctx = getContext<{ placement: DrawerHandleProps["placement"] } | undefined>("drawer");
+  const ctx = getDrawerContext();
 
   const theme = getTheme("drawerhandle");
   let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" }));
@@ -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#L626)
+[DrawerHandleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L684)
 ## 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#L626)
+ * [DrawerHandleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L684)
  * ## Props
  * @prop children
  * @prop placement