flowbite-svelte 1.30.0 → 1.31.0

package/dist/gallery/Gallery.svelte

@@ -3,15 +3,19 @@
   import clsx from "clsx";
   import type { GalleryProps, ImgType } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, figure, items = [], imgClass, class: className, classes, ...restProps }: GalleryProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Gallery", { imgClass }, { imgClass: "image" });
+  warnThemeDeprecation(
+    "Gallery",
+    untrack(() => ({ imgClass })),
+    { imgClass: "image" }
+  );
 
   const styling = $derived(classes ?? { image: imgClass });
 
-  const theme = getTheme("gallery");
+  const theme = $derived(getTheme("gallery"));
 
   function init(node: HTMLElement) {
     if (getComputedStyle(node).gap === "normal") node.style.gap = "inherit";

package/dist/indicator/Indicator.svelte

@@ -6,7 +6,7 @@
 
   let { children, color = "primary", cornerStyle = "circular", size = "md", border = false, placement, offset = true, class: className, ...restProps }: IndicatorProps = $props();
 
-  const theme = getTheme("indicator");
+  const theme = $derived(getTheme("indicator"));
 
   let hasChildren = $derived(!!children);
   const base = $derived(

package/dist/kanban/KanbanBoard.svelte

@@ -15,7 +15,7 @@
     ...restProps
   }: KanbanBoardProps = $props();
 
-  const theme = getTheme("kanbanBoard");
+  const theme = $derived(getTheme("kanbanBoard"));
 
   // Changed from KanbanCard to KanbanCardType
   let draggedCard = $state<KanbanCardType | null>(null);

package/dist/kanban/KanbanCard.svelte

@@ -6,7 +6,7 @@
 
   let { card, isDragging = false, onDragStart, onDragEnd, classes, ...restProps }: KanbanCardProps = $props();
 
-  const theme = getTheme("kanbanCard");
+  const theme = $derived(getTheme("kanbanCard"));
   const styles = kanbanCard();
 </script>
 
@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2229)
+[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2230)
 ## Props
 @prop card
 @prop isDragging = false

package/dist/kanban/KanbanCard.svelte.d.ts

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

package/dist/kbd/Kbd.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: KbdProps = $props();
 
-  const theme = getTheme("kbd");
+  const theme = $derived(getTheme("kbd"));
 
   const kbdCls = $derived(kbd({ class: clsx(theme, className) }));
 </script>

package/dist/list-group/Listgroup.svelte

@@ -8,7 +8,7 @@
 
   let { children, items, active, onclick, horizontal, rounded, border, class: className, itemClass, iconClass, ...restProps }: ListgroupProps = $props();
 
-  const theme = getTheme("listGroup");
+  const theme = $derived(getTheme("listGroup"));
 
   const base = $derived(listGroup({ rounded, border, horizontal, class: clsx(theme, className) }));
 

package/dist/list-group/ListgroupItem.svelte

@@ -7,7 +7,7 @@
 
   let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-15 w-15", ...restProps }: ListgroupItemProps = $props();
 
-  const theme = getTheme("listGroupItem");
+  const theme = $derived(getTheme("listGroupItem"));
 
   const listGroupCtx = getListGroupContext();
   const finalActive = $derived(active ?? listGroupCtx?.active);

package/dist/mega-menu/MegaMenu.svelte

@@ -4,14 +4,18 @@
   import type { MegaMenuProps } from "..";
   import Popper from "../utils/Popper.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, classes, ...restProps }: MegaMenuProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("MegaMenu", { ulClass, extraClass }, { ulClass: "ul", extraClass: "extra" });
+  warnThemeDeprecation(
+    "MegaMenu",
+    untrack(() => ({ ulClass, extraClass })),
+    { ulClass: "ul", extraClass: "extra" }
+  );
 
   const styling = $derived(classes ?? { ul: ulClass, extra: extraClass });
-  const theme = getTheme("megamenu");
+  const theme = $derived(getTheme("megamenu"));
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
 </script>
 

package/dist/modal/Modal.svelte

@@ -7,6 +7,7 @@
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
   import { modal as modalStyle } from "./theme";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -30,12 +31,15 @@
     ...restProps
   }: ModalProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Modal", { headerClass, bodyClass, footerClass, closeBtnClass }, { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" });
+  warnThemeDeprecation(
+    "Modal",
+    untrack(() => ({ headerClass, bodyClass, footerClass, closeBtnClass })),
+    { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" }
+  );
 
   const styling = $derived(classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass });
 
-  const theme = getTheme("modal");
+  const theme = $derived(getTheme("modal"));
 
   const paramsDefault = { duration: 100, easing: sineIn };
   const paramsOptions = $derived(transitionParams ?? paramsDefault);

