flowbite-svelte 1.30.0 → 1.31.0

package/dist/drawer/Drawerhead.svelte

@@ -3,15 +3,19 @@
   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 });
 
-  const theme = getTheme("drawer");
+  const theme = $derived(getTheme("drawer"));
 
   const { base, button, svg } = $derived(drawerhead());
 </script>

package/dist/dropdown/Dropdown.svelte

@@ -9,7 +9,7 @@
 
   let { children, simple = false, placement = "bottom", offset = 2, class: className, activeUrl = "", isOpen = $bindable(false), onclose, ...restProps }: DropdownProps = $props();
 
-  const theme = getTheme("dropdown");
+  const theme = $derived(getTheme("dropdown"));
 
   const base = $derived(dropdown({ class: clsx(theme, className) }));
 

package/dist/dropdown/DropdownDivider.svelte

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

package/dist/dropdown/DropdownGroup.svelte

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

package/dist/dropdown/DropdownHeader.svelte

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

package/dist/dropdown/DropdownItem.svelte

@@ -4,15 +4,19 @@
   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 });
 
-  const theme = getTheme("dropdownItem");
+  const theme = $derived(getTheme("dropdownItem"));
 
   const ctx = getDropdownContext();
 

package/dist/footer/Footer.svelte

@@ -6,7 +6,7 @@
 
   let { children, footerType = "default", class: className, ...restProps }: FooterProps = $props();
 
-  const theme = getTheme("footer");
+  const theme = $derived(getTheme("footer"));
 
   const footerCls = $derived(footer({ footerType, class: clsx(theme, className) }));
 </script>

package/dist/footer/FooterBrand.svelte

@@ -6,7 +6,7 @@
 
   let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: FooterBrandProps = $props();
 
-  const theme = getTheme("footerBrand");
+  const theme = $derived(getTheme("footerBrand"));
 
   const { base, span, img } = $derived(footerBrand());
 </script>

package/dist/footer/FooterCopyright.svelte

@@ -4,16 +4,20 @@
   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 });
 
-  const theme = getTheme("footerCopyright");
+  const theme = $derived(getTheme("footerCopyright"));
 
   const effectiveYear = $derived(year ?? new SvelteDate().getFullYear());
 

package/dist/footer/FooterIcon.svelte

@@ -6,7 +6,7 @@
 
   let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
 
-  const theme = getTheme("footerIcon");
+  const theme = $derived(getTheme("footerIcon"));
 </script>
 
 {#if href}

package/dist/footer/FooterLink.svelte

@@ -3,16 +3,20 @@
   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 });
 
-  const theme = getTheme("footerLink");
+  const theme = $derived(getTheme("footerLink"));
 
   const { base, link } = footerLink();
 </script>

package/dist/footer/FooterLinkGroup.svelte

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

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

@@ -6,16 +6,20 @@
   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 });
 
-  const theme = getTheme("buttonToggle");
+  const theme = $derived(getTheme("buttonToggle"));
 
   // Get context - it will be undefined if used outside ButtonToggleGroup
   const ctx = getButtonToggleContext();

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

@@ -20,7 +20,7 @@
     ...restProps
   }: ButtonToggleGroupProps = $props();
 
-  const theme = getTheme("buttonToggleGroup");
+  const theme = $derived(getTheme("buttonToggleGroup"));
 
   const base = $derived(buttonToggleGroup({ roundedSize, class: clsx(theme, className) }));
   type SelectedValue = string | null | string[];

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,12 +25,15 @@
     ...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 });
 
-  const theme = getTheme("checkbox");
+  const theme = $derived(getTheme("checkbox"));
 
   const { base, div: divStyle } = $derived(checkbox({ color, tinted, custom, rounded, inline, disabled: disabled ?? false }));
 

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -8,7 +8,7 @@
 
   let { children, class: className, group = $bindable(), checked = $bindable(false), inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
 
-  const theme = getTheme("checkboxButton");
+  const theme = $derived(getTheme("checkboxButton"));
 
   let buttonClass: string = $derived(checkboxButton({ inline, checked, class: clsx(theme, className) }));
 </script>

package/dist/forms/dropzone/Dropzone.svelte

@@ -9,7 +9,7 @@
 
   let { children, files = $bindable<FileList | null>(), class: className, onDrop, onDragOver, onChange, ...restProps }: DropzoneProps = $props();
 
-  const theme = getTheme("dropzone");
+  const theme = $derived(getTheme("dropzone"));
 
   let inputElement: HTMLInputElement;
 

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,12 +22,15 @@
     ...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 });
 
-  const theme = getTheme("fileupload");
+  const theme = $derived(getTheme("fileupload"));
 
   const { base, wrapper, close } = fileupload();
 

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,16 +33,15 @@
     ...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" }
   );
 
   const styling = $derived(classes ?? { input: inputClass, label: labelClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass });
 
-  const theme = getTheme("floatingLabelInput");
+  const theme = $derived(getTheme("floatingLabelInput"));
 
   const { base, input, label, close, combo } = $derived(floatingLabelInput({ variant, size, color }));
 

package/dist/forms/helper/Helper.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, color = "gray", ...restProps }: HelperProps = $props();
 
-  const theme = getTheme("helper");
+  const theme = $derived(getTheme("helper"));
 
   const base = $derived(helper({ color, class: clsx(theme, className) }));
 </script>

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,17 +45,15 @@
     ...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" }
   );
 
   const styling = $derived(classes ?? { left: leftClass, right: rightClass, div: divClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass, comboItem: comboItemClass });
 
-  const theme = getTheme("input");
+  const theme = $derived(getTheme("input"));
 
   // onSelect is a custom combobox selection handler that takes a string
   // standard DOM events, onInput, onFocus, onBlur, onKeydown will be deprecated in the next minor version

