flowbite-svelte 1.31.0 → 1.32.0

package/dist/accordion/AccordionItem.svelte

@@ -13,6 +13,7 @@
     header,
     arrowup,
     arrowdown,
+    headingTag,
     open = $bindable(false),
     activeClass,
     inactiveClass,
@@ -70,7 +71,7 @@
   let buttonClass = $derived(clsx(open && !ctx?.flush && (styling.active || ctx?.activeClass || active()), !open && !ctx?.flush && (styling.inactive || ctx?.inactiveClass || inactive())));
 </script>
 
-<h2 class={base({ class: clsx(theme?.base, className) })}>
+<svelte:element this={headingTag ?? "h2"} class={base({ class: clsx(theme?.base, className) })}>
   <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, styling.button) })} aria-expanded={open}>
     {#if header}
       {@render header()}
@@ -91,7 +92,7 @@
       {/if}
     {/if}
   </button>
-</h2>
+</svelte:element>
 
 {#if useTransition}
   {#if open && transitionType !== "none"}

package/dist/datepicker/Datepicker.svelte

@@ -55,13 +55,6 @@
     isOpen = inline;
   });
   let showMonthSelector: boolean = $state(false);
-  let inputElement: HTMLInputElement | null = $state(null);
-
-  $effect(() => {
-    if (inputElement) {
-      elementRef = inputElement;
-    }
-  });
   let datepickerContainerElement: HTMLDivElement;
   let currentMonth: Date = $state(new Date());
   $effect(() => {
@@ -162,15 +155,15 @@
   }
 
   function handleInputChangeWithDateFns() {
-    const inputValue = inputElement?.value?.trim();
+    const inputValue = elementRef?.value?.trim();
     if (!inputValue) {
       rangeFrom = undefined;
       rangeTo = undefined;
-      inputElement?.setCustomValidity("");
+      elementRef?.setCustomValidity("");
       return;
     }
 
-    inputElement?.setCustomValidity("");
+    elementRef?.setCustomValidity("");
 
     if (range) {
       const parts = inputValue.split(" - ");
@@ -183,7 +176,7 @@
           onselect?.({ from: rangeFrom, to: rangeTo });
           return;
         } else {
-          inputElement?.setCustomValidity(`Please enter date range in format: ${getDateFormatPattern()} - ${getDateFormatPattern()}`);
+          elementRef?.setCustomValidity(`Please enter date range in format: ${getDateFormatPattern()} - ${getDateFormatPattern()}`);
           return;
         }
       }
@@ -193,12 +186,12 @@
 
     if (!parsedDate || !isValid(parsedDate)) {
       const formatPattern = getDateFormatPattern();
-      inputElement?.setCustomValidity(`Please enter date in format: ${formatPattern}`);
+      elementRef?.setCustomValidity(`Please enter date in format: ${formatPattern}`);
       return;
     }
 
     if (!isDateAvailable(parsedDate)) {
-      inputElement?.setCustomValidity("Selected date is not available");
+      elementRef?.setCustomValidity("Selected date is not available");
       return;
     }
 
@@ -353,7 +346,7 @@
       case "Escape":
         isOpen = false;
         showMonthSelector = false;
-        inputElement?.focus();
+        elementRef?.focus();
         break;
       default:
         return;
@@ -421,7 +414,7 @@
     <div class="relative">
       <input
         {...inputProps}
-        bind:this={inputElement}
+        bind:this={elementRef}
         type="text"
         class={input({ color, class: clsx(theme?.input, inputClass) })}
         {placeholder}

package/dist/forms/select/MultiSelect.svelte

@@ -24,6 +24,7 @@
     class: className,
     classes,
     // Extract select-specific props
+    id,
     name,
     form,
     required,
@@ -124,6 +125,7 @@
     // This is useful if the click triggers a re-render and focus is lost momentarily.
     if (multiSelectContainer && multiSelectContainer.contains(event.target as Node)) {
       show = !show;
+      event.preventDefault();
     } else {
       show = false; // Close if clicked outside
     }
@@ -204,12 +206,6 @@
   const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = $derived(multiSelect({ disabled, grouped: !!group }));
 </script>
 
-<select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
-  {#each items as item (item.value)}
-    <option value={item.value} disabled={item.disabled}>{item.name}</option>
-  {/each}
-</select>
-
 <div
   bind:this={multiSelectContainer}
   {...restProps}
@@ -220,6 +216,12 @@
   role="listbox"
   class={base({ size, class: clsx(theme?.base, className) })}
 >
+  <select {id} {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
+    {#each items as item (item.value)}
+      <option value={item.value} disabled={item.disabled}>{item.name}</option>
+    {/each}
+  </select>
+
   {#if !selectItems.length}
     <span class={placeholderSpan({ class: clsx(classes?.placeholder) })}>{placeholder}</span>
   {/if}

package/dist/forms/tags/Tags.svelte

@@ -182,7 +182,7 @@
       <CloseButton {disabled} size={closeBtnSize} class={close({ class: clsx(theme?.close, styling.close) })} onclick={() => deleteField(index)} />
     </div>
   {/each}
-  <div class="relative w-full" bind:this={inputContainer}>
+  <div class="relative min-w-[8rem] flex-1 self-center" bind:this={inputContainer}>
     <input
       {...inputProps}
       {disabled}

package/dist/forms/tags/theme.js

@@ -1,11 +1,11 @@
 import { tv } from "tailwind-variants";
 export const tags = tv({
     slots: {
-        base: "border border-gray-300 dark:border-gray-600 rounded-lg flex focus-within:ring-primary-500 focus-within:ring-1 focus-within:border-primary-500 scrollbar-hidden bg-gray-50 dark:bg-gray-700",
-        tag: "flex items-center rounded-lg bg-gray-100 text-gray-900 border border-gray-300 my-1 ml-1 px-2 text-sm max-w-full min-w-fit",
+        base: "border border-gray-300 dark:border-gray-600 rounded-lg flex flex-wrap focus-within:ring-primary-500 focus-within:ring-1 focus-within:border-primary-500 scrollbar-hidden bg-gray-50 dark:bg-gray-700 p-2",
+        tag: "flex items-center rounded-lg bg-gray-100 text-gray-900 border border-gray-300 my-1 ml-1 p-2 text-sm max-w-full min-w-fit",
         span: "items-center",
         close: "my-auto ml-1",
-        input: "block text-sm m-2.5 p-0 bg-transparent border-none outline-none text-gray-900 h-min w-full min-w-fit focus:ring-0 placeholder-gray-400 dark:text-white disabled:cursor-not-allowed disabled:opacity-50",
+        input: "block text-sm my-1 mx-2.5 p-0 bg-transparent border-none outline-none text-gray-900 w-full min-w-fit focus:ring-0 placeholder-gray-400 dark:text-white disabled:cursor-not-allowed disabled:opacity-50",
         info: "mt-1 text-sm text-blue-500 dark:text-blue-400",
         warning: "mt-1 text-sm text-yellow-400 dark:text-yellow-300",
         error: "mt-1 text-sm text-red-500 dark:text-red-400"

package/dist/types.d.ts

@@ -155,6 +155,7 @@ export interface AccordionItemProps extends AccordionItemVariants, HTMLAttribute
     header?: Snippet;
     arrowup?: Snippet;
     arrowdown?: Snippet;
+    headingTag?: "h2" | "h3" | "h4" | "h5" | "h6" | "div";
     activeClass?: string;
     inactiveClass?: string;
     transitionType?: TransitionFunc | "none";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -12,70 +12,70 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.29.8",
-    "@docsearch/css": "^4.3.2",
-    "@docsearch/js": "^4.3.2",
-    "@eslint/compat": "^2.0.0",
-    "@eslint/js": "^9.39.2",
+    "@changesets/cli": "^2.30.0",
+    "@docsearch/css": "^4.6.2",
+    "@docsearch/js": "^4.6.2",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/js": "^10.0.1",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
     "@flowbite-svelte-plugins/datatable": "^0.4.1",
     "@flowbite-svelte-plugins/texteditor": "^0.25.6",
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.58.2",
     "@resvg/resvg-js": "^2.6.2",
-    "@sveltejs/adapter-vercel": "^6.2.0",
-    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/adapter-vercel": "^6.3.3",
+    "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/vite": "^4.2.2",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.2.9",
+    "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@tiptap/core": "3.7.2",
-    "@vitest/browser": "^4.0.16",
-    "@vitest/browser-playwright": "^4.0.16",
-    "dayjs": "^1.11.19",
+    "@vitest/browser": "^4.1.1",
+    "@vitest/browser-playwright": "^4.1.1",
+    "dayjs": "^1.11.20",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.39.2",
+    "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.13.1",
+    "eslint-plugin-svelte": "^3.16.0",
     "flowbite-svelte-admin-dashboard": "^2.1.1",
     "flowbite-svelte-blocks": "^2.1.0",
-    "flowbite-svelte-icons": "^3.0.1",
+    "flowbite-svelte-icons": "^3.1.0",
     "flowbite-svelte-illustrations": "^1.0.6",
     "flowbite-typography": "^1.0.5",
     "globals": "^16.5.0",
     "highlight.js": "^11.11.1",
-    "jsdom": "^27.3.0",
-    "katex": "^0.16.27",
+    "jsdom": "^27.4.0",
+    "katex": "^0.16.43",
     "lowlight": "^3.3.0",
-    "mdsvex": "^0.12.6",
-    "mdsvexamples": "^0.5.0",
-    "playwright": "^1.57.0",
-    "prettier": "^3.7.4",
-    "prettier-plugin-svelte": "^3.4.1",
+    "mdsvex": "^0.12.7",
+    "mdsvexamples": "^0.5.1",
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "prism-themes": "^1.9.0",
-    "publint": "^0.3.16",
+    "publint": "^0.3.18",
     "runatics": "^0.2.0",
     "runes-meta-tags": "^0.5.0",
-    "satori": "^0.18.3",
+    "satori": "^0.26.0",
     "satori-html": "^0.3.2",
-    "super-sitemap": "^1.0.5",
-    "svelte": "^5.46.0",
-    "svelte-check": "^4.3.4",
+    "super-sitemap": "^1.0.7",
+    "svelte": "^5.55.0",
+    "svelte-check": "^4.4.5",
     "svelte-doc-llm": "^0.8.0",
     "svelte-lib-helpers": "^0.4.31",
-    "svelte-meta-tags": "^4.5.0",
+    "svelte-meta-tags": "^4.5.1",
     "svelte-rune-highlight": "^0.12.1",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.2",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0",
-    "vite": "^7.3.0",
+    "typescript-eslint": "^8.57.2",
+    "vite": "^7.3.1",
     "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^4.0.16",
-    "vitest-browser-svelte": "^2.0.1"
+    "vitest": "^4.1.1",
+    "vitest-browser-svelte": "^2.1.0"
   },
   "peerDependencies": {
     "svelte": "^5.40.0",
@@ -125,14 +125,14 @@
     "url": "git+https://github.com/themesberg/flowbite-svelte.git"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@floating-ui/utils": "^0.2.10",
-    "apexcharts": "^5.3.6",
+    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/utils": "^0.2.11",
+    "apexcharts": "^5.10.4",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "esm-env": "^1.2.2",
     "flowbite": "^3.1.2",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2"
   },
   "files": [