flowbite-svelte 1.29.1 → 1.30.0

package/dist/carousel/Carousel.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { type CarouselProps, type CarouselState } from "..";
+  import { type CarouselProps, type CarouselContextType } from "..";
   import Slide from "./Slide.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { onMount, setContext } from "svelte";
+  import { onMount } from "svelte";
+  import { setCarouselContext } from "../context";
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
 
@@ -28,11 +29,12 @@
     ...restProps
   }: CarouselProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Carousel", { imgClass }, { imgClass: "slide" });
 
   const styling = $derived(classes ?? { slide: imgClass });
 
-  // // Theme context
+  // Theme context
   const theme = getTheme("carousel");
 
   let { base, slide: slideCls } = $derived(carousel());
@@ -52,19 +54,16 @@
     onchange?.(images[_state.index]);
   };
 
-  const _state: CarouselState = $state({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: Date.now(), changeSlide });
-
-  setContext("state", _state);
-
-  let initialized = false;
-
+  const _state: CarouselContextType = $state({ images: [], index: 0, forward: true, slideDuration: 500, lastSlideChange: Date.now(), changeSlide });
   $effect(() => {
+    _state.images = images;
+    _state.slideDuration = slideDuration;
     changeSlide(index);
   });
 
-  $effect(() => {
-    _state.slideDuration = slideDuration;
-  });
+  setCarouselContext(_state);
+
+  let initialized = false;
 
   onMount(() => {
     onchange?.(images[index]);
@@ -218,7 +217,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L412)
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
 ## Props
 @prop children
 @prop slide

package/dist/carousel/Carousel.svelte.d.ts

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

package/dist/carousel/CarouselIndicators.svelte

@@ -1,41 +1,43 @@
 <script lang="ts">
-  import type { IndicatorsProps, CarouselState } from "..";
+  import type { IndicatorsProps } from "..";
   import Indicator from "../indicator/Indicator.svelte";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { getContext } from "svelte";
+  import { getCarouselContext } from "../context";
   import { carouselIndicators } from "./theme";
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
 
   const theme = getTheme("carouselIndicators");
 
-  const _state = getContext<CarouselState>("state");
+  const _state = getCarouselContext();
   const { base, indicator } = $derived(carouselIndicators({ position }));
 
   function goToIndex(newIndex: number) {
-    _state.changeSlide(newIndex);
+    _state?.changeSlide(newIndex);
   }
 </script>
 
-<div class={base({ class: clsx(theme?.base, className) })} {...restProps}>
-  {#each _state.images as _, idx (idx)}
-    {@const selected = _state.index === idx}
-    <button type="button" onclick={() => goToIndex(idx)} aria-current={selected ? "true" : undefined} aria-label={`Go to slide ${idx + 1}`}>
-      {#if children}
-        {@render children({ selected, index: idx })}
-      {:else}
-        <Indicator class={indicator({ selected, class: clsx(selected ? activeClass : inactiveClass, theme?.indicator) })} />
-      {/if}
-    </button>
-  {/each}
-</div>
+{#if _state}
+  <div class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+    {#each _state.images as _, idx (idx)}
+      {@const selected = _state.index === idx}
+      <button type="button" onclick={() => goToIndex(idx)} aria-current={selected ? "true" : undefined} aria-label={`Go to slide ${idx + 1}`}>
+        {#if children}
+          {@render children({ selected, index: idx })}
+        {:else}
+          <Indicator class={indicator({ selected, class: clsx(selected ? activeClass : inactiveClass, theme?.indicator) })} />
+        {/if}
+      </button>
+    {/each}
+  </div>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L427)
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L485)
 ## Props
 @prop children
 @prop activeClass

package/dist/carousel/CarouselIndicators.svelte.d.ts

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

package/dist/carousel/ControlButton.svelte

@@ -6,7 +6,7 @@
 
   let { children, forward, name, class: className, spanClass, ...restProps }: ControlButtonProps = $props();
 
-  const { base, span } = controlButton({ forward });
+  const { base, span } = $derived(controlButton({ forward }));
 
   const theme = getTheme("controlButton");
 </script>
@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L434)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L492)
 ## Props
 @prop children
 @prop forward

package/dist/carousel/ControlButton.svelte.d.ts

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

package/dist/carousel/Controls.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-  import type { ControlsProps, CarouselState } from "..";
+  import type { ControlsProps } from "..";
   import ControlButton from "./ControlButton.svelte";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { getContext } from "svelte";
+  import { getCarouselContext } from "../context";
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
   const theme = getTheme("controlButton");
 
-  const _state = getContext<CarouselState>("state");
+  const _state = getCarouselContext();
 
   function changeSlide(forward: boolean) {
+    if (!_state) return;
     _state.changeSlide(forward ? _state.index + 1 : _state.index - 1);
   }
 </script>
@@ -28,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L498)
 ## Props
 @prop children
 @prop class: className

package/dist/carousel/Controls.svelte.d.ts

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

package/dist/carousel/Slide.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-  import type { SlideProps, CarouselState } from "..";
+  import type { SlideProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { getContext } from "svelte";
+  import { getCarouselContext } from "../context";
   import { fly } from "svelte/transition";
   import { slide } from "./theme";
 
-  const _state = getContext<CarouselState>("state");
+  const _state = getCarouselContext();
 
   let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
 
   const theme = getTheme("slide");
 
   let transitionSlideIn = $derived({
-    x: _state.forward ? "100%" : "-100%",
+    x: _state?.forward ? "100%" : "-100%",
     opacity: 1,
     width: "100%",
     height: "100%",
-    duration: _state.slideDuration
+    duration: _state?.slideDuration ?? 1000
   });
 
   let transitionSlideOut = $derived({
-    x: _state.forward ? "-100%" : "100%",
+    x: _state?.forward ? "-100%" : "100%",
     opacity: 0.9,
     width: "100%",
     height: "100%",
-    duration: _state.slideDuration
+    duration: _state?.slideDuration ?? 1000
   });
 
   let imgClass = $derived(slide({ fit, class: clsx(theme, className) }));
@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L457)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L515)
 ## Props
 @prop image
 @prop transition

