flowbite-svelte 1.29.1 → 1.30.1

package/dist/forms/select/Select.svelte

@@ -1,11 +1,12 @@
 <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";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -28,13 +29,16 @@
     ...restProps
   }: SelectProps<T> = $props();
 
-  // clearableSvgClass, clearableClass, selectClass
-  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");
-
-  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

@@ -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,7 +28,12 @@
     ...restProps
   }: TagsProps = $props();
 
-  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 ?? {
       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

@@ -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,
@@ -31,9 +32,10 @@
 
   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" }
   );
+
   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

@@ -4,10 +4,16 @@
   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();
 
-  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");
@@ -30,7 +36,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

@@ -3,10 +3,16 @@
   import clsx from "clsx";
   import type { GalleryProps, ImgType } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, figure, items = [], imgClass, class: className, classes, ...restProps }: GalleryProps = $props();
 
-  warnThemeDeprecation("Gallery", { imgClass }, { imgClass: "image" });
+  warnThemeDeprecation(
+    "Gallery",
+    untrack(() => ({ imgClass })),
+    { imgClass: "image" }
+  );
+
   const styling = $derived(classes ?? { image: imgClass });
 
   const theme = getTheme("gallery");
@@ -42,7 +48,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

package/dist/list-group/Listgroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ListgroupProps } from "..";
 /**
  * [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

package/dist/list-group/ListgroupItem.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import clsx from "clsx";
   import type { ListgroupItemProps } from "..";
   import { listGroupItem, type ListgroupItemVariants } from "./theme";
   import { getTheme } from "../theme/themeUtils";
+  import { getListGroupContext } from "../context";
 
   let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-15 w-15", ...restProps }: ListgroupItemProps = $props();
 
   const theme = getTheme("listGroupItem");
 
-  active = active ?? getContext("listGrpActive");
-  horizontal = horizontal ?? getContext("listGrpHorizontal");
+  const listGroupCtx = getListGroupContext();
+  const finalActive = $derived(active ?? listGroupCtx?.active);
+  const finalHorizontal = $derived(horizontal ?? listGroupCtx?.horizontal);
 
   let state: ListgroupItemVariants["state"] = $derived(disabled ? "disabled" : current ? "current" : "normal");
-  let itemClass = $derived(listGroupItem({ state, active, horizontal, class: clsx(theme, className) }));
+  let itemClass = $derived(listGroupItem({ state, active: finalActive, horizontal: finalHorizontal, class: clsx(theme, className) }));
 </script>
 
 {#snippet nameOrChildren()}
@@ -45,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1082)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
 ## Props
 @prop children
 @prop active

package/dist/list-group/ListgroupItem.svelte.d.ts

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

package/dist/mega-menu/MegaMenu.svelte

@@ -4,11 +4,16 @@
   import type { MegaMenuProps } from "..";
   import Popper from "../utils/Popper.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, classes, ...restProps }: MegaMenuProps = $props();
 
-  //  ulClass, extraClass
-  warnThemeDeprecation("MegaMenu", { ulClass, extraClass }, { ulClass: "ul", extraClass: "extra" });
+  warnThemeDeprecation(
+    "MegaMenu",
+    untrack(() => ({ ulClass, extraClass })),
+    { ulClass: "ul", extraClass: "extra" }
+  );
+
   const styling = $derived(classes ?? { ul: ulClass, extra: extraClass });
   const theme = getTheme("megamenu");
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
@@ -33,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1093)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
 ## Props
 @prop children
 @prop extra

package/dist/mega-menu/MegaMenu.svelte.d.ts

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

package/dist/modal/Modal.svelte

@@ -7,6 +7,7 @@
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
   import { modal as modalStyle } from "./theme";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -30,8 +31,12 @@
     ...restProps
   }: ModalProps = $props();
 
-  // form, header, footer, body, close
-  warnThemeDeprecation("Modal", { headerClass, bodyClass, footerClass, closeBtnClass }, { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" });
+  warnThemeDeprecation(
+    "Modal",
+    untrack(() => ({ headerClass, bodyClass, footerClass, closeBtnClass })),
+    { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" }
+  );
+
   const styling = $derived(classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass });
 
   const theme = getTheme("modal");
@@ -48,6 +53,7 @@
   dismissable={dismissable && !title && !permanent}
   transitionParams={paramsOptions}
   {classes}
+  {permanent}
   {...restProps}
   class={base({ fullscreen, class: clsx(theme?.base, className) })}
 >
@@ -77,7 +83,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1104)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1162)
 ## Props
 @prop children
 @prop header

package/dist/modal/Modal.svelte.d.ts

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

package/dist/navbar/Menu.svelte

@@ -6,8 +6,10 @@
 
   let viewBox: string = $state("0 0 24 24");
   let svgpath: string = $state("");
-  let svgoutline = `<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `;
-  let svgsolid = `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `;
+  let svgoutline = $derived(`<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `);
+  let svgsolid = $derived(
+    `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `
+  );
   $effect(() => {
     switch (variation) {
       case "outline":
@@ -33,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1115)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

package/dist/navbar/Menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1115)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

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

package/dist/navbar/NavBrand.svelte.d.ts

@@ -1,7 +1,7 @@
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1139)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1197)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/navbar/NavContainer.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1141)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1199)
 ## Props
 @prop children
 @prop fluid

package/dist/navbar/NavContainer.svelte.d.ts

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