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

package/dist/navbar/NavUl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import type { NavUlProps } from "../types";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
@@ -7,33 +7,15 @@
   import { fade, fly, scale, slide } from "svelte/transition";
   import { navbarUl } from "./theme";
   import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
-  import { untrack } from "svelte";
 
   let navState = getNavbarStateContext();
-  let navBreakpoint = getNavbarBreakpointContext();
 
-  let {
-    children,
-    activeUrl = $bindable(),
-    ulClass,
-    slideParams,
-    transition = slide,
-    transitionParams,
-    activeClass,
-    nonActiveClass,
-    respectMotionPreference = true,
-    class: className,
-    classes,
-    ...restProps
-  }: NavUlProps = $props();
+  // Reactively get the breakpoint - use $derived to ensure it updates
+  let navBreakpoint = $derived(getNavbarBreakpointContext());
 
-  warnThemeDeprecation(
-    "NavUl",
-    untrack(() => ({ ulClass, activeClass, nonActiveClass })),
-    { ulClass: "ul", activeClass: "active", nonActiveClass: "nonActive" }
-  );
+  let { children, activeUrl = $bindable(), slideParams, transition = slide, transitionParams, respectMotionPreference = true, class: className, classes, ...restProps }: NavUlProps = $props();
 
-  const styling = $derived(classes ?? { ul: ulClass, active: activeClass, nonActive: nonActiveClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("navbarUl"));
 
@@ -58,19 +40,23 @@
     return finalParams;
   });
 
-  let hidden: boolean = $derived(navState?.hidden ?? true);
+  // Use $derived.by for proper reactivity tracking across component boundaries
+  let hidden: boolean = $derived.by(() => {
+    if (!navState) return true;
+    return navState.hidden;
+  });
 
   let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint ?? "md" }));
 
   $effect(() => {
     if (!navState) return;
-    navState.activeClass = active({ class: clsx(theme?.active, styling.active) });
-    navState.nonActiveClass = nonActive({ class: clsx(theme?.nonActive, styling.nonActive) });
+    navState.activeClass = active({ class: clsx(theme?.active, styling?.active) });
+    navState.nonActiveClass = nonActive({ class: clsx(theme?.nonActive, styling?.nonActive) });
     navState.activeUrl = activeUrl;
   });
 
   let divCls: string = $derived(base({ class: clsx(theme?.base, className) }));
-  let ulCls: string = $derived(ul({ class: clsx(theme?.ul, styling.ul) }));
+  let ulCls: string = $derived(ul({ class: clsx(theme?.ul, styling?.ul) }));
 </script>
 
 {#if !hidden}
@@ -91,16 +77,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1149)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1097)
 ## Props
 @prop children
 @prop activeUrl = $bindable()
-@prop ulClass
 @prop slideParams
 @prop transition = slide
 @prop transitionParams
-@prop activeClass
-@prop nonActiveClass
 @prop respectMotionPreference = true
 @prop class: className
 @prop classes

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

@@ -2,16 +2,13 @@ import type { NavUlProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1149)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1097)
  * ## Props
  * @prop children
  * @prop activeUrl = $bindable()
- * @prop ulClass
  * @prop slideParams
  * @prop transition = slide
  * @prop transitionParams
- * @prop activeClass
- * @prop nonActiveClass
  * @prop respectMotionPreference = true
  * @prop class: className
  * @prop classes

package/dist/navbar/Navbar.svelte

@@ -6,13 +6,17 @@
   import { getTheme } from "../theme/themeUtils";
   import { setNavbarStateContext, setNavbarBreakpointContext } from "../context";
 
-  let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
+  let { children, fluid, class: className, classes, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
 
+  const styling = $derived(classes);
   const theme = $derived(getTheme("navbar"));
 
+  let { base, container: navContainerClass } = $derived(navbar());
+
   let navState = $state<NavbarState>({ hidden: true });
   setNavbarStateContext(navState);
 
+  // Update context when breakpoint prop changes
   $effect(() => {
     setNavbarBreakpointContext(breakpoint);
   });
@@ -36,8 +40,8 @@
 <svelte:document onclick={handleDocumentClick} />
 
 <nav bind:this={navbarElement}>
-  <div {...restProps} class={navbar({ class: clsx(theme, className) })}>
-    <NavContainer {fluid} class={clsx(navContainerClass)}>
+  <div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+    <NavContainer {fluid} class={navContainerClass({ class: clsx(theme?.container, styling?.container) })}>
       {@render children({ hidden: navState.hidden, toggle, NavContainer })}
     </NavContainer>
   </div>
@@ -47,12 +51,12 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1129)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
 ## Props
 @prop children
 @prop fluid