package/dist/forms/label/Label.svelte

@@ -6,7 +6,7 @@
 
   let { children, color = "gray", show = true, class: className, ...restProps }: LabelProps = $props();
 
-  const theme = getTheme("label");
+  const theme = $derived(getTheme("label"));
 
   let base = $derived(label({ color, class: clsx(theme, className) }));
 </script>

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -16,7 +16,7 @@
     ...restProps
   }: PhoneInputProps = $props();
 
-  const theme = getTheme("phoneInput");
+  const theme = $derived(getTheme("phoneInput"));
 
   const { div, svg, input, span, floatingInput, label } = $derived(phoneInput({ phoneType, phoneIcon }));
 </script>

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,12 +23,15 @@
     ...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 });
 
-  const theme = getTheme("radio");
+  const theme = $derived(getTheme("radio"));
 
   const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
 </script>

package/dist/forms/radio/RadioButton.svelte

@@ -7,7 +7,7 @@
 
   let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps<T> = $props();
 
-  const theme = getTheme("radioButton");
+  const theme = $derived(getTheme("radioButton"));
 
   let isChecked = $derived(value == group);
   let base = $derived(radioButton({ inline, class: clsx(isChecked && checkedClass, theme, className) }));

package/dist/forms/range/Range.svelte

@@ -6,7 +6,7 @@
 
   let { value = $bindable(), appearance = "none", color = "blue", size = "md", inputClass, class: className, ...restProps }: RangeProps = $props();
 
-  const theme = getTheme("range");
+  const theme = $derived(getTheme("range"));
   // remove inputClass in next major version
   const inputCls = $derived(range({ appearance, color, size, class: clsx(theme, inputClass, className) }));
 </script>

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,12 +24,15 @@
     ...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 });
 
-  const theme = getTheme("search");
+  const theme = $derived(getTheme("search"));
 
   const { base, content, icon, close, input: inputCls, left } = $derived(search({ size }));
 

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,12 +31,15 @@
     ...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 });
 
-  const theme = getTheme("multiSelect");
+  const theme = $derived(getTheme("multiSelect"));
 
   let selectItems = $derived(items.filter((x) => value.includes(x.value)));
   let show: boolean = $state(false);
@@ -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,12 +29,15 @@
     ...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 });
 
-  const theme = getTheme("select");
+  const theme = $derived(getTheme("select"));
   const group = getButtonGroupContext();
   const { base, select, close } = $derived(selectCls({ underline, size, disabled, grouped: !!group }));
 

package/dist/forms/tags/Tags.svelte

@@ -6,7 +6,7 @@
   import { tags } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
-  import { onDestroy } from "svelte";
+  import { onDestroy, untrack } from "svelte";
 
   let {
     value = $bindable([]),
@@ -28,8 +28,11 @@
     ...restProps
   }: TagsProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Tags", { itemClass, spanClass, closeClass, inputClass }, { itemClass: "tag", spanClass: "span", closeClass: "close", inputClass: "input" });
+  warnThemeDeprecation(
+    "Tags",
+    untrack(() => ({ itemClass, spanClass, closeClass, inputClass })),
+    { itemClass: "tag", spanClass: "span", closeClass: "close", inputClass: "input" }
+  );
 
   const styling = $derived(
     classes ?? {
@@ -40,7 +43,7 @@
     }
   );
 
-  const theme = getTheme("tags");
+  const theme = $derived(getTheme("tags"));
 
   const { base, tag: tagCls, span: spanCls, close, input: inputCls, info, warning, error } = $derived(tags());
 

package/dist/forms/textarea/Textarea.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 {
     header,
@@ -29,10 +30,9 @@
     ...restProps
   }: TextareaProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Textarea",
-    { divClass, innerClass, headerClass, footerClass, addonClass, textareaClass, clearableClass, clearableSvgClass },
+    untrack(() => ({ divClass, innerClass, headerClass, footerClass, addonClass, textareaClass, clearableClass, clearableSvgClass })),
     { divClass: "div", innerClass: "inner", headerClass: "header", footerClass: "footer", addonClass: "addon", textareaClass: "class", clearableClass: "close", clearableSvgClass: "svg" }
   );
 
@@ -49,7 +49,7 @@
     }
   );
 
-  const theme = getTheme("textarea");
+  const theme = $derived(getTheme("textarea"));
 
   let hasHeader = $derived(!!header);
   let hasFooter = $derived(!!footer);

package/dist/forms/timepicker/Timepicker.svelte

@@ -40,7 +40,7 @@
     onselect
   }: TimepickerProps = $props();
 
-  const theme = getTheme("timepicker");
+  const theme = $derived(getTheme("timepicker"));
 
   // Generate theme classes
   const styles = $derived(timepicker({ type, columns, disabled }));

package/dist/forms/toggle/Toggle.svelte

@@ -4,15 +4,19 @@
   import type { ToggleProps } from "../..";
   import Label from "../label/Label.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, size = "default", value, checked = $bindable(), disabled, color = "primary", class: className, classes, inputClass, spanClass, offLabel, ...restProps }: ToggleProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Toggle", { inputClass, spanClass }, { inputClass: "input", spanClass: "span" });
+  warnThemeDeprecation(
+    "Toggle",
+    untrack(() => ({ inputClass, spanClass })),
+    { inputClass: "input", spanClass: "span" }
+  );
 
   const styling = $derived(classes ?? { input: inputClass, span: spanClass });
 
-  const theme = getTheme("toggle");
+  const theme = $derived(getTheme("toggle"));
 
   const { input, label, span } = $derived(toggle({ color, checked, size, disabled, off_state_label: !!offLabel }));
 </script>