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

package/dist/buttons/theme.d.ts

@@ -1,6 +1,16 @@
 import { type VariantProps } from "tailwind-variants";
 export type ButtonVariants = VariantProps<typeof button>;
 export type GradientButtonVariants = VariantProps<typeof gradientButton>;
+/**
+ * Button component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="button" - Applied to the root button element
+ * - data-part="base" - The main button element (matches 'base' slot)
+ * - data-part="spinner" - The loading spinner element (matches 'spinner' slot)
+ *
+ * The 'outline' and 'shadow' slots are styling modifiers applied to the base element.
+ */
 export declare const button: import("tailwind-variants").TVReturnType<{
     color: {
         brand: {
@@ -43,102 +53,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
             outline: string;
             shadow: string;
         };
-        primary: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        light: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        secondary: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        red: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        orange: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        amber: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        yellow: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        lime: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        green: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        emerald: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        teal: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        cyan: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        sky: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        blue: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        indigo: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        violet: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        purple: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        fuchsia: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        pink: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        rose: {
+        ghost: {
             base: string;
             outline: string;
             shadow: string;
@@ -214,102 +129,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
             outline: string;
             shadow: string;
         };
-        primary: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        light: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        secondary: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        red: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        orange: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        amber: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        yellow: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        lime: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        green: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        emerald: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        teal: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        cyan: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        sky: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        blue: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        indigo: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        violet: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        purple: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        fuchsia: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        pink: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        rose: {
+        ghost: {
             base: string;
             outline: string;
             shadow: string;
@@ -385,102 +205,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
             outline: string;
             shadow: string;
         };
-        primary: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        light: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        secondary: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        red: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        orange: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        amber: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        yellow: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        lime: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        green: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        emerald: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        teal: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        cyan: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        sky: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        blue: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        indigo: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        violet: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        purple: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        fuchsia: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        pink: {
-            base: string;
-            outline: string;
-            shadow: string;
-        };
-        rose: {
+        ghost: {
             base: string;
             outline: string;
             shadow: string;
@@ -515,6 +240,14 @@ export declare const button: import("tailwind-variants").TVReturnType<{
     shadow: string;
     spinner: string;
 }, undefined, unknown, unknown, undefined>>;
+/**
+ * Gradient Button component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="button" - Applied to the root button element
+ * - data-part="base" - The main button element (matches 'base' slot)
+ * - data-part="outlineWrapper" - The wrapper for outline variants (matches 'outlineWrapper' slot)
+ */
 export declare const gradientButton: import("tailwind-variants").TVReturnType<{
     color: {
         blue: {

package/dist/buttons/theme.js

@@ -1,7 +1,17 @@
 import { tv } from "tailwind-variants";
+/**
+ * Button component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="button" - Applied to the root button element
+ * - data-part="base" - The main button element (matches 'base' slot)
+ * - data-part="spinner" - The loading spinner element (matches 'spinner' slot)
+ *
+ * The 'outline' and 'shadow' slots are styling modifiers applied to the base element.
+ */
 export const button = tv({
     slots: {
-        base: "text-center font-medium inline-flex items-center justify-center shadow-xs leading-5 focus:outline-none focus:ring-4",
+        base: "text-center font-medium inline-flex items-center justify-center shadow-xs leading-5 focus:outline-none focus:ring-4 text-sm px-4 py-2.5",
         outline: "bg-transparent border focus:ring-4",
         shadow: "shadow-lg",
         spinner: "ms-2"
@@ -9,145 +19,49 @@ export const button = tv({
     variants: {
         color: {
             brand: {
-                base: "text-white bg-brand border border-transparent enabled:hover:bg-brand-strong focus:ring-brand-medium font-medium text-sm px-4 py-2.5",
+                base: "text-white bg-brand border border-transparent enabled:hover:bg-brand-strong focus:ring-brand-medium",
                 outline: "text-fg-brand bg-neutral-primary border border-brand enabled:hover:bg-brand enabled:hover:text-white focus:ring-brand-subtle",
                 shadow: "shadow-brand-500/50 dark:shadow-brand-800/80"
             },
             alternative: {
-                base: "text-body bg-neutral-secondary-medium border border-default-medium enabled:hover:bg-neutral-tertiary-medium enabled:hover:text-heading focus:ring-neutral-tertiary font-medium text-sm px-4 py-2.5",
+                base: "text-body bg-neutral-secondary-medium border border-default-medium enabled:hover:bg-neutral-tertiary-medium enabled:hover:text-heading focus:ring-neutral-tertiary",
                 outline: "text-body bg-neutral-primary border border-default-medium enabled:hover:bg-neutral-secondary-medium enabled:hover:text-heading focus:ring-neutral-tertiary",
                 shadow: "shadow-gray-500/50 dark:shadow-gray-800/80"
             },
             gray: {
-                base: "text-body bg-neutral-primary-soft border border-default enabled:hover:bg-neutral-secondary-medium enabled:hover:text-heading focus:ring-neutral-tertiary-soft font-medium text-sm px-4 py-2.5",
+                base: "text-body bg-neutral-primary-soft border border-default enabled:hover:bg-neutral-secondary-medium enabled:hover:text-heading focus:ring-neutral-tertiary-soft",
                 outline: "text-body bg-neutral-primary border border-default enabled:hover:bg-neutral-secondary-soft enabled:hover:text-heading focus:ring-neutral-tertiary",
                 shadow: "shadow-gray-500/50 dark:shadow-gray-800/80"
             },
             success: {
-                base: "text-white bg-success border border-transparent enabled:hover:bg-success-strong focus:ring-success-medium font-medium text-sm px-4 py-2.5",
+                base: "text-white bg-success border border-transparent enabled:hover:bg-success-strong focus:ring-success-medium",
                 outline: "text-success bg-neutral-primary border border-success enabled:hover:bg-success enabled:hover:text-white focus:ring-success-subtle",
                 shadow: "shadow-green-500/50 dark:shadow-green-800/80"
             },
             danger: {
-                base: "text-white bg-danger border border-transparent enabled:hover:bg-danger-strong focus:ring-danger-medium font-medium text-sm px-4 py-2.5",
+                base: "text-white bg-danger border border-transparent enabled:hover:bg-danger-strong focus:ring-danger-medium",
                 outline: "text-danger bg-neutral-primary border border-danger enabled:hover:bg-danger enabled:hover:text-white focus:ring-danger-subtle",
                 shadow: "shadow-red-500/50 dark:shadow-red-800/80"
             },
             warning: {
-                base: "text-white bg-warning border border-transparent enabled:hover:bg-warning-strong focus:ring-warning-medium font-medium text-sm px-4 py-2.5",
+                base: "text-white bg-warning border border-transparent enabled:hover:bg-warning-strong focus:ring-warning-medium",
                 outline: "text-warning bg-neutral-primary border border-warning enabled:hover:bg-warning enabled:hover:text-white focus:ring-warning-subtle",
                 shadow: "shadow-yellow-500/50 dark:shadow-yellow-800/80"
             },
             transparent: {
-                base: "text-heading bg-transparent border border-transparent enabled:hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary font-medium text-sm px-4 py-2.5",
+                base: "text-heading bg-transparent border border-transparent enabled:hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary",
                 outline: "text-heading bg-transparent border border-default enabled:hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary",
                 shadow: "shadow-gray-500/50 dark:shadow-gray-800/80"
             },
             dark: {
-                base: "text-white bg-dark border border-transparent enabled:hover:bg-dark-strong focus:ring-neutral-tertiary font-medium text-sm px-4 py-2.5",
+                base: "text-white bg-dark border border-transparent enabled:hover:bg-dark-strong focus:ring-neutral-tertiary",
                 outline: "text-dark bg-neutral-primary border border-dark enabled:hover:bg-dark enabled:hover:text-white focus:ring-neutral-tertiary",
                 shadow: "shadow-gray-500/50 dark:shadow-gray-800/80"
             },
-            // legacy colors
-            primary: {
-                base: "text-white bg-primary-700 enabled:hover:bg-primary-800 dark:bg-primary-600 dark:enabled:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800",
-                outline: "text-primary-700 border-primary-700 enabled:hover:bg-primary-800 dark:border-primary-500 dark:text-primary-500 dark:enabled:hover:bg-primary-600",
-                shadow: "shadow-primary-500/50 dark:shadow-primary-800/80"
-            },
-            light: {
-                base: "text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-600 focus:ring-gray-200 dark:focus:ring-gray-700",
-                outline: "text-gray-700 border-gray-700 enabled:hover:bg-gray-800 dark:border-gray-400 dark:text-gray-400 dark:enabled:hover:bg-gray-500",
-                shadow: "shadow-gray-500/50 dark:shadow-gray-800/80"
-            },
-            secondary: {
-                base: "text-white bg-secondary-700 enabled:hover:bg-secondary-800 dark:bg-secondary-600 dark:enabled:hover:bg-secondary-700 focus:ring-secondary-300 dark:focus:ring-secondary-800",
-                outline: "text-secondary-700 border-secondary-700 enabled:hover:bg-secondary-800 dark:border-secondary-400 dark:text-secondary-400 dark:enabled:hover:bg-secondary-500",
-                shadow: "shadow-secondary-500/50 dark:shadow-secondary-800/80"
-            },
-            red: {
-                base: "text-white bg-red-700 enabled:hover:bg-red-800 dark:bg-red-600 dark:enabled:hover:bg-red-700 focus:ring-red-300 dark:focus:ring-red-900",
-                outline: "text-red-700 border-red-700 enabled:hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:enabled:hover:bg-red-600",
-                shadow: "shadow-red-500/50 dark:shadow-red-800/80"
-            },
-            orange: {
-                base: "text-white bg-orange-700 enabled:hover:bg-orange-800 dark:bg-orange-600 dark:enabled:hover:bg-orange-700 focus:ring-orange-300 dark:focus:ring-orange-900",
-                outline: "text-orange-700 border-orange-700 enabled:hover:bg-orange-800 dark:border-orange-400 dark:text-orange-400 dark:enabled:hover:bg-orange-500",
-                shadow: "shadow-orange-500/50 dark:shadow-orange-800/80"
-            },
-            amber: {
-                base: "text-white bg-amber-700 enabled:hover:bg-amber-800 dark:bg-amber-600 dark:enabled:hover:bg-amber-700 focus:ring-amber-300 dark:focus:ring-amber-900",
-                outline: "text-amber-700 border-amber-700 enabled:hover:bg-amber-800 dark:border-amber-400 dark:text-amber-400 dark:enabled:hover:bg-amber-500",
-                shadow: "shadow-amber-500/50 dark:shadow-amber-800/80"
-            },
-            yellow: {
-                base: "text-white bg-yellow-400 enabled:hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900",
-                outline: "text-yellow-400 border-yellow-400 enabled:hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:enabled:hover:bg-yellow-400",
-                shadow: "shadow-yellow-500/50 dark:shadow-yellow-800/80"
-            },
-            lime: {
-                base: "text-white bg-lime-700 enabled:hover:bg-lime-800 dark:bg-lime-600 dark:enabled:hover:bg-lime-700 focus:ring-lime-300 dark:focus:ring-lime-800",
-                outline: "text-lime-700 border-lime-700 enabled:hover:bg-lime-800 dark:border-lime-400 dark:text-lime-400 dark:enabled:hover:bg-lime-500",
-                shadow: "shadow-lime-500/50 dark:shadow-lime-800/80"
-            },
-            green: {
-                base: "text-white bg-green-700 enabled:hover:bg-green-800 dark:bg-green-600 dark:enabled:hover:bg-green-700 focus:ring-green-300 dark:focus:ring-green-800",
-                outline: "text-green-700 border-green-700 enabled:hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:enabled:hover:bg-green-600",
-                shadow: "shadow-green-500/50 dark:shadow-green-800/80"
-            },
-            emerald: {
-                base: "text-white bg-emerald-700 enabled:hover:bg-emerald-800 dark:bg-emerald-600 dark:enabled:hover:bg-emerald-700 focus:ring-emerald-300 dark:focus:ring-emerald-800",
-                outline: "text-emerald-700 border-emerald-700 enabled:hover:bg-emerald-800 dark:border-emerald-400 dark:text-emerald-400 dark:enabled:hover:bg-emerald-500",
-                shadow: "shadow-emerald-500/50 dark:shadow-emerald-800/80"
-            },
-            teal: {
-                base: "text-white bg-teal-700 enabled:hover:bg-teal-800 dark:bg-teal-600 dark:enabled:hover:bg-teal-700 focus:ring-teal-300 dark:focus:ring-teal-800",
-                outline: "text-teal-700 border-teal-700 enabled:hover:bg-teal-800 dark:border-teal-400 dark:text-teal-400 dark:enabled:hover:bg-teal-500",
-                shadow: "shadow-teal-500/50 dark:shadow-teal-800/80"
-            },
-            cyan: {
-                base: "text-white bg-cyan-700 enabled:hover:bg-cyan-800 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 focus:ring-cyan-300 dark:focus:ring-cyan-800",
-                outline: "text-cyan-700 border-cyan-700 enabled:hover:bg-cyan-800 dark:border-cyan-400 dark:text-cyan-400 dark:enabled:hover:bg-cyan-500",
-                shadow: "shadow-cyan-500/50 dark:shadow-cyan-800/80"
-            },
-            sky: {
-                base: "text-white bg-sky-700 enabled:hover:bg-sky-800 dark:bg-sky-600 dark:enabled:hover:bg-sky-700 focus:ring-sky-300 dark:focus:ring-sky-800",
-                outline: "text-sky-700 border-sky-700 enabled:hover:bg-sky-800 dark:border-sky-400 dark:text-sky-400 dark:enabled:hover:bg-sky-500",
-                shadow: "shadow-sky-500/50 dark:shadow-sky-800/80"
-            },
-            blue: {
-                base: "text-white bg-blue-700 enabled:hover:bg-blue-800 dark:bg-blue-600 dark:enabled:hover:bg-blue-700 focus:ring-blue-300 dark:focus:ring-blue-800",
-                outline: "text-blue-700 border-blue-700 enabled:hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:enabled:hover:bg-blue-500",
-                shadow: "shadow-blue-500/50 dark:shadow-blue-800/80"
-            },
-            indigo: {
-                base: "text-white bg-indigo-700 enabled:hover:bg-indigo-800 dark:bg-indigo-600 dark:enabled:hover:bg-indigo-700 focus:ring-indigo-300 dark:focus:ring-indigo-800",
-                outline: "text-indigo-700 border-indigo-700 enabled:hover:bg-indigo-800 dark:border-indigo-400 dark:text-indigo-400 dark:enabled:hover:bg-indigo-500",
-                shadow: "shadow-indigo-500/50 dark:shadow-indigo-800/80"
-            },
-            violet: {
-                base: "text-white bg-violet-700 enabled:hover:bg-violet-800 dark:bg-violet-600 dark:enabled:hover:bg-violet-700 focus:ring-violet-300 dark:focus:ring-violet-800",
-                outline: "text-violet-700 border-violet-700 enabled:hover:bg-violet-800 dark:border-violet-400 dark:text-violet-400 dark:enabled:hover:bg-violet-500",
-                shadow: "shadow-violet-500/50 dark:shadow-violet-800/80"
-            },
-            purple: {
-                base: "text-white bg-purple-700 enabled:hover:bg-purple-800 dark:bg-purple-600 dark:enabled:hover:bg-purple-700 focus:ring-purple-300 dark:focus:ring-purple-800",
-                outline: "text-purple-700 border-purple-700 enabled:hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:enabled:hover:bg-purple-500",
-                shadow: "shadow-purple-500/50 dark:shadow-purple-800/80"
-            },
-            fuchsia: {
-                base: "text-white bg-fuchsia-700 enabled:hover:bg-fuchsia-800 dark:bg-fuchsia-600 dark:enabled:hover:bg-fuchsia-700 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-800",
-                outline: "text-fuchsia-700 border-fuchsia-700 enabled:hover:bg-fuchsia-800 dark:border-fuchsia-400 dark:text-fuchsia-400 dark:enabled:hover:bg-fuchsia-500",
-                shadow: "shadow-fuchsia-500/50 dark:shadow-fuchsia-800/80"
-            },
-            pink: {
-                base: "text-white bg-pink-700 enabled:hover:bg-pink-800 dark:bg-pink-600 dark:enabled:hover:bg-pink-700 focus:ring-pink-300 dark:focus:ring-pink-800",
-                outline: "text-pink-700 border-pink-700 enabled:hover:bg-pink-800 dark:border-pink-400 dark:text-pink-400 dark:enabled:hover:bg-pink-500",
-                shadow: "shadow-pink-500/50 dark:shadow-pink-800/80"
-            },
-            rose: {
-                base: "text-white bg-rose-700 enabled:hover:bg-rose-800 dark:bg-rose-600 dark:enabled:hover:bg-rose-700 focus:ring-rose-300 dark:focus:ring-rose-800",
-                outline: "text-rose-700 border-rose-700 enabled:hover:bg-rose-800 dark:border-rose-400 dark:text-rose-400 dark:enabled:hover:bg-rose-500",
-                shadow: "shadow-rose-500/50 dark:shadow-rose-800/80"
+            ghost: {
+                base: "text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary focus:outline-none",
+                outline: "",
+                shadow: ""
             }
         },
         size: {
@@ -179,6 +93,14 @@ export const button = tv({
         pill: false
     }
 });
+/**
+ * Gradient Button component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="button" - Applied to the root button element
+ * - data-part="base" - The main button element (matches 'base' slot)
+ * - data-part="outlineWrapper" - The wrapper for outline variants (matches 'outlineWrapper' slot)
+ */
 export const gradientButton = tv({
     slots: {
         base: "inline-flex items-center justify-center transition-all duration-75 ease-in text-white bg-linear-to-r ",

package/dist/card/Card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { CardProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { card } from "./theme";
 
@@ -29,6 +29,7 @@
       src={img}
       alt={imgAlt || ""}
       loading="lazy"
+      data-part="image"
       onerror={(e) => {
         const target = e.currentTarget as HTMLImageElement;
         if (target) {
@@ -43,11 +44,11 @@
 {/snippet}
 
 {#if restProps.href === undefined}
-  <div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div {...restProps} class={base({ class: clsx(theme?.base, className) })} data-scope="card" data-part="base">
     {@render childSlot()}
   </div>
 {:else}
-  <a {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <a {...restProps} class={base({ class: clsx(theme?.base, className) })} data-scope="card" data-part="base">
     {@render childSlot()}
   </a>
 {/if}
@@ -56,7 +57,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
+[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L465)
 ## Props
 @prop children
 @prop hoverable = false

package/dist/card/Card.svelte.d.ts

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

package/dist/card/theme.d.ts

@@ -1,6 +1,14 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 export type CardVariants = VariantProps<typeof card> & Classes<typeof card>;
+/**
+ * Card component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="card" - Applied to the root card element
+ * - data-part="base" - The main card container (div or a tag) (matches 'base' slot)
+ * - data-part="image" - The card image element (matches 'image' slot)
+ */
 export declare const card: import("tailwind-variants").TVReturnType<{
     hoverable: {
         true: {

package/dist/card/theme.js

@@ -1,4 +1,12 @@
 import { tv } from "tailwind-variants";
+/**
+ * Card component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="card" - Applied to the root card element
+ * - data-part="base" - The main card container (div or a tag) (matches 'base' slot)
+ * - data-part="image" - The card image element (matches 'image' slot)
+ */
 export const card = tv({
     slots: {
         base: "w-full flex max-w-sm bg-neutral-primary-soft border border-default rounded-base",

package/dist/carousel/Carousel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { type CarouselProps, type CarouselContextType } from "..";
   import Slide from "./Slide.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { onMount } from "svelte";
   import { setCarouselContext } from "../context";
@@ -198,12 +198,14 @@
   tabindex="0"
   {...restProps}
   class={base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme?.base, className) })}
+  data-scope="carousel"
+  data-part="base"
   {@attach loop}
 >
   {#if slide}
     {@render slide({ index: _state.index, Slide })}
   {:else}
-    <Slide image={images[_state.index]} fit={slideFit} class={slideCls({ class: clsx(theme?.slide, styling?.slide) })} {transition} />
+    <Slide image={images[_state.index]} fit={slideFit} class={slideCls({ class: clsx(theme?.slide, styling?.slide) })} {transition} data-part="slide" />
   {/if}
 
   {@render children?.(_state.index)}
@@ -213,7 +215,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L466)
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L473)
 ## Props
 @prop children
 @prop slide

package/dist/carousel/Carousel.svelte.d.ts

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