flowbite-svelte 1.30.0 → 1.31.0

package/dist/accordion/Accordion.svelte

@@ -5,10 +5,11 @@
   import { setAccordionContext } from "../context";
   import { accordion } from "./theme";
   import { createSingleSelectionContext } from "../utils/singleselection.svelte";
+  import { untrack } from "svelte";
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
 
-  const theme = getTheme("accordion");
+  const theme = $derived(getTheme("accordion"));
 
   // Simple reactive state object
   const reactiveCtx: AccordionContextType = {
@@ -29,9 +30,9 @@
   // Set context during initialization
   setAccordionContext(reactiveCtx);
 
-  $effect(() => {
-    createSingleSelectionContext(multiple);
-  });
+  // Create selection context synchronously for proper nesting
+  // Use untrack to explicitly capture only the initial value
+  createSingleSelectionContext(untrack(() => multiple));
 
   const base = $derived(accordion({ flush, class: clsx(theme, className) }));
 </script>

package/dist/accordion/AccordionItem.svelte

@@ -6,6 +6,7 @@
   import { getAccordionContext } from "../context";
   import { slide } from "svelte/transition";
   import { accordionItem } from "./theme";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -23,15 +24,14 @@
     contentClass
   }: AccordionItemProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "AccordionItem",
-    {
+    untrack(() => ({
       headerClass,
       contentClass,
       activeClass,
       inactiveClass
-    },
+    })),
     {
       headerClass: "button",
       contentClass: "content",
@@ -50,7 +50,7 @@
   const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
 
   // Theme context
-  const theme = getTheme("accordionItem");
+  const theme = $derived(getTheme("accordionItem"));
 
   // single selection
   const self = Symbol("accordion-item");

package/dist/alert/Alert.svelte

@@ -23,7 +23,7 @@
   }: AlertProps = $props();
 
   // Theme context
-  const theme = getTheme("alert");
+  const theme = $derived(getTheme("alert"));
 
   let divCls = $derived(
     alert({

package/dist/avatar/Avatar.svelte

@@ -8,7 +8,7 @@
   let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
 
   // Theme context
-  const theme = getTheme("avatar");
+  const theme = $derived(getTheme("avatar"));
 
   let dotProps = $derived(dot ? { placement: "top-right" as const, color: "gray" as const, size: "lg" as const, ...dot } : undefined);
 

package/dist/badge/Badge.svelte

@@ -6,6 +6,7 @@
   import { fade } from "svelte/transition";
   import { badge } from "./theme";
   import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -26,13 +27,16 @@
     ...restProps
   }: BadgeProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Badge", { aClass }, { aClass: "linkClass" });
+  warnThemeDeprecation(
+    "Badge",
+    untrack(() => ({ aClass })),
+    { aClass: "linkClass" }
+  );
 
   const styling = $derived(classes ?? { linkClass: aClass });
 
   // Theme context
-  const theme = getTheme("badge");
+  const theme = $derived(getTheme("badge"));
 
   const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border }));
 

package/dist/banner/Banner.svelte

@@ -6,6 +6,7 @@
   import CloseButton from "../utils/CloseButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -24,13 +25,16 @@
     ...restProps
   }: BannerProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
+  warnThemeDeprecation(
+    "Banner",
+    untrack(() => ({ innerClass, closeClass })),
+    { innerClass: "insideDiv", closeClass: "dismissable" }
+  );
 
   const styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
 
   // Theme context
-  const theme = getTheme("banner");
+  const theme = $derived(getTheme("banner"));
 
   const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
 

package/dist/bottom-navigation/BottomNav.svelte

