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

package/dist/carousel/CarouselIndicators.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IndicatorsProps } from "..";
   import Indicator from "../indicator/Indicator.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { getCarouselContext } from "../context";
   import { carouselIndicators } from "./theme";
@@ -20,14 +20,14 @@
 </script>
 
 {#if _state}
-  <div class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+  <div class={base({ class: clsx(theme?.base, className) })} data-scope="carousel-indicators" data-part="base" {...restProps}>
     {#each _state.images as _, idx (idx)}
       {@const selected = _state.index === idx}
-      <button type="button" onclick={() => goToIndex(idx)} aria-current={selected ? "true" : undefined} aria-label={`Go to slide ${idx + 1}`}>
+      <button type="button" onclick={() => goToIndex(idx)} aria-current={selected ? "true" : undefined} aria-label={`Go to slide ${idx + 1}`} data-part="button">
         {#if children}
           {@render children({ selected, index: idx })}
         {:else}
-          <Indicator class={indicator({ selected, class: clsx(theme?.indicator, selected ? styling?.active : styling?.inactive) })} />
+          <Indicator class={indicator({ selected, class: clsx(theme?.indicator, selected ? styling?.active : styling?.inactive) })} data-part="indicator" />
         {/if}
       </button>
     {/each}
@@ -38,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
 ## Props
 @prop children
 @prop position = "bottom"

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

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

package/dist/carousel/ControlButton.svelte

@@ -2,7 +2,7 @@
   import { controlButton } from "./theme";
   import clsx from "clsx";
   import type { ControlButtonProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, forward, name, class: className, classes, ...restProps }: ControlButtonProps = $props();
 
@@ -12,17 +12,17 @@
   const theme = $derived(getTheme("controlButton"));
 </script>
 
-<button type="button" class={base({ class: clsx(className, theme?.base) })} {...restProps}>
+<button type="button" class={base({ class: clsx(className, theme?.base) })} data-scope="control-button" data-part="base" {...restProps}>
   {#if children}
     {@render children()}
   {:else}
-    <span class={span({ class: clsx(theme?.span, styling?.span) })}>
+    <span class={span({ class: clsx(theme?.span, styling?.span) })} data-part="icon">
       {#if forward}
-        <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-part="svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
       {:else}
-        <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-part="svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
         </svg>
       {/if}
@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L494)
 ## Props
 @prop children
 @prop forward

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

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

package/dist/carousel/Controls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ControlsProps } from "..";
   import ControlButton from "./ControlButton.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { getCarouselContext } from "../context";
 
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L493)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L500)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/carousel/Slide.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { SlideProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { getCarouselContext } from "../context";
   import { fly } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { slide } from "./theme";
 
   const _state = getCarouselContext();
@@ -12,12 +13,15 @@
 
   const theme = $derived(getTheme("slide"));
 
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
   let transitionSlideIn = $derived({
     x: _state?.forward ? "100%" : "-100%",
     opacity: 1,
     width: "100%",
     height: "100%",
-    duration: _state?.slideDuration ?? 1000
+    duration: isBrowser && prefersReducedMotion.current ? 0 : (_state?.slideDuration ?? 1000)
   });
 
   let transitionSlideOut = $derived({
@@ -25,7 +29,7 @@
     opacity: 0.9,
     width: "100%",
     height: "100%",
-    duration: _state?.slideDuration ?? 1000
+    duration: isBrowser && prefersReducedMotion.current ? 0 : (_state?.slideDuration ?? 1000)
   });
 
   let imgClass = $derived(slide({ fit, class: clsx(theme, className) }));
@@ -33,11 +37,11 @@
 
 {#if transition}
   {#key image}
-    <img alt="..." {...image} transition:transition={{}} {...restProps} class={imgClass} />
+    <img alt="..." {...image} transition:transition={{}} {...restProps} class={imgClass} data-scope="slide" data-part="image" />
   {/key}
 {:else}
   {#key image}
-    <img alt="..." {...image} {...restProps} out:fly={transitionSlideOut} in:fly={transitionSlideIn} class={imgClass} />
+    <img alt="..." {...image} {...restProps} out:fly={transitionSlideOut} in:fly={transitionSlideIn} class={imgClass} data-scope="slide" data-part="image" />
   {/key}
 {/if}
 
@@ -45,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L509)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L516)
 ## Props
 @prop image
 @prop transition

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

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

package/dist/carousel/Thumbnail.svelte

@@ -2,20 +2,20 @@
   import { thumbnail } from "./theme";
   import type { ThumbnailProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
 
   const theme = $derived(getTheme("thumbnail"));
 </script>
 
-<img {...restProps} class={thumbnail({ selected, class: clsx(theme, className) })} />
+<img {...restProps} class={thumbnail({ selected, class: clsx(theme, className) })} data-scope="thumbnail" data-part="image" />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L497)
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L504)
 ## Props
 @prop selected
 @prop class: className

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

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

package/dist/carousel/Thumbnails.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ThumbnailsProps } from "..";
   import Thumbnail from "./Thumbnail.svelte";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import clsx from "clsx";
   import { thumbnails } from "./theme";
 
@@ -31,10 +31,10 @@
   });
 </script>
 