package/dist/carousel/Slide.svelte.d.ts

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

package/dist/carousel/Thumbnail.svelte

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

package/dist/carousel/Thumbnail.svelte.d.ts

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

package/dist/carousel/Thumbnails.svelte

@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L448)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L506)
 ## Props
 @prop children
 @prop images = []

package/dist/carousel/Thumbnails.svelte.d.ts

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

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#L469)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L527)
 ## 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#L469)
+ * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L527)
  * ## Props
  * @prop children
  * @prop embedded = false

package/dist/clipboard-manager/ClipboardManager.svelte

@@ -36,7 +36,12 @@
 
   const styles = $derived(clipboardManager());
 
-  let items = $state<ClipboardItem[]>(initialItems);
+  let items = $state<ClipboardItem[]>([]);
+  $effect(() => {
+    if (initialItems.length > 0) {
+      items = initialItems;
+    }
+  });
   let newText = $state("");
   let searchQuery = $state("");
   let toast = $state<{ message: string; type: "success" | "error" | "info" } | null>(null);
@@ -49,7 +54,7 @@
     text: string;
   }>({ show: false, x: 0, y: 0, text: "" });
 
-  const STORAGE_KEY = storageKey ?? "flowbite-clipboard-manager";
+  const STORAGE_KEY = $derived(storageKey ?? "flowbite-clipboard-manager");
 
   // Save to localStorage whenever items change (but skip the initial load)
   let isFirstLoad = true;

package/dist/command-palette/CommandPalette.svelte

@@ -194,7 +194,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2233)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2312)
 ## Props
 @prop open = $bindable(false)
 @prop items = []

package/dist/command-palette/CommandPalette.svelte.d.ts

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

package/dist/context.d.ts

@@ -0,0 +1,47 @@
+import type { AccordionContextType, BottomNavContextType, CarouselContextType, DrawerContextType, DropdownContextType, PaginationContextType, ButtonToggleContextType, ListContextType, ToolbarContextType, ListGroupContextType, ButtonGroupContextType, NavbarState, NavbarBreakpoint, SidebarContextType, TableContextType, TabsContextType } from "./types";
+import type { SplitPaneContext } from "./types";
+import type { ThemeConfig } from "./theme";
+declare const getAccordionContext: () => AccordionContextType | undefined, setAccordionContext: (context: AccordionContextType) => AccordionContextType;
+export { getAccordionContext, setAccordionContext };
+declare const getBottomNavContext: () => BottomNavContextType | undefined, setBottomNavContext: (context: BottomNavContextType) => BottomNavContextType;
+export { getBottomNavContext, setBottomNavContext };
+declare const getCarouselContext: () => CarouselContextType | undefined, setCarouselContext: (context: CarouselContextType) => CarouselContextType;
+export { getCarouselContext, setCarouselContext };
+declare const getDrawerContext: () => DrawerContextType | undefined, setDrawerContext: (context: DrawerContextType) => DrawerContextType;
+export { getDrawerContext, setDrawerContext };
+declare const getDropdownContext: () => DropdownContextType | undefined, setDropdownContext: (context: DropdownContextType) => DropdownContextType;
+export { getDropdownContext, setDropdownContext };
+declare const getPaginationContext: () => PaginationContextType | undefined, setPaginationContext: (context: PaginationContextType) => PaginationContextType;
+export { getPaginationContext, setPaginationContext };
+declare const getButtonToggleContext: () => ButtonToggleContextType | undefined, setButtonToggleContext: (context: ButtonToggleContextType) => ButtonToggleContextType;
+export { getButtonToggleContext, setButtonToggleContext };
+declare const getListContext: () => ListContextType | undefined, setListContext: (context: ListContextType) => ListContextType;
+export { getListContext, setListContext };
+declare const getToolbarContext: () => ToolbarContextType | undefined, setToolbarContext: (context: ToolbarContextType) => ToolbarContextType;
+export { getToolbarContext, setToolbarContext };
+declare const getThemeContext: () => ThemeConfig | undefined, setThemeContext: (context: ThemeConfig) => ThemeConfig;
+export { getThemeContext, setThemeContext };
+declare const getListGroupContext: () => ListGroupContextType | undefined, setListGroupContext: (context: ListGroupContextType) => ListGroupContextType;
+export { getListGroupContext, setListGroupContext };
+declare const getButtonGroupContext: () => ButtonGroupContextType | undefined, setButtonGroupContext: (context: ButtonGroupContextType) => ButtonGroupContextType;
+export { getButtonGroupContext, setButtonGroupContext };
+declare const getNavbarStateContext: () => NavbarState | undefined, setNavbarStateContext: (context: NavbarState) => NavbarState;
+export { getNavbarStateContext, setNavbarStateContext };
+declare const getNavbarBreakpointContext: () => NavbarBreakpoint | undefined, setNavbarBreakpointContext: (context: NavbarBreakpoint) => NavbarBreakpoint;
+export { getNavbarBreakpointContext, setNavbarBreakpointContext };
+declare const getSidebarContext: () => SidebarContextType | undefined, setSidebarContext: (context: SidebarContextType) => SidebarContextType;
+export { getSidebarContext, setSidebarContext };
+declare const getActiveUrlContext: () => {
+    value: string;
+} | undefined, setActiveUrlContext: (context: {
+    value: string;
+}) => {
+    value: string;
+};
+export { getActiveUrlContext, setActiveUrlContext };
+declare const getTableContext: () => TableContextType | undefined, setTableContext: (context: TableContextType) => TableContextType;
+export { getTableContext, setTableContext };
+declare const getSplitPaneContext: () => SplitPaneContext | undefined, setSplitPaneContext: (context: SplitPaneContext) => SplitPaneContext;
+export { getSplitPaneContext, setSplitPaneContext };
+declare const getTabsContext: () => TabsContextType | undefined, setTabsContext: (context: TabsContextType) => TabsContextType;
+export { getTabsContext, setTabsContext };

