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

package/dist/badge/theme.d.ts

@@ -1,4 +1,4 @@
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 import { type VariantProps } from "tailwind-variants";
 export type BadgeVariants = VariantProps<typeof badge> & Classes<typeof badge>;
 export declare const badge: import("tailwind-variants").TVReturnType<{
@@ -21,63 +21,6 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         warning: {
             base: string;
         };
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        red: {
-            base: string;
-        };
-        yellow: {
-            base: string;
-        };
-        green: {
-            base: string;
-        };
-        orange: {
-            base: string;
-        };
-        amber: {
-            base: string;
-        };
-        lime: {
-            base: string;
-        };
-        emerald: {
-            base: string;
-        };
-        teal: {
-            base: string;
-        };
-        cyan: {
-            base: string;
-        };
-        sky: {
-            base: string;
-        };
-        blue: {
-            base: string;
-        };
-        indigo: {
-            base: string;
-        };
-        violet: {
-            base: string;
-        };
-        fuchsia: {
-            base: string;
-        };
-        purple: {
-            base: string;
-        };
-        pink: {
-            base: string;
-        };
-        rose: {
-            base: string;
-        };
     };
     size: {
         small: string;
@@ -98,7 +41,7 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         false: {};
     };
 }, {
-    linkClass: string;
+    link: string;
     base: string;
 }, undefined, {
     color: {
@@ -120,63 +63,6 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         warning: {
             base: string;
         };
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        red: {
-            base: string;
-        };
-        yellow: {
-            base: string;
-        };
-        green: {
-            base: string;
-        };
-        orange: {
-            base: string;
-        };
-        amber: {
-            base: string;
-        };
-        lime: {
-            base: string;
-        };
-        emerald: {
-            base: string;
-        };
-        teal: {
-            base: string;
-        };
-        cyan: {
-            base: string;
-        };
-        sky: {
-            base: string;
-        };
-        blue: {
-            base: string;
-        };
-        indigo: {
-            base: string;
-        };
-        violet: {
-            base: string;
-        };
-        fuchsia: {
-            base: string;
-        };
-        purple: {
-            base: string;
-        };
-        pink: {
-            base: string;
-        };
-        rose: {
-            base: string;
-        };
     };
     size: {
         small: string;
@@ -197,7 +83,7 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         false: {};
     };
 }, {
-    linkClass: string;
+    link: string;
     base: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
@@ -219,63 +105,6 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         warning: {
             base: string;
         };
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        red: {
-            base: string;
-        };
-        yellow: {
-            base: string;
-        };
-        green: {
-            base: string;
-        };
-        orange: {
-            base: string;
-        };
-        amber: {
-            base: string;
-        };
-        lime: {
-            base: string;
-        };
-        emerald: {
-            base: string;
-        };
-        teal: {
-            base: string;
-        };
-        cyan: {
-            base: string;
-        };
-        sky: {
-            base: string;
-        };
-        blue: {
-            base: string;
-        };
-        indigo: {
-            base: string;
-        };
-        violet: {
-            base: string;
-        };
-        fuchsia: {
-            base: string;
-        };
-        purple: {
-            base: string;
-        };
-        pink: {
-            base: string;
-        };
-        rose: {
-            base: string;
-        };
     };
     size: {
         small: string;
@@ -296,6 +125,6 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         false: {};
     };
 }, {
-    linkClass: string;
+    link: string;
     base: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/badge/theme.js

@@ -1,39 +1,17 @@
 import { tv } from "tailwind-variants";
 export const badge = tv({
     slots: {
-        linkClass: "flex items-center",
+        link: "flex items-center",
         base: "inline-flex items-center justify-center font-medium rounded leading-none"
     },
     variants: {
         color: {
-            // Semantic colors
             brand: { base: "bg-brand-softer text-fg-brand-strong " },
             alternative: { base: "bg-neutral-primary-soft text-heading" },
             gray: { base: "bg-neutral-secondary-medium text-heading " },
             danger: { base: "bg-danger-soft text-fg-danger-strong" },
             success: { base: "bg-success-soft text-fg-success-strong" },
-            warning: { base: "bg-warning-soft text-fg-warning" },
-            // Legacy colors for backward compatibility
-            primary: { base: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300" },
-            secondary: { base: "bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-300" },
-            red: { base: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" },
-            yellow: { base: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" },
-            green: { base: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" },
-            // end of legacy colors
-            orange: { base: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300" },
-            amber: { base: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300" },
-            lime: { base: "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-300" },
-            emerald: { base: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300" },
-            teal: { base: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300" },
-            cyan: { base: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300" },
-            sky: { base: "bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300" },
-            blue: { base: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" },
-            indigo: { base: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300" },
-            violet: { base: "bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300" },
-            fuchsia: { base: "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900 dark:text-fuchsia-300" },
-            purple: { base: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300" },
-            pink: { base: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300" },
-            rose: { base: "bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300" }
+            warning: { base: "bg-warning-soft text-fg-warning" }
         },
         size: {
             small: "text-xs px-1.5 py-0.5",
@@ -82,76 +60,6 @@ export const badge = tv({
             color: "warning",
             class: "border border-warning-subtle"
         },
-        {
-            border: true,
-            color: "orange",
-            class: "dark:bg-transparent dark:text-orange-400 border-orange-400 dark:border-orange-400"
-        },
-        {
-            border: true,
-            color: "amber",
-            class: "dark:bg-transparent dark:text-amber-400 border-amber-400 dark:border-amber-400"
-        },
-        {
-            border: true,
-            color: "lime",
-            class: "dark:bg-transparent dark:text-lime-400 border-lime-400 dark:border-lime-400"
-        },
-        {
-            border: true,
-            color: "emerald",
-            class: "dark:bg-transparent dark:text-emerald-400 border-emerald-400 dark:border-emerald-400"
-        },
-        {
-            border: true,
-            color: "teal",
-            class: "dark:bg-transparent dark:text-teal-400 border-teal-400 dark:border-teal-400"
-        },
-        {
-            border: true,
-            color: "cyan",
-            class: "dark:bg-transparent dark:text-cyan-400 border-cyan-400 dark:border-cyan-400"
-        },
-        {
-            border: true,
-            color: "sky",
-            class: "dark:bg-transparent dark:text-sky-400 border-sky-400 dark:border-sky-400"
-        },
-        {
-            border: true,
-            color: "blue",
-            class: "dark:bg-transparent dark:text-blue-400 border-blue-400 dark:border-blue-400"
-        },
-        {
-            border: true,
-            color: "indigo",
-            class: "dark:bg-transparent dark:text-indigo-400 border-indigo-400 dark:border-indigo-400"
-        },
-        {
-            border: true,
-            color: "violet",
-            class: "dark:bg-transparent dark:text-violet-400 border-violet-400 dark:border-violet-400"
-        },
-        {
-            border: true,
-            color: "purple",
-            class: "dark:bg-transparent dark:text-purple-400 border-purple-400 dark:border-purple-400"
-        },
-        {
-            border: true,
-            color: "fuchsia",
-            class: "dark:bg-transparent dark:text-fuchsia-400 border-fuchsia-400 dark:border-fuchsia-400"
-        },
-        {
-            border: true,
-            color: "pink",
-            class: "dark:bg-transparent dark:text-pink-400 border-pink-400 dark:border-pink-400"
-        },
-        {
-            border: true,
-            color: "rose",
-            class: "dark:bg-transparent dark:text-rose-400 border-rose-400 dark:border-rose-400"
-        },
         {
             href: true,
             color: "brand",
@@ -181,76 +89,6 @@ export const badge = tv({
             href: true,
             color: "warning",
             class: "hover:bg-warning-medium"
-        },
-        {
-            href: true,
-            color: "orange",
-            class: "hover:bg-orange-200"
-        },
-        {
-            href: true,
-            color: "amber",
-            class: "hover:bg-amber-200"
-        },
-        {
-            href: true,
-            color: "lime",
-            class: "hover:bg-lime-200"
-        },
-        {
-            href: true,
-            color: "emerald",
-            class: "hover:bg-emerald-200"
-        },
-        {
-            href: true,
-            color: "teal",
-            class: "hover:bg-teal-200"
-        },
-        {
-            href: true,
-            color: "cyan",
-            class: "hover:bg-cyan-200"
-        },
-        {
-            href: true,
-            color: "sky",
-            class: "hover:bg-sky-200"
-        },
-        {
-            href: true,
-            color: "blue",
-            class: "hover:bg-blue-200"
-        },
-        {
-            href: true,
-            color: "indigo",
-            class: "hover:bg-indigo-200"
-        },
-        {
-            href: true,
-            color: "violet",
-            class: "hover:bg-violet-200"
-        },
-        {
-            href: true,
-            color: "purple",
-            class: "hover:bg-purple-200"
-        },
-        {
-            href: true,
-            color: "fuchsia",
-            class: "hover:bg-fuchsia-200"
-        },
-        {
-            href: true,
-            color: "pink",
-            class: "hover:bg-pink-200"
-        },
-        {
-            href: true,
-            color: "rose",
-            class: "hover:bg-rose-200"
         }
     ],
     defaultVariants: {

package/dist/banner/Banner.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { banner } from "./theme";
   import clsx from "clsx";
   import { type ParamsType, type BannerProps } from "..";
   import CloseButton from "../utils/CloseButton.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
 
   let {
@@ -19,7 +20,7 @@
     transition = fade,
     params,
     onclose,
-    closeBtnColor = "gray",
+    closeButtonProps,
     ...restProps
   }: BannerProps = $props();
 
@@ -28,7 +29,13 @@
   // Theme context
   const theme = $derived(getTheme("banner"));
 
-  const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
+  const { base, content, dismissable: dismissableClass } = $derived(banner({ type, color }));
+
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...params, duration: 0 } : params);
 
   let ref: HTMLDivElement | undefined = $state(undefined);
   function close(event: MouseEvent) {
@@ -38,17 +45,27 @@
     }
   }
   createDismissableContext(close);
+
+  const finalCloseProps = $derived({
+    class: dismissableClass({ class: clsx(theme?.dismissable, styling?.dismissable, closeButtonProps?.class) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Remove banner",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes,
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 {#if open}
-  <div tabindex="-1" bind:this={ref} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
-    <div class={insideDiv({ class: clsx(theme?.insideDiv, styling?.insideDiv) })}>
+  <div data-scope="banner" data-part="base" tabindex="-1" bind:this={ref} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={effectiveParams as ParamsType}>
+    <div data-part="content" class={content({ class: clsx(theme?.content, styling?.content) })}>
       {@render children?.()}
     </div>
 
     {#if dismissable}
       <div class="flex items-center justify-end">
-        <CloseButton class={dismissableClass({ class: clsx(theme?.dismissable, styling?.dismissable) })} color={closeBtnColor} ariaLabel="Remove banner" />
+        <CloseButton {...finalCloseProps} />
       </div>
     {/if}
   </div>
@@ -58,7 +75,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L264)
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L275)
 ## Props
 @prop children
 @prop header
@@ -71,6 +88,6 @@
 @prop transition = fade
 @prop params
 @prop onclose
-@prop closeBtnColor = "gray"
+@prop closeButtonProps
 @prop ...restProps
 -->

package/dist/banner/Banner.svelte.d.ts

@@ -2,7 +2,7 @@ import { type BannerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L264)
+ * [BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L275)
  * ## Props
  * @prop children
  * @prop header
@@ -15,7 +15,7 @@ import { type BannerProps } from "..";
  * @prop transition = fade
  * @prop params
  * @prop onclose
- * @prop closeBtnColor = "gray"
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const Banner: import("svelte").Component<BannerProps, {}, "open">;

package/dist/banner/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 BannerVariants = VariantProps<typeof banner> & Classes<typeof banner>;
 export declare const banner: import("tailwind-variants").TVReturnType<{
     type: {
@@ -86,7 +86,7 @@ export declare const banner: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    insideDiv: string;
+    content: string;
     dismissable: string;
 }, undefined, {
     type: {
@@ -173,7 +173,7 @@ export declare const banner: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    insideDiv: string;
+    content: string;
     dismissable: string;
 }, import("tailwind-variants").TVReturnType<{
     type: {
@@ -260,6 +260,6 @@ export declare const banner: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-    insideDiv: string;
+    content: string;
     dismissable: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/banner/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const banner = tv({
     slots: {
         base: "fixed z-50 flex justify-between p-4 mx-auto dark:bg-gray-700 dark:border-gray-600",
-        insideDiv: "flex flex-col md:flex-row md:items-center gap-2 mx-auto",
+        content: "flex flex-col md:flex-row md:items-center gap-2 mx-auto",
         dismissable: "absolute end-2.5 top-2.5 md:static md:end-auto md:top-auto"
     },
     variants: {

package/dist/bottom-navigation/BottomNav.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { BottomNavContextType, BottomNavProps } from "../types";
   import { cn } from "../utils";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { setBottomNavContext } from "../context";
   import { bottomNav } from "./theme";
@@ -17,7 +17,7 @@
 
   // Create reactive context using getters
   // Note: context.classes is for item styling, not BottomNav styling
-  // BottomNav's classes prop only affects its own elements (inner, active)
+  // BottomNav's classes prop only affects its own elements (content, active)
   const reactiveCtx: BottomNavContextType = {
     get activeClass() {
       return activeCls;
@@ -33,15 +33,15 @@
 
   setBottomNavContext(reactiveCtx);
 
-  const { base, inner } = $derived(bottomNav({ position, navType }));
+  const { base, content } = $derived(bottomNav({ position, navType }));
 </script>
 
-<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+<div data-scope="bottom-nav" data-part="base" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   {#if header}
     {@render header()}
   {/if}
 
-  <div class={inner({ class: clsx(theme?.inner, styling?.inner) })}>
+  <div data-part="content" class={content({ class: clsx(theme?.content, styling?.content) })}>
     {@render children()}
   </div>
 </div>
@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L276)
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L287)
 ## Props
 @prop children
 @prop header

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

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

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -2,7 +2,7 @@
   import { bottomNavHeader } from "./theme";
   import clsx from "clsx";
   import type { BottomNavHeaderProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, class: className, classes, ...restProps }: BottomNavHeaderProps = $props();
 
@@ -11,11 +11,11 @@
   // Theme context
   const theme = $derived(getTheme("bottomNavHeader"));
 
-  const { innerDiv, base } = $derived(bottomNavHeader());
+  const { content, base } = $derived(bottomNavHeader());
 </script>
 
-<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-  <div class={innerDiv({ class: clsx(theme?.innerDiv, styling?.innerDiv) })} role="group">
+<div data-scope="bottom-nav-header" data-part="base" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div data-part="content" class={content({ class: clsx(theme?.content, styling?.content) })} role="group">
     {@render children()}
   </div>
 </div>
@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L294)
+[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L300)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -2,7 +2,7 @@
   import { bottomNavHeaderItem } from "./theme";
   import clsx from "clsx";
   import type { BottomNavHeaderItemProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
 
@@ -12,7 +12,7 @@
   let base = $derived(bottomNavHeaderItem({ active, class: clsx(theme, className) }));
 </script>
 
-<button {...restProps} class={base}>
+<button data-scope="bottom-nav-header-item" data-part="base" {...restProps} class={base}>
   {itemName}
 </button>
 
@@ -20,7 +20,7 @@
 @component
 [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