flowbite-svelte 1.29.1 → 1.30.0

package/dist/pagination/PaginationNav.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { setContext } from "svelte";
   import { paginationNav } from "./theme";
-  import type { PaginationNavProps } from "..";
+  import type { PaginationNavProps, PaginationContextType } from "..";
   import PaginationButton from "./PaginationButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { setPaginationContext } from "../context";
 
   function paginationRange(start: number, end: number): number[] {
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
@@ -31,18 +31,31 @@
     ...restProps
   }: PaginationNavProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("PaginationNav", { prevClass, nextClass, spanClass, tableDivClass }, { prevClass: "prev", nextClass: "next", spanClass: "span", tableDivClass: "tableDiv" });
+
   const styling = $derived(classes ?? { prev: prevClass, next: nextClass, span: spanClass, tableDiv: tableDivClass });
 
   const theme = getTheme("paginationNav");
 
-  // Set context values for child components
-  setContext("group", true);
-  setContext("size", size);
-  setContext("table", layout === "table");
-  if (classes?.active) {
-    setContext("activeClasses", classes.active);
-  }
+  // Create context object
+  const ctx: PaginationContextType = {
+    get group() {
+      return true;
+    },
+    get size() {
+      return size;
+    },
+    get table() {
+      return layout === "table";
+    },
+    get activeClasses() {
+      return classes?.active;
+    }
+  };
+
+  // Set context during initialization
+  setPaginationContext(ctx);
 
   // Calculate visible pages range using Svelte 5 derived values
   const halfVisiblePages = $derived(Math.floor(visiblePages / 2));
@@ -109,7 +122,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1266)
 ## Props
 @prop currentPage = 1
 @prop totalPages = 1

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

@@ -2,7 +2,7 @@ import type { PaginationNavProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1266)
  * ## Props
  * @prop currentPage = 1
  * @prop totalPages = 1

package/dist/popover/Popover.svelte

@@ -19,8 +19,9 @@
     ...restProps
   }: PopoverProps = $props();
 
-  // content, title, h3
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Popover", { defaultClass }, { defaultClass: "content" });
+
   const styling = $derived(classes ?? { content: defaultClass });
 
   const theme = getTheme("popover");
@@ -45,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1248)
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1306)
 ## Props
 @prop title: titleSlot
 @prop color = "default"

package/dist/popover/Popover.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopoverProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1248)
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1306)
  * ## Props
  * @prop title: titleSlot
  * @prop color = "default"

package/dist/progress/Progressbar.svelte

@@ -23,10 +23,12 @@
 
   const theme = getTheme("progressbar");
 
-  let _progress = new Tween(0, {
-    duration: animate ? tweenDuration : 0,
-    easing
-  });
+  let _progress = $derived(
+    new Tween(0, {
+      duration: animate ? tweenDuration : 0,
+      easing
+    })
+  );
   const {
     base,
     label: labelInsideCls,
@@ -66,7 +68,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1258)
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1316)
 ## Props
 @prop progress = "45"
 @prop precision = 0

package/dist/progress/Progressbar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1258)
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1316)
  * ## Props
  * @prop progress = "45"
  * @prop precision = 0

package/dist/progress/Progressradial.svelte

@@ -26,10 +26,12 @@
 
   const theme = getTheme("progressradial");
 
-  const _progress = new Tween(0, {
-    duration: animate ? tweenDuration : 0,
-    easing
-  });
+  const _progress = $derived(
+    new Tween(0, {
+      duration: animate ? tweenDuration : 0,
+      easing
+    })
+  );
 
   const { base, label, background, foreground, outside, span, progressCls } = $derived(
     progressradial({
@@ -43,7 +45,7 @@
   });
 
   // Calculate the circle properties
-  let circumference = 2 * Math.PI * radius;
+  let circumference = $derived(2 * Math.PI * radius);
   // let strokeDashoffset = $state()
   // Calculate the stroke-dashoffset based on progress
   let strokeDashoffset = $derived(circumference - (_progress.current / 100) * circumference);
@@ -91,7 +93,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1269)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1327)
 ## Props
 @prop progress = 45
 @prop radius = 42

package/dist/progress/Progressradial.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1269)
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1327)
  * ## Props
  * @prop progress = 45
  * @prop radius = 42

package/dist/rating/AdvancedRating.svelte

