flowbite-svelte 1.30.0 → 1.30.1

package/dist/accordion/Accordion.svelte

@@ -5,6 +5,7 @@
   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();
 
@@ -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",

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,8 +27,11 @@
     ...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 });
 

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,8 +25,11 @@
     ...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 });
 

package/dist/bottom-navigation/BottomNav.svelte

@@ -5,11 +5,15 @@
   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 });
 

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -3,11 +3,15 @@
   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 });
 

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -5,11 +5,15 @@
   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 });
 

package/dist/breadcrumb/Breadcrumb.svelte

@@ -3,11 +3,15 @@
   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 });
 

package/dist/card/Card.svelte

@@ -3,11 +3,15 @@
   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 });
 

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,8 +30,11 @@
     ...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 });
 

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/Drawerhead.svelte

@@ -3,11 +3,15 @@
   import clsx from "clsx";
   import type { DrawerheadProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { closeIcon, children, buttonClass, svgClass, class: className, classes, ...restProps }: DrawerheadProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Drawerhead", { buttonClass, svgClass }, { buttonClass: "button", svgClass: "svg" });
+  warnThemeDeprecation(
+    "Drawerhead",
+    untrack(() => ({ buttonClass, svgClass })),
+    { buttonClass: "button", svgClass: "svg" }
+  );
 
   const styling = $derived(classes ?? { button: buttonClass, svg: svgClass });
 

package/dist/dropdown/DropdownItem.svelte

@@ -4,11 +4,15 @@
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import type { DropdownItemProps } from "../types";
+  import { untrack } from "svelte";
 
   let { aClass, children, activeClass, liClass, classes, class: className, href, onclick, ...restProps }: DropdownItemProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("DropdownItem", { aClass, activeClass, liClass }, { aClass: "class", activeClass: "active", liClass: "li" });
+  warnThemeDeprecation(
+    "DropdownItem",
+    untrack(() => ({ aClass, activeClass, liClass })),
+    { aClass: "class", activeClass: "active", liClass: "li" }
+  );
 
   const styling = $derived(classes ?? { active: activeClass, li: liClass });
 

package/dist/footer/FooterCopyright.svelte

@@ -4,11 +4,15 @@
   import clsx from "clsx";
   import type { FooterCopyrightProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { spanClass, aClass, href, by, copyrightMessage = "All Rights Reserved.", year, bySpanClass, classes, class: className, ...restProps }: FooterCopyrightProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("FooterCopyright", { aClass, spanClass, bySpanClass }, { aClass: "link", spanClass: "class", bySpanClass: "bySpan" });
+  warnThemeDeprecation(
+    "FooterCopyright",
+    untrack(() => ({ aClass, spanClass, bySpanClass })),
+    { aClass: "link", spanClass: "class", bySpanClass: "bySpan" }
+  );
 
   // link, bySpan
   const styling = $derived(classes ?? { bySpan: bySpanClass, link: aClass });

package/dist/footer/FooterLink.svelte

@@ -3,11 +3,15 @@
   import clsx from "clsx";
   import type { FooterLinkProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, liClass, aClass, href, classes, class: className, ...restProps }: FooterLinkProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("FooterLink", { liClass, aClass }, { liClass: "class", aClass: "link" });
+  warnThemeDeprecation(
+    "FooterLink",
+    untrack(() => ({ liClass, aClass })),
+    { liClass: "class", aClass: "link" }
+  );
 
   // link, bySpan
   const styling = $derived(classes ?? { link: aClass });

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -6,11 +6,15 @@
   import type { ButtonToggleProps } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { getButtonToggleContext } from "../../context";
+  import { untrack } from "svelte";
 
   let { value, selected = false, children, iconSlot, color, class: className, iconClass, txtClass, contentClass, classes, ...restProps }: ButtonToggleProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("ButtonToggle", { iconClass, txtClass, contentClass }, { iconClass: "icon", txtClass: "text", contentClass: "content" });
+  warnThemeDeprecation(
+    "ButtonToggle",
+    untrack(() => ({ iconClass, txtClass, contentClass })),
+    { iconClass: "icon", txtClass: "text", contentClass: "content" }
+  );
 
   // button(className), content, text, icon
   const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });

package/dist/forms/checkbox/Checkbox.svelte

@@ -4,6 +4,7 @@
   import { type CheckboxProps } from "../..";
   import Label from "../label/Label.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -24,8 +25,11 @@
     ...restProps
   }: CheckboxProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Checkbox", { divClass }, { divClass: "div" });
+  warnThemeDeprecation(
+    "Checkbox",
+    untrack(() => ({ divClass })),
+    { divClass: "div" }
+  );
 
   const styling = $derived(classes ?? { div: divClass });
 

package/dist/forms/fileupload/Fileupload.svelte

@@ -5,6 +5,7 @@
   import CloseButton from "../../utils/CloseButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     files = $bindable(),