package/dist/navbar/NavBrand.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: NavBrandProps = $props();
 
-  const theme = getTheme("navbarBrand");
+  const theme = $derived(getTheme("navbarBrand"));
 </script>
 
 <a {...restProps} class={navbarBrand({ class: clsx(theme, className) })}>

package/dist/navbar/NavContainer.svelte

@@ -6,7 +6,7 @@
 
   let { children, fluid, class: className, ...restProps }: NavContainerProps = $props();
 
-  const theme = getTheme("navbarContainer");
+  const theme = $derived(getTheme("navbarContainer"));
 </script>
 
 <div {...restProps} class={navbarContainer({ fluid, class: clsx(theme, className) })}>

package/dist/navbar/NavHamburger.svelte

@@ -7,15 +7,19 @@
   import type { MouseEventHandler } from "svelte/elements";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
+  import { untrack } from "svelte";
 
   let { children, onclick, menuClass, class: className, classes, name = "Open main menu", ...restProps }: NavHamburgerProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("NavHamburger", { menuClass }, { menuClass: "menu" });
+  warnThemeDeprecation(
+    "NavHamburger",
+    untrack(() => ({ menuClass })),
+    { menuClass: "menu" }
+  );
 
   const styling = $derived(classes ?? { menu: menuClass });
 
-  const theme = getTheme("navbarHamburger");
+  const theme = $derived(getTheme("navbarHamburger"));
   const navState = getNavbarStateContext();
   const navBreakpoint = getNavbarBreakpointContext();
   const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint ?? "md" });

package/dist/navbar/NavLi.svelte

