flowbite-svelte 1.8.3 → 1.8.5

package/dist/datepicker/Datepicker.svelte

@@ -6,10 +6,41 @@
   import { Button, ToolbarButton, type DatepickerProps, cn } from "..";
   import { datepicker } from "./theme";
 
-  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), availableFrom = null, availableTo = null, locale = "default", firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className }: DatepickerProps = $props();
+  let {
+    value = $bindable(),
+    defaultDate = null,
+    range = false,
+    rangeFrom = $bindable(),
+    rangeTo = $bindable(),
+    availableFrom = null,
+    availableTo = null,
+    locale = "default",
+    translationLocale = locale, // NEW: Separate locale for translations, defaults to locale for backward compatibility
+    firstDayOfWeek = 0,
+    dateFormat,
+    placeholder = "Select date",
+    disabled = false,
+    required = false,
+    inputClass = "",
+    color = "primary",
+    inline = false,
+    autohide = true,
+    showActionButtons = false,
+    title = "",
+    onselect,
+    onclear,
+    onapply,
+    btnClass,
+    inputmode = "none",
+    classes,
+    monthColor = "alternative",
+    monthBtnSelected = "bg-primary-500 text-white",
+    monthBtn = "text-gray-700 dark:text-gray-300",
+    class: className
+  }: DatepickerProps & { translationLocale?: string } = $props();
 
   const dateFormatDefault = { year: "numeric", month: "long", day: "numeric" };
-  // const dateFormatOptions = $derived(dateFormat ?? dateFormatDefault);
+
   // Internal state
   let isOpen: boolean = $state(inline);
   let showMonthSelector: boolean = $state(false);
@@ -60,17 +91,18 @@
     return daysArray;
   }
 
+  // MODIFIED: Use translationLocale for weekday names
   const getWeekdayNames = (): string[] => {
-    return Array.from({ length: 7 }, (_, i) => new Date(1970, 0, 5 + i + firstDayOfWeek).toLocaleDateString(locale, { weekday: "short" }));
+    return Array.from({ length: 7 }, (_, i) => new Date(1970, 0, 5 + i + firstDayOfWeek).toLocaleDateString(translationLocale, { weekday: "short" }));
   };
-  let weekdays = getWeekdayNames();
+  let weekdays = $derived(getWeekdayNames());
 
+  // MODIFIED: Use translationLocale for month names
   const getMonthNames = (): string[] => {
-    return Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleDateString(locale, { month: "short" }));
+    return Array.from({ length: 12 }, (_, i) => new Date(2000, i, 1).toLocaleDateString(translationLocale, { month: "short" }));
   };
-  let monthNames = getMonthNames();
+  let monthNames = $derived(getMonthNames());
 
-  // const addMonth = (date: Date, increment: number): Date => new Date(date.getFullYear(), date.getMonth() + increment, 1);
   const addDay = (date: Date, increment: number): Date => new Date(date.getFullYear(), date.getMonth(), date.getDate() + increment);
 
   function changeMonth(increment: number) {
@@ -92,7 +124,6 @@
     showMonthSelector = !showMonthSelector;
   }
 
-  // Helper function to check if a date is available for selection
   function isDateAvailable(date: Date): boolean {
     const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
 
@@ -110,7 +141,6 @@
   }
 
   function handleDaySelect(day: Date) {
-    // Don't allow selection of unavailable dates
     if (!isDateAvailable(day)) return;
 
     if (range) {
@@ -145,6 +175,7 @@
     }
   }
 
+  // MODIFIED: Use locale for formatting (not translationLocale)
   const formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? "";
   const isSameDate = (date1?: Date, date2?: Date): boolean => date1?.toDateString() === date2?.toDateString();
   const isToday = (day: Date): boolean => isSameDate(day, new Date());
@@ -189,9 +220,9 @@
       currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
     }
 
-    // Focus the button for the focused date
+    // MODIFIED: Use translationLocale for aria-label
     setTimeout(() => {
-      const focusedButton = calendarRef?.querySelector(`button[aria-label="${focusedDate!.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`) as HTMLButtonElement | null;
+      const focusedButton = calendarRef?.querySelector(`button[aria-label="${focusedDate!.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`) as HTMLButtonElement | null;
       focusedButton?.focus();
     }, 0);
   }
@@ -271,8 +302,9 @@
         <!-- Regular Calendar View -->
         <div class={nav({ class: clsx(classes?.nav) })}>
           {@render navButton(false)}
+          <!-- MODIFIED: Use translationLocale for month/year display -->
           <Button type="button" class={cn(polite({ class: clsx(classes?.polite) }), "cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700")} aria-live="polite" onclick={(event: MouseEvent) => toggleMonthSelector(event)}>
-            {currentMonth.toLocaleString(locale, { month: "long", year: "numeric" })}
+            {currentMonth.toLocaleString(translationLocale, { month: "long", year: "numeric" })}
           </Button>
           {@render navButton(true)}
         </div>
@@ -295,7 +327,7 @@
               })}
               onclick={() => handleDaySelect(day)}
               onkeydown={handleCalendarKeydown}