@@ -21,8 +22,11 @@
     ...restProps
   }: FileuploadProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Fileupload", { wrapperClass, clearableClass, clearableSvgClass }, { wrapperClass: "wrapper", clearableClass: "close", clearableSvgClass: "svg" });
+  warnThemeDeprecation(
+    "Fileupload",
+    untrack(() => ({ wrapperClass, clearableClass, clearableSvgClass })),
+    { wrapperClass: "wrapper", clearableClass: "close", clearableSvgClass: "svg" }
+  );
 
   const styling = $derived(classes ?? { wrapper: wrapperClass, close: clearableClass, svg: clearableSvgClass });
 

package/dist/forms/floating-label/FloatingLabelInput.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,
@@ -32,10 +33,9 @@
     ...restProps
   }: FloatingLabelInputProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "FloatingLabelInput",
-    { inputClass, labelClass, clearableSvgClass, clearableClass, comboClass },
+    untrack(() => ({ inputClass, labelClass, clearableSvgClass, clearableClass, comboClass })),
     { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" }
   );
 

package/dist/forms/input-field/Input.svelte

@@ -8,6 +8,7 @@
   import { clampSize } from "./index";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -44,11 +45,9 @@
     ...restProps
   }: InputProps<InputValue> = $props();
 
-  // input, left, right, close, combo, comboItem, div, svg
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Input",
-    { wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass },
+    untrack(() => ({ wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass })),
     { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" }
   );
 

package/dist/forms/radio/Radio.svelte

@@ -5,6 +5,7 @@
   import type { RadioProps } from "../..";
   import Label from "../label/Label.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
 
   // remove inputClass in next major version
   let {
@@ -22,8 +23,11 @@
     ...restProps
   }: RadioProps<T> = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Radio", { inputClass, labelClass }, { inputClass: "class", labelClass: "label" });
+  warnThemeDeprecation(
+    "Radio",
+    untrack(() => ({ inputClass, labelClass })),
+    { inputClass: "class", labelClass: "label" }
+  );
 
   const styling = $derived(classes ?? { label: labelClass });
 

package/dist/forms/search/Search.svelte

@@ -5,6 +5,7 @@
   import CloseButton from "../../utils/CloseButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -23,8 +24,11 @@
     ...restProps
   }: SearchProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Search", { inputClass, clearableSvgClass, clearableClass }, { inputClass: "input", clearableSvgClass: "svg", clearableClass: "close" });
+  warnThemeDeprecation(
+    "Search",
+    untrack(() => ({ inputClass, clearableSvgClass, clearableClass })),
+    { inputClass: "input", clearableSvgClass: "svg", clearableClass: "close" }
+  );
 
   const styling = $derived(classes ?? { input: inputClass, svg: clearableSvgClass, close: clearableClass });
 

package/dist/forms/select/MultiSelect.svelte

@@ -5,7 +5,7 @@
   import CloseButton from "../../utils/CloseButton.svelte";
   import { multiSelect } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { onMount } from "svelte";
+  import { onMount, untrack } from "svelte";
   import { createDismissableContext } from "../../utils/dismissable";
   import { getButtonGroupContext } from "../../context";
 
@@ -31,8 +31,11 @@
     ...restProps
   }: MultiSelectProps<T> = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("MultiSelect", { dropdownClass }, { dropdownClass: "dropdown" });
+  warnThemeDeprecation(
+    "MultiSelect",
+    untrack(() => ({ dropdownClass })),
+    { dropdownClass: "dropdown" }
+  );
 
   const styling = $derived(classes ?? { dropdown: dropdownClass });
 
@@ -246,15 +249,19 @@
   {#if show}
     <div role="presentation" class={dropdown({ class: clsx(styling.dropdown) })}>
       {#each items as item (item.value)}
+        {@const isSelected = selectItems.includes(item)}
+        {@const isActive = activeItem === item}
         <div
           onclick={(e) => selectOption(item, e)}
           role="presentation"
           class={dropdownItem({
-            selected: selectItems.includes(item),
-            active: activeItem === item,
+            selected: isSelected,
+            active: isActive,
             disabled: item.disabled,
             class: clsx(classes?.item)
           })}
+          data-selected={isSelected ? "true" : undefined}
+          data-active={isActive ? "true" : undefined}
         >
           {item.name}
         </div>

package/dist/forms/select/Select.svelte

@@ -6,6 +6,7 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
   import { getButtonGroupContext } from "../../context";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -28,8 +29,11 @@
     ...restProps
   }: SelectProps<T> = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Select", { selectClass, clearableSvgClass, clearableClass }, { selectClass: "select", clearableSvgClass: "svg", clearableClass: "close" });
+  warnThemeDeprecation(
+    "Select",
+    untrack(() => ({ selectClass, clearableSvgClass, clearableClass })),
+    { selectClass: "select", clearableSvgClass: "svg", clearableClass: "close" }
+  );
 
   const styling = $derived(classes ?? { select: selectClass, svg: clearableSvgClass, close: clearableClass });