@@ -10,7 +10,7 @@
 
   let { children, onclick, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
-  const theme = getTheme("navbarLi");
+  const theme = $derived(getTheme("navbarLi"));
 
   let active = $derived(navState?.activeUrl ? restProps.href === navState.activeUrl : false);
   let liClass = $derived(

package/dist/navbar/NavUl.svelte

@@ -7,6 +7,7 @@
   import { fade, fly, scale, slide } from "svelte/transition";
   import { navbarUl } from "./theme";
   import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
+  import { untrack } from "svelte";
 
   let navState = getNavbarStateContext();
   let navBreakpoint = getNavbarBreakpointContext();
@@ -26,12 +27,15 @@
     ...restProps
   }: NavUlProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("NavUl", { ulClass, activeClass, nonActiveClass }, { ulClass: "ul", activeClass: "active", nonActiveClass: "nonActive" });
+  warnThemeDeprecation(
+    "NavUl",
+    untrack(() => ({ ulClass, activeClass, nonActiveClass })),
+    { ulClass: "ul", activeClass: "active", nonActiveClass: "nonActive" }
+  );
 
   const styling = $derived(classes ?? { ul: ulClass, active: activeClass, nonActive: nonActiveClass });
 
-  const theme = getTheme("navbarUl");
+  const theme = $derived(getTheme("navbarUl"));
 
   // Default parameters for different transitions
   const getDefaultParams = (transitionFn: typeof slide | typeof fly | typeof fade | typeof scale) => {

package/dist/navbar/Navbar.svelte

@@ -8,7 +8,7 @@
 
   let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
 
-  const theme = getTheme("navbar");
+  const theme = $derived(getTheme("navbar"));
 
   let navState = $state<NavbarState>({ hidden: true });
   setNavbarStateContext(navState);

package/dist/pagination/Pagination.svelte

@@ -8,7 +8,7 @@
 
   let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: PaginationProps = $props();
 
-  const theme = getTheme("pagination");
+  const theme = $derived(getTheme("pagination"));
 
   // Create context object
   const ctx: PaginationContextType = {

package/dist/pagination/PaginationButton.svelte

@@ -7,7 +7,7 @@
 
   let { children, size, onclick, disabled = false, class: className, href, active = false, ...restProps }: PaginationButtonProps = $props();
 
-  const theme = getTheme("paginationButton");
+  const theme = $derived(getTheme("paginationButton"));
 
   // Get context - it will be undefined if used outside Pagination
   const ctx = getPaginationContext();

package/dist/pagination/PaginationItem.svelte

@@ -7,7 +7,7 @@
 
   let { children, size, class: className, href, active, ...restProps }: PaginationItemProps = $props();
 
-  const theme = getTheme("paginationItem");
+  const theme = $derived(getTheme("paginationItem"));
 
   // Get context - it will be undefined if used outside Pagination
   const ctx = getPaginationContext();

package/dist/pagination/PaginationNav.svelte

@@ -5,6 +5,7 @@
   import PaginationButton from "./PaginationButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { setPaginationContext } from "../context";
+  import { untrack } from "svelte";
 
   function paginationRange(start: number, end: number): number[] {
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
@@ -31,12 +32,15 @@
     ...restProps
   }: PaginationNavProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("PaginationNav", { prevClass, nextClass, spanClass, tableDivClass }, { prevClass: "prev", nextClass: "next", spanClass: "span", tableDivClass: "tableDiv" });
+  warnThemeDeprecation(
+    "PaginationNav",
+    untrack(() => ({ 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");
+  const theme = $derived(getTheme("paginationNav"));
 
   // Create context object
   const ctx: PaginationContextType = {

package/dist/popover/Popover.svelte

@@ -4,6 +4,7 @@
   import { popover } from "./theme";
   import type { PopoverProps } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let {
     title: titleSlot,
@@ -19,12 +20,15 @@
     ...restProps
   }: PopoverProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Popover", { defaultClass }, { defaultClass: "content" });
+  warnThemeDeprecation(
+    "Popover",
+    untrack(() => ({ defaultClass })),
+    { defaultClass: "content" }
+  );
 
   const styling = $derived(classes ?? { content: defaultClass });
 
-  const theme = getTheme("popover");
+  const theme = $derived(getTheme("popover"));
 
   let { base, title, h3, content } = $derived(popover({ color }));
 </script>

package/dist/progress/Progressbar.svelte

@@ -21,7 +21,7 @@
     ...restProps
   }: ProgressbarProps = $props();
 
-  const theme = getTheme("progressbar");
+  const theme = $derived(getTheme("progressbar"));
 
   let _progress = $derived(
     new Tween(0, {

package/dist/progress/Progressradial.svelte

@@ -24,7 +24,7 @@
     ...restProps
   }: ProgressradialProps = $props();
 
-  const theme = getTheme("progressradial");
+  const theme = $derived(getTheme("progressradial"));
 
   const _progress = $derived(
     new Tween(0, {

package/dist/rating/AdvancedRating.svelte

@@ -3,13 +3,13 @@
   import { advancedRating } from "./theme";
   import type { AdvancedRatingProps } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   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 },
+    untrack(() => ({ divClass, spanClass, div2Class, div3Class, span2Class })),
     { divClass: "class", spanClass: "span", div2Class: "div2", div3Class: "div3", span2Class: "span2" }
   );
 
@@ -22,7 +22,7 @@
     }
   );
 
-  const theme = getTheme("advancedRating");
+  const theme = $derived(getTheme("advancedRating"));
 
   const { base, span, div2, div3, span2 } = $derived(advancedRating());
 </script>

package/dist/rating/Rating.svelte

@@ -4,15 +4,19 @@
   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();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Rating", { pClass }, { pClass: "p" });
+  warnThemeDeprecation(
+    "Rating",
+    untrack(() => ({ pClass })),
+    { pClass: "p" }
+  );
 
   const styling = $derived(classes ?? { p: pClass });
 
-  const theme = getTheme("rating");
+  const theme = $derived(getTheme("rating"));
 
   const { base, p } = $derived(ratingVariants());
   const ratingGroupId = crypto.randomUUID();

package/dist/rating/Review.svelte

@@ -3,13 +3,13 @@
   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();
 
-  // svelte-ignore state_referenced_locally
   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" }
   );
 
@@ -25,7 +25,7 @@
     }
   );
 
-  const theme = getTheme("review");
+  const theme = $derived(getTheme("review"));
 
   const { article, div, div2, div3, img, ul, li } = $derived(reviewVariants());
 </script>

package/dist/rating/ScoreRating.svelte

@@ -6,7 +6,7 @@
 
   let { ratings, ratings2, headerLabel, classes }: ScoreRatingProps = $props();
 
-  const theme = getTheme("scoreRating");
+  const theme = $derived(getTheme("scoreRating"));
 
   const { desc1, desc2, desc3span, desc3p, link, bar } = $derived(scoreRating());
 </script>

package/dist/scroll-spy/ScrollSpy.svelte

@@ -21,7 +21,7 @@
   }: ScrollSpyProps = $props();
 
   const browser = typeof window !== "undefined";
-  const styles = getTheme("scrollspy");
+  const styles = $derived(getTheme("scrollspy"));
   const INTERSECTION_RATIO_EPSILON = 0.01;
   // Bottom margin determines how far up the viewport a section must scroll before becoming inactive
   const ROOT_MARGIN_BOTTOM = "-40%";
@@ -258,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#L2327)
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2328)
 ## 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#L2327)
+ * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2328)
  * ## Props
  * @prop items
  * @prop position = "top"

package/dist/sidebar/Sidebar.svelte

@@ -8,6 +8,7 @@
   import { writable } from "svelte/store";
   import { fly } from "svelte/transition";
   import { sidebar } from "./theme";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -33,8 +34,11 @@
     ...restProps
   }: SidebarProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  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 ?? {
@@ -45,7 +49,7 @@
     }
   );
 