@@ -6,11 +6,13 @@
 
   let { rating, globalText, ratings, divClass, spanClass, div2Class, div3Class, span2Class, class: className, classes, unit }: AdvancedRatingProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "AdvancedRating",
     { divClass, spanClass, div2Class, div3Class, span2Class },
     { divClass: "class", spanClass: "span", div2Class: "div2", div3Class: "div3", span2Class: "span2" }
   );
+
   const styling = $derived(
     classes ?? {
       span: spanClass,
@@ -45,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1286)
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1344)
 ## Props
 @prop rating
 @prop globalText

package/dist/rating/AdvancedRating.svelte.d.ts

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

package/dist/rating/CustomIcon.svelte

@@ -16,7 +16,7 @@
     ...restProps
   }: RatingIconProps = $props();
 
-  const uniqueId = `${groupId}-${iconIndex}`;
+  const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
 <svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00ff00"

package/dist/rating/CustomIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00ff00"

package/dist/rating/Heart.svelte

@@ -15,7 +15,7 @@
     ...restProps
   }: RatingIconProps = $props();
 
-  const uniqueId = `${groupId}-${iconIndex}`;
+  const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
 <svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#ff0000"

package/dist/rating/Heart.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#ff0000"

package/dist/rating/Rating.svelte

@@ -7,17 +7,20 @@
 
   let { children, text, class: className, classes, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Rating", { pClass }, { pClass: "p" });
+
   const styling = $derived(classes ?? { p: pClass });
 
   const theme = getTheme("rating");
 
   const { base, p } = $derived(ratingVariants());
   const ratingGroupId = crypto.randomUUID();
-  let fullStars: number = Math.floor(rating);
-  let rateDiffence = rating - fullStars;
-  let percentRating = Math.round(rateDiffence * 100);
-  let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
+  let clampedRating = $derived(Math.max(0, Math.min(rating, total)));
+  let fullStars = $derived(Math.floor(clampedRating));
+  let rateDifference = $derived(clampedRating - fullStars);
+  let percentRating = $derived(Math.round(rateDifference * 100));
+  let grayStars = $derived(total - (fullStars + Math.ceil(rateDifference)));
 </script>
 
 <div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
@@ -47,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1298)
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1356)
 ## Props
 @prop children
 @prop text

package/dist/rating/Rating.svelte.d.ts

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

package/dist/rating/RatingComment.svelte

@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1309)
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1367)
 ## Props
 @prop children
 @prop evaluation

package/dist/rating/RatingComment.svelte.d.ts

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

package/dist/rating/Review.svelte

@@ -6,11 +6,13 @@
 
   let { children, address, item1, item2, item3, review, classes, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Review",
     { articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass },
     { articleClass: "article", divClass: "div", div2Class: "div2", div3Class: "div3", imgClass: "img", ulClass: "ul", liClass: "li" }
   );
+
   const styling = $derived(
     classes ?? {
       article: articleClass,
@@ -98,7 +100,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1345)
+[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1403)
 ## Props
 @prop children
 @prop address

package/dist/rating/Review.svelte.d.ts

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

package/dist/rating/ScoreRating.svelte

@@ -69,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1361)
+[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1419)
 ## Props
 @prop ratings
 @prop ratings2

package/dist/rating/ScoreRating.svelte.d.ts

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

package/dist/rating/Star.svelte

@@ -15,7 +15,7 @@
     ...restProps
   }: RatingIconProps = $props();
 
-  const uniqueId = `${groupId}-${iconIndex}`;
+  const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
 <svg width={size} height={size} {...restProps} class={clsx(svgClass)} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#F5CA14"

package/dist/rating/Star.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#F5CA14"

package/dist/rating/Thumbup.svelte

@@ -15,7 +15,7 @@
     ...restProps
   }: RatingIconProps = $props();
 
-  const uniqueId = `${groupId}-${iconIndex}`;
+  const uniqueId = $derived(`${groupId}-${iconIndex}`);
 </script>
 
 <svg width={size} height={size} {...restProps} class={clsx(svgClass)} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00b500"

package/dist/rating/Thumbup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1372)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1430)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00b500"

package/dist/rating/theme.d.ts