-<div class={clsx(thumbnails().base(), theme?.base, className)}>
+<div class={clsx(thumbnails().base(), theme?.base, className)} data-scope="thumbnails" data-part="base">
   {#each images as image, idx (image.src || idx)}
     {@const selected = index === idx}
-    <button onclick={() => btnClick(idx)} aria-label={ariaLabel} aria-current={selected ? "true" : undefined}>
+    <button onclick={() => btnClick(idx)} aria-label={ariaLabel} aria-current={selected ? "true" : undefined} data-part="button">
       {#if children}
         {@render children({ image, selected, imgClass: clsx(theme?.img, styling?.img), Thumbnail })}
       {:else}
@@ -48,7 +48,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L501)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L508)
 ## Props
 @prop children
 @prop images = []

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

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

package/dist/carousel/theme.d.ts

@@ -1,9 +1,17 @@
-import type { Classes } from "../theme/themeUtils";
+import type { Classes } from "../theme-provider/themeUtils";
 import { type VariantProps } from "tailwind-variants";
 export type CarouselVariants = VariantProps<typeof carousel> & Classes<typeof carousel>;
 export type CarouselIndicatorsVariants = VariantProps<typeof carouselIndicators> & Classes<typeof carouselIndicators>;
 export type ControlButtonVariants = VariantProps<typeof controlButton> & Classes<typeof controlButton>;
 export type ThumbnailsVariants = VariantProps<typeof thumbnails> & Classes<typeof thumbnails>;
