flowbite-svelte 1.29.1 → 1.30.1

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import clsx from "clsx";
-  import type { ButtonToggleGroupProps } from "../..";
+  import type { ButtonToggleGroupProps, ButtonToggleContextType } from "../..";
   import { buttonToggleGroup } from "./theme";
   import { getTheme } from "../../theme/themeUtils";
+  import { setButtonToggleContext } from "../../context";
 
   let {
     multiSelect = false,
     name = "toggle-group",
-    value = multiSelect ? [] : null,
+    value,
     color,
     size = "md",
     roundedSize = "md",
@@ -44,18 +44,13 @@
         // Array passed but multiSelect is false - take first item
         return value[0] ?? null;
       } else {
-        return value;
+        return value ?? null; // Handle undefined case
       }
     }
   }
 
   let selectedValues = $state<SelectedValue>(getInitialValue());
 
-  interface ButtonToggleContext {
-    toggleSelected: (toggleValue: string) => void;
-    isSelected: (toggleValue: string) => boolean;
-  }
-
   function toggleSelected(toggleValue: string) {
     if (multiSelect) {
       const currentSelected = [...(selectedValues as string[])];
@@ -81,19 +76,36 @@
     }
   }
 
-  const buttonToggleContext: ButtonToggleContext = {
-    toggleSelected,
-    isSelected
+  // Create context object with all button toggle related values
+  const ctx: ButtonToggleContextType = {
+    get toggleSelected() {
+      return toggleSelected;
+    },
+    get isSelected() {
+      return isSelected;
+    },
+    get multiSelect() {
+      return multiSelect;
+    },
+    get color() {
+      return color;
+    },
+    get size() {
+      return size;
+    },
+    get roundedSize() {
+      return roundedSize;
+    },
+    get ctxIconClass() {
+      return clsx(ctxIconClass);
+    },
+    get ctxBtnClass() {
+      return clsx(ctxBtnClass);
+    }
   };
 
-  // Set all the contexts separately
-  setContext("button-toggle-group", buttonToggleContext);
-  setContext("multiSelect", multiSelect);
-  setContext("buttonToggleColor", color);
-  setContext("buttonToggleSize", size);
-  setContext("buttonToggleRounded", roundedSize);
-  setContext("ctxIconClass", clsx(ctxIconClass));
-  setContext("ctxBtnClass", clsx(ctxBtnClass));
+  // Set context during initialization
+  setButtonToggleContext(ctx);
 </script>
 
 <div class="inline">

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

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L391)
+[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
 ## Props
 @prop class: className
 @prop ...restProps

package/dist/forms/button-toggle/CheckIcon.svelte.d.ts

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

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,7 +25,12 @@
     ...restProps
   }: CheckboxProps = $props();
 
-  warnThemeDeprecation("Checkbox", { divClass }, { divClass: "div" });
+  warnThemeDeprecation(
+    "Checkbox",
+    untrack(() => ({ divClass })),
+    { divClass: "div" }
+  );
+
   const styling = $derived(classes ?? { div: divClass });
 
   const theme = getTheme("checkbox");

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L734)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L792)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

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

package/dist/forms/dropzone/Dropzone.svelte

@@ -52,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L744)
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L802)
 ## Props
 @prop children
 @prop files = $bindable<FileList | null>()

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropzoneProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L744)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L802)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()

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,7 +22,12 @@
     ...restProps
   }: FileuploadProps = $props();
 
-  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");
@@ -50,7 +56,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L753)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L811)
 ## Props
 @prop files = $bindable()
 @prop size = "md"

package/dist/forms/fileupload/Fileupload.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FileuploadProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L753)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L811)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"

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,
@@ -34,9 +35,10 @@
 
   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");
@@ -211,7 +213,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L767)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L825)
 ## Props
 @prop children
 @prop id = idGenerator()

package/dist/forms/floating-label/FloatingLabelInput.svelte.d.ts

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

package/dist/forms/helper/Helper.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L791)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L849)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/helper/Helper.svelte.d.ts

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

package/dist/forms/input-addon/InputAddon.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import type { SizeType } from "../../types";
   import { getContext } from "svelte";
   import clsx from "clsx";
   import type { InputAddonProps } from "../..";
   import { clampSize } from "../input-field";
+  import { getButtonGroupContext } from "../../context";
 
   let { children, class: className, size, ...restProps }: InputAddonProps = $props();
 
   let background: boolean = getContext("background");
-  let group: { size: SizeType } = getContext("group");
+  const group = getButtonGroupContext();
 
   const borderClasses = {
     base: "border-gray-300 dark:border-gray-600",
@@ -29,19 +29,21 @@
   const prefixPadding = { sm: "px-2", md: "px-3", lg: "px-4" };
 
   // size: explicit, inherited, default
-  let _size = size || clampSize(group?.size) || "md";
-
-  let divClass: string = clsx(
-    textSizes[_size],
-    prefixPadding[_size],
-    "text-gray-500 bg-gray-200",
-    background ? darkBgClasses.tinted : darkBgClasses.base,
-    background ? divider.tinted : divider.base,
-    background ? borderClasses["tinted"] : borderClasses["base"],
-    "inline-flex items-center border",
-    group && "not-first:-ms-px",
-    "first:rounded-s-lg last:rounded-e-lg",
-    className
+  let _size = $derived(size || (group?.size ? clampSize(group.size) : undefined) || "md");
+
+  let divClass: string = $derived(
+    clsx(
+      textSizes[_size],
+      prefixPadding[_size],
+      "text-gray-500 bg-gray-200",
+      background ? darkBgClasses.tinted : darkBgClasses.base,
+      background ? divider.tinted : divider.base,
+      background ? borderClasses["tinted"] : borderClasses["base"],
+      "inline-flex items-center border",
+      group && "not-first:-ms-px",
+      "first:rounded-s-lg last:rounded-e-lg",
+      className
+    )
   );
 </script>
 
@@ -53,7 +55,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L833)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L891)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/input-addon/InputAddon.svelte.d.ts

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

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

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import clsx from "clsx";
-  import type { SizeType, InputProps, InputValue } from "../..";
+  import type { InputProps, InputValue } from "../..";
+  import { getButtonGroupContext } from "../../context";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { input } from "./theme";
   import { clampSize } from "./index";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -43,10 +45,9 @@
     ...restProps
   }: InputProps<InputValue> = $props();
 