-              aria-label={day.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
+              aria-label={day.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
               aria-selected={isSelected(day)}
               aria-disabled={!available}
               disabled={!available}
@@ -317,40 +349,3 @@
     </div>
   {/if}
 </div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
-## Props
-@prop value = $bindable()
-@prop defaultDate = null
-@prop range = false
-@prop rangeFrom = $bindable()
-@prop rangeTo = $bindable()
-@prop availableFrom = null
-@prop availableTo = null
-@prop locale = "default"
-@prop firstDayOfWeek = 0
-@prop dateFormat
-@prop placeholder = "Select date"
-@prop disabled = false
-@prop required = false
-@prop inputClass = ""
-@prop color = "primary"
-@prop inline = false
-@prop autohide = true
-@prop showActionButtons = false
-@prop title = ""
-@prop onselect
-@prop onclear
-@prop onapply
-@prop btnClass
-@prop inputmode = "none"
-@prop classes
-@prop monthColor = "alternative"
-@prop monthBtnSelected = "bg-primary-500 text-white"
-@prop monthBtn = "text-gray-700 dark:text-gray-300"
-@prop class: className
--->

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -1,39 +1,7 @@
 import { type DatepickerProps } from "..";
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Type
- * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
- * ## Props
- * @prop value = $bindable()
- * @prop defaultDate = null
- * @prop range = false
- * @prop rangeFrom = $bindable()
- * @prop rangeTo = $bindable()
- * @prop availableFrom = null
- * @prop availableTo = null
- * @prop locale = "default"
- * @prop firstDayOfWeek = 0
- * @prop dateFormat
- * @prop placeholder = "Select date"
- * @prop disabled = false
- * @prop required = false
- * @prop inputClass = ""
- * @prop color = "primary"
- * @prop inline = false
- * @prop autohide = true
- * @prop showActionButtons = false
- * @prop title = ""
- * @prop onselect
- * @prop onclear
- * @prop onapply
- * @prop btnClass
- * @prop inputmode = "none"
- * @prop classes
- * @prop monthColor = "alternative"
- * @prop monthBtnSelected = "bg-primary-500 text-white"
- * @prop monthBtn = "text-gray-700 dark:text-gray-300"
- * @prop class: className
- */
-declare const Datepicker: import("svelte").Component<DatepickerProps, {}, "value" | "rangeFrom" | "rangeTo">;
+type $$ComponentProps = DatepickerProps & {
+    translationLocale?: string;
+};
+declare const Datepicker: import("svelte").Component<$$ComponentProps, {}, "value" | "rangeFrom" | "rangeTo">;
 type Datepicker = ReturnType<typeof Datepicker>;
 export default Datepicker;

package/dist/modal/Modal.svelte

@@ -1,26 +1,17 @@
 <script lang="ts">
-  import { type ParamsType, type ModalProps, CloseButton, trapFocus } from "..";
-  import { twMerge } from "tailwind-merge";
+  import { type ModalProps, type ParamsType, CloseButton, trapFocus } from "..";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
   import { modal as modalTheme } from ".";
 
-  let { children, oncancel, onclose, modal = true, autoclose = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, params, transition = fade, ...restProps }: ModalProps = $props();
+  let { children, oncancel, onsubmit, modal = true, autoclose = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, params, transition = fade, ...restProps }: ModalProps = $props();
 
   const paramsDefault = { duration: 100, easing: sineIn };
   const paramsOptions = $derived(params ?? paramsDefault);
 
   const { base, header: headerCls, footer: footerCls, body, closeBtn } = $derived(modalTheme({ placement, size }));
 
-  const closeModal = () => {
-    // Only close if not permanent
-    if (!permanent) {
-      open = false;
-      onclose?.();
-    }
-  };
-
   function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
     // this event gets called when user presses ESC key
     // We'll handle ESC via the trapFocus action instead
@@ -35,21 +26,23 @@
   function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
     if (ev.currentTarget instanceof HTMLDialogElement) {
       if (outsideclose && ev.target === ev.currentTarget && !permanent) {
-        closeModal();
+        open = false;
       }
       if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
-        closeModal();
+        open = false;
       }
     }
   }
 
   let dlg: HTMLDialogElement | undefined = $state();
 
-  $effect(() => {
-    if (permanent && !open) {
-      open = true;
-    }
-  });
+  // This prevents total dialog closing and we want only to prevent cancelling
+  // The close with user defined actions should be allowed
+  // $effect(() => {
+  //   if (permanent && !open) {
+  //     open = true;
+  //   }
+  // });
 
   // Handler for Escape key that respects component state
   const handleEscape = () => {
@@ -57,32 +50,55 @@
       oncancel?.({ currentTarget: dlg } as any);
       // If oncancel prevented default, we don't close
       if (oncancel && event?.defaultPrevented) return;
-      closeModal();
+      open = false;
     }
   };