+/**
+ * Carousel component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="carousel" - Applied to the root carousel container
+ * - data-part="base" - The main carousel container (matches 'base' slot)
+ * - data-part="slide" - The slide element (matches 'slide' slot)
+ */
 export declare const carousel: import("tailwind-variants").TVReturnType<{}, {
     base: string;
     slide: string;
@@ -14,6 +22,15 @@ export declare const carousel: import("tailwind-variants").TVReturnType<{}, {
     base: string;
     slide: string;
 }, undefined, unknown, unknown, undefined>>;
+/**
+ * Carousel Indicators component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="carousel-indicators" - Applied to the indicators container
+ * - data-part="base" - The indicators container (matches 'base' slot)
+ * - data-part="button" - Each indicator button
+ * - data-part="indicator" - The indicator visual element (matches 'indicator' slot)
+ */
 export declare const carouselIndicators: import("tailwind-variants").TVReturnType<{
     selected: {
         true: {
@@ -81,6 +98,15 @@ export declare const carouselIndicators: import("tailwind-variants").TVReturnTyp
     active: string;
     inactive: string;
 }, undefined, unknown, unknown, undefined>>;
+/**
+ * Control Button component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="control-button" - Applied to the control button
+ * - data-part="base" - The button element (matches 'base' slot)
+ * - data-part="icon" - The icon container span (matches 'span' slot)
+ * - data-part="svg" - The SVG icon element
+ */
 export declare const controlButton: import("tailwind-variants").TVReturnType<{
     forward: {
         true: string;
@@ -106,6 +132,15 @@ export declare const controlButton: import("tailwind-variants").TVReturnType<{
     base: string;
     span: string;
 }, undefined, unknown, unknown, undefined>>;
+/**
+ * Thumbnails component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="thumbnails" - Applied to the thumbnails container
+ * - data-part="base" - The thumbnails container (matches 'base' slot)
+ * - data-part="button" - Each thumbnail button
+ * - data-part="img" - Thumbnail images (matches 'img' slot)
+ */
 export declare const thumbnails: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
@@ -137,6 +172,13 @@ export declare const thumbnails: import("tailwind-variants").TVReturnType<{
     base: string;
     img: string;
 }, undefined, unknown, unknown, undefined>>;
+/**
+ * Thumbnail component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="thumbnail" - Applied to the thumbnail image
+ * - data-part="image" - The thumbnail image element
+ */
 export declare const thumbnail: import("tailwind-variants").TVReturnType<{
     selected: {
         true: string;
@@ -154,6 +196,13 @@ export declare const thumbnail: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "", unknown, unknown, undefined>>;
 export type SlideVariants = VariantProps<typeof slide>;
+/**
+ * Slide component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="slide" - Applied to the slide image
+ * - data-part="image" - The slide image element
+ */
 export declare const slide: import("tailwind-variants").TVReturnType<{
     fit: {
         contain: string;

package/dist/carousel/theme.js

@@ -1,4 +1,12 @@
 import { tv } from "tailwind-variants";
+/**
+ * Carousel component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="carousel" - Applied to the root carousel container
+ * - data-part="base" - The main carousel container (matches 'base' slot)
+ * - data-part="slide" - The slide element (matches 'slide' slot)
+ */
 export const carousel = tv({
     slots: {
         base: "grid overflow-hidden relative rounded-base h-56 sm:h-64 xl:h-80 2xl:h-96",
@@ -8,6 +16,15 @@ export const carousel = tv({
     compoundVariants: [],
     defaultVariants: {}
 });
+/**
+ * Carousel Indicators component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="carousel-indicators" - Applied to the indicators container
+ * - data-part="base" - The indicators container (matches 'base' slot)
+ * - data-part="button" - Each indicator button
+ * - data-part="indicator" - The indicator visual element (matches 'indicator' slot)
+ */
 export const carouselIndicators = tv({
     slots: {
         base: "absolute start-1/2 z-30 flex -translate-x-1/2 space-x-3 rtl:translate-x-1/2 rtl:space-x-reverse",
@@ -26,6 +43,15 @@ export const carouselIndicators = tv({
         }
     }
 });
+/**
+ * Control Button component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="control-button" - Applied to the control button
+ * - data-part="base" - The button element (matches 'base' slot)
+ * - data-part="icon" - The icon container span (matches 'span' slot)
+ * - data-part="svg" - The SVG icon element
+ */
 export const controlButton = tv({
     slots: {
         base: "flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300",
@@ -38,12 +64,28 @@ export const controlButton = tv({
         }
     }
 });
+/**
+ * Thumbnails component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="thumbnails" - Applied to the thumbnails container
+ * - data-part="base" - The thumbnails container (matches 'base' slot)
+ * - data-part="button" - Each thumbnail button
+ * - data-part="img" - Thumbnail images (matches 'img' slot)
+ */
 export const thumbnails = tv({
     slots: {
         base: "flex flex-row justify-center bg-gray-100 w-full",
         img: ""
     }
 });
+/**
+ * Thumbnail component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="thumbnail" - Applied to the thumbnail image
+ * - data-part="image" - The thumbnail image element
+ */
 export const thumbnail = tv({
     base: "",
     variants: {
@@ -56,6 +98,13 @@ export const thumbnail = tv({
         selected: false
     }
 });
+/**
+ * Slide component theme
+ *
+ * Anatomical Selectors:
+ * - data-scope="slide" - Applied to the slide image
+ * - data-part="image" - The slide image element
+ */
 export const slide = tv({
     base: "absolute block w-full h-full",
     variants: {

package/dist/clipboard/Clipboard.svelte

@@ -4,7 +4,7 @@
   import type { ClipboardProps } from "..";
   import { clipboard } from "./theme";
   import type { MouseEventHandler } from "svelte/elements";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
 
@@ -38,7 +38,7 @@
   };
 </script>
 
-<Button onclick={copyToClipboard} {...restProps} class={clipboard({ embedded, class: clsx(theme, className) })}>
+<Button data-scope="clipboard" onclick={copyToClipboard} {...restProps} class={clipboard({ embedded, class: clsx(theme, className) })}>
   {@render children?.(success)}
 </Button>
 
@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L521)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L528)
 ## Props
 @prop children
 @prop embedded = false

package/dist/clipboard/Clipboard.svelte.d.ts

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

package/dist/context.d.ts

@@ -1,6 +1,6 @@
 import type { AccordionContextType, BottomNavContextType, CarouselContextType, DrawerContextType, DropdownContextType, PaginationContextType, ButtonToggleContextType, ListContextType, ToolbarContextType, ListGroupContextType, ButtonGroupContextType, NavbarState, NavbarBreakpoint, SidebarContextType, TableContextType, TabsContextType, SpeedCtxType } from "./types";
 import type { SplitPaneContext } from "./types";
-import type { ThemeConfig } from "./theme";
+import type { ThemeConfig } from "./theme-provider";
 declare const getAccordionContext: () => AccordionContextType | undefined, setAccordionContext: (context: AccordionContextType) => AccordionContextType;
 export { getAccordionContext, setAccordionContext };
 declare const getBottomNavContext: () => BottomNavContextType | undefined, setBottomNavContext: (context: BottomNavContextType) => BottomNavContextType;

package/dist/darkmode/DarkMode.svelte

@@ -2,12 +2,16 @@
   import { darkmode } from "./theme";
   import clsx from "clsx";
   import type { DarkmodeProps } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   // const THEME_PREFERENCE_KEY = 'color-theme';
-  let { class: className, lightIcon, darkIcon, size = "sm", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
+  let { class: className, lightIcon, darkIcon, size = "sm", ariaLabel = "Dark mode", classes, ...restProps }: DarkmodeProps = $props();
 
+  const styling = $derived(classes);
   const theme = $derived(getTheme("darkmode"));
+  const { base, icon } = $derived(darkmode({ class: clsx(theme, className) }));
+
+  // const styles = $derived(darkmode({ class: clsx(theme, className) }));
 
   const sizes = {
     sm: "w-4 h-4",
@@ -34,8 +38,8 @@
   </script>
 </svelte:head>
 
-<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={darkmode({ class: clsx(theme, className) })} tabindex={0}>
-  <span class="hidden dark:block">
+<button data-scope="dark-mode" data-part="base" onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={base({ class: clsx(theme?.base, className) })} tabindex={0}>
+  <span data-part="icon" class={icon({ class: clsx(theme?.icon, styling?.icon, "hidden dark:block") })}>
     {#if lightIcon}
       {@render lightIcon()}
     {:else}
@@ -50,7 +54,7 @@
       </svg>
     {/if}
   </span>
-  <span class="block dark:hidden">
+  <span data-part="icon" class={icon({ class: clsx(theme?.icon, styling?.icon, "block dark:hidden") })}>
     {#if darkIcon}
       {@render darkIcon()}
     {:else}
@@ -71,12 +75,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L530)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L537)
 ## Props
 @prop class: className
 @prop lightIcon
 @prop darkIcon
 @prop size = "sm"
 @prop ariaLabel = "Dark mode"
+@prop classes
 @prop ...restProps
 -->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -2,13 +2,14 @@ import type { DarkmodeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L530)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L537)
  * ## Props
  * @prop class: className
  * @prop lightIcon
  * @prop darkIcon
  * @prop size = "sm"
  * @prop ariaLabel = "Dark mode"
+ * @prop classes
  * @prop ...restProps
  */
 declare const DarkMode: import("svelte").Component<DarkmodeProps, {}, "">;

package/dist/darkmode/theme.d.ts

@@ -1 +1,34 @@
-export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2", unknown, unknown, undefined>>;
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme-provider/themeUtils";
+export type DarkmodeVariants = VariantProps<typeof darkmode> & Classes<typeof darkmode>;
+export declare const darkmode: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/darkmode/theme.js

@@ -1,4 +1,7 @@
 import { tv } from "tailwind-variants";
 export const darkmode = tv({
-    base: "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2"
+    slots: {
+        base: "inline-flex hover:text-heading items-center justify-center text-body w-8 h-8 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-base text-sm p-2",
+        icon: ""
+    }
 });