flowbite-svelte 1.28.0 → 1.28.2

package/dist/accordion/Accordion.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L207)
+[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L206)
 ## Props
 @prop children
 @prop flush

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

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

package/dist/accordion/AccordionItem.svelte

@@ -111,7 +111,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L215)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L214)
 ## Props
 @prop children
 @prop header

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

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

package/dist/alert/Alert.svelte

@@ -77,7 +77,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L229)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L228)
 ## Props
 @prop children
 @prop icon

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

@@ -2,7 +2,7 @@ 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#L229)
+ * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L228)
  * ## Props
  * @prop children
  * @prop icon

package/dist/avatar/Avatar.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L240)
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L239)
 ## Props
 @prop children
 @prop indicator

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

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

package/dist/badge/Badge.svelte

@@ -72,7 +72,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L252)
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L251)
 ## Props
 @prop children
 @prop icon

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

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

package/dist/banner/Banner.svelte

@@ -61,7 +61,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L266)
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L265)
 ## Props
 @prop children
 @prop header

package/dist/banner/Banner.svelte.d.ts

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

package/dist/bottom-navigation/BottomNav.svelte

@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L285)
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L284)
 ## Props
 @prop children
 @prop header

package/dist/bottom-navigation/BottomNav.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L304)
+[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L303)
 ## Props
 @prop children
 @prop class: className

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -20,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L310)
+[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L309)
 ## Props
 @prop itemName
 @prop active

package/dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

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

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -73,7 +73,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L294)
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L293)
 ## Props
 @prop children
 @prop btnName

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

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

package/dist/breadcrumb/Breadcrumb.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L316)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L315)
 ## Props
 @prop children
 @prop solid = false

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -58,7 +58,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L323)
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L322)
 ## Props
 @prop children
 @prop icon

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/button-group/ButtonGroup.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L334)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L333)
 ## Props
 @prop children
 @prop size = "md"

package/dist/button-group/ButtonGroup.svelte.d.ts

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

package/dist/buttons/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import clsx from "clsx";
+  import { Spinner } from "..";
   import type { SizeType, ButtonProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import { button } from "./theme";
@@ -8,7 +9,20 @@
   const group: SizeType = getContext("group");
   const ctxDisabled: boolean | undefined = getContext("disabled");
 
-  let { children, pill, outline = false, size = "md", color, shadow = false, tag = "button", disabled, loading = false, class: className, ...restProps }: ButtonProps = $props();
+  let {
+    children,
+    pill,
+    outline = false,
+    size = "md",
+    color,
+    shadow = false,
+    tag = "button",
+    disabled,
+    loading = false,
+    spinnerProps = { size: "4" },
+    class: className,
+    ...restProps
+  }: ButtonProps = $props();
 
   const theme = getTheme("button");
 
@@ -16,7 +30,8 @@
   let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));
   let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled) || loading);
 
-  const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
+  const { base, outline: outline_, shadow: shadow_, spinner } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
+
   let btnCls = $derived(base({ class: clsx(outline && outline_(), shadow && shadow_(), theme?.base, className) }));
 </script>
 