-@prop navContainerClass
 @prop class: className
+@prop classes
 @prop closeOnClickOutside = true
 @prop breakpoint = "md"
 @prop ...restProps

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

@@ -2,12 +2,12 @@ import type { NavbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1129)
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
  * ## Props
  * @prop children
  * @prop fluid
- * @prop navContainerClass
  * @prop class: className
+ * @prop classes
  * @prop closeOnClickOutside = true
  * @prop breakpoint = "md"
  * @prop ...restProps

package/dist/navbar/index.d.ts

@@ -4,4 +4,5 @@ export { default as NavLi } from "./NavLi.svelte";
 export { default as NavUl } from "./NavUl.svelte";
 export { default as NavHamburger } from "./NavHamburger.svelte";
 export { default as NavContainer } from "./NavContainer.svelte";
+export { default as Menu } from "./Menu.svelte";
 export { navbar, navbarUl, navbarBrand, navbarLi, navbarHamburger, navbarContainer } from "./theme";

package/dist/navbar/index.js

@@ -4,4 +4,5 @@ export { default as NavLi } from "./NavLi.svelte";
 export { default as NavUl } from "./NavUl.svelte";
 export { default as NavHamburger } from "./NavHamburger.svelte";
 export { default as NavContainer } from "./NavContainer.svelte";
+export { default as Menu } from "./Menu.svelte";
 export { navbar, navbarUl, navbarBrand, navbarLi, navbarHamburger, navbarContainer } from "./theme";

package/dist/navbar/theme.d.ts

@@ -3,7 +3,38 @@ import type { Classes } from "../theme/themeUtils";
 export type NavbarBreakpoint = "sm" | "md" | "lg" | "xl";
 export type NavbarUlVariants = VariantProps<typeof navbarUl> & Classes<typeof navbarUl>;
 export type NavbarHamburgerVariants = VariantProps<typeof navbarHamburger> & Classes<typeof navbarHamburger>;
-export declare const navbar: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full px-2 py-2.5 sm:px-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative w-full px-2 py-2.5 sm:px-4", unknown, unknown, undefined>>;
+export type NavbarVariants = VariantProps<typeof navbar> & Classes<typeof navbar>;
+export declare const navbar: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    container: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    container: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    container: string;
+}, undefined, unknown, unknown, undefined>>;
 export declare const navbarBrand: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center", unknown, unknown, undefined>>;
 export declare const navbarContainer: import("tailwind-variants").TVReturnType<{
     fluid: {

package/dist/navbar/theme.js

@@ -1,6 +1,9 @@
 import { tv } from "tailwind-variants";
 export const navbar = tv({
-    base: "relative w-full px-2 py-2.5 sm:px-4"
+    slots: {
+        base: "relative w-full px-2 py-2.5 sm:px-4",
+        container: ""
+    }
 });
 export const navbarBrand = tv({
     base: "flex items-center"

package/dist/pagination/Pagination.svelte

@@ -67,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1236)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1177)
 ## Props
 @prop pages = []
 @prop previous

package/dist/pagination/Pagination.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaginationProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1236)
+ * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1177)
  * ## Props
  * @prop pages = []
  * @prop previous

package/dist/pagination/PaginationButton.svelte

@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1200)
+[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1145)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationButton.svelte.d.ts

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

package/dist/pagination/PaginationItem.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1232)
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationItem.svelte.d.ts

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

package/dist/pagination/PaginationNav.svelte

@@ -3,9 +3,8 @@
   import { paginationNav } from "./theme";
   import type { PaginationNavProps, PaginationContextType } from "..";
   import PaginationButton from "./PaginationButton.svelte";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import { setPaginationContext } from "../context";
-  import { untrack } from "svelte";
 
   function paginationRange(start: number, end: number): number[] {
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
@@ -18,8 +17,6 @@
     onPageChange,
     prevContent,
     nextContent,
-    prevClass,
-    nextClass,
     layout = "pagination",
     nextLabel = "Next",
     previousLabel = "Previous",
@@ -27,18 +24,10 @@
     size = "default",
     class: className,
     classes,
-    spanClass,
-    tableDivClass,
     ...restProps
   }: PaginationNavProps = $props();
 
