flowbite-svelte 1.29.1 → 1.30.1

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

@@ -4,20 +4,27 @@
   import { rating as ratingVariants } from "./theme";
   import type { RatingProps } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, text, class: className, classes, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
 
-  warnThemeDeprecation("Rating", { pClass }, { pClass: "p" });
+  warnThemeDeprecation(
+    "Rating",
+    untrack(() => ({ 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 +54,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

@@ -3,14 +3,16 @@
   import { review as reviewVariants } from "./theme";
   import type { ReviewProps } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, address, item1, item2, item3, review, classes, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
 
   warnThemeDeprecation(
     "Review",
-    { articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass },
+    untrack(() => ({ 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,13 +1,14 @@
 <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";
   import { sidebar } from "./theme";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -33,7 +34,12 @@
     ...restProps
   }: SidebarProps = $props();
 
-  warnThemeDeprecation("Sidebar", { backdropClass, divClass, nonActiveClass, activeClass }, { backdropClass: "backdrop", divClass: "div", nonActiveClass: "nonactive", activeClass: "active" });
+  warnThemeDeprecation(
+    "Sidebar",
+    untrack(() => ({ backdropClass, divClass, nonActiveClass, activeClass })),
+    { backdropClass: "backdrop", divClass: "div", nonActiveClass: "nonactive", activeClass: "active" }
+  );
+
   const styling = $derived(
     classes ?? {
       backdrop: backdropClass,
@@ -56,16 +62,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 +86,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 +143,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

@@ -3,10 +3,16 @@
   import { sidebarBrand } from "./theme";
   import type { SidebarBrandProps } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, site, imgClass, spanClass, class: className, classes, ...restProps }: SidebarBrandProps = $props();
 
-  warnThemeDeprecation("SidebarBrand", { imgClass, spanClass }, { imgClass: "img", spanClass: "span" });
+  warnThemeDeprecation(
+    "SidebarBrand",
+    untrack(() => ({ imgClass, spanClass })),
+    { imgClass: "img", spanClass: "span" }
+  );
+
   const styling = $derived(
     classes ?? {
       img: imgClass,
@@ -32,7 +38,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

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

@@ -2,7 +2,7 @@ import type { SidebarBrandProps } from "../types";
 /**
  * [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

package/dist/sidebar/SidebarButton.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1414)
+[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1472)
 ## Props
 @prop breakpoint = "md"
 @prop class: className

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

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

package/dist/sidebar/SidebarCta.svelte

@@ -3,10 +3,16 @@
   import { sidebarCta } from "./theme";
   import type { SidebarCtaProps } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, icon, divClass, spanClass, label, class: className, classes, ...restProps }: SidebarCtaProps = $props();
 
-  warnThemeDeprecation("SidebarCta", { divClass, spanClass }, { divClass: "div", spanClass: "span" });
+  warnThemeDeprecation(
+    "SidebarCta",
+    untrack(() => ({ divClass, spanClass })),
+    { divClass: "div", spanClass: "span" }
+  );
+
   const styling = $derived(
     classes ?? {
       div: divClass,
@@ -33,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1419)
+[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1477)
 ## Props
 @prop children
 @prop icon

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

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

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -2,15 +2,11 @@
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import type { ParamsType, SidebarDropdownWrapperProps } from "../types";
   import clsx from "clsx";
-  import { getContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
+  import { getSidebarContext } from "../context";
+  import { writable } from "svelte/store";
   import { slide } from "svelte/transition";
   import { sidebarDropdownWrapper } from "./theme";
-
-  type SidebarContext = {
-    selected?: Writable<object | null>;
-    isSingle: boolean;
-  };
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -31,7 +27,12 @@
     ...restProps
   }: SidebarDropdownWrapperProps = $props();
 
-  warnThemeDeprecation("SidebarDropdownWrapper", { btnClass, spanClass, ulClass, svgClass }, { btnClass: "btn", spanClass: "span", ulClass: "ul", svgClass: "svg" });
+  warnThemeDeprecation(
+    "SidebarDropdownWrapper",
+    untrack(() => ({ btnClass, spanClass, ulClass, svgClass })),
+    { btnClass: "btn", spanClass: "span", ulClass: "ul", svgClass: "svg" }
+  );
+
   const styling = $derived(
     classes ?? {
       btn: btnClass,
@@ -45,7 +46,7 @@
   const { base, btn, span, svg, ul } = sidebarDropdownWrapper();
   const isControlled = $derived(isOpen !== undefined);
 
-  let ctx = getContext<SidebarContext>("sidebarContext") || { isSingle: false };
+  let ctx = getSidebarContext() || { isSingle: false };
 
   let self = {};
 
@@ -104,7 +105,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1443)
+[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1501)
 ## Props
 @prop children
 @prop arrowup

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

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

package/dist/sidebar/SidebarGroup.svelte

@@ -13,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1460)
+[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1518)
 ## Props
 @prop children
 @prop class: className = "space-y-2"

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

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

package/dist/sidebar/SidebarItem.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getSidebarContext, getActiveUrlContext } from "../context";
   import clsx from "clsx";
-  import type { SidebarCtxType, SidebarItemProps } from "..";
+  import type { SidebarItemProps } from "../types";
 
   let { icon, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, active, class: className, ...restProps }: SidebarItemProps = $props();
 
-  const context = getContext<SidebarCtxType>("sidebarContext") ?? {};
+  const context = getSidebarContext() ?? { closeSidebar: undefined, activeClass: undefined, nonActiveClass: undefined };
 
-  const activeUrl: { value: string } = getContext("activeUrl");
+  const activeUrl = getActiveUrlContext();
 
-  let activeItem = $derived(active !== undefined ? active : activeUrl?.value ? href === activeUrl?.value : false);
+  let activeItem = $derived(active !== undefined ? active : activeUrl?.value ? href === activeUrl.value : false);
 
-  let aCls = $derived((activeItem ?? activeUrl?.value === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
+  let aCls = $derived(activeItem ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
 </script>
 
 <li class={clsx(className)}>
-  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? activeUrl?.value === href) ? "page" : undefined} class={clsx(aCls, aClass)}>
+  <a onclick={context.closeSidebar ?? undefined} {...restProps} {href} aria-current={activeItem ? "page" : undefined} class={clsx(aCls, aClass)}>
     {#if icon}
       {@render icon()}
     {/if}
@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1466)
+[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1524)
 ## Props
 @prop icon
 @prop subtext