flowbite-svelte 1.29.1 → 1.30.1

package/dist/drawer/Drawerhead.svelte

@@ -3,10 +3,16 @@
   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();
 
-  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");
@@ -34,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L628)
+[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L686)
 ## Props
 @prop closeIcon
 @prop children

package/dist/drawer/Drawerhead.svelte.d.ts

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

package/dist/drawer/theme.d.ts

@@ -63,16 +63,16 @@ export type DrawerheadVariants = VariantProps<typeof drawerhead> & Classes<typeo
 export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
             base?: import("tailwind-merge").ClassNameValue;
+            button?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
             base?: import("tailwind-merge").ClassNameValue;
+            button?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -83,8 +83,8 @@ export declare const drawerhead: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            button?: import("tailwind-merge").ClassNameValue;
             base?: import("tailwind-merge").ClassNameValue;
+            button?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
         };
     };

package/dist/drawer/theme.js

@@ -9,8 +9,8 @@ export const drawer = tv({
         placement: {
             left: { base: "me-auto h-full" },
             right: { base: "ms-auto h-full" },
-            top: { base: "mb-auto !w-full" },
-            bottom: { base: "mt-auto !w-full" }
+            top: { base: "mb-auto w-full!" },
+            bottom: { base: "mt-auto w-full!" }
         },
         width: {
             default: { base: "w-80" },

package/dist/dropdown/Dropdown.svelte

@@ -4,7 +4,7 @@
   import DropdownGroup from "./DropdownGroup.svelte";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { setContext } from "svelte";
+  import { setDropdownContext } from "../context";
   import { dropdown } from "./theme";
 
   let { children, simple = false, placement = "bottom", offset = 2, class: className, activeUrl = "", isOpen = $bindable(false), onclose, ...restProps }: DropdownProps = $props();
@@ -12,12 +12,15 @@
   const theme = getTheme("dropdown");
 
   const base = $derived(dropdown({ class: clsx(theme, className) }));
-  const activeUrlStore = $state({ value: "" });
-  setContext("activeUrl", activeUrlStore);
 
-  $effect(() => {
-    activeUrlStore.value = activeUrl ?? "";
-  });
+  // Create reactive context using getter
+  const context = {
+    get activeUrl() {
+      return activeUrl ?? "";
+    }
+  };
+
+  setDropdownContext(context);
 </script>
 
 <!-- Dropdown menu -->
@@ -36,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L635)
+[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L693)
 ## Props
 @prop children
 @prop simple = false

package/dist/dropdown/Dropdown.svelte.d.ts

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

package/dist/dropdown/DropdownDivider.svelte

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

package/dist/dropdown/DropdownDivider.svelte.d.ts

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

package/dist/dropdown/DropdownGroup.svelte

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

package/dist/dropdown/DropdownGroup.svelte.d.ts

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

package/dist/dropdown/DropdownHeader.svelte

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

package/dist/dropdown/DropdownHeader.svelte.d.ts

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

package/dist/dropdown/DropdownItem.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getDropdownContext } from "../context";
   import { dropdownItem } from "./theme";
   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();
 
-  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 activeUrl: { value: string } = getContext("activeUrl");
+  const ctx = getDropdownContext();
 
-  let isActive = $derived(activeUrl?.value && href ? href === activeUrl.value : false);
+  let isActive = $derived(ctx?.activeUrl && href ? href === ctx.activeUrl : false);
 
   const { base, active, li } = dropdownItem();
   let finalClass = $derived(isActive ? active({ class: clsx(theme?.active, styling.active) }) : base({ class: clsx(theme?.base, className) }));
@@ -40,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L647)
+[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L705)
 ## Props
 @prop aClass
 @prop children

package/dist/dropdown/DropdownItem.svelte.d.ts

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

package/dist/dropdown/theme.d.ts

@@ -8,16 +8,16 @@ export declare const dropdownItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            active?: import("tailwind-merge").ClassNameValue;
             li?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            active?: import("tailwind-merge").ClassNameValue;
             li?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -28,8 +28,8 @@ export declare const dropdownItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            active?: import("tailwind-merge").ClassNameValue;
             li?: import("tailwind-merge").ClassNameValue;
+            active?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/footer/Footer.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L670)
+[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L728)
 ## Props
 @prop children
 @prop footerType = "default"

package/dist/footer/Footer.svelte.d.ts

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

package/dist/footer/FooterBrand.svelte

@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L675)
+[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L733)
 ## Props
 @prop children
 @prop aClass

package/dist/footer/FooterBrand.svelte.d.ts

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

package/dist/footer/FooterCopyright.svelte

@@ -1,24 +1,31 @@
 <script lang="ts">
+  import { SvelteDate } from "svelte/reactivity";
   import { footerCopyright } from "./theme";
   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();
 
