flowbite-svelte 1.29.1 → 1.30.0

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,7 +1,8 @@
 <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";
@@ -44,6 +45,7 @@
   }: 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 },
@@ -70,11 +72,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

@@ -22,7 +22,9 @@
     ...restProps
   }: RadioProps<T> = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Radio", { 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

@@ -23,7 +23,9 @@
     ...restProps
   }: SearchProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Search", { 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 +64,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 } from "svelte";
   import { createDismissableContext } from "../../utils/dismissable";
+  import { getButtonGroupContext } from "../../context";
 
   // Consider reusing that component - https://svelecte.vercel.app/
 
@@ -30,14 +31,17 @@
     ...restProps
   }: MultiSelectProps<T> = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("MultiSelect", { 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 +198,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}>

package/dist/forms/select/Select.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T">
   import { select as selectCls } from "./theme";
   import clsx from "clsx";
-  import type { SelectProps, SizeType } from "../..";
+  import type { SelectProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
-  import { getContext } from "svelte";
+  import { getButtonGroupContext } from "../../context";
 
   let {
     children,
@@ -28,13 +28,13 @@
     ...restProps
   }: SelectProps<T> = $props();
 
-  // clearableSvgClass, clearableClass, selectClass
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Select", { selectClass, clearableSvgClass, clearableClass }, { selectClass: "select", clearableSvgClass: "svg", clearableClass: "close" });
+
   const styling = $derived(classes ?? { select: selectClass, svg: clearableSvgClass, close: clearableClass });
 
   const theme = getTheme("select");
-
-  let group: { size: SizeType } = getContext("group");
+  const group = getButtonGroupContext();
   const { base, select, close } = $derived(selectCls({ underline, size, disabled, grouped: !!group }));
 
   const clearAll = () => {

package/dist/forms/tags/Tags.svelte

@@ -28,7 +28,9 @@
     ...restProps
   }: TagsProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Tags", { itemClass, spanClass, closeClass, inputClass }, { itemClass: "tag", spanClass: "span", closeClass: "close", inputClass: "input" });
+
   const styling = $derived(
     classes ?? {
       tag: itemClass,

package/dist/forms/tags/theme.d.ts

@@ -4,10 +4,10 @@ export type TagsVariants = VariantProps<typeof tags> & Classes<typeof tags>;
 export declare const tags: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
             close?: import("tailwind-merge").ClassNameValue;
             error?: import("tailwind-merge").ClassNameValue;
             input?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
             span?: import("tailwind-merge").ClassNameValue;
             tag?: import("tailwind-merge").ClassNameValue;
             info?: import("tailwind-merge").ClassNameValue;
@@ -17,10 +17,10 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
             close?: import("tailwind-merge").ClassNameValue;
             error?: import("tailwind-merge").ClassNameValue;
             input?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
             span?: import("tailwind-merge").ClassNameValue;
             tag?: import("tailwind-merge").ClassNameValue;
             info?: import("tailwind-merge").ClassNameValue;
@@ -39,10 +39,10 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
             close?: import("tailwind-merge").ClassNameValue;
             error?: import("tailwind-merge").ClassNameValue;
             input?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
             span?: import("tailwind-merge").ClassNameValue;
             tag?: import("tailwind-merge").ClassNameValue;
             info?: import("tailwind-merge").ClassNameValue;

package/dist/forms/textarea/Textarea.svelte

@@ -29,11 +29,13 @@
     ...restProps
   }: TextareaProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Textarea",
     { divClass, innerClass, headerClass, footerClass, addonClass, textareaClass, clearableClass, clearableSvgClass },
     { divClass: "div", innerClass: "inner", headerClass: "header", footerClass: "footer", addonClass: "addon", textareaClass: "class", clearableClass: "close", clearableSvgClass: "svg" }
   );
+
   const styling = $derived(
     classes ?? {
       div: divClass,
@@ -101,7 +103,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L991)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1049)
 ## Props
 @prop header
 @prop footer

package/dist/forms/textarea/Textarea.svelte.d.ts

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

package/dist/forms/timepicker/Timepicker.svelte

@@ -43,7 +43,7 @@
   const theme = getTheme("timepicker");
 
   // Generate theme classes
-  const styles = timepicker({ type, columns, disabled });
+  const styles = $derived(timepicker({ type, columns, disabled }));
 
   // State
   let selectedOption = $state("");
@@ -407,7 +407,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L962)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1020)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L962)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1020)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"