-  warnThemeDeprecation(
-    "PaginationNav",
-    untrack(() => ({ prevClass, nextClass, spanClass, tableDivClass })),
-    { prevClass: "prev", nextClass: "next", spanClass: "span", tableDivClass: "tableDiv" }
-  );
-
-  const styling = $derived(classes ?? { prev: prevClass, next: nextClass, span: spanClass, tableDiv: tableDivClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("paginationNav"));
 
@@ -83,17 +72,17 @@
 
 <nav aria-label={ariaLabel} {...restProps}>
   {#if layout === "table"}
-    <div class={tableDiv({ class: clsx(theme?.tableDiv, styling.tableDiv) })}>
-      Showing <span class={span({ class: clsx(theme?.span, styling.span) })}>{currentPage}</span>
+    <div class={tableDiv({ class: clsx(theme?.tableDiv, styling?.tableDiv) })}>
+      Showing <span class={span({ class: clsx(theme?.span, styling?.span) })}>{currentPage}</span>
       of
-      <span class={span({ class: clsx(theme?.span, styling.span) })}>{totalPages}</span>
+      <span class={span({ class: clsx(theme?.span, styling?.span) })}>{totalPages}</span>
       Entries
     </div>
   {/if}
 
   <ul class={base({ class: clsx(theme?.base, className) })}>
-    <li {...restProps}>
-      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prev({ class: clsx(theme?.prev, styling.prev) })}>
+    <li>
+      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prev({ class: clsx(theme?.prev, styling?.prev) })}>
         {#if prevContent}
           {@render prevContent()}
         {:else}
@@ -110,8 +99,8 @@
         </li>
       {/each}
     {/if}
-    <li {...restProps}>
-      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={next({ class: clsx(theme?.next, styling.next) })}>
+    <li>
+      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={next({ class: clsx(theme?.next, styling?.next) })}>
         {#if nextContent}
           {@render nextContent()}
         {:else}
@@ -126,7 +115,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1206)
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
 ## Props
 @prop currentPage = 1
 @prop totalPages = 1
@@ -134,8 +123,6 @@
 @prop onPageChange
 @prop prevContent
 @prop nextContent
-@prop prevClass
-@prop nextClass
 @prop layout = "pagination"
 @prop nextLabel = "Next"
 @prop previousLabel = "Previous"
@@ -143,7 +130,5 @@
 @prop size = "default"
 @prop class: className
 @prop classes
-@prop spanClass
-@prop tableDivClass
 @prop ...restProps
 -->

package/dist/pagination/PaginationNav.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaginationNavProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1206)
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
  * ## Props
  * @prop currentPage = 1
  * @prop totalPages = 1
@@ -10,8 +10,6 @@ import type { PaginationNavProps } from "..";
  * @prop onPageChange
  * @prop prevContent
  * @prop nextContent
- * @prop prevClass
- * @prop nextClass
  * @prop layout = "pagination"
  * @prop nextLabel = "Next"
  * @prop previousLabel = "Previous"
@@ -19,8 +17,6 @@ import type { PaginationNavProps } from "..";
  * @prop size = "default"
  * @prop class: className
  * @prop classes
- * @prop spanClass
- * @prop tableDivClass
  * @prop ...restProps
  */
 declare const PaginationNav: import("svelte").Component<PaginationNavProps, {}, "">;

package/dist/popover/Popover.svelte

@@ -3,14 +3,12 @@
   import Popper from "../utils/Popper.svelte";
   import { popover } from "./theme";
   import type { PopoverProps } from "../types";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
   let {
     title: titleSlot,
     color = "default",
     trigger = "hover",
-    defaultClass,
     arrow = true,
     children,
     placement = "top",
@@ -20,13 +18,7 @@
     ...restProps
   }: PopoverProps = $props();
 
