flowbite-svelte 1.10.9 → 1.10.11

package/dist/accordion/AccordionItem.svelte

@@ -9,7 +9,21 @@
 
   let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className, classes, headerClass, contentClass }: AccordionItemProps = $props();
 
-  themeDeprecated("AccordionItem", { headerClass, contentClass, activeClass, inactiveClass });
+  themeDeprecated(
+    "AccordionItem",
+    {
+      headerClass,
+      contentClass,
+      activeClass,
+      inactiveClass
+    },
+    {
+      headerClass: "button",
+      contentClass: "content",
+      activeClass: "active",
+      inactiveClass: "inactive"
+    }
+  );
 
   let styling: typeof classes = $derived(classes ?? { button: headerClass, content: contentClass, active: activeClass, inactive: inactiveClass });
 

package/dist/badge/Badge.svelte

@@ -7,7 +7,7 @@
 
   let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, classes, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
 
-  themeDeprecated("Badge", { aClass });
+  themeDeprecated("Badge", { aClass }, { aClass: "linkClass" });
 
   let styling = $derived(classes ?? { linkClass: aClass });
 

package/dist/banner/Banner.svelte

@@ -7,7 +7,8 @@
 
   let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, classes, innerClass, transition = fade, params, closeClass, ...restProps }: BannerProps = $props();
 
