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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { BottomNavItemProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { getBottomNavContext } from "../context";
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
   import { bottomNavItem } from "./theme";
 
-  let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, active: manualActive, btnClass, spanClass, ...restProps }: BottomNavItemProps = $props();
+  let { children, btnName, appBtnPosition = "middle", class: className, classes, active: manualActive, ...restProps }: BottomNavItemProps = $props();
 
   // Support for deprecated props with fallback to new props
   const styling = $derived(classes);
@@ -36,22 +36,14 @@
     // Priority: theme (lowest) -> className/btnClass (highest)
     // Note: Classes<T> type intentionally omits "base" - use class prop for base element
     return base({
-      class: clsx(
-        theme?.base,
-        className ?? btnClass, // Support deprecated btnClass
-        isActive && (activeClass ?? context?.activeClass)
-      )
+      class: clsx(theme?.base, className, isActive && context?.activeClass)
     });
   }
 
   function getSpanClass() {
     // Priority: theme (lowest) -> classes.span/spanClass (highest)
     return span({
-      class: clsx(
-        theme?.span,
-        styling?.span ?? spanClass, // Support deprecated spanClass
-        isActive && (activeClass ?? context?.activeClass)
-      )
+      class: clsx(theme?.span, styling?.span, isActive && context?.activeClass)
     });
   }
 
@@ -73,14 +65,14 @@
 </script>
 
 {#if restProps.href === undefined}
-  <button {...buttonProps}>
+  <button data-scope="bottom-nav-item" data-part="base" {...buttonProps}>
     {@render children()}
-    <span class={getSpanClass()}>{btnName}</span>
+    <span data-part="label" class={getSpanClass()}>{btnName}</span>
   </button>
 {:else}
-  <a {...anchorProps}>
+  <a data-scope="bottom-nav-item" data-part="base" {...anchorProps}>
     {@render children()}
-    <span class={getSpanClass()}>{btnName}</span>
+    <span data-part="label" class={getSpanClass()}>{btnName}</span>
   </a>
 {/if}
 
@@ -88,16 +80,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L282)
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L293)
 ## Props
 @prop children
 @prop btnName
 @prop appBtnPosition = "middle"
-@prop activeClass
 @prop class: className
 @prop classes
 @prop active: manualActive
-@prop btnClass
-@prop spanClass
 @prop ...restProps
 -->

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -2,17 +2,14 @@ import type { BottomNavItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L282)
+ * [BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L293)
  * ## Props
  * @prop children
  * @prop btnName
  * @prop appBtnPosition = "middle"
- * @prop activeClass
  * @prop class: className
  * @prop classes
  * @prop active: manualActive
- * @prop btnClass
- * @prop spanClass
  * @prop ...restProps
  */
 declare const BottomNavItem: import("svelte").Component<BottomNavItemProps, {}, "">;

package/dist/bottom-navigation/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type BottomNavVariants = VariantProps<typeof bottomNav> & Classes<typeof bottomNav>;
 export type BottomNavItemVariants = VariantProps<typeof bottomNavItem> & Classes<typeof bottomNavItem>;
 export type BottomNavHeaderVariants = VariantProps<typeof bottomNavHeader> & Classes<typeof bottomNavHeader>;
