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

package/dist/accordion/Accordion.svelte

@@ -37,7 +37,7 @@
   const base = $derived(accordion({ flush, class: clsx(theme, className) }));
 </script>
 
-<div {...restProps} class={base}>
+<div data-scope="accordion" data-part="base" {...restProps} class={base}>
   {@render children()}
 </div>
 
@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L199)
+[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L209)
 ## Props
 @prop children
 @prop flush

package/dist/accordion/Accordion.svelte.d.ts

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

package/dist/accordion/AccordionItem.svelte

@@ -16,7 +16,7 @@
   // Theme is applied in template via clsx with lowest priority.
   const finalClasses = $derived({
     button: classes?.button || ctx?.classes?.button,
-    contentWrapper: classes?.contentWrapper || ctx?.classes?.contentWrapper,
+    contentWrapper: classes?.container || ctx?.classes?.contentWrapper,
     content: classes?.content || ctx?.classes?.content,
     active: classes?.active || ctx?.classes?.active,
     inactive: classes?.inactive || ctx?.classes?.inactive
@@ -50,15 +50,15 @@
     open = !open;
   };
 
-  const { base, button, contentWrapper, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
+  const { base, button, container, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
 
   let buttonClass = $derived(clsx(open && !ctx?.flush && (finalClasses.active || active()), !open && !ctx?.flush && (finalClasses.inactive || inactive())));
 
-  let contentWrapperCls = $derived(clsx(contentWrapper(), open ? "block" : "hidden", finalClasses.contentWrapper));
+  let contentWrapperCls = $derived(clsx(container(), open ? "block" : "hidden", finalClasses.contentWrapper));
 </script>
 
-<h2 class={base({ class: clsx(theme?.base, className) })}>
-  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, finalClasses.button) })} aria-expanded={open}>
+<h2 data-scope="accordion-item" data-part="base" class={base({ class: clsx(theme?.base, className) })}>
+  <button data-part="button" type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, finalClasses.button) })} aria-expanded={open}>
     {#if header}
       {@render header()}
       {#if open}
@@ -82,15 +82,15 @@
 
 {#if useTransition}
   {#if open && transitionType !== "none"}
-    <div class={contentWrapperCls} transition:transitionType={effectiveTransitionParams as ParamsType}>
-      <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
+    <div data-part="content-wrapper" class={contentWrapperCls} transition:transitionType={effectiveTransitionParams as ParamsType}>
+      <div data-part="content" class={content({ class: clsx(theme?.content, finalClasses.content) })}>
         {@render children()}
       </div>
     </div>
   {/if}
 {:else}
-  <div class={contentWrapperCls}>
-    <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
+  <div data-part="content-wrapper" class={contentWrapperCls}>
+    <div data-part="content" class={content({ class: clsx(theme?.content, finalClasses.content) })}>
       {@render children()}
     </div>
   </div>
@@ -100,7 +100,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L215)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L225)
 ## Props
 @prop children
 @prop header

package/dist/accordion/AccordionItem.svelte.d.ts

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

package/dist/accordion/theme.d.ts

@@ -52,7 +52,7 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
-    contentWrapper: string;
+    container: string;
     content: string;
     active: string;
     inactive: string;
@@ -76,7 +76,7 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
-    contentWrapper: string;
+    container: string;
     content: string;
     active: string;
     inactive: string;
@@ -100,7 +100,7 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
-    contentWrapper: string;
+    container: string;
     content: string;
     active: string;
     inactive: string;

package/dist/accordion/theme.js

@@ -26,7 +26,7 @@ export const accordionItem = tv({
     slots: {
         base: "group",
         button: "flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body group-first:rounded-t-base border border-t-0 border-x-0 border-b-default gap-3",
-        contentWrapper: "",
+        container: "",
         content: "p-4 md:p-5 group-last:border group-last:border-t-default group-last:border-x-0",
         active: "",
         inactive: ""

package/dist/alert/Alert.svelte

@@ -14,7 +14,6 @@
     alertStatus = $bindable(true),
     closeIcon: CloseIcon,
     color = "brand",
-    closeColor,
     rounded = true,
     border,
     class: className,
@@ -23,6 +22,7 @@
     params,
     listContent,
     borderAccent,
+    closeButtonProps,
     ...restProps
   }: AlertProps = $props();
 
@@ -57,10 +57,20 @@
   }
 
   createDismissableContext(close);
+
+  const finalCloseProps = $derived({
+    class: clsx("-my-1.5 ms-auto -me-1.5", closeButtonProps?.class),
+    color: closeButtonProps?.color ?? color,
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Remove alert",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes,
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 {#if alertStatus}
-  <div role="alert" bind:this={ref} {...restProps} transition:transition={effectiveParams as ParamsType} class={divCls}>
+  <div data-scope="alert" data-part="base" role="alert" bind:this={ref} {...restProps} transition:transition={effectiveParams as ParamsType} class={divCls}>
     {#if icon}
       {@render icon()}
     {/if}
@@ -75,11 +85,11 @@
 
     {#if dismissable}
       {#if CloseIcon}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" color={closeColor ?? color} ariaLabel="Remove alert">
+        <CloseButton {...finalCloseProps}>
           <CloseIcon />
         </CloseButton>
       {:else}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" color={closeColor ?? color} ariaLabel="Remove alert" />
+        <CloseButton {...finalCloseProps} />
       {/if}
     {/if}
   </div>
@@ -89,14 +99,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L225)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L235)
 ## Props
 @prop children
 @prop icon
 @prop alertStatus = $bindable(true)
 @prop closeIcon: CloseIcon
 @prop color = "brand"
-@prop closeColor
 @prop rounded = true
 @prop border
 @prop class: className
@@ -105,5 +114,6 @@
 @prop params
 @prop listContent
 @prop borderAccent
+@prop closeButtonProps
 @prop ...restProps
 -->

package/dist/alert/Alert.svelte.d.ts

@@ -2,14 +2,13 @@ import { type AlertProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L225)
+ * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L235)
  * ## Props
  * @prop children
  * @prop icon
  * @prop alertStatus = $bindable(true)
  * @prop closeIcon: CloseIcon
  * @prop color = "brand"
- * @prop closeColor
  * @prop rounded = true
  * @prop border
  * @prop class: className
@@ -18,6 +17,7 @@ import { type AlertProps } from "..";
  * @prop params
  * @prop listContent
  * @prop borderAccent
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const Alert: import("svelte").Component<AlertProps, {}, "alertStatus">;

package/dist/alert/theme.d.ts

@@ -3,31 +3,11 @@ export type AlertVariants = VariantProps<typeof alert>;
 export declare const alert: import("tailwind-variants").TVReturnType<{
     color: {
         brand: string;
+        alternative: string;
+        gray: string;
         danger: string;
         success: string;
         warning: string;
-        dark: string;
-        none: string;
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
     };
     listContent: {
         true: string;
@@ -50,31 +30,11 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
 }, undefined, "flex items-start sm:items-center p-4 gap-3 text-sm", {
     color: {
         brand: string;
+        alternative: string;
+        gray: string;
         danger: string;
         success: string;
         warning: string;
-        dark: string;
-        none: string;
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
     };
     listContent: {
         true: string;
@@ -97,31 +57,11 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnType<{
     color: {
         brand: string;
+        alternative: string;
+        gray: string;
         danger: string;
         success: string;
         warning: string;
-        dark: string;
-        none: string;
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
     };
     listContent: {
         true: string;

package/dist/alert/theme.js

@@ -4,32 +4,11 @@ export const alert = tv({
     variants: {
         color: {
             brand: "text-fg-brand-strong bg-brand-softer",
+            alternative: "bg-neutral-primary-soft text-heading",
+            gray: "text-heading bg-neutral-secondary-medium",
             danger: "text-fg-danger-strong bg-danger-soft",
             success: "text-fg-success-strong bg-success-soft",
-            warning: "text-fg-warning bg-warning-soft",
-            dark: "text-heading bg-neutral-secondary-medium",
-            none: "", // For custom colors via class prop
-            // Legacy colors for backward compatibility
-            primary: "bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400",
-            secondary: "bg-secondary-50 dark:bg-secondary-800 text-secondary-800 dark:text-secondary-400",
-            gray: "bg-gray-100 text-gray-500 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-300",
-            red: "bg-red-100 text-red-500 focus:ring-red-400 dark:bg-red-200 dark:text-red-600",
-            orange: "bg-orange-100 text-orange-500 focus:ring-orange-400 dark:bg-orange-200 dark:text-orange-600",
-            amber: "bg-amber-100 text-amber-500 focus:ring-amber-400 dark:bg-amber-200 dark:text-amber-600",
-            yellow: "bg-yellow-100 text-yellow-500 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600",
-            lime: "bg-lime-100 text-lime-500 focus:ring-lime-400 dark:bg-lime-200 dark:text-lime-600",
-            green: "bg-green-100 text-green-500 focus:ring-green-400 dark:bg-green-200 dark:text-green-600",
-            emerald: "bg-emerald-100 text-emerald-500 focus:ring-emerald-400 dark:bg-emerald-200 dark:text-emerald-600",
-            teal: "bg-teal-100 text-teal-500 focus:ring-teal-400 dark:bg-teal-200 dark:text-teal-600",
-            cyan: "bg-cyan-100 text-cyan-500 focus:ring-cyan-400 dark:bg-cyan-200 dark:text-cyan-600",
-            sky: "bg-sky-100 text-sky-500 focus:ring-sky-400 dark:bg-sky-200 dark:text-sky-600",
-            blue: "bg-blue-100 text-blue-500 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600",
-            indigo: "bg-indigo-100 text-indigo-500 focus:ring-indigo-400 dark:bg-indigo-200 dark:text-indigo-600",
-            violet: "bg-violet-100 text-violet-500 focus:ring-violet-400 dark:bg-violet-200 dark:text-violet-600",
-            purple: "bg-purple-100 text-purple-500 focus:ring-purple-400 dark:bg-purple-200 dark:text-purple-600",
-            fuchsia: "bg-fuchsia-100 text-fuchsia-500 focus:ring-fuchsia-400 dark:bg-fuchsia-200 dark:text-fuchsia-600",
-            pink: "bg-pink-100 text-pink-500 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600",
-            rose: "bg-rose-100 text-rose-500 focus:ring-rose-400 dark:bg-rose-200 dark:text-rose-600"
+            warning: "text-fg-warning bg-warning-soft"
         },
         listContent: {
             true: ""
@@ -73,7 +52,7 @@ export const alert = tv({
         },
         {
             listContent: true,
-            color: "dark",
+            color: "gray",
             class: "bg-dark-soft border border-dark-subtle"
         },
         {
@@ -98,7 +77,7 @@ export const alert = tv({
         },
         {
             border: true,
-            color: "dark",
+            color: "gray",
             class: "border-dark-subtle"
         },
         {
@@ -123,7 +102,7 @@ export const alert = tv({
         },
         {
             borderAccent: true,
-            color: "dark",
+            color: "gray",
             class: "border-dark-subtle"
         }
     ],

package/dist/avatar/Avatar.svelte

@@ -24,7 +24,7 @@
 </script>
 
 {#if !src || !!href || children || dot || indicator}
-  <svelte:element this={href ? "a" : "div"} role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
+  <svelte:element this={href ? "a" : "div"} data-scope="avatar" data-part="base" role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
     {#if src}
       <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
     {:else if children}
@@ -42,14 +42,14 @@
     {/if}
   </svelte:element>
 {:else}
-  <img {alt} {src} {...restProps} {onclick} class={avatarClass} />
+  <img data-scope="avatar" data-part="base" {alt} {src} {...restProps} {onclick} class={avatarClass} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L239)
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L249)
 ## Props
 @prop children
 @prop indicator

package/dist/avatar/Avatar.svelte.d.ts

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

package/dist/badge/Badge.svelte

@@ -23,7 +23,7 @@
     rounded,
     transition = fade,
     params,
-    closeBtnColor = "gray",
+    closeButtonProps,
     ...restProps
   }: BadgeProps = $props();
 
@@ -32,7 +32,18 @@
   // Theme context
   const theme = $derived(getTheme("badge"));
 
-  const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border, href: !!href }));
+  const { base, link } = $derived(badge({ color, size: large ? "large" : "small", rounded, border, href: !!href }));
+
+  const size: "sm" | "xs" = $derived(large ? "sm" : "xs");
+  const finalCloseProps = $derived({
+    class: clsx("ms-1", closeButtonProps?.class),
+    size: closeButtonProps?.size ?? size,
+    color: closeButtonProps?.color ?? color,
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Remove badge",
+    classes: closeButtonProps?.classes,
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 
   // Check if running in browser to avoid SSR issues
   const isBrowser = typeof window !== "undefined";
@@ -52,9 +63,9 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} bind:this={ref} transition:transition={effectiveParams as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
+  <div data-scope="badge" data-part="base" {...restProps} bind:this={ref} transition:transition={effectiveParams as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
     {#if href}
-      <a {href} {target} class={linkClass({ class: clsx(theme?.linkClass, styling?.linkClass) })}>
+      <a {href} {target} class={link({ class: clsx(theme?.link, styling?.link) })}>
         {@render children()}
       </a>
     {:else}
@@ -63,11 +74,11 @@
 
     {#if dismissable}
       {#if icon}
-        <CloseButton class="ms-1" color={closeBtnColor} size={large ? "sm" : "xs"} ariaLabel="Remove badge">
+        <CloseButton {...finalCloseProps}>
           {@render icon()}
         </CloseButton>
       {:else}
-        <CloseButton class="ms-1" color={closeBtnColor} size={large ? "sm" : "xs"} ariaLabel="Remove badge" />
+        <CloseButton {...finalCloseProps} />
       {/if}
     {/if}
   </div>
@@ -77,7 +88,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L251)
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L261)
 ## Props
 @prop children
 @prop icon
@@ -93,6 +104,6 @@
 @prop rounded
 @prop transition = fade
 @prop params
-@prop closeBtnColor = "gray"
+@prop closeButtonProps
 @prop ...restProps
 -->

package/dist/badge/Badge.svelte.d.ts

@@ -2,7 +2,7 @@ import { type BadgeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L251)
+ * [BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L261)
  * ## Props
  * @prop children
  * @prop icon
@@ -18,7 +18,7 @@ import { type BadgeProps } from "..";
  * @prop rounded
  * @prop transition = fade
  * @prop params
- * @prop closeBtnColor = "gray"
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const Badge: import("svelte").Component<BadgeProps, {}, "badgeStatus">;