-  // input, left, right, close, combo, comboItem, div, svg
   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" }
   );
 
@@ -70,11 +71,10 @@
   // svelte-ignore non_reactive_update
   let dummyFocusDiv: HTMLDivElement;
 
-  let group: { size: SizeType } = getContext("group");
-  let isGroup = !!group;
-  let _size = $derived(size || clampSize(group?.size) || "md");
+  let group = $derived(getButtonGroupContext());
+  let isGroup = $derived(!!group);
+  let _size = $derived(size || (group?.size ? clampSize(group.size) : undefined) || "md");
   const _color = $derived(color === "default" && background ? "tinted" : color);
-
   const { base, input: inputCls, left: leftCls, right: rightCls, close, combo, comboItem } = $derived(input({ size: _size, color: _color, grouped: isGroup }));
 
   const clearAll = () => {

package/dist/forms/input-field/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Input } from "./Input.svelte";
 export { input } from "./theme";
 import type { SizeType } from "../../types";
-export declare function clampSize(s: SizeType): "sm" | "md" | "lg";
+export declare function clampSize(s: SizeType): "md" | "sm" | "lg";

package/dist/forms/input-field/theme.js

@@ -88,8 +88,8 @@ export const input = tv({
         grouped: {
             false: { base: "rounded-lg", input: "rounded-lg" },
             true: {
-                base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
-                input: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
+                base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px",
+                input: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px h-full"
             }
         }
     },

package/dist/forms/label/Label.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L848)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L906)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/forms/label/Label.svelte.d.ts

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

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,7 +23,12 @@
     ...restProps
   }: RadioProps<T> = $props();
 
-  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");

package/dist/forms/radio/Radio.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RadioProps } from "../..";
 declare function $$render<T>(): {
     props: RadioProps<T>;
     exports: {};
-    bindings: "group" | "value";
+    bindings: "value" | "group";
     slots: {};
     events: {};
 };
@@ -10,7 +10,7 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "group" | "value";
+    bindings(): "value" | "group";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/forms/radio/RadioButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RadioButtonProps } from "../..";
 declare function $$render<T>(): {
     props: RadioButtonProps<T>;
     exports: {};
-    bindings: "group" | "value";
+    bindings: "value" | "group";
     slots: {};
     events: {};
 };
@@ -10,7 +10,7 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "group" | "value";
+    bindings(): "value" | "group";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/forms/range/Range.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L876)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L934)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

package/dist/forms/range/Range.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RangeProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L876)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L934)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

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,7 +24,12 @@
     ...restProps
   }: SearchProps = $props();
 
-  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");
@@ -62,7 +68,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L882)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L940)
 ## Props
 @prop children
 @prop inputClass

package/dist/forms/search/Search.svelte.d.ts

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

package/dist/forms/select/MultiSelect.svelte

@@ -1,12 +1,13 @@
 <script lang="ts" generics="T">
   import clsx from "clsx";
-  import type { MultiSelectProps, SelectOptionType, SizeType } from "../..";
+  import type { MultiSelectProps, SelectOptionType } from "../..";
   import Badge from "../../badge/Badge.svelte";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { multiSelect } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { getContext, onMount } from "svelte";
+  import { onMount, untrack } from "svelte";
   import { createDismissableContext } from "../../utils/dismissable";
+  import { getButtonGroupContext } from "../../context";
 
   // Consider reusing that component - https://svelecte.vercel.app/
 
@@ -30,14 +31,20 @@
     ...restProps
   }: MultiSelectProps<T> = $props();
 
-  warnThemeDeprecation("MultiSelect", { dropdownClass }, { dropdownClass: "dropdown" });
+  warnThemeDeprecation(
+    "MultiSelect",
+    untrack(() => ({ dropdownClass })),
+    { dropdownClass: "dropdown" }
+  );
+
   const styling = $derived(classes ?? { dropdown: dropdownClass });
 
   const theme = getTheme("multiSelect");
 
   let selectItems = $derived(items.filter((x) => value.includes(x.value)));
   let show: boolean = $state(false);
-  let group: { size: SizeType } = getContext("group");
+
+  const group = getButtonGroupContext();
 
   // Active item
   let activeIndex: number | null = $state(null);
@@ -194,7 +201,7 @@
     };
   });
 
-  const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = multiSelect({ disabled, grouped: !!group });
+  const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = $derived(multiSelect({ disabled, grouped: !!group }));
 </script>
 
 <select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
@@ -242,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>