+
+  function _onsubmit(ev: SubmitEvent) {
+    if (!dlg) return;
+
+    if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
+      dlg.returnValue = ev.submitter.value;
+    }
+
+    // @ts-ignore
+    onsubmit?.(ev); // forward event to user handle
+
+    if (!ev.defaultPrevented) {
+      // stop dialog.close() and trigger close with transition
+      ev.preventDefault();
+      open = false;
+    }
+  }
+
+  function init(dlg: HTMLDialogElement) {
+    modal ? dlg?.showModal() : dlg?.show();
+    return () => dlg?.close();
+  }
 </script>
 
 {#if open}
-  <dialog use:trapFocus={{ onEscape: handleEscape }} bind:this={dlg} {...restProps} class={twMerge(base(), clsx(className))} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition|global={paramsOptions as ParamsType} onintrostart={() => (modal ? dlg?.showModal() : dlg?.show())} onoutroend={() => dlg?.close()}>
+  <dialog use:trapFocus={{ onEscape: handleEscape }} {@attach init} onsubmit={_onsubmit} bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition|global={paramsOptions as ParamsType}>
     {#if title || header}
-      <div class={twMerge(headerCls(), clsx(headerClass))}>
+      <div class={headerCls({ class: clsx(headerClass) })}>
         {#if title}
           <h3>{title}</h3>
+          <CloseButton onclick={() => (open = false)} class={clsx(closeBtnClass)} />
         {:else if header}
           {@render header()}
         {/if}
       </div>
     {/if}
-    <div class={twMerge(body(), clsx(bodyClass))}>
+    <div class={body({ class: clsx(bodyClass) })}>
       {@render children?.()}
     </div>
     {#if footer}
-      <div class={twMerge(footerCls(), clsx(footerClass))}>
+      <div class={footerCls({ class: clsx(footerClass) })}>
         {@render footer()}
       </div>
     {/if}
-    {#if dismissable && !permanent}
-      <CloseButton onclick={closeModal} class={twMerge(closeBtn(), clsx(closeBtnClass))} />
+    {#if dismissable && !permanent && !title}
+      <CloseButton onclick={() => (open = false)} class={closeBtn({ class: clsx(closeBtnClass) })} />
     {/if}
   </dialog>
 {/if}
@@ -95,7 +111,7 @@
 ## Props
 @prop children
 @prop oncancel
-@prop onclose
+@prop onsubmit
 @prop modal = true
 @prop autoclose = false
 @prop header

package/dist/modal/Modal.svelte.d.ts

@@ -6,7 +6,7 @@ import { type ModalProps } from "..";
  * ## Props
  * @prop children
  * @prop oncancel
- * @prop onclose
+ * @prop onsubmit
  * @prop modal = true
  * @prop autoclose = false
  * @prop header

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -12,35 +12,34 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "2.29.2",
+    "@changesets/cli": "2.29.5",
     "@docsearch/css": "^3.9.0",
     "@docsearch/js": "^3.9.0",
     "@eslint/compat": "^1.3.1",
-    "@eslint/js": "^9.29.0",
+    "@eslint/js": "^9.30.1",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
-    "@flowbite-svelte-plugins/datatable": "^0.3.4",
-    "@flowbite-svelte-plugins/texteditor": "^0.20.1",
-    "@playwright/test": "^1.53.1",
+    "@flowbite-svelte-plugins/datatable": "^0.4.0",
+    "@flowbite-svelte-plugins/texteditor": "^0.24.0",
+    "@playwright/test": "^1.53.2",
     "@sveltejs/adapter-auto": "^6.0.1",
     "@sveltejs/adapter-vercel": "^5.7.2",
     "@sveltejs/kit": "^2.22.2",
-    "@sveltejs/package": "2.3.11",
+    "@sveltejs/package": "2.3.12",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@tiptap/core": "^2.23.0",
+    "@tiptap/core": "3.0.0-beta.24",
     "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.29.0",
+    "eslint": "^9.30.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-svelte": "^3.10.1",
     "flowbite-svelte-icons": "^2.2.1",
     "flowbite-typography": "^1.0.5",
-    "globals": "^16.2.0",
-    "highlight.js": "^11.11.1",
+    "globals": "^16.3.0",
     "jsdom": "^26.1.0",
     "katex": "^0.16.22",
     "lowlight": "^3.3.0",
@@ -52,7 +51,7 @@
     "prism-themes": "^1.9.0",
     "publint": "^0.3.12",
     "simple-datatables": "^10.0.0",
-    "svelte": "^5.34.8",
+    "svelte": "^5.35.4",
     "svelte-check": "^4.2.2",
     "svelte-doc-llm": "^0.2.2",
     "svelte-lib-helpers": "^0.4.30",
@@ -61,9 +60,9 @@
     "tailwindcss": "^4.1.11",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "8.31.1",
+    "typescript-eslint": "8.36.0",
     "vite": "^6.3.5",
-    "vite-plugin-devtools-json": "^0.2.0",
+    "vite-plugin-devtools-json": "^0.2.1",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
@@ -114,8 +113,8 @@
     "url": "git+https://github.com/themesberg/flowbite-svelte.git"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.1",
-    "@floating-ui/utils": "^0.2.9",
+    "@floating-ui/dom": "^1.7.2",
+    "@floating-ui/utils": "^0.2.10",
     "apexcharts": "^4.7.0",
     "clsx": "^2.1.1",
     "flowbite": "^3.1.2",