package/dist/context.js

@@ -0,0 +1,72 @@
+import { createContext } from "svelte";
+/**
+ * Helper function to create a context with safe getter that returns undefined instead of throwing
+ * when accessed outside of the context provider.
+ */
+function createSafeContext() {
+    const [getRaw, set] = createContext();
+    function get() {
+        try {
+            return getRaw();
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return [get, set];
+}
+// Accordion
+const [getAccordionContext, setAccordionContext] = createSafeContext();
+export { getAccordionContext, setAccordionContext };
+// BottomNav
+const [getBottomNavContext, setBottomNavContext] = createSafeContext();
+export { getBottomNavContext, setBottomNavContext };
+// Carousel
+const [getCarouselContext, setCarouselContext] = createSafeContext();
+export { getCarouselContext, setCarouselContext };
+// Drawer
+const [getDrawerContext, setDrawerContext] = createSafeContext();
+export { getDrawerContext, setDrawerContext };
+// Dropdown
+const [getDropdownContext, setDropdownContext] = createSafeContext();
+export { getDropdownContext, setDropdownContext };
+// Pagination
+const [getPaginationContext, setPaginationContext] = createSafeContext();
+export { getPaginationContext, setPaginationContext };
+// ButtonToggle
+const [getButtonToggleContext, setButtonToggleContext] = createSafeContext();
+export { getButtonToggleContext, setButtonToggleContext };
+// List
+const [getListContext, setListContext] = createSafeContext();
+export { getListContext, setListContext };
+// Toolbar
+const [getToolbarContext, setToolbarContext] = createSafeContext();
+export { getToolbarContext, setToolbarContext };
+// Theme
+const [getThemeContext, setThemeContext] = createSafeContext();
+export { getThemeContext, setThemeContext };
+// ListGroup
+const [getListGroupContext, setListGroupContext] = createSafeContext();
+export { getListGroupContext, setListGroupContext };
+// ButtonGroup
+const [getButtonGroupContext, setButtonGroupContext] = createSafeContext();
+export { getButtonGroupContext, setButtonGroupContext };
+// Navbar
+const [getNavbarStateContext, setNavbarStateContext] = createSafeContext();
+export { getNavbarStateContext, setNavbarStateContext };
+const [getNavbarBreakpointContext, setNavbarBreakpointContext] = createSafeContext();
+export { getNavbarBreakpointContext, setNavbarBreakpointContext };
+// Sidebar
+const [getSidebarContext, setSidebarContext] = createSafeContext();
+export { getSidebarContext, setSidebarContext };
+const [getActiveUrlContext, setActiveUrlContext] = createSafeContext();
+export { getActiveUrlContext, setActiveUrlContext };
+// Table
+const [getTableContext, setTableContext] = createSafeContext();
+export { getTableContext, setTableContext };
+// SplitPane
+const [getSplitPaneContext, setSplitPaneContext] = createSafeContext();
+export { getSplitPaneContext, setSplitPaneContext };
+// Tabs
+const [getTabsContext, setTabsContext] = createSafeContext();
+export { getTabsContext, setTabsContext };

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#L478)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
 ## 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#L478)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
  * ## Props
  * @prop class: className
  * @prop lightIcon

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

@@ -6,6 +6,7 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Android",
     { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class },
@@ -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