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

package/dist/accordion/Accordion.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
   import type { AccordionContextType, AccordionProps } from "../types";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { setAccordionContext } from "../context";
   import { accordion } from "./theme";
   import { createSingleSelectionContext } from "../utils/singleselection.svelte";
   import { untrack } from "svelte";
 
-  let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, classes, ...restProps }: AccordionProps = $props();
+  let { children, flush, multiple = false, class: className, transition, respectReducedMotion = true, classes, ...restProps }: AccordionProps = $props();
 
   const theme = $derived(getTheme("accordion"));
 
-  // Simple reactive state object
+  // Multiple reactive properties that need to be accessed independently
   const reactiveCtx: AccordionContextType = {
     get flush() {
       return flush;
     },
-    get transitionType() {
-      return transitionType;
+    get transition() {
+      return transition;
+    },
+    get respectReducedMotion() {
+      return respectReducedMotion;
     },
     get classes() {
       return classes;
@@ -34,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>
 
@@ -42,15 +45,14 @@
 @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#L213)
 ## Props
 @prop children
 @prop flush
-@prop activeClass
-@prop inactiveClass
 @prop multiple = false
 @prop class: className
-@prop transitionType
+@prop transition
+@prop respectReducedMotion = true
 @prop classes
 @prop ...restProps
 -->

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

@@ -2,15 +2,14 @@ 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#L213)
  * ## Props
  * @prop children
  * @prop flush
- * @prop activeClass
- * @prop inactiveClass
  * @prop multiple = false
  * @prop class: className
- * @prop transitionType
+ * @prop transition
+ * @prop respectReducedMotion = true
  * @prop classes
  * @prop ...restProps
  */

package/dist/accordion/AccordionItem.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { AccordionItemProps, ParamsType } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
   import { getAccordionContext } from "../context";
   import { slide } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { accordionItem } from "./theme";
 
-  let { children, header, arrowup, arrowdown, open = $bindable(false), transitionType = slide, transitionParams, class: className, classes }: AccordionItemProps = $props();
+  let { children, header, arrowup, arrowdown, headingTag, open = $bindable(false), transition = slide, transitionParams, class: className, classes }: AccordionItemProps = $props();
 
   // Get context - it will be undefined if used outside Accordion
   const ctx = getAccordionContext();
@@ -15,15 +16,23 @@
   // 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
   });
 
-  const ctxTransitionType = $derived(ctx?.transitionType ?? transitionType);
-  // Check if transitionType is explicitly set to undefined in props
-  const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
+  const ctxTransitionType = $derived(ctx?.transition ?? transition);
+  // Check if transition is explicitly set to undefined in props
+  const useTransition = $derived(transition === "none" ? false : ctxTransitionType === "none" ? false : true);
+
+  // Get respectReducedMotion from context (defaults to true)
+  const ctxRespectReducedMotion = $derived(ctx?.respectReducedMotion ?? true);
+
+  // Merge transition params with reduced motion handling
+  // Only check prefersReducedMotion in the browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+  const effectiveTransitionParams = $derived(isBrowser && ctxRespectReducedMotion && prefersReducedMotion.current ? { ...transitionParams, duration: 0 } : transitionParams);
 
   // Theme context
   const theme = $derived(getTheme("accordionItem"));
@@ -41,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}>
+<svelte:element this={headingTag ?? "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}
@@ -69,19 +78,19 @@
       {/if}
     {/if}
   </button>
-</h2>
+</svelte:element>
 
 {#if useTransition}
-  {#if open && transitionType !== "none"}
-    <div class={contentWrapperCls} transition:transitionType={transitionParams as ParamsType}>
-      <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
+  {#if open && transition !== "none"}
+    <div data-part="content-wrapper" class={contentWrapperCls} transition:transition={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>
@@ -91,14 +100,14 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L214)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L228)
 ## Props
 @prop children
 @prop header
 @prop arrowup
 @prop arrowdown
 @prop open = $bindable(false)
-@prop transitionType = slide
+@prop transition = slide
 @prop transitionParams
 @prop class: className
 @prop classes

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

@@ -2,14 +2,14 @@ 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#L214)
+ * [AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L228)
  * ## Props
  * @prop children
  * @prop header
  * @prop arrowup
  * @prop arrowdown
  * @prop open = $bindable(false)
- * @prop transitionType = slide
+ * @prop transition = slide
  * @prop transitionParams
  * @prop class: className
  * @prop classes

package/dist/accordion/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 AccordionVariants = VariantProps<typeof accordion>;
 export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
@@ -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: ""
@@ -39,7 +39,7 @@ export const accordionItem = tv({
                 content: "py-5 border-b border-default text-body"
             },
             false: {
-                button: "rounded-t-base hover:text-heading hover:bg-neutral-secondary-medium",
+                button: "hover:text-heading hover:bg-neutral-secondary-medium",
                 contentWrapper: "border border-s-0 border-e-0 border-t-0 border-b-default",
                 content: "p-4 md:p-5"
             }

package/dist/alert/Alert.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { alert } from "./theme";
   import clsx from "clsx";
   import { type AlertProps, type ParamsType } from "..";
   import CloseButton from "../utils/CloseButton.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
 
   let {
@@ -12,16 +13,17 @@
     icon,
     alertStatus = $bindable(true),
     closeIcon: CloseIcon,
+    closeAriaLabel = "Remove alert",
     color = "brand",
-    closeColor,
     rounded = true,
     border,
     class: className,
     dismissable,
     transition = fade,
-    params,
+    transitionParams,
     listContent,
     borderAccent,
+    closeButtonProps,
     ...restProps
   }: AlertProps = $props();
 
@@ -41,6 +43,12 @@
     })
   );
 
+  // 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 ? { ...transitionParams, duration: 0 } : transitionParams);
+
   let ref: HTMLDivElement | undefined = $state(undefined);
 
   function close() {
@@ -50,10 +58,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 ?? closeAriaLabel,
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes,
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 {#if alertStatus}
-  <div role="alert" bind:this={ref} {...restProps} transition:transition={params 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}
@@ -68,11 +86,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>
@@ -82,21 +100,22 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L224)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L238)
 ## Props
 @prop children
 @prop icon
 @prop alertStatus = $bindable(true)
 @prop closeIcon: CloseIcon
+@prop closeAriaLabel = "Remove alert"
 @prop color = "brand"
-@prop closeColor
 @prop rounded = true
 @prop border
 @prop class: className
 @prop dismissable
 @prop transition = fade
-@prop params
+@prop transitionParams
 @prop listContent
 @prop borderAccent
+@prop closeButtonProps
 @prop ...restProps
 -->

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

@@ -2,22 +2,23 @@ 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#L224)
+ * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L238)
  * ## Props
  * @prop children
  * @prop icon
  * @prop alertStatus = $bindable(true)
  * @prop closeIcon: CloseIcon
