flowbite-svelte 2.0.0-next.0 → 2.0.0-next.2

package/dist/list-group/theme.d.ts

@@ -1,46 +1,95 @@
 import { type VariantProps } from "tailwind-variants";
-export type ListgroupVariants = VariantProps<typeof listGroup>;
-export type ListgroupItemVariants = VariantProps<typeof listGroupItem>;
+import type { Classes } from "../theme/themeUtils";
+export type ListgroupVariants = VariantProps<typeof listGroup> & Classes<typeof listGroup>;
+export type ListgroupItemVariants = VariantProps<typeof listGroupItem> & Classes<typeof listGroupItem>;
 export declare const listGroup: import("tailwind-variants").TVReturnType<{
     rounded: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     border: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     horizontal: {
-        true: string;
-        false: string;
-    };
-}, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    icon: string;
+}, undefined, {
     rounded: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     border: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     horizontal: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
     rounded: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     border: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     horizontal: {
-        true: string;
-        false: string;
-    };
-}, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", unknown, unknown, undefined>>;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
 export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
     state: {
         normal: string;
@@ -55,7 +104,10 @@ export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", {
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
     state: {
         normal: string;
         current: string;
@@ -69,7 +121,10 @@ export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
     state: {
         normal: string;
         current: string;
@@ -83,4 +138,7 @@ export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", unknown, unknown, undefined>>;
+}, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/list-group/theme.js

@@ -1,24 +1,28 @@
 import { tv } from "tailwind-variants";
 export const listGroup = tv({
-    base: "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600",
+    slots: {
+        base: "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600",
+        item: "",
+        icon: ""
+    },
     variants: {
         rounded: {
-            true: "rounded-lg",
-            false: ""
+            true: { base: "rounded-lg" },
+            false: { base: "" }
         },
         border: {
-            true: "border border-gray-200 dark:border-gray-700",
-            false: ""
+            true: { base: "border border-gray-200 dark:border-gray-700" },
+            false: { base: "" }
         },
         horizontal: {
-            true: "flex-row divide-x",
-            false: "flex-col divide-y"
+            true: { base: "flex-row divide-x" },
+            false: { base: "flex-col divide-y" }
         }
     },
     compoundVariants: [
         {
             border: true,
-            class: "divide-gray-200 dark:divide-gray-700"
+            class: { base: "divide-gray-200 dark:divide-gray-700" }
         }
     ],
     defaultVariants: {
@@ -28,12 +32,15 @@ export const listGroup = tv({
     }
 });
 export const listGroupItem = tv({
-    base: "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2",
+    slots: {
+        base: "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2",
+        icon: "w-4 h-4 me-1.5"
+    },
     variants: {
         state: {
             normal: "",
             current: "text-white bg-primary-700 dark:text-white dark:bg-gray-800",
-            disabled: "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400"
+            disabled: "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400 opacity-50"
         },
         active: {
             true: "",
@@ -55,13 +62,5 @@ export const listGroupItem = tv({
             state: "normal",
             class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
         }
-        // {
-        //   horizontal: true,
-        //   class: "focus:first:rounded-s-lg focus:last:rounded-e-lg"
-        // },
-        // {
-        //   horizontal: false,
-        //   class: "focus:first:rounded-t-lg focus:last:rounded-b-lg"
-        // }
     ]
 });

package/dist/mega-menu/MegaMenu.svelte

@@ -3,25 +3,18 @@
   import clsx from "clsx";
   import type { MegaMenuProps } from "..";
   import Popper from "../utils/Popper.svelte";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, classes, ...restProps }: MegaMenuProps = $props();
+  let { children, extra, items = [], full, isOpen = $bindable(false), class: className, classes, ...restProps }: MegaMenuProps = $props();
 
-  warnThemeDeprecation(
-    "MegaMenu",
-    untrack(() => ({ ulClass, extraClass })),
-    { ulClass: "ul", extraClass: "extra" }
-  );
-
-  const styling = $derived(classes ?? { ul: ulClass, extra: extraClass });
+  const styling = $derived(classes);
   const theme = $derived(getTheme("megamenu"));
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
 </script>
 
 <Popper arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-  <div class={div({ class: clsx(theme?.div, classes?.div) })}>
-    <ul class={ul({ class: clsx(theme?.ul, styling.ul) })}>
+  <div class={div({ class: clsx(theme?.div, styling?.div) })}>
+    <ul class={ul({ class: clsx(theme?.ul, styling?.ul) })}>
       {#each items as item, index (item.name)}
         <li>
           {@render children({ item, index })}
@@ -30,7 +23,7 @@
         {@render children({ item: items[0], index: 0 })}
       {/each}
     </ul>
-    {#if full && extra}<div class={extraCls({ class: clsx(theme?.extra, styling.extra) })}>{@render extra()}</div>{/if}
+    {#if full && extra}<div class={extraCls({ class: clsx(theme?.extra, styling?.extra) })}>{@render extra()}</div>{/if}
   </div>
 </Popper>
 
@@ -38,16 +31,14 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1091)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
 ## Props
 @prop children
 @prop extra
 @prop items = []
 @prop full
-@prop ulClass
 @prop isOpen = $bindable(false)
 @prop class: className
-@prop extraClass
 @prop classes
 @prop ...restProps
 -->

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

@@ -2,16 +2,14 @@ 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#L1091)
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
  * ## Props
  * @prop children
  * @prop extra
  * @prop items = []
  * @prop full
- * @prop ulClass
  * @prop isOpen = $bindable(false)
  * @prop class: className
- * @prop extraClass
  * @prop classes
  * @prop ...restProps
  */

package/dist/modal/Modal.svelte

@@ -2,12 +2,11 @@
   import type { ModalProps } from "..";
   import Dialog from "../dialog/Dialog.svelte";
   import CloseButton from "../utils/CloseButton.svelte";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
   import { modal as modalStyle } from "./theme";
-  import { untrack } from "svelte";
 
   let {
     children,
@@ -17,10 +16,6 @@
     open = $bindable(false),
     permanent = false,
     dismissable = true,
-    closeBtnClass,
-    headerClass,
-    bodyClass,
-    footerClass,
     size = "md",
     placement,
     class: className,
@@ -31,13 +26,7 @@
     ...restProps
   }: ModalProps = $props();
 
-  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 styling = $derived(classes);
 
   const theme = $derived(getTheme("modal"));
 
@@ -58,22 +47,22 @@
   class={base({ fullscreen, class: clsx(theme?.base, className) })}
 >
   {#if title || header}
-    <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
+    <div class={headerCls({ class: clsx(theme?.header, styling?.header) })}>
       {#if title}
         <h3>{title}</h3>
         {#if dismissable && !permanent}
-          <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+          <CloseButton type="submit" formnovalidate class={clsx(theme?.close, styling?.close)} />
         {/if}
       {:else if header}
         {@render header()}
       {/if}
     </div>
   {/if}
-  <div class={body({ class: clsx(theme?.body, styling.body) })}>
+  <div class={body({ class: clsx(theme?.body, styling?.body) })}>
     {@render children?.()}
   </div>
   {#if footer}
-    <div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
+    <div class={footerCls({ class: clsx(theme?.footer, styling?.footer) })}>
       {@render footer()}
     </div>
   {/if}
@@ -83,7 +72,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1102)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
 ## Props
 @prop children
 @prop header
@@ -92,10 +81,6 @@
 @prop open = $bindable(false)
 @prop permanent = false
 @prop dismissable = true
-@prop closeBtnClass
-@prop headerClass
-@prop bodyClass
-@prop footerClass
 @prop size = "md"
 @prop placement
 @prop class: className

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#L1102)
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
  * ## Props
  * @prop children
  * @prop header
@@ -11,10 +11,6 @@ import type { ModalProps } from "..";
  * @prop open = $bindable(false)
  * @prop permanent = false
  * @prop dismissable = true
- * @prop closeBtnClass
- * @prop headerClass
- * @prop bodyClass
- * @prop footerClass
  * @prop size = "md"
  * @prop placement
  * @prop class: className

package/dist/modal/theme.d.ts

@@ -63,6 +63,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     header: string;
     footer: string;
     body: string;
+    close: string;
 }, undefined, {}, {
     base: string;
     form: string;

package/dist/modal/theme.js

@@ -7,7 +7,8 @@ export const modal = tv({
         form: "rounded-lg divide-y",
         header: "flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white",
         footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0",
-        body: "p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain"
+        body: "p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain",
+        close: ""
     },
     variants: {
         fullscreen: {

package/dist/navbar/Menu.svelte

@@ -2,7 +2,7 @@
   import type { MenuProps } from "../types";
   import clsx from "clsx";
 
-  let { size = "24", color = "currentColor", variation = "outline", ariaLabel = "bars 3", class: className, ...restProps }: MenuProps = $props();
+  let { size = "24", color = "currentColor", variation = "outline", class: className, ...restProps }: MenuProps = $props();
 
   let viewBox: string = $state("0 0 24 24");
   let svgpath: string = $state("");
@@ -27,7 +27,7 @@
   });
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={clsx(className)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width={size} height={size} class={clsx(className)} {...restProps} fill="none" {viewBox} stroke-width="2">
   {@html svgpath}
 </svg>
 
@@ -35,12 +35,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1113)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1064)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"
 @prop variation = "outline"
-@prop ariaLabel = "bars 3"
 @prop class: className
 @prop ...restProps
 -->

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

@@ -2,12 +2,11 @@ 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#L1113)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1064)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"
  * @prop variation = "outline"
- * @prop ariaLabel = "bars 3"
  * @prop class: className
  * @prop ...restProps
  */

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#L1137)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1086)
 ## 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#L1137)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1086)
  * ## 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#L1139)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
 ## 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#L1139)
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/navbar/NavHamburger.svelte

@@ -5,24 +5,19 @@
   import { navbarHamburger } from "./theme";
   import type { NavHamburgerProps } from "../types";
   import type { MouseEventHandler } from "svelte/elements";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
-  import { untrack } from "svelte";
 
-  let { children, onclick, menuClass, class: className, classes, name = "Open main menu", ...restProps }: NavHamburgerProps = $props();
+  let { children, onclick, class: className, classes, name = "Open main menu", ...restProps }: NavHamburgerProps = $props();
 
-  warnThemeDeprecation(
-    "NavHamburger",
-    untrack(() => ({ menuClass })),
-    { menuClass: "menu" }
-  );
-
-  const styling = $derived(classes ?? { menu: menuClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("navbarHamburger"));
   const navState = getNavbarStateContext();
-  const navBreakpoint = getNavbarBreakpointContext();
-  const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint ?? "md" });
+
+  // Reactively get the breakpoint - use $derived to ensure it updates
+  const navBreakpoint = $derived(getNavbarBreakpointContext());
+  const { base, menu } = $derived(navbarHamburger({ breakpoint: navBreakpoint ?? "md" }));
 
   const toggle: MouseEventHandler<HTMLButtonElement> = () => {
     if (!navState) return;
@@ -30,19 +25,18 @@
   };
 </script>
 
-<ToolbarButton {name} onclick={onclick || toggle} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-  <Menu class={menu({ class: clsx(theme?.menu, styling.menu) })} />
+<ToolbarButton {name} onclick={onclick || toggle} aria-expanded={navState ? !navState.hidden : undefined} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <Menu class={menu({ class: clsx(theme?.menu, styling?.menu) })} />
 </ToolbarButton>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1143)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1092)
 ## Props
 @prop children
 @prop onclick
-@prop menuClass
 @prop class: className
 @prop classes
 @prop name = "Open main menu"

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

@@ -1,11 +1,10 @@
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1143)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1092)
  * ## Props
  * @prop children
  * @prop onclick
- * @prop menuClass
  * @prop class: className
  * @prop classes
  * @prop name = "Open main menu"
@@ -125,7 +124,6 @@ declare const NavHamburger: import("svelte").Component<import("../toolbar/theme"
     menu: string;
 }, undefined, unknown, unknown, undefined>>> & {
     href?: undefined;
-    menuClass?: import("svelte/elements").ClassValue;
 }, {}, "">;
 type NavHamburger = ReturnType<typeof NavHamburger>;
 export default NavHamburger;

package/dist/navbar/NavLi.svelte

@@ -6,7 +6,9 @@
   import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
 
   let navState = getNavbarStateContext();
-  let navBreakpoint = getNavbarBreakpointContext();
+
+  // Reactively get the breakpoint - use $derived to ensure it updates
+  let navBreakpoint = $derived(getNavbarBreakpointContext());
 
   let { children, onclick, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
@@ -22,9 +24,11 @@
   );
 
   function handleClick(event: MouseEvent) {
+    const tagName = (event.currentTarget as HTMLElement).tagName;
     // Close the mobile menu when a link is clicked
-    if (navState && restProps.href !== undefined && !navState.hidden) {
-      navState.hidden = true;
+    const state = navState;
+    if (state && tagName === "A" && !state.hidden) {
+      state.hidden = true;
     }
 
     // Call original onclick handler if provided
@@ -51,7 +55,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1164)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
 ## Props
 @prop children
 @prop onclick

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

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