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

package/dist/datepicker/Datepicker.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import clsx from "clsx";
   import type { DatepickerProps } from "..";
   import Button from "../buttons/Button.svelte";
   import ToolbarButton from "../toolbar/ToolbarButton.svelte";
   import { datepicker } from "./theme";
   import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let {
     value = $bindable(),
@@ -394,7 +395,7 @@
     if (!inline) isOpen = false;
   }
 
-  let { base, input, button, titleVariant, actionButtons, columnHeader, polite, grid, nav, dayButton, monthButton } = datepicker();
+  const styles = datepicker();
 </script>
 
 {#snippet navButton(forward: boolean)}
@@ -413,14 +414,15 @@
   </ToolbarButton>
 {/snippet}
 
-<div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
+<div data-scope="datepicker" bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
       <input
+        data-part="input"
         {...inputProps}
         bind:this={inputElement}
         type="text"
-        class={input({ color, class: clsx(theme?.input, styling?.input) })}
+        class={styles.input({ color, class: clsx(theme?.input, styling?.input) })}
         {placeholder}
         value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)}
         onfocus={() => (isOpen = true)}
@@ -432,8 +434,9 @@
         aria-haspopup="dialog"
       />
       <button
+        data-part="trigger"
         type="button"
-        class={button({ class: clsx(theme?.button, styling?.button) })}
+        class={styles.trigger({ class: clsx(theme?.trigger, styling?.trigger) })}
         onclick={() => (isOpen = !isOpen)}
         {disabled}
         aria-label={isOpen ? "Close date picker" : "Open date picker"}