@@ -52,7 +52,7 @@ export declare const bottomNav: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    inner: string;
+    content: string;
     active: string;
 }, undefined, {
     position: {
@@ -102,7 +102,7 @@ export declare const bottomNav: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    inner: string;
+    content: string;
     active: string;
 }, import("tailwind-variants").TVReturnType<{
     position: {
@@ -152,7 +152,7 @@ export declare const bottomNav: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    inner: string;
+    content: string;
     active: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
@@ -307,32 +307,32 @@ export declare const bottomNavHeader: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
     base: string;
-    innerDiv: string;
+    content: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            innerDiv?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
     base: string;
-    innerDiv: string;
+    content: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
-    innerDiv: string;
+    content: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const bottomNavHeaderItem: import("tailwind-variants").TVReturnType<{
     active: {

package/dist/bottom-navigation/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const bottomNav = tv({
     slots: {
         base: "w-full z-30 border-default bg-neutral-primary-soft",
-        inner: "grid h-full max-w-lg mx-auto",
+        content: "grid h-full max-w-lg mx-auto",
         active: ""
     },
     variants: {
@@ -99,7 +99,7 @@ export const bottomNavItem = tv({
 export const bottomNavHeader = tv({
     slots: {
         base: "w-full",
-        innerDiv: "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-neutral-tertiary rounded-base"
+        content: "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-neutral-tertiary rounded-base"
     }
 });
 export const bottomNavHeaderItem = tv({

package/dist/breadcrumb/Breadcrumb.svelte

@@ -2,7 +2,7 @@
   import { breadcrumb } from "./theme";
   import clsx from "clsx";
   import type { BreadcrumbProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, solid = false, class: className, classes, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
 
@@ -10,13 +10,13 @@
 
   const theme = $derived(getTheme("breadcrumb"));
 
-  const { base, list } = $derived(breadcrumb({ solid }));
+  const { base, content } = $derived(breadcrumb({ solid }));
   let classNav = $derived(base({ class: clsx(theme?.base, className) }));
-  let classList = $derived(list({ class: clsx(theme?.list, styling?.list) }));
+  let classContent = $derived(content({ class: clsx(theme?.content, styling?.content) }));
 </script>
 
-<nav aria-label={ariaLabel} {...restProps} class={classNav}>
-  <ol class={classList}>
+<nav data-scope="breadcrumb" data-part="base" aria-label={ariaLabel} {...restProps} class={classNav}>
+  <ol data-part="content" class={classContent}>
     {@render children()}
   </ol>
 </nav>
@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L304)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L310)
 ## Props
 @prop children
 @prop solid = false

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { BreadcrumbItemProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { breadcrumbItem } from "./theme";
 
@@ -8,7 +8,7 @@
 
   const theme = $derived(getTheme("breadcrumbItem"));
 
-  const { base, link, separator, span } = $derived(
+  const { base, link, separator, label } = $derived(
     breadcrumbItem({
       home,
       hasHref: !!href
@@ -16,9 +16,9 @@
   );
 </script>
 
-<li {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+<li data-scope="breadcrumb-item" data-part="base" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   {#if home}
-    <a class={link({ home: true, class: clsx(theme?.link, classes?.link) })} {href}>
+    <a data-part="link" class={link({ home: true, class: clsx(theme?.link, classes?.link) })} {href}>
       {#if icon}
         {@render icon()}
       {:else}
@@ -39,17 +39,26 @@
     {#if icon}
       {@render icon()}
     {:else}
-      <svg class={separator({ class: clsx(theme?.separator, classes?.separator) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+      <svg
+        data-part="separator"
+        class={separator({ class: clsx(theme?.separator, classes?.separator) })}
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
       </svg>
     {/if}
 
     {#if href}
-      <a class={link({ home: false, hasHref: true, class: clsx(theme?.link, classes?.link) })} {href}>
+      <a data-part="link" class={link({ home: false, hasHref: true, class: clsx(theme?.link, classes?.link) })} {href}>
         {@render children()}
       </a>
     {:else}
-      <span class={span({ home: false, hasHref: false, class: clsx(theme?.span, classes?.span) })}>
+      <span data-part="label" class={label({ home: false, hasHref: false, class: clsx(theme?.label, classes?.label) })}>
         {@render children()}
       </span>
     {/if}
@@ -60,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L310)
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L316)
 ## Props
 @prop children
 @prop icon

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/breadcrumb/theme.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type BreadcrumbVariants = VariantProps<typeof breadcrumb> & Classes<typeof breadcrumb>;
 export type BreadcrumbItemVariants = VariantProps<typeof breadcrumbItem> & Classes<typeof breadcrumbItem>;
 export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
@@ -11,7 +11,7 @@ export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    list: string;
+    content: string;
 }, undefined, {
     solid: {
         true: {
@@ -21,7 +21,7 @@ export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    list: string;
+    content: string;
 }, import("tailwind-variants").TVReturnType<{
     solid: {
         true: {
@@ -31,7 +31,7 @@ export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    list: string;
+    content: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
     home: {
@@ -50,7 +50,7 @@ export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
     base: string;
     link: string;
     separator: string;
-    span: string;
+    label: string;
 }, undefined, {
     home: {
         true: {
@@ -68,7 +68,7 @@ export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
     base: string;
     link: string;
     separator: string;
-    span: string;
+    label: string;
 }, import("tailwind-variants").TVReturnType<{
     home: {
         true: {
@@ -86,5 +86,5 @@ export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
     base: string;
     link: string;
     separator: string;
-    span: string;
+    label: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/breadcrumb/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const breadcrumb = tv({
     slots: {
         base: "flex",
-        list: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse"
+        content: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse"
     },
     variants: {
         solid: {
@@ -21,7 +21,7 @@ export const breadcrumbItem = tv({
         base: "",
         link: "inline-flex items-center text-sm font-medium text-body hover:text-fg-brand",
         separator: "w-3.5 h-3.5 rtl:rotate-180 text-body",
-        span: "inline-flex items-center text-sm font-medium text-body-subtle"
+        label: "inline-flex items-center text-sm font-medium text-body-subtle"
     },
     variants: {
         home: {

package/dist/button-group/ButtonGroup.svelte

@@ -2,7 +2,7 @@
   import { buttonGroup } from "./theme";
   import clsx from "clsx";
   import type { ButtonGroupProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { setButtonGroupContext } from "../context";
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
@@ -25,7 +25,7 @@
   setButtonGroupContext(reactiveCtx);
 </script>
 
-<div {...restProps} class={groupClass} role="group">
+<div data-scope="button-group" data-part="base" {...restProps} class={groupClass} role="group">
   {@render children()}
 </div>
 
@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L318)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L324)
 ## Props
 @prop children
 @prop size = "md"

package/dist/button-group/ButtonGroup.svelte.d.ts

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

package/dist/buttons/Button.svelte

@@ -2,7 +2,7 @@
   import clsx from "clsx";
   import { Spinner } from "..";
   import type { ButtonProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { button } from "./theme";
   import { getButtonGroupContext } from "../context";
 
@@ -37,18 +37,18 @@
 </script>
 
 {#if restProps.href !== undefined}
-  <a {...restProps} class={btnCls}>
+  <a {...restProps} class={btnCls} data-scope="button" data-part="base">
     {@render children?.()}
   </a>
 {:else if tag === "button"}
-  <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
+  <button type="button" {...restProps} class={btnCls} disabled={isDisabled} data-scope="button" data-part="base">
     {@render children?.()}
     {#if loading}
-      <Spinner {...spinnerProps} class={spinner()} />
+      <Spinner {...spinnerProps} class={spinner()} data-part="spinner" />
     {/if}
   </button>
 {:else}
-  <svelte:element this={tag} {...restProps} class={btnCls}>
+  <svelte:element this={tag} {...restProps} class={btnCls} data-scope="button" data-part="base">
     {@render children?.()}
   </svelte:element>
 {/if}

package/dist/buttons/GradientButton.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import type { GradientButtonProps } from "..";
   import Button from "./Button.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { getButtonGroupContext } from "../context";
 
   const group = getButtonGroupContext()?.size;
@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L338)
+[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L344)
 ## Props
 @prop children
 @prop outline

package/dist/buttons/GradientButton.svelte.d.ts

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