@@ -28,10 +43,7 @@
   <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
     {@render children?.()}
     {#if loading}
-      <svg class="ml-2 h-4 w-4 animate-spin text-white" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-      </svg>
+      <Spinner {...spinnerProps} class={spinner()} />
     {/if}
   </button>
 {:else}
@@ -55,6 +67,7 @@
 @prop tag = "button"
 @prop disabled
 @prop loading = false
+@prop spinnerProps = { size: "4" }
 @prop class: className
 @prop ...restProps
 -->

package/dist/buttons/Button.svelte.d.ts

@@ -13,6 +13,7 @@ import type { ButtonProps } from "..";
  * @prop tag = "button"
  * @prop disabled
  * @prop loading = false
+ * @prop spinnerProps = { size: "4" }
  * @prop class: className
  * @prop ...restProps
  */

package/dist/buttons/theme.d.ts

@@ -146,6 +146,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
     base: string;
     outline: string;
     shadow: string;
+    spinner: string;
 }, undefined, {
     color: {
         primary: {
@@ -291,6 +292,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
     base: string;
     outline: string;
     shadow: string;
+    spinner: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
         primary: {
@@ -436,6 +438,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
     base: string;
     outline: string;
     shadow: string;
+    spinner: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const gradientButton: import("tailwind-variants").TVReturnType<{
     color: {

package/dist/buttons/theme.js

@@ -3,7 +3,8 @@ export const button = tv({
     slots: {
         base: "text-center font-medium inline-flex items-center justify-center",
         outline: "bg-transparent border hover:text-white dark:bg-transparent dark:hover-text-white",
-        shadow: "shadow-lg"
+        shadow: "shadow-lg",
+        spinner: "ms-2"
     },
     variants: {
         color: {

package/dist/carousel/Carousel.svelte

@@ -182,7 +182,7 @@
 
 <svelte:head>
   {#if isPreload && images.length > 0}
-    {#each images as image}
+    {#each images as image (image.src)}
       <link rel="preload" href={image.src} as="image" />
     {/each}
   {/if}

package/dist/carousel/CarouselIndicators.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div class={base({ class: clsx(theme?.base, className) })} {...restProps}>
-  {#each _state.images as _, idx}
+  {#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}`}>
       {#if children}

package/dist/carousel/Thumbnails.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <div class={thumbnails({ class: clsx(theme, className) })}>
-  {#each images as image, idx}
+  {#each images as image, idx (image.src || idx)}
     {@const selected = index === idx}
     <button onclick={() => btnClick(idx)} aria-label={ariaLabel} aria-current={selected ? "true" : undefined}>
       {#if children}

package/dist/command-palette/CommandPalette.svelte

@@ -194,7 +194,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2198)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2213)
 ## Props
 @prop open = $bindable(false)
 @prop items = []

package/dist/command-palette/CommandPalette.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CommandPaletteProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2198)
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2213)
  * ## Props
  * @prop open = $bindable(false)
  * @prop items = []

package/dist/datepicker/Datepicker.svelte

@@ -460,7 +460,7 @@
           {@render yearNavButton(true)}
         </div>
         <div class="grid grid-cols-4 gap-2 p-4">
-          {#each monthNames as month, index}
+          {#each monthNames as month, index (index)}
             <Button
               type="button"
               color={monthColor}
@@ -487,10 +487,10 @@
           {@render navButton(true)}
         </div>
         <div class={grid({ class: clsx(theme?.grid, classes?.grid) })} role="grid">
-          {#each weekdays as day}
+          {#each weekdays as day (day)}
             <div class={columnHeader({ class: clsx(theme?.columnHeader, classes?.columnHeader) })} role="columnheader">{day}</div>
           {/each}
-          {#each daysInMonth as day}
+          {#each daysInMonth as day (day)}
             {@const current = day.getMonth() !== currentMonth.getMonth()}
             {@const available = isDateAvailable(day)}
             <Button

package/dist/datepicker/theme.js

@@ -16,29 +16,29 @@ export const datepicker = tv({
     },
     variants: {
         color: {
-            primary: { input: "focus:ring-primary-500 dark:focus:ring-primary-400", dayButton: "bg-primary-100 dark:bg-primary-900" },
-            blue: { input: "focus:ring-blue-500 dark:focus:ring-blue-400", dayButton: "bg-blue-100 dark:bg-blue-900" },
-            red: { input: "focus:ring-red-500 dark:focus:ring-red-400", dayButton: "bg-red-100 dark:bg-red-900" },
-            green: { input: "focus:ring-green-500 dark:focus:ring-green-400", dayButton: "bg-green-100 dark:bg-green-900" },
-            yellow: { input: "focus:ring-yellow-500 dark:focus:ring-yellow-400", dayButton: "bg-yellow-100 dark:bg-yellow-900" },
-            purple: { input: "focus:ring-purple-500 dark:focus:ring-purple-400", dayButton: "bg-purple-100 dark:bg-purple-900" },
-            dark: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
-            light: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
-            alternative: { input: "focus:ring-alternative-500 dark:focus:ring-alternative-400", dayButton: "bg-alternative-100 dark:bg-alternative-900" },
-            secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-100 dark:bg-secondary-900" },
-            gray: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
-            orange: { input: "focus:ring-orange-500 dark:focus:ring-orange-400", dayButton: "bg-orange-100 dark:bg-orange-900" },
-            amber: { input: "focus:ring-amber-500 dark:focus:ring-amber-400", dayButton: "bg-amber-100 dark:bg-amber-900" },
-            lime: { input: "focus:ring-lime-500 dark:focus:ring-lime-400", dayButton: "bg-lime-100 dark:bg-lime-900" },
-            emerald: { input: "focus:ring-emerald-500 dark:focus:ring-emerald-400", dayButton: "bg-emerald-100 dark:bg-emerald-900" },
-            teal: { input: "focus:ring-teal-500 dark:focus:ring-teal-400", dayButton: "bg-teal-100 dark:bg-teal-900" },
-            cyan: { input: "focus:ring-cyan-500 dark:focus:ring-cyan-400", dayButton: "bg-cyan-100 dark:bg-cyan-900" },
-            sky: { input: "focus:ring-sky-500 dark:focus:ring-sky-400", dayButton: "bg-sky-100 dark:bg-sky-900" },
-            indigo: { input: "focus:ring-indigo-500 dark:focus:ring-indigo-400", dayButton: "bg-indigo-100 dark:bg-indigo-900" },
-            violet: { input: "focus:ring-violet-500 dark:focus:ring-violet-400", dayButton: "bg-violet-100 dark:bg-violet-900" },
-            fuchsia: { input: "focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400", dayButton: "bg-fuchsia-100 dark:bg-fuchsia-900" },
-            pink: { input: "focus:ring-pink-500 dark:focus:ring-pink-400", dayButton: "bg-pink-100 dark:bg-pink-900" },
-            rose: { input: "focus:ring-rose-500 dark:focus:ring-rose-400", dayButton: "bg-rose-100 dark:bg-rose-900" }
+            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" },
+            dark: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+            light: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+            alternative: { input: "focus:ring-alternative-500 dark:focus:ring-alternative-400", dayButton: "bg-alternative-300 dark:bg-alternative-900" },
+            secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-300 dark:bg-secondary-900" },
+            gray: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-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" }

package/dist/dialog/Dialog.svelte

@@ -37,7 +37,6 @@
 
   // Prefer requestClose when available to trigger a cancellable "cancel" event; otherwise synthesize it.
   const cancel = (dlg: HTMLDialogElement) => {
-    // @ts-ignore
     if (typeof dlg.requestClose === "function") return dlg.requestClose();
     dlg.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
   };

package/dist/drawer/theme.d.ts

@@ -63,16 +63,16 @@ export type DrawerheadVariants = VariantProps<typeof drawerhead> & Classes<typeo
 export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
             button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
             button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -83,8 +83,8 @@ export declare const drawerhead: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
             button?: import("tailwind-merge").ClassNameValue;
+            base?: import("tailwind-merge").ClassNameValue;
             svg?: import("tailwind-merge").ClassNameValue;
         };
     };

package/dist/dropdown/DropdownGroup.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L657)
+[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L663)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownGroup.svelte.d.ts

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

package/dist/dropdown/DropdownItem.svelte

@@ -2,10 +2,10 @@
   import { getContext } from "svelte";
   import { dropdownItem } from "./theme";
   import clsx from "clsx";
-  import type { DropdownItemProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import type { DropdownItemProps } from "../types";
 
-  let { aClass, children, activeClass, liClass, classes, class: className, ...restProps }: DropdownItemProps = $props();
+  let { aClass, children, activeClass, liClass, classes, class: className, href, onclick, ...restProps }: DropdownItemProps = $props();
 
   warnThemeDeprecation("DropdownItem", { aClass, activeClass, liClass }, { aClass: "class", activeClass: "active", liClass: "li" });
   const styling = $derived(classes ?? { active: activeClass, li: liClass });
@@ -14,25 +14,25 @@
 
   const activeUrl: { value: string } = getContext("activeUrl");
 
-  let isActive = $derived(activeUrl?.value ? restProps.href === activeUrl.value : false);
+  let isActive = $derived(activeUrl?.value && href ? href === activeUrl.value : false);
 
   const { base, active, li } = dropdownItem();
-  let finalClass = $derived([isActive ? active({ class: clsx(theme?.active, styling.active) }) : base({ class: clsx(theme?.base, className) })]);
+  let finalClass = $derived(isActive ? active({ class: clsx(theme?.active, styling.active) }) : base({ class: clsx(theme?.base, className) }));
 </script>
 
 <li class={li({ class: clsx(styling.li) })}>
-  {#if restProps.href === undefined && restProps.onclick === undefined}
-    <div {...restProps} class={finalClass}>
+  {#if href}
+    <a {href} {...restProps} class={finalClass}>
       {@render children()}
-    </div>
-  {:else if restProps.href === undefined}
-    <button type="button" {...restProps} class={finalClass}>
+    </a>
+  {:else if onclick}
+    <button type="button" {onclick} {...restProps} class={finalClass}>
       {@render children()}
     </button>
   {:else}
-    <a {...restProps} class={finalClass}>
+    <div {...restProps} class={finalClass}>
       {@render children()}
-    </a>
+    </div>
   {/if}
 </li>
 
@@ -40,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L649)
+[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L647)
 ## Props
 @prop aClass
 @prop children
@@ -48,5 +48,7 @@
 @prop liClass
 @prop classes
 @prop class: className
+@prop href
+@prop onclick
 @prop ...restProps
 -->