@@ -452,16 +455,24 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline, class: clsx(theme?.base, className) })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div
+      data-part="content"
+      bind:this={calendarRef}
+      id="datepicker-dropdown"
+      class={styles.content({ inline, class: clsx(theme?.content, className) })}
+      transition:fade={{ duration: typeof window !== "undefined" && prefersReducedMotion.current ? 0 : 100 }}
+      role="dialog"
+      aria-label="Calendar"
+    >
       {#if title}
-        <h2 class={titleVariant({ class: clsx(theme?.titleVariant, styling?.titleVariant) })}>{title}</h2>
+        <h2 data-part="title" class={styles.title({ class: clsx(theme?.title, styling?.title) })}>{title}</h2>
       {/if}
 
       {#if showMonthSelector}
         <!-- Month/Year Selector View -->
-        <div class={nav({ class: clsx(theme?.nav, styling?.nav) })}>
+        <div data-part="nav" class={styles.nav({ class: clsx(theme?.nav, styling?.nav) })}>
           {@render yearNavButton(false)}
-          <h3 class={polite({ class: clsx(theme?.polite, styling?.polite) })} aria-live="polite">
+          <h3 data-part="label" class={styles.label({ class: clsx(theme?.label, styling?.label) })} aria-live="polite">
             {currentMonth.getFullYear()}
           </h3>
           {@render yearNavButton(true)}
@@ -469,9 +480,10 @@
         <div class="grid grid-cols-4 gap-2 p-4">
           {#each monthNames as month, index (index)}
             <Button
+              data-part="month-button"
               type="button"
               color={monthColor}
-              class={monthButton({
+              class={styles.monthButton({
                 class: clsx(theme?.monthButton, styling?.monthButton, currentMonth.getMonth() === index ? styling?.monthBtnSelected : styling?.monthBtn)
               })}
               onclick={(event: MouseEvent) => selectMonth(index, event)}
@@ -481,11 +493,12 @@
           {/each}
         </div>
       {:else}
-        <div class={nav({ class: clsx(theme?.nav, styling?.nav) })}>
+        <div data-part="nav" class={styles.nav({ class: clsx(theme?.nav, styling?.nav) })}>
           {@render navButton(false)}
           <Button
+            data-part="label"
             type="button"
-            class={polite({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", theme?.polite, styling?.polite) })}
+            class={styles.label({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", theme?.label, styling?.label) })}
             aria-live="polite"
             onclick={(event: MouseEvent) => toggleMonthSelector(event)}
           >
@@ -493,17 +506,18 @@
           </Button>
           {@render navButton(true)}
         </div>
-        <div class={grid({ class: clsx(theme?.grid, styling?.grid) })} role="grid">
+        <div data-part="grid" class={styles.grid({ class: clsx(theme?.grid, styling?.grid) })} role="grid">
           {#each weekdays as day (day)}
-            <div class={columnHeader({ class: clsx(theme?.columnHeader, styling?.columnHeader) })} role="columnheader">{day}</div>
+            <div data-part="column-header" class={styles.columnHeader({ class: clsx(theme?.columnHeader, styling?.columnHeader) })} role="columnheader">{day}</div>
           {/each}
           {#each daysInMonth as day (day)}
             {@const current = day.getMonth() !== currentMonth.getMonth()}
             {@const available = isDateAvailable(day)}
             <Button
+              data-part="day-button"
               type="button"
-              color={isSelected(day) ? color : "alternative"}
-              class={dayButton({
+              color={isSelected(day) ? color : "brand"}
+              class={styles.dayButton({
                 current,
                 today: isToday(day),
                 color: isInRange(day) ? color : undefined,
@@ -525,7 +539,7 @@
       {/if}
 
       {#if showActionButtons && !showMonthSelector}
-        <div class={actionButtons({ class: clsx(theme?.actionButtons, styling?.actionButtons) })}>
+        <div data-part="action-buttons" class={styles.actionButtons({ class: clsx(theme?.actionButtons, styling?.actionButtons) })}>
           <Button onclick={() => handleDaySelect(new Date())} {color} size="sm" disabled={!isDateAvailable(new Date())}>Today</Button>
           <Button onclick={handleClear} color="danger" size="sm">Clear</Button>
           <Button onclick={handleApply} {color} size="sm">Apply</Button>
@@ -533,7 +547,7 @@
       {/if}
 
       {#if actionSlot}
-        <div class={clsx(theme?.actionSlot, styling?.actionSlot)}>
+        <div data-part="action-slot" class={clsx(theme?.actionSlot, styling?.actionSlot)}>
           {@render actionSlot({
             selectedDate: range ? { from: rangeFrom, to: rangeTo } : value,
             handleClear,

package/dist/datepicker/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 DatepickerVariants = VariantProps<typeof datepicker> & Classes<typeof datepicker>;
 export declare const datepicker: import("tailwind-variants").TVReturnType<{
@@ -35,90 +35,10 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
             input: string;
             dayButton: string;
         };
-        primary: {
-            input: string;
-            dayButton: string;
-        };
-        blue: {
-            input: string;
-            dayButton: string;
-        };
-        red: {
-            input: string;
-            dayButton: string;
-        };
-        green: {
-            input: string;
-            dayButton: string;
-        };
-        yellow: {
-            input: string;
-            dayButton: string;
-        };
-        purple: {
-            input: string;
-            dayButton: string;
-        };
-        light: {
-            input: string;
-            dayButton: string;
-        };
-        secondary: {
-            input: string;
-            dayButton: string;
-        };
-        orange: {
-            input: string;
-            dayButton: string;
-        };
-        amber: {
-            input: string;
-            dayButton: string;
-        };
-        lime: {
-            input: string;
-            dayButton: string;
-        };
-        emerald: {
-            input: string;
-            dayButton: string;
-        };
-        teal: {
-            input: string;
-            dayButton: string;
-        };
-        cyan: {
-            input: string;
-            dayButton: string;
-        };
-        sky: {
-            input: string;
-            dayButton: string;
-        };
-        indigo: {
-            input: string;
-            dayButton: string;
-        };
-        violet: {
-            input: string;
-            dayButton: string;
-        };
-        fuchsia: {
-            input: string;
-            dayButton: string;
-        };
-        pink: {
-            input: string;
-            dayButton: string;
-        };
-        rose: {
-            input: string;
-            dayButton: string;
-        };
     };
     inline: {
         false: {
-            base: string;
+            content: string;
         };
     };
     current: {
@@ -137,11 +57,11 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
-    base: string;
+    content: string;
     input: string;
-    titleVariant: string;
-    polite: string;
-    button: string;
+    title: string;
+    label: string;
+    trigger: string;
     actionButtons: string;
     columnHeader: string;
     grid: string;
@@ -185,90 +105,10 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
             input: string;
             dayButton: string;
         };
-        primary: {
-            input: string;
-            dayButton: string;
-        };
-        blue: {
-            input: string;
-            dayButton: string;
-        };
-        red: {
-            input: string;
-            dayButton: string;
-        };
-        green: {
-            input: string;
-            dayButton: string;
-        };
-        yellow: {
-            input: string;
-            dayButton: string;
-        };
-        purple: {
-            input: string;
-            dayButton: string;
-        };
-        light: {
-            input: string;
-            dayButton: string;
-        };
-        secondary: {
-            input: string;
-            dayButton: string;
-        };
-        orange: {
-            input: string;
-            dayButton: string;
-        };
-        amber: {
-            input: string;
-            dayButton: string;
-        };
-        lime: {
-            input: string;
-            dayButton: string;
-        };
-        emerald: {
-            input: string;
-            dayButton: string;
-        };
-        teal: {
-            input: string;
-            dayButton: string;
-        };
-        cyan: {
-            input: string;
-            dayButton: string;
-        };
-        sky: {
-            input: string;
-            dayButton: string;
-        };
-        indigo: {
-            input: string;
-            dayButton: string;
-        };
-        violet: {
-            input: string;
-            dayButton: string;
-        };
-        fuchsia: {
-            input: string;
-            dayButton: string;
-        };
-        pink: {
-            input: string;
-            dayButton: string;
-        };
-        rose: {
-            input: string;
-            dayButton: string;
-        };
     };
     inline: {
         false: {
-            base: string;
+            content: string;
         };
     };
     current: {
@@ -287,11 +127,11 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
-    base: string;
+    content: string;
     input: string;
-    titleVariant: string;
-    polite: string;
-    button: string;
+    title: string;
+    label: string;
+    trigger: string;
     actionButtons: string;
     columnHeader: string;
     grid: string;
@@ -335,90 +175,10 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
             input: string;
             dayButton: string;
         };
-        primary: {
-            input: string;
-            dayButton: string;
-        };
-        blue: {
-            input: string;
-            dayButton: string;
-        };
-        red: {
-            input: string;
-            dayButton: string;
-        };
-        green: {
-            input: string;
-            dayButton: string;
-        };
-        yellow: {
-            input: string;
-            dayButton: string;
-        };
-        purple: {
-            input: string;
-            dayButton: string;
-        };
-        light: {
-            input: string;
-            dayButton: string;
-        };
-        secondary: {
-            input: string;
-            dayButton: string;
-        };
-        orange: {
-            input: string;
-            dayButton: string;
-        };
-        amber: {
-            input: string;
-            dayButton: string;
-        };
-        lime: {
-            input: string;
-            dayButton: string;
-        };
-        emerald: {
-            input: string;
-            dayButton: string;
-        };
-        teal: {
-            input: string;
-            dayButton: string;
-        };
-        cyan: {
-            input: string;
-            dayButton: string;
-        };
-        sky: {
-            input: string;
-            dayButton: string;
-        };
-        indigo: {
-            input: string;
-            dayButton: string;
-        };
-        violet: {
-            input: string;
-            dayButton: string;
-        };
-        fuchsia: {
-            input: string;
-            dayButton: string;
-        };
-        pink: {
-            input: string;
-            dayButton: string;
-        };
-        rose: {
-            input: string;
-            dayButton: string;
-        };
     };
     inline: {
         false: {
-            base: string;
+            content: string;
         };
     };
     current: {
@@ -437,11 +197,11 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
-    base: string;
+    content: string;
     input: string;
-    titleVariant: string;
-    polite: string;
-    button: string;
+    title: string;
+    label: string;
+    trigger: string;
     actionButtons: string;
     columnHeader: string;
     grid: string;

package/dist/datepicker/theme.js

@@ -1,11 +1,11 @@
 import { tv } from "tailwind-variants";
 export const datepicker = tv({
     slots: {
-        base: "inline-block rounded-base bg-white dark:bg-gray-700 shadow-lg p-4",
+        content: "inline-block rounded-base bg-white dark:bg-gray-700 shadow-lg p-4",
         input: "w-full rounded-base border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 border-gray-300 bg-gray-50 text-gray-900",
-        titleVariant: "mb-2 text-lg font-semibold text-gray-900 dark:text-white",
-        polite: "text-sm rounded-base text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
-        button: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
+        title: "mb-2 text-lg font-semibold text-gray-900 dark:text-white",
+        label: "text-sm rounded-base text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
+        trigger: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
         actionButtons: "mt-4 flex justify-between",
         columnHeader: "text-center text-sm font-medium text-gray-500 dark:text-gray-400",
         grid: "grid grid-cols-7 gap-1 w-64",
@@ -49,31 +49,10 @@ export const datepicker = tv({
             dark: {
                 input: "focus:ring-neutral-tertiary",
                 dayButton: "bg-neutral-secondary-medium"
-            },
-            // legacy colors
-            primary: { input: "focus:ring-primary-500 dark:focus:ring-primary-400", dayButton: "bg-primary-300 dark:bg-primary-900" },
-            blue: { input: "focus:ring-blue-500 dark:focus:ring-blue-400", dayButton: "bg-blue-300 dark:bg-blue-900" },
-            red: { input: "focus:ring-red-500 dark:focus:ring-red-400", dayButton: "bg-red-300 dark:bg-red-900" },
-            green: { input: "focus:ring-green-500 dark:focus:ring-green-400", dayButton: "bg-green-300 dark:bg-green-900" },
-            yellow: { input: "focus:ring-yellow-500 dark:focus:ring-yellow-400", dayButton: "bg-yellow-300 dark:bg-yellow-900" },
-            purple: { input: "focus:ring-purple-500 dark:focus:ring-purple-400", dayButton: "bg-purple-300 dark:bg-purple-900" },
-            light: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
-            secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-300 dark:bg-secondary-900" },
-            orange: { input: "focus:ring-orange-500 dark:focus:ring-orange-400", dayButton: "bg-orange-300 dark:bg-orange-900" },
-            amber: { input: "focus:ring-amber-500 dark:focus:ring-amber-400", dayButton: "bg-amber-300 dark:bg-amber-900" },
-            lime: { input: "focus:ring-lime-500 dark:focus:ring-lime-400", dayButton: "bg-lime-300 dark:bg-lime-900" },
-            emerald: { input: "focus:ring-emerald-500 dark:focus:ring-emerald-400", dayButton: "bg-emerald-300 dark:bg-emerald-900" },
-            teal: { input: "focus:ring-teal-500 dark:focus:ring-teal-400", dayButton: "bg-teal-300 dark:bg-teal-900" },
-            cyan: { input: "focus:ring-cyan-500 dark:focus:ring-cyan-400", dayButton: "bg-cyan-300 dark:bg-cyan-900" },
-            sky: { input: "focus:ring-sky-500 dark:focus:ring-sky-400", dayButton: "bg-sky-300 dark:bg-sky-900" },
-            indigo: { input: "focus:ring-indigo-500 dark:focus:ring-indigo-400", dayButton: "bg-indigo-300 dark:bg-indigo-900" },
-            violet: { input: "focus:ring-violet-500 dark:focus:ring-violet-400", dayButton: "bg-violet-300 dark:bg-violet-900" },
-            fuchsia: { input: "focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400", dayButton: "bg-fuchsia-300 dark:bg-fuchsia-900" },
-            pink: { input: "focus:ring-pink-500 dark:focus:ring-pink-400", dayButton: "bg-pink-300 dark:bg-pink-900" },
-            rose: { input: "focus:ring-rose-500 dark:focus:ring-rose-400", dayButton: "bg-rose-300 dark:bg-rose-900" }
+            }
         },
         inline: {
-            false: { base: "absolute z-10 mt-1" }
+            false: { content: "absolute z-10 mt-1" }
         },
         current: {
             true: { dayButton: "text-gray-400 dark:text-gray-500" }

package/dist/device-mockups/Android.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { AndroidProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { android } from "./theme";
 
   let { children, class: className, classes, ...restProps }: AndroidProps = $props();
@@ -12,13 +12,13 @@
   const { base, slot, top, leftTop, leftMid, leftBot, right } = android();
 </script>
 
-<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-  <div class={top({ class: clsx(theme?.top, styling?.top) })}></div>
-  <div class={leftTop({ class: clsx(theme?.leftTop, styling?.leftTop) })}></div>
-  <div class={leftMid({ class: clsx(theme?.leftMid, styling?.leftMid) })}></div>
-  <div class={leftBot({ class: clsx(theme?.leftBot, styling?.leftBot) })}></div>
-  <div class={right({ class: clsx(theme?.right, styling?.right) })}></div>
-  <div class={slot({ class: clsx(theme?.slot, styling?.slot) })}>
+<div data-scope="android" data-part="base" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div data-part="top" class={top({ class: clsx(theme?.top, styling?.top) })}></div>
+  <div data-part="left-top" class={leftTop({ class: clsx(theme?.leftTop, styling?.leftTop) })}></div>
+  <div data-part="left-mid" class={leftMid({ class: clsx(theme?.leftMid, styling?.leftMid) })}></div>
+  <div data-part="left-bot" class={leftBot({ class: clsx(theme?.leftBot, styling?.leftBot) })}></div>
+  <div data-part="right" class={right({ class: clsx(theme?.right, styling?.right) })}></div>
+  <div data-part="slot" class={slot({ class: clsx(theme?.slot, styling?.slot) })}>
     {#if children}
       {@render children()}
     {/if}
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L599)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L606)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Android.svelte.d.ts

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

package/dist/device-mockups/DefaultMockup.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { DefaultMockupProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { defaultMockup } from "./theme";
 
   let { children, class: className, classes, ...restProps }: DefaultMockupProps = $props();
@@ -11,12 +11,12 @@
   const { base, slot, top, leftTop, leftBot, right } = defaultMockup();
 </script>
 
-<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-  <div class={top({ class: clsx(theme?.top, styling?.top) })}></div>
-  <div class={leftTop({ class: clsx(theme?.leftTop, styling?.leftTop) })}></div>
-  <div class={leftBot({ class: clsx(theme?.leftBot, styling?.leftBot) })}></div>
-  <div class={right({ class: clsx(theme?.right, styling?.right) })}></div>
-  <div class={slot({ class: clsx(theme?.slot, styling?.slot) })}>
+<div data-scope="default-mockup" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div data-part="top" class={top({ class: clsx(theme?.top, styling?.top) })}></div>
+  <div data-part="left-top" class={leftTop({ class: clsx(theme?.leftTop, styling?.leftTop) })}></div>
+  <div data-part="left-bot" class={leftBot({ class: clsx(theme?.leftBot, styling?.leftBot) })}></div>
+  <div data-part="right" class={right({ class: clsx(theme?.right, styling?.right) })}></div>
+  <div data-part="slot" class={slot({ class: clsx(theme?.slot, styling?.slot) })}>
     {#if children}
       {@render children()}
     {/if}
@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L603)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L610)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/DefaultMockup.svelte.d.ts

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

package/dist/device-mockups/Desktop.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { DesktopProps } from "..";
   import clsx from "clsx";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
   import { desktop } from "./theme";
 
   let { children, class: className, classes, ...restProps }: DesktopProps = $props();
@@ -12,21 +12,21 @@
   const { base, inner, bot, botUnder } = desktop();
 </script>
 
-<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-  <div class={inner({ class: clsx(theme?.inner, styling?.inner) })}>
+<div data-scope="desktop" data-part="base" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div data-part="inner" class={inner({ class: clsx(theme?.inner, styling?.inner) })}>
     {#if children}
       {@render children()}
     {/if}
   </div>
 </div>
-<div class={bot({ class: clsx(theme?.bot, styling?.bot) })}></div>
-<div class={botUnder({ class: clsx(theme?.botUnder, styling?.botUnder) })}></div>
+<div data-part="bot" class={bot({ class: clsx(theme?.bot, styling?.bot) })}></div>
+<div data-part="bot-under" class={botUnder({ class: clsx(theme?.botUnder, styling?.botUnder) })}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L583)
+[DesktopProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L590)
 ## Props
 @prop children
 @prop class: className

package/dist/device-mockups/Desktop.svelte.d.ts

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

package/dist/device-mockups/DeviceMockup.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L578)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L585)
 ## Props
 @prop children
 @prop device = "default"