flowbite-svelte 1.31.0 → 1.33.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/alert/Alert.svelte

@@ -12,6 +12,7 @@
     icon,
     alertStatus = $bindable(true),
     closeIcon: CloseIcon,
+    closeAriaLabel = "Remove alert",
     color = "primary",
     rounded = true,
     border,
@@ -63,11 +64,11 @@
 
     {#if dismissable}
       {#if CloseIcon}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert">
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel={closeAriaLabel}>
           <CloseIcon />
         </CloseButton>
       {:else}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert" />
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel={closeAriaLabel} />
       {/if}
     {/if}
   </div>
@@ -83,6 +84,7 @@
 @prop icon
 @prop alertStatus = $bindable(true)
 @prop closeIcon: CloseIcon
+@prop closeAriaLabel = "Remove alert"
 @prop color = "primary"
 @prop rounded = true
 @prop border

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

@@ -8,6 +8,7 @@ import { type AlertProps } from "..";
  * @prop icon
  * @prop alertStatus = $bindable(true)
  * @prop closeIcon: CloseIcon
+ * @prop closeAriaLabel = "Remove alert"
  * @prop color = "primary"
  * @prop rounded = true
  * @prop border

package/dist/badge/Badge.svelte

@@ -15,6 +15,7 @@
     color = "primary",
     large = false,
     dismissable = false,
+    closeAriaLabel = "Remove badge",
     class: className,
     classes,
     border,
@@ -63,11 +64,11 @@
 
     {#if dismissable}
       {#if icon}
-        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge">
+        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel={closeAriaLabel}>
           {@render icon()}
         </CloseButton>
       {:else}
-        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge" />
+        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel={closeAriaLabel} />
       {/if}
     {/if}
   </div>
@@ -85,6 +86,7 @@
 @prop color = "primary"
 @prop large = false
 @prop dismissable = false
+@prop closeAriaLabel = "Remove badge"
 @prop class: className
 @prop classes
 @prop border

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

@@ -10,6 +10,7 @@ import { type BadgeProps } from "..";
  * @prop color = "primary"
  * @prop large = false
  * @prop dismissable = false
+ * @prop closeAriaLabel = "Remove badge"
  * @prop class: className
  * @prop classes
  * @prop border

package/dist/banner/Banner.svelte

@@ -13,6 +13,7 @@
     header,
     open = $bindable(true),
     dismissable = true,
+    closeAriaLabel = "Remove banner",
     color = "gray",
     type,
     class: className,
@@ -56,7 +57,7 @@
 
     {#if dismissable}
       <div class="flex items-center justify-end">
-        <CloseButton class={dismissableClass({ class: clsx(theme?.dismissable, styling.dismissable) })} {color} ariaLabel="Remove banner" />
+        <CloseButton class={dismissableClass({ class: clsx(theme?.dismissable, styling.dismissable) })} {color} ariaLabel={closeAriaLabel} />
       </div>
     {/if}
   </div>
@@ -72,6 +73,7 @@
 @prop header
 @prop open = $bindable(true)
 @prop dismissable = true
+@prop closeAriaLabel = "Remove banner"
 @prop color = "gray"
 @prop type
 @prop class: className

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

@@ -8,6 +8,7 @@ import { type BannerProps } from "..";
  * @prop header
  * @prop open = $bindable(true)
  * @prop dismissable = true
+ * @prop closeAriaLabel = "Remove banner"
  * @prop color = "gray"
  * @prop type
  * @prop class: className

package/dist/context.d.ts

@@ -30,7 +30,13 @@ declare const getButtonGroupContext: () => ButtonGroupContextType | undefined, s
 export { getButtonGroupContext, setButtonGroupContext };
 declare const getNavbarStateContext: () => NavbarState | undefined, setNavbarStateContext: (context: NavbarState) => NavbarState;
 export { getNavbarStateContext, setNavbarStateContext };
-declare const getNavbarBreakpointContext: () => NavbarBreakpoint | undefined, setNavbarBreakpointContext: (context: NavbarBreakpoint) => NavbarBreakpoint;
+declare const getNavbarBreakpointContext: () => {
+    value: NavbarBreakpoint;
+} | undefined, setNavbarBreakpointContext: (context: {
+    value: NavbarBreakpoint;
+}) => {
+    value: NavbarBreakpoint;
+};
 export { getNavbarBreakpointContext, setNavbarBreakpointContext };
 declare const getSidebarContext: () => SidebarContextType | undefined, setSidebarContext: (context: SidebarContextType) => SidebarContextType;
 export { getSidebarContext, setSidebarContext };

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/navbar/NavHamburger.svelte

@@ -21,8 +21,8 @@
 
   const theme = $derived(getTheme("navbarHamburger"));
   const navState = getNavbarStateContext();
-  const navBreakpoint = getNavbarBreakpointContext();
-  const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint ?? "md" });
+  const navBreakpointCtx = getNavbarBreakpointContext();
+  const { base, menu } = $derived(navbarHamburger({ breakpoint: navBreakpointCtx?.value ?? "md" }));
 
   const toggle: MouseEventHandler<HTMLButtonElement> = () => {
     if (!navState) return;

package/dist/navbar/NavLi.svelte

@@ -6,7 +6,7 @@
   import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
 
   let navState = getNavbarStateContext();
-  let navBreakpoint = getNavbarBreakpointContext();
+  let navBreakpointCtx = getNavbarBreakpointContext();
 
   let { children, onclick, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
@@ -15,7 +15,7 @@
   let active = $derived(navState?.activeUrl ? restProps.href === navState.activeUrl : false);
   let liClass = $derived(
     navbarLi({
-      breakpoint: navBreakpoint ?? "md",
+      breakpoint: navBreakpointCtx?.value ?? "md",
       hidden: navState?.hidden ?? true,
       class: clsx(active ? (activeClass ?? navState?.activeClass) : (nonActiveClass ?? navState?.nonActiveClass), theme, className)
     })

package/dist/navbar/NavUl.svelte

@@ -10,7 +10,7 @@
   import { untrack } from "svelte";
 
   let navState = getNavbarStateContext();
-  let navBreakpoint = getNavbarBreakpointContext();
+  let navBreakpointCtx = getNavbarBreakpointContext();
 
   let {
     children,
@@ -60,7 +60,7 @@
 
   let hidden: boolean = $derived(navState?.hidden ?? true);
 
-  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint ?? "md" }));
+  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpointCtx?.value ?? "md" }));
 
   $effect(() => {
     if (!navState) return;

package/dist/navbar/Navbar.svelte

@@ -5,6 +5,8 @@
   import type { NavbarState, NavbarProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
   import { setNavbarStateContext, setNavbarBreakpointContext } from "../context";
+  import type { NavbarBreakpoint } from "../types";
+  import { untrack } from "svelte";
 
   let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
 
@@ -13,8 +15,11 @@
   let navState = $state<NavbarState>({ hidden: true });
   setNavbarStateContext(navState);
 
+  let breakpointState = $state<{ value: NavbarBreakpoint }>({ value: untrack(() => breakpoint) });
+  setNavbarBreakpointContext(breakpointState);
+
   $effect(() => {
-    setNavbarBreakpointContext(breakpoint);
+    breakpointState.value = breakpoint;
   });
 
   // Add reference to the navbar element

package/dist/speed-dial/SpeedDial.svelte

@@ -35,9 +35,19 @@
 
   const theme = $derived(getTheme("speedDial"));
 
-  $effect(() => {
-    setContext<SpeedCtxType>("speed-dial", { pill, tooltip, textOutside });
-  });
+  const speedDialCtx: SpeedCtxType = {
+    get pill() {
+      return pill;
+    },
+    get tooltip() {
+      return tooltip;
+    },
+    get textOutside() {
+      return textOutside;
+    }
+  };
+
+  setContext<SpeedCtxType>("speed-dial", speedDialCtx);
 
   let vertical: boolean = $derived(getSideAxis(placement) === "y");
 

package/dist/table/TableSearch.svelte

@@ -25,6 +25,7 @@
     class: className,
     classes,
     placeholder = "Search",
+    oninput,
     ...restProps
   }: TableSearchProps = $props();
 
@@ -57,15 +58,19 @@
   // Handle custom color
   const finalTableClass = $derived(color === "custom" && customColor ? clsx(tableCls, customColor) : tableCls);
 
-  const tableSearchCtx = $derived<TableContextType>({
-    striped,
-    hoverable,
-    color: themeColor
-  });
+  const tableSearchCtx: TableContextType = {
+    get striped() {
+      return striped;
+    },
+    get hoverable() {
+      return hoverable;
+    },
+    get color() {
+      return themeColor;
+    }
+  };
 
-  $effect(() => {
-    setTableContext(tableSearchCtx);
-  });
+  setTableContext(tableSearchCtx);
 </script>
 
 <div class={root({ class: clsx(theme?.root, styling.root) })}>
@@ -77,7 +82,7 @@
           <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
         </svg>
       </div>
-      <input bind:value={inputValue} type="text" id="table-search" class={input({ class: clsx(theme?.input, styling.input) })} {placeholder} />
+      <input bind:value={inputValue} type="text" id="table-search" class={input({ class: clsx(theme?.input, styling.input) })} {placeholder} {oninput} />
     </div>
     {#if header}
       {@render header()}
@@ -117,5 +122,6 @@
 @prop class: className
 @prop classes
 @prop placeholder = "Search"
+@prop oninput
 @prop ...restProps
 -->

package/dist/table/TableSearch.svelte.d.ts

@@ -22,6 +22,7 @@ import type { TableSearchProps } from "../types";
  * @prop class: className
  * @prop classes
  * @prop placeholder = "Search"
+ * @prop oninput
  * @prop ...restProps
  */
 declare const TableSearch: import("svelte").Component<TableSearchProps, {}, "inputValue">;

package/dist/toast/Toast.svelte

@@ -13,6 +13,7 @@
     icon,
     toastStatus = $bindable(true),
     dismissable = true,
+    closeAriaLabel = "Remove toast",
     color = "primary",
     position,
     iconClass,
@@ -69,7 +70,7 @@
     </div>
 
     {#if dismissable}
-      <CloseButton class={close({ class: clsx(theme?.close, classes?.close) })} ariaLabel="Remove toast" {color} />
+      <CloseButton class={close({ class: clsx(theme?.close, classes?.close) })} ariaLabel={closeAriaLabel} {color} />
     {/if}
   </div>
 {/if}
@@ -84,6 +85,7 @@
 @prop icon
 @prop toastStatus = $bindable(true)
 @prop dismissable = true
+@prop closeAriaLabel = "Remove toast"
 @prop color = "primary"
 @prop position
 @prop iconClass

package/dist/toast/Toast.svelte.d.ts

@@ -8,6 +8,7 @@ import type { ToastProps } from "../types";
  * @prop icon
  * @prop toastStatus = $bindable(true)
  * @prop dismissable = true
+ * @prop closeAriaLabel = "Remove toast"
  * @prop color = "primary"
  * @prop position
  * @prop iconClass

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";
@@ -167,6 +168,7 @@ export interface AlertProps extends Omit<AlertVariants, "icon">, Omit<HTMLAttrib
     icon?: Snippet;
     alertStatus?: boolean;
     closeIcon?: Component;
+    closeAriaLabel?: string;
     transition?: TransitionFunc;
     params?: ParamsType;
     onclick?: () => void;
@@ -187,6 +189,7 @@ export interface BadgeProps extends BadgeVariants, Omit<HTMLAttributes<HTMLDivEl
     badgeStatus?: boolean;
     large?: boolean;
     dismissable?: boolean;
+    closeAriaLabel?: string;
     href?: HTMLAnchorAttributes["href"];
     target?: HTMLAnchorAttributes["target"];
     transition?: TransitionFunc;
@@ -197,6 +200,7 @@ export interface BannerProps extends BannerVariants, Omit<HTMLAttributes<HTMLDiv
     header?: Snippet;
     open?: boolean;
     dismissable?: boolean;
+    closeAriaLabel?: string;
     innerClass?: ClassValue;
     transition?: TransitionFunc;
     params?: ParamsType;
@@ -1589,6 +1593,7 @@ export interface TableSearchProps extends TableSearchVariants, HTMLTableAttribut
     svgClass?: ClassValue;
     tableClass?: ClassValue;
     placeholder?: string;
+    oninput?: (event: Event) => void;
 }
 export interface TabsProps extends TabsVaraints, HTMLAttributes<HTMLUListElement> {
     children: Snippet;
@@ -1700,6 +1705,7 @@ export interface ToastProps extends ToastVaraints, HTMLAttributes<HTMLDivElement
     icon?: Snippet;
     toastStatus?: boolean;
     dismissable?: boolean;
+    closeAriaLabel?: string;
     color?: ToastVaraints["color"];
     position?: ToastVaraints["position"];
     iconClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.31.0",
+  "version": "1.33.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": [