-  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");
 
-  if (!year) year = new Date().getFullYear();
+  const effectiveYear = $derived(year ?? new SvelteDate().getFullYear());
 
   const { base, link, bySpan } = footerCopyright();
 </script>
 
 <span class={base({ class: clsx(theme?.base, className ?? spanClass) })}>
-  &copy; {year}
+  &copy; {effectiveYear}
   {#if href}
     <a {...restProps} {href} class={link({ class: clsx(theme?.link, styling.link) })}>
       {by}
@@ -33,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L686)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L744)
 ## Props
 @prop spanClass
 @prop aClass

package/dist/footer/FooterCopyright.svelte.d.ts

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

package/dist/footer/FooterIcon.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L696)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L754)
 ## Props
 @prop children
 @prop href

package/dist/footer/FooterIcon.svelte.d.ts

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

package/dist/footer/FooterLink.svelte

@@ -3,10 +3,16 @@
   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();
 
-  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 });
 
@@ -25,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L706)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L764)
 ## Props
 @prop children
 @prop liClass

package/dist/footer/FooterLink.svelte.d.ts

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

package/dist/footer/FooterLinkGroup.svelte

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

package/dist/footer/FooterLinkGroup.svelte.d.ts

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

package/dist/footer/theme.d.ts

@@ -30,16 +30,16 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
             span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
             span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -50,8 +50,8 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            img?: import("tailwind-merge").ClassNameValue;
             span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

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

@@ -1,34 +1,54 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import CheckIcon from "./CheckIcon.svelte";
   import { buttonToggle } from "./theme";
-  import type { ButtonToggleVariants } from "./theme";
+  import type { VariantProps } from "tailwind-variants";
   import clsx from "clsx";
-  import type { ButtonToggleProps, ButtonToggleContext } from "../..";
+  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();
 
-  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 { toggleSelected, isSelected } = getContext<ButtonToggleContext>("button-toggle-group");
-  const multiSelect = getContext<boolean>("multiSelect");
-  const actualColor = getContext<ButtonToggleVariants["color"]>("buttonToggleColor") ? getContext<ButtonToggleVariants["color"]>("buttonToggleColor") : color ? color : "primary";
-  const size = getContext<ButtonToggleVariants["size"]>("buttonToggleSize");
-  const roundedSize = getContext<ButtonToggleVariants["roundedSize"]>("buttonToggleRounded");
-  const ctxIconClass = getContext<string | undefined>("ctxIconClass");
+  // Get context - it will be undefined if used outside ButtonToggleGroup
+  const ctx = getButtonToggleContext();
+
+  // Extract context values with fallbacks
+  const { toggleSelected, isSelected, multiSelect, size, roundedSize, ctxIconClass, ctxBtnClass } = {
+    toggleSelected: ctx?.toggleSelected ?? (() => {}),
+    isSelected: ctx?.isSelected ?? (() => false),
+    multiSelect: ctx?.multiSelect ?? false,
+    size: ctx?.size,
+    roundedSize: ctx?.roundedSize,
+    ctxIconClass: ctx?.ctxIconClass,
+    ctxBtnClass: ctx?.ctxBtnClass
+  };
+
+  // Use context color if available, otherwise use prop color, otherwise default to "primary"
+  const actualColor = $derived((ctx?.color ?? color ?? "primary") as VariantProps<typeof buttonToggle>["color"]);
   const actualIconClass = ctxIconClass;
-  const ctxBtnClass = getContext<string | undefined>("ctxBtnClass");
+
+  // Filter size to only valid buttonToggle sizes (no 'xs')
+  const actualSize = (size === "xs" ? "sm" : size) as VariantProps<typeof buttonToggle>["size"];
+  // roundedSize is already validated by type system
+  const actualRoundedSize = roundedSize as VariantProps<typeof buttonToggle>["roundedSize"];
 
   function handleClick() {
     toggleSelected(value);
   }
 
-  const { button, content, text, icon } = $derived(buttonToggle({ selected, color, size }));
+  const { button, content, text, icon } = $derived(buttonToggle({ selected, color: actualColor, size: actualSize }));
 
   $effect(() => {
     selected = isSelected(value);
@@ -37,7 +57,7 @@
 
 <button
   type="button"
-  class={button({ selected, color: actualColor, size, roundedSize, class: clsx(theme?.button, ctxBtnClass, className) })}
+  class={button({ selected, color: actualColor, size: actualSize, roundedSize: actualRoundedSize, class: clsx(theme?.button, ctxBtnClass, className) })}
   data-selected={selected}
   onclick={handleClick}
   role={multiSelect ? "checkbox" : "radio"}
@@ -62,7 +82,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L374)
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
 ## Props
 @prop value
 @prop selected = false

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

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