-  themeDeprecated("Banner", { innerClass, closeClass });
+  themeDeprecated("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
+
   let styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
 
   // Theme context

package/dist/bottom-navigation/BottomNav.svelte

@@ -8,7 +8,7 @@
 
   let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
 
-  themeDeprecated("BottomNav", { innerClass, outerClass });
+  themeDeprecated("BottomNav", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
   let styling = $derived(classes ?? { inner: innerClass });
 
   // Theme context

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -6,7 +6,8 @@
 
   let { children, class: className, classes, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
 
-  themeDeprecated("BottomNavHeader", { innerClass, outerClass });
+  themeDeprecated("BottomNavHeader", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
+
   let styling = $derived(classes ?? { innerDiv: innerClass });
 
   // Theme context

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -8,7 +8,7 @@
 
   let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
 
-  themeDeprecated("BottomNavItem", { spanClass, btnClass });
+  themeDeprecated("BottomNavItem", { spanClass, btnClass }, { spanClass: "span", btnClass: "class" });
   let styling = $derived(classes ?? { span: spanClass });
 
   // Theme context

package/dist/breadcrumb/Breadcrumb.svelte

@@ -6,7 +6,7 @@
 
   let { children, solid = false, class: className, classes, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
 
-  themeDeprecated("Breadcrumb", { olClass });
+  themeDeprecated("Breadcrumb", { olClass }, { olClass: "list" });
   let styling = $derived(classes ?? { list: olClass });
 
   const theme = getTheme("breadcrumb");

package/dist/card/Card.svelte

@@ -6,7 +6,8 @@
 
   let { children, color = "gray", horizontal = false, shadow = "md", reverse = false, img, size = "sm", class: className, classes, imgClass, ...restProps }: CardProps = $props();
 
-  themeDeprecated("Card", { imgClass });
+  themeDeprecated("Card", { imgClass }, { imgClass: "image" });
+
   let styling = $derived(classes ?? { image: imgClass });
 
   const theme = getTheme("card");

package/dist/datepicker/Datepicker.svelte

@@ -120,10 +120,32 @@
 
   function handleInputChangeWithDateFns() {
     const inputValue = inputElement?.value?.trim();
-    if (!inputValue) return;
+    if (!inputValue) {
+      rangeFrom = undefined;
+      rangeTo = undefined;
+      inputElement?.setCustomValidity("");
+      return;
+    }
 
     inputElement?.setCustomValidity("");
 
+    if (range) {
+      const parts = inputValue.split(" - ");
+      if (parts.length === 2) {
+        const parsedFrom = tryParseDate(parts[0]);
+        const parsedTo = tryParseDate(parts[1]);
+
+        if (parsedFrom && isValid(parsedFrom) && isDateAvailable(parsedFrom) && parsedTo && isValid(parsedTo) && isDateAvailable(parsedTo)) {
+          [rangeFrom, rangeTo] = parsedFrom > parsedTo ? [parsedTo, parsedFrom] : [parsedFrom, parsedTo];
+          onselect?.({ from: rangeFrom, to: rangeTo });
+          return;
+        } else {
+          inputElement?.setCustomValidity(`Please enter date range in format: ${getDateFormatPattern()} - ${getDateFormatPattern()}`);
+          return;
+        }
+      }
+    }
+
     const parsedDate = tryParseDate(inputValue);
 
     if (!parsedDate || !isValid(parsedDate)) {
@@ -189,12 +211,9 @@
 
   function getDateFormatPattern(): string {
     const actualLocale = locale === "default" ? navigator.language : locale;
-
-    // Create a test date and format it to understand the pattern
     const testDate = new Date(2025, 0, 15); // January 15, 2025
     const formatted = testDate.toLocaleDateString(actualLocale, dateFormat || { year: "numeric", month: "numeric", day: "numeric" });
 
-    // Analyze the formatted string to determine the pattern
     if (formatted.includes(".")) {
       // German/European format with dots
       if (formatted.startsWith("15.")) {
@@ -210,7 +229,7 @@
       } else if (formatted.startsWith("15/")) {
         return "d/M/yyyy"; // UK format
       }
-      // Additional check with different test date
+
       const testDate2 = new Date(2025, 11, 3); // December 3, 2025
       const formatted2 = testDate2.toLocaleDateString(actualLocale, dateFormat || { year: "numeric", month: "numeric", day: "numeric" });
       if (formatted2.startsWith("3/") || formatted2.startsWith("03/")) {
@@ -248,7 +267,7 @@
     }
   }
 
-  // MODIFIED: Use locale for formatting (not translationLocale)
+  // Use locale for formatting (not translationLocale)
   const formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? "";
   const isSameDate = (date1?: Date, date2?: Date): boolean => (date1 && date2 ? isSameDay(date1, date2) : false);
   const isToday = (day: Date): boolean => isSameDate(day, new Date());
@@ -277,7 +296,16 @@
         focusedDate = addDay(focusedDate, 7);
         break;
       case "Enter":
-        handleDaySelect(focusedDate);
+        if (range) {
+          if (rangeFrom && rangeTo) {
+            if (autohide && !inline) isOpen = false;
+          } else {
+            handleDaySelect(focusedDate);
+          }
+        } else {
+          handleDaySelect(focusedDate);
+          if (autohide && !inline) isOpen = false;
+        }
         break;
       case "Escape":
         isOpen = false;
@@ -293,7 +321,7 @@
       currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
     }
 
-    // MODIFIED: Use translationLocale for aria-label
+    // Use translationLocale for aria-label
     setTimeout(() => {
       const focusedButton = calendarRef?.querySelector(`button[aria-label="${focusedDate!.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`) as HTMLButtonElement | null;
       focusedButton?.focus();
@@ -301,7 +329,13 @@
   }
 
   function handleInputKeydown(event: KeyboardEvent) {
-    if (event.key === "Enter" || event.key === " ") {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleInputChangeWithDateFns();
+      if (autohide && !inline) {
+        isOpen = false;
+      }
+    } else if (event.key === " ") {
       event.preventDefault();
       isOpen = !isOpen;
     }

package/dist/device-mockups/Android.svelte

@@ -6,7 +6,8 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
-  themeDeprecated("Android", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class });
+  themeDeprecated("Android", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class }, { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" });
+
   let styling = $derived(
     classes ?? {
       top: div2Class,

package/dist/device-mockups/DefaultMockup.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
 
-  themeDeprecated("DefaultMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class });
+  themeDeprecated("DefaultMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
   let styling = $derived(
     classes ?? {
       top: div2Class,

package/dist/device-mockups/Desktop.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: DesktopProps = $props();
 
-  themeDeprecated("DesktopMockup", { divClass, div2Class, div3Class, div4Class });
+  themeDeprecated("DesktopMockup", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" });
   let styling = $derived(
     classes ?? {
       inner: div2Class,

package/dist/device-mockups/Ios.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: IosProps = $props();
 
-  themeDeprecated("Ios", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class });
+  themeDeprecated("Ios", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
   let styling = $derived(
     classes ?? {
       top: div2Class,

package/dist/device-mockups/Laptop.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: LaptopProps = $props();
 
-  themeDeprecated("Laptop", { divClass, div2Class, div3Class, div4Class });
+  themeDeprecated("Laptop", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
   let styling = $derived(
     classes ?? {
       inner: div2Class,

package/dist/device-mockups/Smartwatch.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: SmartwatchProps = $props();
 
-  themeDeprecated("Smartwatch", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class });
+  themeDeprecated("Smartwatch", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "rightTop", div4Class: "rightBot", div5Class: "bot", div6Class: "slot" });
   let styling = $derived(
     classes ?? {
       top: div2Class,

package/dist/device-mockups/Tablet.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: TabletProps = $props();
 
-  themeDeprecated("TabletMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class });
+  themeDeprecated("TabletMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
   let styling = $derived(
     classes ?? {
       leftTop: div2Class,

package/dist/theme/themeUtils.d.ts

@@ -11,5 +11,5 @@ export type Classes<T extends {
         [K in keyof Slots<T>]: ClassValue;
     }>;
 };
-export declare function themeDeprecated(component: string, names: Record<string, unknown>): void;
+export declare function themeDeprecated(component: string, names: Record<string, unknown>, replacements?: Record<string, unknown>): void;
 export {};

package/dist/theme/themeUtils.js

@@ -1,14 +1,46 @@
 import {} from "..";
 import { getContext } from "svelte";
+import { dev } from "$app/environment";
+// add PUBLIC_SHOW_HINT=true to .env to show migration hints in the console during the playwright tests
+import { PUBLIC_SHOW_HINT } from "$env/static/public";
 export function getTheme(componentKey) {
     const theme = getContext("theme");
     return theme?.[componentKey];
 }
-export function themeDeprecated(component, names) {
-    const nonEmptyNames = Object.keys(names)
-        .filter((name) => names[name])
-        .map((name) => `"${name}"`);
+export function themeDeprecated(component, names, replacements) {
+    const showHint = dev || PUBLIC_SHOW_HINT === "true";
+    if (!showHint)
+        return;
+    const nonEmptyNames = Object.keys(names).filter((name) => names[name]);
     if (nonEmptyNames.length === 0)
         return;
-    console.warn(`The following "${component}" props are deprecated: ${nonEmptyNames.join(", ")}.\nPlease update your code to use the new "classes" property.`);
+    let migrationHint = "";
+    const usesClass = nonEmptyNames.some((name) => replacements?.[name] === "class");
+    const propText = usesClass ? `"classes" or "class"` : `"classes"`;
+    if (replacements) {
+        const classProps = [];
+        const classesObjectEntries = [];
+        for (const name of nonEmptyNames) {
+            const newKey = replacements[name];
+            const value = names[name];
+            if (!newKey || !value)
+                continue;
+            if (newKey === "class") {
+                classProps.push(`class="${value}"`);
+            }
+            else {
+                classesObjectEntries.push(`${newKey}: "${value}"`);
+            }
+        }
+        const hintLines = [];
+        if (classProps.length > 0)
+            hintLines.push(...classProps);
+        if (classesObjectEntries.length > 0) {
+            hintLines.push(`classes={{ ${classesObjectEntries.join(", ")} }}`);
+        }
+        if (hintLines.length > 0) {
+            migrationHint = `\nMigration example: ${hintLines.join(" ")}`;
+        }
+    }
+    console.warn(`The following "${component}" props are deprecated: ${nonEmptyNames.map((n) => `"${n}"`).join(", ")}.` + ` Please update your code to use the new ${propText} prop.${migrationHint}`);
 }

package/dist/types.d.ts

@@ -393,7 +393,6 @@ export interface DatepickerProps extends DatepickerVariants, Omit<HTMLAttributes
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
-    inputClass?: ClassValue;
     color?: ButtonProps["color"];
     inline?: boolean;
     autohide?: boolean;
@@ -402,9 +401,10 @@ export interface DatepickerProps extends DatepickerVariants, Omit<HTMLAttributes
     onselect?: (x: DateOrRange) => void;
     onclear?: () => void;
     onapply?: (x: DateOrRange) => void;
-    btnClass?: ClassValue;
     inputmode?: HTMLInputAttributes["inputmode"];
     monthColor?: ButtonProps["color"];
+    btnClass?: ClassValue;
+    inputClass?: ClassValue;
     monthBtnSelected?: ClassValue;
     monthBtn?: ClassValue;
     translationLocale?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.10.9",
+  "version": "1.10.11",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -811,7 +811,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
-    "test:e2e": "playwright test",
+    "test:e2e": "PUBLIC_SHOW_HINT=true playwright test",
     "test:unit": "vitest",
     "gen:exports": "svelte-lib-helpers exports",
     "gen:docspropvalue": "svelte-lib-helpers docspropvalue themesberg/flowbite-svelte",