+ * @prop closeAriaLabel = "Remove alert"
  * @prop color = "brand"
- * @prop closeColor
  * @prop rounded = true
  * @prop border
  * @prop class: className
  * @prop dismissable
  * @prop transition = fade
- * @prop params
+ * @prop transitionParams
  * @prop listContent
  * @prop borderAccent
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const Alert: import("svelte").Component<AlertProps, {}, "alertStatus">;

package/dist/alert/theme.d.ts

@@ -3,14 +3,13 @@ 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;
@@ -50,14 +49,13 @@ 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;
@@ -97,14 +95,13 @@ 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;

package/dist/alert/theme.js

@@ -4,32 +4,30 @@ 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",
+            primary: "bg-primary-50 dark:bg-primary-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"
+            red: "bg-red-100 text-red-500 dark:bg-red-200 dark:text-red-600",
+            orange: "bg-orange-100 text-orange-500 dark:bg-orange-200 dark:text-orange-600",
+            amber: "bg-amber-100 text-amber-500 dark:bg-amber-200 dark:text-amber-600",
+            yellow: "bg-yellow-100 text-yellow-500 dark:bg-yellow-200 dark:text-yellow-600",
+            lime: "bg-lime-100 text-lime-500 dark:bg-lime-200 dark:text-lime-600",
+            green: "bg-green-100 text-green-500 dark:bg-green-200 dark:text-green-600",
+            emerald: "bg-emerald-100 text-emerald-500 dark:bg-emerald-200 dark:text-emerald-600",
+            teal: "bg-teal-100 text-teal-500 dark:bg-teal-200 dark:text-teal-600",
+            cyan: "bg-cyan-100 text-cyan-500 dark:bg-cyan-200 dark:text-cyan-600",
+            sky: "bg-sky-100 text-sky-500 dark:bg-sky-200 dark:text-sky-600",
+            blue: "bg-blue-100 text-blue-500 dark:bg-blue-200 dark:text-blue-600",
+            indigo: "bg-indigo-100 text-indigo-500 dark:bg-indigo-200 dark:text-indigo-600",
+            violet: "bg-violet-100 text-violet-500 dark:bg-violet-200 dark:text-violet-600",
+            purple: "bg-purple-100 text-purple-500 dark:bg-purple-200 dark:text-purple-600",
+            fuchsia: "bg-fuchsia-100 text-fuchsia-500 dark:bg-fuchsia-200 dark:text-fuchsia-600",
+            pink: "bg-pink-100 text-pink-500 dark:bg-pink-200 dark:text-pink-600",
+            rose: "bg-rose-100 text-rose-500 dark:bg-rose-200 dark:text-rose-600"
         },
         listContent: {
             true: ""
@@ -73,8 +71,8 @@ export const alert = tv({
         },
         {
             listContent: true,
-            color: "dark",
-            class: "bg-dark-soft border border-dark-subtle"
+            color: "gray",
+            class: "bg-neutral-secondary-medium border border-default-medium"
         },
         {
             border: true,
@@ -98,8 +96,8 @@ export const alert = tv({
         },
         {
             border: true,
-            color: "dark",
-            class: "border-dark-subtle"
+            color: "gray",
+            class: "border-default-medium"
         },
         {
             borderAccent: true,
@@ -123,8 +121,103 @@ export const alert = tv({
         },
         {
             borderAccent: true,
-            color: "dark",
-            class: "border-dark-subtle"
+            color: "gray",
+            class: "border-default-medium"
+        },
+        {
+            border: true,
+            color: "primary",
+            class: "border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200"
+        },
+        {
+            border: true,
+            color: "secondary",
+            class: "border-secondary-500 dark:border-secondary-200 divide-secondary-500 dark:divide-secondary-200"
+        },
+        {
+            border: true,
+            color: "red",
+            class: "border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800"
+        },
+        {
+            border: true,
+            color: "orange",
+            class: "border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800"
+        },
+        {
+            border: true,
+            color: "amber",
+            class: "border-amber-300 dark:border-amber-800 divide-amber-300 dark:divide-amber-800"
+        },
+        {
+            border: true,
+            color: "yellow",
+            class: "border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800"
+        },
+        {
+            border: true,
+            color: "lime",
+            class: "border-lime-300 dark:border-lime-800 divide-lime-300 dark:divide-lime-800"
+        },
+        {
+            border: true,
+            color: "green",
+            class: "border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800"
+        },
+        {
+            border: true,
+            color: "emerald",
+            class: "border-emerald-300 dark:border-emerald-800 divide-emerald-300 dark:divide-emerald-800"
+        },
+        {
+            border: true,
+            color: "teal",
+            class: "border-teal-300 dark:border-teal-800 divide-teal-300 dark:divide-teal-800"
+        },
+        {
+            border: true,
+            color: "cyan",
+            class: "border-cyan-300 dark:border-cyan-800 divide-cyan-300 dark:divide-cyan-800"
+        },
+        {
+            border: true,
+            color: "sky",
+            class: "border-sky-300 dark:border-sky-800 divide-sky-300 dark:divide-sky-800"
+        },
+        {
+            border: true,
+            color: "blue",
+            class: "border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800"
+        },
+        {
+            border: true,
+            color: "indigo",
+            class: "border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800"
+        },
+        {
+            border: true,
+            color: "violet",
+            class: "border-violet-300 dark:border-violet-800 divide-violet-300 dark:divide-violet-800"
+        },
+        {
+            border: true,
+            color: "purple",
+            class: "border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800"
+        },
+        {
+            border: true,
+            color: "fuchsia",
+            class: "border-fuchsia-300 dark:border-fuchsia-800 divide-fuchsia-300 dark:divide-fuchsia-800"
+        },
+        {
+            border: true,
+            color: "pink",
+            class: "border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800"
+        },
+        {
+            border: true,
+            color: "rose",
+            class: "border-rose-300 dark:border-rose-800 divide-rose-300 dark:divide-rose-800"
         }
     ],
     defaultVariants: {

package/dist/avatar/Avatar.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import { type AvatarProps } from "..";
   import Indicator from "../indicator/Indicator.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
 
@@ -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#L238)
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L252)
 ## Props
 @prop children
 @prop indicator