@@ -5,16 +5,20 @@
   import clsx from "clsx";
   import { setBottomNavContext } from "../context";
   import { bottomNav } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("BottomNav", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
+  warnThemeDeprecation(
+    "BottomNav",
+    untrack(() => ({ innerClass, outerClass })),
+    { innerClass: "inner", outerClass: "class" }
+  );
 
   const styling = $derived(classes ?? { inner: innerClass });
 
   // Theme context
-  const theme = getTheme("bottomNav");
+  const theme = $derived(getTheme("bottomNav"));
 
   const activeCls = $derived(cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass));
 

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -3,16 +3,20 @@
   import clsx from "clsx";
   import type { BottomNavHeaderProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("BottomNavHeader", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
+  warnThemeDeprecation(
+    "BottomNavHeader",
+    untrack(() => ({ innerClass, outerClass })),
+    { innerClass: "inner", outerClass: "class" }
+  );
 
   const styling = $derived(classes ?? { innerDiv: innerClass });
 
   // Theme context
-  const theme = getTheme("bottomNavHeader");
+  const theme = $derived(getTheme("bottomNavHeader"));
 
   const { innerDiv, base } = $derived(bottomNavHeader());
 </script>

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -7,7 +7,7 @@
   let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
 
   // Theme context
-  const theme = getTheme("bottomNavHeaderItem");
+  const theme = $derived(getTheme("bottomNavHeaderItem"));
 
   let base = $derived(bottomNavHeaderItem({ active, class: clsx(theme, className) }));
 </script>

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -5,16 +5,20 @@
   import { getBottomNavContext } from "../context";
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
   import { bottomNavItem } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("BottomNavItem", { spanClass, btnClass }, { spanClass: "span", btnClass: "class" });
+  warnThemeDeprecation(
+    "BottomNavItem",
+    untrack(() => ({ spanClass, btnClass })),
+    { spanClass: "span", btnClass: "class" }
+  );
 
   const styling = $derived(classes ?? { span: spanClass });
 
   // Theme context
-  const theme = getTheme("bottomNavItem");
+  const theme = $derived(getTheme("bottomNavItem"));
 
   const context = getBottomNavContext();
 

package/dist/breadcrumb/Breadcrumb.svelte

@@ -3,15 +3,19 @@
   import clsx from "clsx";
   import type { BreadcrumbProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, solid = false, class: className, classes, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Breadcrumb", { olClass }, { olClass: "list" });
+  warnThemeDeprecation(
+    "Breadcrumb",
+    untrack(() => ({ olClass })),
+    { olClass: "list" }
+  );
 
   const styling = $derived(classes ?? { list: olClass });
 
-  const theme = getTheme("breadcrumb");
+  const theme = $derived(getTheme("breadcrumb"));
 
   const { base, list } = $derived(breadcrumb({ solid }));
   let classNav = $derived(base({ class: clsx(theme?.base, className) }));

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -8,7 +8,7 @@
 
   const styling = $derived(classes ?? {});
 
-  const theme = getTheme("breadcrumbItem");
+  const theme = $derived(getTheme("breadcrumbItem"));
 
   const { base, separator } = $derived(
     breadcrumbItem({

package/dist/button-group/ButtonGroup.svelte

@@ -7,7 +7,7 @@
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
-  const theme = getTheme("buttonGroup");
+  const theme = $derived(getTheme("buttonGroup"));
 
   let groupClass = $derived(buttonGroup({ size, class: clsx(theme, className) }));
 

package/dist/buttons/Button.svelte

@@ -25,7 +25,7 @@
     ...restProps
   }: ButtonProps = $props();
 
-  const theme = getTheme("button");
+  const theme = $derived(getTheme("button"));
 
   let actualSize = $derived(group ? "sm" : size);
   let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));

package/dist/buttons/GradientButton.svelte

@@ -10,7 +10,7 @@
 
   let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, btnClass, ...restProps }: GradientButtonProps = $props();
 
-  const theme = getTheme("gradientButton");
+  const theme = $derived(getTheme("gradientButton"));
 
   const { base, outlineWrapper } = $derived(gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group }));
 </script>

package/dist/card/Card.svelte

@@ -3,15 +3,19 @@
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { card } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, color = "gray", horizontal = false, shadow = "md", reverse = false, img, size = "sm", class: className, classes, imgClass, ...restProps }: CardProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Card", { imgClass }, { imgClass: "image" });
+  warnThemeDeprecation(
+    "Card",
+    untrack(() => ({ imgClass })),
+    { imgClass: "image" }
+  );
 
   const styling = $derived(classes ?? { image: imgClass });
 