@@ -87,25 +87,25 @@ export declare const rating: import("tailwind-variants").TVReturnType<{
 export declare const review: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            img?: import("tailwind-merge").ClassNameValue;
             article?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
             ul?: import("tailwind-merge").ClassNameValue;
             div2?: import("tailwind-merge").ClassNameValue;
             div3?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
-            img?: import("tailwind-merge").ClassNameValue;
             article?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
             ul?: import("tailwind-merge").ClassNameValue;
             div2?: import("tailwind-merge").ClassNameValue;
             div3?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -119,13 +119,13 @@ export declare const review: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            img?: import("tailwind-merge").ClassNameValue;
             article?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
             ul?: import("tailwind-merge").ClassNameValue;
             div2?: import("tailwind-merge").ClassNameValue;
             div3?: import("tailwind-merge").ClassNameValue;
-            li?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/scroll-spy/ScrollSpy.svelte

@@ -26,7 +26,10 @@
   // Bottom margin determines how far up the viewport a section must scroll before becoming inactive
   const ROOT_MARGIN_BOTTOM = "-40%";
 
-  let activeId = $state<string>(items.length > 0 ? items[0].id : "");
+  let activeId = $state<string>("");
+  $effect(() => {
+    activeId = items.length > 0 ? items[0].id : "";
+  });
   let isSticky = $state(false);
   let navElement: HTMLElement | null = $state(null);
   let scrollElement: Window | HTMLElement | null = $state(browser ? window : null);
@@ -255,7 +258,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2248)
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2327)
 ## Props
 @prop items
 @prop position = "top"

package/dist/scroll-spy/ScrollSpy.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ScrollSpyProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2248)
+ * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2327)
  * ## Props
  * @prop items
  * @prop position = "top"

package/dist/sidebar/Sidebar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { SidebarCtxType, SidebarProps } from "../types";
+  import type { SidebarContextType, SidebarProps } from "../types";
   import { trapFocus } from "../utils/actions";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { setContext } from "svelte";
+  import { setSidebarContext, setActiveUrlContext } from "../context";
   import { sineIn } from "svelte/easing";
   import { writable } from "svelte/store";
   import { fly } from "svelte/transition";
@@ -33,7 +33,9 @@
     ...restProps
   }: SidebarProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Sidebar", { backdropClass, divClass, nonActiveClass, activeClass }, { backdropClass: "backdrop", divClass: "div", nonActiveClass: "nonactive", activeClass: "active" });
+
   const styling = $derived(
     classes ?? {
       backdrop: backdropClass,
@@ -56,16 +58,21 @@
   let innerWidth: number = $state(-1);
   let isLargeScreen = $derived(disableBreakpoints ? false : alwaysOpen || innerWidth >= breakpointValues[breakpoint]);
 
-  const activeUrlStore = $state({ value: "" });
-  setContext("activeUrl", activeUrlStore);
+  // Create reactive context for activeUrl using getter
+  const activeUrlContext = {
+    get value() {
+      return activeUrl;
+    }
+  };
+  setActiveUrlContext(activeUrlContext);
+
   $effect(() => {
-    activeUrlStore.value = activeUrl;
+    if (disableBreakpoints) isOpen = true;
   });
-
-  if (disableBreakpoints) isOpen = true;
   const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop, alwaysOpen: alwaysOpen && !disableBreakpoints }));
 
-  let sidebarCtx: SidebarCtxType = {
+  const selectedStore = $derived(isSingle ? writable<object | null>(null) : undefined);
+  let sidebarCtx: SidebarContextType = {
     get closeSidebar() {
       return closeSidebar;
     },
@@ -75,13 +82,17 @@
     get nonActiveClass() {
       return nonactive({ class: clsx(theme?.nonactive, styling.nonactive) });
     },
-    isSingle,
-    selected: isSingle ? writable<object | null>(null) : undefined
+    get isSingle() {
+      return isSingle;
+    },
+    get selected() {
+      return selectedStore;
+    }
   };
 
-  let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
+  let transitionParams = $derived(params ? params : { x: -320, duration: 200, easing: sineIn });
 
-  setContext("sidebarContext", sidebarCtx);
+  setSidebarContext(sidebarCtx);
 
   // Handler for Escape key
   const handleEscape = () => {
@@ -128,7 +139,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1395)
+[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1453)
 ## Props
 @prop children
 @prop isOpen = false

package/dist/sidebar/Sidebar.svelte.d.ts

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

package/dist/sidebar/SidebarBrand.svelte

@@ -6,7 +6,9 @@
 
   let { children, site, imgClass, spanClass, class: className, classes, ...restProps }: SidebarBrandProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("SidebarBrand", { imgClass, spanClass }, { imgClass: "img", spanClass: "span" });
+
   const styling = $derived(
     classes ?? {
       img: imgClass,
@@ -32,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1432)
+[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1490)
 ## Props
 @prop children
 @prop site