-  const theme = getTheme("sidebar");
+  const theme = $derived(getTheme("sidebar"));
 
   const breakpointValues = {
     sm: 640,

package/dist/sidebar/SidebarBrand.svelte

@@ -3,11 +3,15 @@
   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();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("SidebarBrand", { imgClass, spanClass }, { imgClass: "img", spanClass: "span" });
+  warnThemeDeprecation(
+    "SidebarBrand",
+    untrack(() => ({ imgClass, spanClass })),
+    { imgClass: "img", spanClass: "span" }
+  );
 
   const styling = $derived(
     classes ?? {
@@ -16,7 +20,7 @@
     }
   );
 
-  const theme = getTheme("sidebarBrand");
+  const theme = $derived(getTheme("sidebarBrand"));
 
   const { base, img, span } = $derived(sidebarBrand());
 </script>

package/dist/sidebar/SidebarButton.svelte

@@ -6,7 +6,7 @@
 
   let { breakpoint = "md", class: className, classes, ...restProps }: SidebarButtonProps = $props();
 
-  const theme = getTheme("sidebarButton");
+  const theme = $derived(getTheme("sidebarButton"));
 
   const { base, svg } = $derived(sidebarButton({ breakpoint }));
 </script>

package/dist/sidebar/SidebarCta.svelte

@@ -3,11 +3,15 @@
   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();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("SidebarCta", { divClass, spanClass }, { divClass: "div", spanClass: "span" });
+  warnThemeDeprecation(
+    "SidebarCta",
+    untrack(() => ({ divClass, spanClass })),
+    { divClass: "div", spanClass: "span" }
+  );
 
   const styling = $derived(
     classes ?? {
@@ -16,7 +20,7 @@
     }
   );
 
-  const theme = getTheme("sidebarCta");
+  const theme = $derived(getTheme("sidebarCta"));
 
   const { base, div, span } = $derived(sidebarCta());
 </script>

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -6,6 +6,7 @@
   import { writable } from "svelte/store";
   import { slide } from "svelte/transition";
   import { sidebarDropdownWrapper } from "./theme";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -26,8 +27,11 @@
     ...restProps
   }: SidebarDropdownWrapperProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  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 ?? {
@@ -38,7 +42,7 @@
     }
   );
 
-  const theme = getTheme("sidebarDropdownWrapper");
+  const theme = $derived(getTheme("sidebarDropdownWrapper"));
   const { base, btn, span, svg, ul } = sidebarDropdownWrapper();
   const isControlled = $derived(isOpen !== undefined);
 

package/dist/skeleton/CardPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { size = "sm", class: className, classes, ...restProps }: CardPlaceholderProps = $props();
 
-  const theme = getTheme("cardPlaceholder");
+  const theme = $derived(getTheme("cardPlaceholder"));
 
   const { base, area, icon, line, footer } = $derived(cardPlaceholder({ size }));
 </script>

package/dist/skeleton/ImagePlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { size = "md", rounded, imgOnly = false, class: className, classes, ...restProps }: ImagePlaceholderProps = $props();
 
-  const theme = getTheme("imagePlaceholder");
+  const theme = $derived(getTheme("imagePlaceholder"));
 
   const { base, image, svg, content, line } = $derived(
     imagePlaceholder({

package/dist/skeleton/ListPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { itemNumber = 5, size = "md", rounded, class: className, classes, ...restProps }: ListPlaceholderProps = $props();
 
-  const theme = getTheme("listPlaceholder");
+  const theme = $derived(getTheme("listPlaceholder"));
 
   const { base, item, content, title, subTitle, extra } = $derived(listPlaceholder({ size, rounded }));
 

package/dist/skeleton/Skeleton.svelte

@@ -6,7 +6,7 @@
 
   let { size = "sm", class: className, classes, ...restProps }: SkeletonProps = $props();
 
-  const theme = getTheme("skeleton");
+  const theme = $derived(getTheme("skeleton"));
 
   const { wrapper, line } = $derived(skeleton({ size }));
 </script>

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { class: className, classes, ...restProps }: TestimonialPlaceholderProps = $props();
 
-  const theme = getTheme("testimonialPlaceholder");
+  const theme = $derived(getTheme("testimonialPlaceholder"));
 
   const { base, lineA, lineB, svg, content } = testimonialPlaceholder();
 </script>