package/dist/forms/toggle/Toggle.svelte

@@ -7,7 +7,9 @@
 
   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" });
+
   const styling = $derived(classes ?? { input: inputClass, span: spanClass });
 
   const theme = getTheme("toggle");
@@ -30,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1013)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1071)
 ## Props
 @prop children
 @prop size = "default"

package/dist/forms/toggle/Toggle.svelte.d.ts

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

package/dist/gallery/Gallery.svelte

@@ -6,7 +6,9 @@
 
   let { children, figure, items = [], imgClass, class: className, classes, ...restProps }: GalleryProps = $props();
 
+  // svelte-ignore state_referenced_locally
   warnThemeDeprecation("Gallery", { imgClass }, { imgClass: "image" });
+
   const styling = $derived(classes ?? { image: imgClass });
 
   const theme = getTheme("gallery");
@@ -42,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1030)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

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

package/dist/gallery/theme.d.ts

@@ -4,15 +4,15 @@ export type GalleryVariants = VariantProps<typeof gallery> & Classes<typeof gall
 export declare const gallery: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            image?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
-            image?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -21,8 +21,8 @@ export declare const gallery: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            image?: import("tailwind-merge").ClassNameValue;
             div?: import("tailwind-merge").ClassNameValue;
+            image?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/indicator/Indicator.svelte

@@ -8,7 +8,7 @@
 
   const theme = getTheme("indicator");
 
-  let hasChildren = !!children;
+  let hasChildren = $derived(!!children);
   const base = $derived(
     indicator({
       color,
@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1041)
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/indicator/Indicator.svelte.d.ts

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

package/dist/kanban/KanbanCard.svelte

@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2162)
+[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2229)
 ## Props
 @prop card
 @prop isDragging = false

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

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

package/dist/kbd/Kbd.svelte

@@ -8,7 +8,7 @@
 
   const theme = getTheme("kbd");
 
-  const kbdCls = kbd({ class: clsx(theme, className) });
+  const kbdCls = $derived(kbd({ class: clsx(theme, className) }));
 </script>
 
 <kbd {...restProps} class={kbdCls}>
@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1052)
+[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1110)
 ## Props
 @prop children
 @prop class: className

package/dist/kbd/Kbd.svelte.d.ts

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

package/dist/list-group/Listgroup.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import { listGroup } from "./theme";
   import clsx from "clsx";
   import type { ListgroupProps } from "..";
   import ListgroupItem from "./ListgroupItem.svelte";
   import { getTheme } from "../theme/themeUtils";
+  import { setListGroupContext } from "../context";
 
   let { children, items, active, onclick, horizontal, rounded, border, class: className, itemClass, iconClass, ...restProps }: ListgroupProps = $props();
 
@@ -12,9 +12,19 @@
 
   const base = $derived(listGroup({ rounded, border, horizontal, class: clsx(theme, className) }));
 
-  let tag = active ? "div" : "ul";
-  setContext("listGrpActive", active);
-  setContext("listGrpHorizontal", horizontal);
+  let tag = $derived(active ? "div" : "ul");
+
+  // Create reactive context using getters
+  const context = {
+    get active() {
+      return active;
+    },
+    get horizontal() {
+      return horizontal;
+    }
+  };
+
+  setListGroupContext(context);
 
   function createItemClickHandler() {
     return function (event: MouseEvent) {
@@ -45,7 +55,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1071)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1129)
 ## Props
 @prop children
 @prop items