-  const theme = getTheme("card");
+  const theme = $derived(getTheme("card"));
 
   const { base, image } = $derived(
     card({

package/dist/carousel/Carousel.svelte

@@ -7,6 +7,7 @@
   import { setCarouselContext } from "../context";
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
+  import { untrack } from "svelte";
 
   const SLIDE_DURATION_RATIO = 0.25;
 
@@ -29,13 +30,16 @@
     ...restProps
   }: CarouselProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Carousel", { imgClass }, { imgClass: "slide" });
+  warnThemeDeprecation(
+    "Carousel",
+    untrack(() => ({ imgClass })),
+    { imgClass: "slide" }
+  );
 
   const styling = $derived(classes ?? { slide: imgClass });
 
   // Theme context
-  const theme = getTheme("carousel");
+  const theme = $derived(getTheme("carousel"));
 
   let { base, slide: slideCls } = $derived(carousel());
 

package/dist/carousel/CarouselIndicators.svelte

@@ -8,7 +8,7 @@
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
 
-  const theme = getTheme("carouselIndicators");
+  const theme = $derived(getTheme("carouselIndicators"));
 
   const _state = getCarouselContext();
   const { base, indicator } = $derived(carouselIndicators({ position }));

package/dist/carousel/ControlButton.svelte

@@ -8,7 +8,7 @@
 
   const { base, span } = $derived(controlButton({ forward }));
 
-  const theme = getTheme("controlButton");
+  const theme = $derived(getTheme("controlButton"));
 </script>
 
 <button type="button" class={base({ class: clsx(className, theme) })} {...restProps}>

package/dist/carousel/Controls.svelte

@@ -7,7 +7,7 @@
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
-  const theme = getTheme("controlButton");
+  const theme = $derived(getTheme("controlButton"));
 
   const _state = getCarouselContext();
 

package/dist/carousel/Slide.svelte

@@ -10,7 +10,7 @@
 
   let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
 
-  const theme = getTheme("slide");
+  const theme = $derived(getTheme("slide"));
 
   let transitionSlideIn = $derived({
     x: _state?.forward ? "100%" : "-100%",

package/dist/carousel/Thumbnail.svelte

@@ -6,7 +6,7 @@
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
 
-  const theme = getTheme("thumbnail");
+  const theme = $derived(getTheme("thumbnail"));
 </script>
 
 <img {...restProps} class={thumbnail({ selected, class: clsx(theme, className) })} />

package/dist/carousel/Thumbnails.svelte

@@ -7,7 +7,7 @@
 
   let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
 
-  const theme = getTheme("thumbnails");
+  const theme = $derived(getTheme("thumbnails"));
 
   // Initialize so the first click is never throttled
   let lastClickedAt = -Infinity;

package/dist/clipboard/Clipboard.svelte

@@ -8,7 +8,7 @@
 
   let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
 
-  const theme = getTheme("clipboard");
+  const theme = $derived(getTheme("clipboard"));
 
   const copyToClipboard: MouseEventHandler<HTMLButtonElement> = async (ev) => {
     onclick?.(ev);

package/dist/clipboard-manager/ClipboardManager.svelte

@@ -30,7 +30,7 @@
     detectSensitiveData
   }: ClipboardManagerProps = $props();
 
-  const theme = getTheme("clipboardManager");
+  const theme = $derived(getTheme("clipboardManager"));
 
   const isModal = $derived(open !== undefined);
 

package/dist/command-palette/CommandPalette.svelte

@@ -21,7 +21,7 @@
     ...restProps
   }: CommandPaletteProps = $props();
 
-  const theme = getTheme("commandPalette");
+  const theme = $derived(getTheme("commandPalette"));
 
   let search = $state("");
   let selectedIndex = $state(0);
@@ -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#L2312)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2313)
 ## 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#L2312)
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2313)
  * ## Props
  * @prop open = $bindable(false)
  * @prop items = []

package/dist/context.d.ts

@@ -19,7 +19,10 @@ declare const getListContext: () => ListContextType | undefined, setListContext:
 export { getListContext, setListContext };
 declare const getToolbarContext: () => ToolbarContextType | undefined, setToolbarContext: (context: ToolbarContextType) => ToolbarContextType;
 export { getToolbarContext, setToolbarContext };
-declare const getThemeContext: () => ThemeConfig | undefined, setThemeContext: (context: ThemeConfig) => ThemeConfig;
+type ThemeContextValue = ThemeConfig | {
+    value?: ThemeConfig;
+};
+declare const getThemeContext: () => ThemeContextValue | undefined, setThemeContext: (context: ThemeContextValue) => ThemeContextValue;
 export { getThemeContext, setThemeContext };
 declare const getListGroupContext: () => ListGroupContextType | undefined, setListGroupContext: (context: ListGroupContextType) => ListGroupContextType;
 export { getListGroupContext, setListGroupContext };

package/dist/context.js

@@ -42,7 +42,6 @@ export { getListContext, setListContext };
 // Toolbar
 const [getToolbarContext, setToolbarContext] = createSafeContext();
 export { getToolbarContext, setToolbarContext };
-// Theme
 const [getThemeContext, setThemeContext] = createSafeContext();
 export { getThemeContext, setThemeContext };
 // ListGroup

package/dist/darkmode/DarkMode.svelte

@@ -7,7 +7,7 @@
   // const THEME_PREFERENCE_KEY = 'color-theme';
   let { class: className, lightIcon, darkIcon, size = "md", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
 
-  const theme = getTheme("darkmode");
+  const theme = $derived(getTheme("darkmode"));
 
   const sizes = {
     sm: "w-4 h-4",

package/dist/datepicker/Datepicker.svelte

@@ -45,7 +45,7 @@
     inputProps = {}
   }: DatepickerProps = $props();
 
-  const theme = getTheme("datepicker");
+  const theme = $derived(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.
   const finalTranslationLocale = $derived(translationLocale ?? locale);

package/dist/device-mockups/Android.svelte

@@ -3,13 +3,13 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { android } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Android",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class })),
     { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" }
   );
 

package/dist/device-mockups/DefaultMockup.svelte

@@ -3,13 +3,13 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { defaultMockup } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "DefaultMockup",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
 

package/dist/device-mockups/Desktop.svelte

@@ -3,11 +3,15 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { desktop } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: DesktopProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Desktop", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" });
+  warnThemeDeprecation(
+    "Desktop",
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class })),
+    { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" }
+  );
 
   const styling = $derived(
     classes ?? {

package/dist/device-mockups/Ios.svelte

@@ -3,13 +3,13 @@
   import type { IosProps } from "..";
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: IosProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Ios",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
 

package/dist/device-mockups/Laptop.svelte

@@ -3,13 +3,13 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { laptop } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: LaptopProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Laptop",
-    { divClass, div2Class, div3Class, div4Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class })),
     { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
 

package/dist/device-mockups/Smartwatch.svelte

@@ -3,13 +3,13 @@
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
   import { smartwatch } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: SmartwatchProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Smartwatch",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "top", div3Class: "rightTop", div4Class: "rightBot", div5Class: "bot", div6Class: "slot" }
   );
 

package/dist/device-mockups/Tablet.svelte

@@ -3,13 +3,13 @@
   import type { TabletProps } from "..";
   import { warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: TabletProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Tablet",
-    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    untrack(() => ({ divClass, div2Class, div3Class, div4Class, div5Class, div6Class })),
     { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
   );
 

package/dist/drawer/Drawer.svelte

@@ -64,7 +64,7 @@
   });
   // end
 
-  const theme = getTheme("drawer");
+  const theme = $derived(getTheme("drawer"));
 
   let shifted = $state(true);
 

package/dist/drawer/DrawerHandle.svelte

@@ -9,7 +9,7 @@
 
   const ctx = getDrawerContext();
 
-  const theme = getTheme("drawerhandle");
+  const theme = $derived(getTheme("drawerhandle"));
   let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" }));
 </script>