-  warnThemeDeprecation(
-    "Popover",
-    untrack(() => ({ defaultClass })),
-    { defaultClass: "content" }
-  );
-
-  const styling = $derived(classes ?? { content: defaultClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("popover"));
 
@@ -35,13 +27,13 @@
 
 <Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base({ class: clsx(theme?.base, className) })}>
   {#if typeof titleSlot === "string"}
-    <div class={title({ class: clsx(theme?.title, classes?.title) })}>
-      <h3 class={h3({ class: clsx(theme?.h3, classes?.h3) })}>{titleSlot}</h3>
+    <div class={title({ class: clsx(theme?.title, styling?.title) })}>
+      <h3 class={h3({ class: clsx(theme?.h3, styling?.h3) })}>{titleSlot}</h3>
     </div>
   {:else if titleSlot}
     {@render titleSlot()}
   {/if}
-  <div class={content({ class: clsx(theme?.content, styling.content) })}>
+  <div class={content({ class: clsx(theme?.content, styling?.content) })}>
     {@render children()}
   </div>
 </Popper>
@@ -50,12 +42,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1246)
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1187)
 ## Props
 @prop title: titleSlot
 @prop color = "default"
 @prop trigger = "hover"
-@prop defaultClass
 @prop arrow = true
 @prop children
 @prop placement = "top"

package/dist/popover/Popover.svelte.d.ts

@@ -2,12 +2,11 @@ import type { PopoverProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1246)
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1187)
  * ## Props
  * @prop title: titleSlot
  * @prop color = "default"
  * @prop trigger = "hover"
- * @prop defaultClass
  * @prop arrow = true
  * @prop children
  * @prop placement = "top"

package/dist/progress/Progressbar.svelte

@@ -68,7 +68,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1256)
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1196)
 ## Props
 @prop progress = "45"
 @prop precision = 0

package/dist/progress/Progressbar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1256)
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1196)
  * ## Props
  * @prop progress = "45"
  * @prop precision = 0

package/dist/progress/Progressradial.svelte

@@ -93,7 +93,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1267)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1207)
 ## Props
 @prop progress = 45
 @prop radius = 42

package/dist/progress/Progressradial.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1267)
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1207)
  * ## Props
  * @prop progress = 45
  * @prop radius = 42

package/dist/rating/AdvancedRating.svelte

@@ -2,25 +2,11 @@
   import clsx from "clsx";
   import { advancedRating } from "./theme";
   import type { AdvancedRatingProps } from "../types";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { rating, globalText, ratings, divClass, spanClass, div2Class, div3Class, span2Class, class: className, classes, unit }: AdvancedRatingProps = $props();
+  let { rating, globalText, ratings, class: className, classes, unit }: AdvancedRatingProps = $props();
 
-  warnThemeDeprecation(
-    "AdvancedRating",
-    untrack(() => ({ divClass, spanClass, div2Class, div3Class, span2Class })),
-    { divClass: "class", spanClass: "span", div2Class: "div2", div3Class: "div3", span2Class: "span2" }
-  );
-
-  const styling = $derived(
-    classes ?? {
-      span: spanClass,
-      div2: div2Class,
-      div3: div3Class,
-      span2: span2Class
-    }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("advancedRating"));
 
@@ -35,11 +21,11 @@
 {/if}
 {#each ratings as { label, rating }, i (label ?? i)}
   <div class={base({ class: clsx(theme?.base, className) })}>
-    <span class={span({ class: clsx(theme?.span, styling.span) })}>{label}</span>
-    <div class={div2({ class: clsx(theme?.div2, styling.div2) })}>
-      <div class={div3({ class: clsx(theme?.div3, styling.div3) })} style="width: {rating}%"></div>
+    <span class={span({ class: clsx(theme?.span, styling?.span) })}>{label}</span>
+    <div class={div2({ class: clsx(theme?.div2, styling?.div2) })}>
+      <div class={div3({ class: clsx(theme?.div3, styling?.div3) })} style="width: {rating}%"></div>
     </div>
-    <span class={span2({ class: clsx(theme?.span2, styling.span2) })}>{rating}{unit}</span>
+    <span class={span2({ class: clsx(theme?.span2, styling?.span2) })}>{rating}{unit}</span>
   </div>
 {/each}
 
@@ -47,16 +33,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1284)
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1224)
 ## Props
 @prop rating
 @prop globalText
 @prop ratings
-@prop divClass
-@prop spanClass
-@prop div2Class
-@prop div3Class
-@prop span2Class
 @prop class: className
 @prop classes
 @prop unit

package/dist/rating/AdvancedRating.svelte.d.ts

@@ -2,16 +2,11 @@ import type { AdvancedRatingProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1284)
+ * [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1224)
  * ## Props
  * @prop rating
  * @prop globalText
  * @prop ratings
- * @prop divClass
- * @prop spanClass
- * @prop div2Class
- * @prop div3Class
- * @prop span2Class
  * @prop class: className
  * @prop classes
  * @prop unit