flowbite-svelte 1.30.1 → 1.32.0

package/dist/accordion/Accordion.svelte

@@ -9,7 +9,7 @@
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
 
-  const theme = getTheme("accordion");
+  const theme = $derived(getTheme("accordion"));
 
   // Simple reactive state object
   const reactiveCtx: AccordionContextType = {

package/dist/accordion/AccordionItem.svelte

@@ -13,6 +13,7 @@
     header,
     arrowup,
     arrowdown,
+    headingTag,
     open = $bindable(false),
     activeClass,
     inactiveClass,
@@ -50,7 +51,7 @@
   const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
 
   // Theme context
-  const theme = getTheme("accordionItem");
+  const theme = $derived(getTheme("accordionItem"));
 
   // single selection
   const self = Symbol("accordion-item");
@@ -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

@@ -23,7 +23,7 @@
   }: AlertProps = $props();
 
   // Theme context
-  const theme = getTheme("alert");
+  const theme = $derived(getTheme("alert"));
 
   let divCls = $derived(
     alert({

package/dist/avatar/Avatar.svelte

@@ -8,7 +8,7 @@
   let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
 
   // Theme context
-  const theme = getTheme("avatar");
+  const theme = $derived(getTheme("avatar"));
 
   let dotProps = $derived(dot ? { placement: "top-right" as const, color: "gray" as const, size: "lg" as const, ...dot } : undefined);
 

package/dist/badge/Badge.svelte

@@ -36,7 +36,7 @@
   const styling = $derived(classes ?? { linkClass: aClass });
 
   // Theme context
-  const theme = getTheme("badge");
+  const theme = $derived(getTheme("badge"));
 
   const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border }));
 

package/dist/banner/Banner.svelte

@@ -34,7 +34,7 @@
   const styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
 
   // Theme context
-  const theme = getTheme("banner");
+  const theme = $derived(getTheme("banner"));
 
   const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
 

package/dist/bottom-navigation/BottomNav.svelte

@@ -18,7 +18,7 @@
   const styling = $derived(classes ?? { inner: innerClass });
 
   // Theme context
-  const theme = getTheme("bottomNav");
+  const theme = $derived(getTheme("bottomNav"));
 
   const activeCls = $derived(cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass));
 

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -16,7 +16,7 @@
   const styling = $derived(classes ?? { innerDiv: innerClass });
 
   // Theme context
-  const theme = getTheme("bottomNavHeader");
+  const theme = $derived(getTheme("bottomNavHeader"));
 
   const { innerDiv, base } = $derived(bottomNavHeader());
 </script>

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -7,7 +7,7 @@
   let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
 
   // Theme context
-  const theme = getTheme("bottomNavHeaderItem");
+  const theme = $derived(getTheme("bottomNavHeaderItem"));
 
   let base = $derived(bottomNavHeaderItem({ active, class: clsx(theme, className) }));
 </script>

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -18,7 +18,7 @@
   const styling = $derived(classes ?? { span: spanClass });
 
   // Theme context
-  const theme = getTheme("bottomNavItem");
+  const theme = $derived(getTheme("bottomNavItem"));
 
   const context = getBottomNavContext();
 

package/dist/breadcrumb/Breadcrumb.svelte

@@ -15,7 +15,7 @@
 
   const styling = $derived(classes ?? { list: olClass });
 
-  const theme = getTheme("breadcrumb");
+  const theme = $derived(getTheme("breadcrumb"));
 
   const { base, list } = $derived(breadcrumb({ solid }));
   let classNav = $derived(base({ class: clsx(theme?.base, className) }));

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -8,7 +8,7 @@
 
   const styling = $derived(classes ?? {});
 
-  const theme = getTheme("breadcrumbItem");
+  const theme = $derived(getTheme("breadcrumbItem"));
 
   const { base, separator } = $derived(
     breadcrumbItem({

package/dist/button-group/ButtonGroup.svelte

@@ -7,7 +7,7 @@
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
-  const theme = getTheme("buttonGroup");
+  const theme = $derived(getTheme("buttonGroup"));
 
   let groupClass = $derived(buttonGroup({ size, class: clsx(theme, className) }));
 

package/dist/buttons/Button.svelte

@@ -25,7 +25,7 @@
     ...restProps
   }: ButtonProps = $props();
 
-  const theme = getTheme("button");
+  const theme = $derived(getTheme("button"));
 
   let actualSize = $derived(group ? "sm" : size);
   let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));

package/dist/buttons/GradientButton.svelte

@@ -10,7 +10,7 @@
 
   let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, btnClass, ...restProps }: GradientButtonProps = $props();
 
-  const theme = getTheme("gradientButton");
+  const theme = $derived(getTheme("gradientButton"));
 
   const { base, outlineWrapper } = $derived(gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group }));
 </script>

package/dist/card/Card.svelte

@@ -15,7 +15,7 @@
 
   const styling = $derived(classes ?? { image: imgClass });
 
-  const theme = getTheme("card");
+  const theme = $derived(getTheme("card"));
 
   const { base, image } = $derived(
     card({

package/dist/carousel/Carousel.svelte

@@ -39,7 +39,7 @@
   const styling = $derived(classes ?? { slide: imgClass });
 
   // Theme context
-  const theme = getTheme("carousel");
+  const theme = $derived(getTheme("carousel"));
 
   let { base, slide: slideCls } = $derived(carousel());
 

package/dist/carousel/CarouselIndicators.svelte

@@ -8,7 +8,7 @@
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
 
-  const theme = getTheme("carouselIndicators");
+  const theme = $derived(getTheme("carouselIndicators"));
 
   const _state = getCarouselContext();
   const { base, indicator } = $derived(carouselIndicators({ position }));

package/dist/carousel/ControlButton.svelte

@@ -8,7 +8,7 @@
 
   const { base, span } = $derived(controlButton({ forward }));
 
-  const theme = getTheme("controlButton");
+  const theme = $derived(getTheme("controlButton"));
 </script>
 
 <button type="button" class={base({ class: clsx(className, theme) })} {...restProps}>

package/dist/carousel/Controls.svelte

@@ -7,7 +7,7 @@
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
-  const theme = getTheme("controlButton");
+  const theme = $derived(getTheme("controlButton"));
 
   const _state = getCarouselContext();
 

package/dist/carousel/Slide.svelte

@@ -10,7 +10,7 @@
 
   let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
 
-  const theme = getTheme("slide");
+  const theme = $derived(getTheme("slide"));
 
   let transitionSlideIn = $derived({
     x: _state?.forward ? "100%" : "-100%",

package/dist/carousel/Thumbnail.svelte

@@ -6,7 +6,7 @@
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
 
-  const theme = getTheme("thumbnail");
+  const theme = $derived(getTheme("thumbnail"));
 </script>
 
 <img {...restProps} class={thumbnail({ selected, class: clsx(theme, className) })} />

package/dist/carousel/Thumbnails.svelte

@@ -7,7 +7,7 @@
 
   let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
 
-  const theme = getTheme("thumbnails");
+  const theme = $derived(getTheme("thumbnails"));
 
   // Initialize so the first click is never throttled
   let lastClickedAt = -Infinity;

package/dist/clipboard/Clipboard.svelte

@@ -8,7 +8,7 @@
 
   let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
 
-  const theme = getTheme("clipboard");
+  const theme = $derived(getTheme("clipboard"));
 
   const copyToClipboard: MouseEventHandler<HTMLButtonElement> = async (ev) => {
     onclick?.(ev);

package/dist/clipboard-manager/ClipboardManager.svelte

@@ -30,7 +30,7 @@
     detectSensitiveData
   }: ClipboardManagerProps = $props();
 
-  const theme = getTheme("clipboardManager");
+  const theme = $derived(getTheme("clipboardManager"));
 
   const isModal = $derived(open !== undefined);
 

package/dist/command-palette/CommandPalette.svelte

@@ -21,7 +21,7 @@
     ...restProps
   }: CommandPaletteProps = $props();
 
-  const theme = getTheme("commandPalette");
+  const theme = $derived(getTheme("commandPalette"));
 
   let search = $state("");
   let selectedIndex = $state(0);
@@ -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#L2312)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2313)
 ## 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#L2312)
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2313)
  * ## Props
  * @prop open = $bindable(false)
  * @prop items = []

package/dist/context.d.ts

@@ -19,7 +19,10 @@ declare const getListContext: () => ListContextType | undefined, setListContext:
 export { getListContext, setListContext };
 declare const getToolbarContext: () => ToolbarContextType | undefined, setToolbarContext: (context: ToolbarContextType) => ToolbarContextType;
 export { getToolbarContext, setToolbarContext };
-declare const getThemeContext: () => ThemeConfig | undefined, setThemeContext: (context: ThemeConfig) => ThemeConfig;
+type ThemeContextValue = ThemeConfig | {
+    value?: ThemeConfig;
+};
+declare const getThemeContext: () => ThemeContextValue | undefined, setThemeContext: (context: ThemeContextValue) => ThemeContextValue;
 export { getThemeContext, setThemeContext };
 declare const getListGroupContext: () => ListGroupContextType | undefined, setListGroupContext: (context: ListGroupContextType) => ListGroupContextType;
 export { getListGroupContext, setListGroupContext };

package/dist/context.js

@@ -42,7 +42,6 @@ export { getListContext, setListContext };
 // Toolbar
 const [getToolbarContext, setToolbarContext] = createSafeContext();
 export { getToolbarContext, setToolbarContext };
-// Theme
 const [getThemeContext, setThemeContext] = createSafeContext();
 export { getThemeContext, setThemeContext };
 // ListGroup

package/dist/darkmode/DarkMode.svelte

@@ -7,7 +7,7 @@
   // const THEME_PREFERENCE_KEY = 'color-theme';
   let { class: className, lightIcon, darkIcon, size = "md", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
 
-  const theme = getTheme("darkmode");
+  const theme = $derived(getTheme("darkmode"));
 
   const sizes = {
     sm: "w-4 h-4",

package/dist/datepicker/Datepicker.svelte

@@ -45,7 +45,7 @@
     inputProps = {}
   }: DatepickerProps = $props();
 
-  const theme = getTheme("datepicker");
+  const theme = $derived(getTheme("datepicker"));
 
   // If translationLocale is not explicitly provided, it will default to the value of locale. This ensures reactivity as both are directly exposed as props.
   const finalTranslationLocale = $derived(translationLocale ?? locale);
@@ -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/drawer/Drawer.svelte

@@ -64,7 +64,7 @@
   });
   // end
 
-  const theme = getTheme("drawer");
+  const theme = $derived(getTheme("drawer"));
 
   let shifted = $state(true);
 

package/dist/drawer/DrawerHandle.svelte

@@ -9,7 +9,7 @@
 
   const ctx = getDrawerContext();
 
-  const theme = getTheme("drawerhandle");
+  const theme = $derived(getTheme("drawerhandle"));
   let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" }));
 </script>
 

package/dist/drawer/Drawerhead.svelte

@@ -15,7 +15,7 @@
 
   const styling = $derived(classes ?? { button: buttonClass, svg: svgClass });
 
-  const theme = getTheme("drawer");
+  const theme = $derived(getTheme("drawer"));
 
   const { base, button, svg } = $derived(drawerhead());
 </script>

package/dist/dropdown/Dropdown.svelte

@@ -9,7 +9,7 @@
 
   let { children, simple = false, placement = "bottom", offset = 2, class: className, activeUrl = "", isOpen = $bindable(false), onclose, ...restProps }: DropdownProps = $props();
 
-  const theme = getTheme("dropdown");
+  const theme = $derived(getTheme("dropdown"));
 
   const base = $derived(dropdown({ class: clsx(theme, className) }));
 

package/dist/dropdown/DropdownDivider.svelte

@@ -6,7 +6,7 @@
 
   let { class: className, ...restProps }: DropdownDividerProps = $props();
 
-  const theme = getTheme("dropdownDivider");
+  const theme = $derived(getTheme("dropdownDivider"));
 </script>
 
 <div {...restProps} class={dropdownDivider({ class: clsx(theme, className) })}></div>

package/dist/dropdown/DropdownGroup.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: DropdownGroupProps = $props();
 
-  const theme = getTheme("dropdownGroup");
+  const theme = $derived(getTheme("dropdownGroup"));
 </script>
 
 <ul {...restProps} class={dropdownGroup({ class: clsx(theme, className) })}>

package/dist/dropdown/DropdownHeader.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
 
-  const theme = getTheme("dropdownHeader");
+  const theme = $derived(getTheme("dropdownHeader"));
 </script>
 
 <div {...restProps} class={dropdownHeader({ class: clsx(theme, className) })}>

package/dist/dropdown/DropdownItem.svelte

@@ -16,7 +16,7 @@
 
   const styling = $derived(classes ?? { active: activeClass, li: liClass });
 
-  const theme = getTheme("dropdownItem");
+  const theme = $derived(getTheme("dropdownItem"));
 
   const ctx = getDropdownContext();
 

package/dist/footer/Footer.svelte

@@ -6,7 +6,7 @@
 
   let { children, footerType = "default", class: className, ...restProps }: FooterProps = $props();
 
-  const theme = getTheme("footer");
+  const theme = $derived(getTheme("footer"));
 
   const footerCls = $derived(footer({ footerType, class: clsx(theme, className) }));
 </script>

package/dist/footer/FooterBrand.svelte

@@ -6,7 +6,7 @@
 
   let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: FooterBrandProps = $props();
 
-  const theme = getTheme("footerBrand");
+  const theme = $derived(getTheme("footerBrand"));
 
   const { base, span, img } = $derived(footerBrand());
 </script>

package/dist/footer/FooterCopyright.svelte

@@ -17,7 +17,7 @@
   // link, bySpan
   const styling = $derived(classes ?? { bySpan: bySpanClass, link: aClass });
 
-  const theme = getTheme("footerCopyright");
+  const theme = $derived(getTheme("footerCopyright"));
 
   const effectiveYear = $derived(year ?? new SvelteDate().getFullYear());
 

package/dist/footer/FooterIcon.svelte

@@ -6,7 +6,7 @@
 
   let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
 
-  const theme = getTheme("footerIcon");
+  const theme = $derived(getTheme("footerIcon"));
 </script>
 
 {#if href}

package/dist/footer/FooterLink.svelte

@@ -16,7 +16,7 @@
   // link, bySpan
   const styling = $derived(classes ?? { link: aClass });
 
-  const theme = getTheme("footerLink");
+  const theme = $derived(getTheme("footerLink"));
 
   const { base, link } = footerLink();
 </script>

package/dist/footer/FooterLinkGroup.svelte

@@ -6,7 +6,7 @@
 
   let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
 
-  const theme = getTheme("footerLinkGroup");
+  const theme = $derived(getTheme("footerLinkGroup"));
 </script>
 
 <ul {...restProps} class={footerLinkGroup({ class: clsx(theme, className) })}>

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -19,7 +19,7 @@
   // button(className), content, text, icon
   const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });
 
-  const theme = getTheme("buttonToggle");
+  const theme = $derived(getTheme("buttonToggle"));
 
   // Get context - it will be undefined if used outside ButtonToggleGroup
   const ctx = getButtonToggleContext();

package/dist/forms/button-toggle/ButtonToggleGroup.svelte

@@ -20,7 +20,7 @@
     ...restProps
   }: ButtonToggleGroupProps = $props();
 
-  const theme = getTheme("buttonToggleGroup");
+  const theme = $derived(getTheme("buttonToggleGroup"));
 
   const base = $derived(buttonToggleGroup({ roundedSize, class: clsx(theme, className) }));
   type SelectedValue = string | null | string[];

package/dist/forms/checkbox/Checkbox.svelte

@@ -33,7 +33,7 @@
 
   const styling = $derived(classes ?? { div: divClass });
 
-  const theme = getTheme("checkbox");
+  const theme = $derived(getTheme("checkbox"));
 
   const { base, div: divStyle } = $derived(checkbox({ color, tinted, custom, rounded, inline, disabled: disabled ?? false }));
 

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -8,7 +8,7 @@
 
   let { children, class: className, group = $bindable(), checked = $bindable(false), inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
 
-  const theme = getTheme("checkboxButton");
+  const theme = $derived(getTheme("checkboxButton"));
 
   let buttonClass: string = $derived(checkboxButton({ inline, checked, class: clsx(theme, className) }));
 </script>

package/dist/forms/dropzone/Dropzone.svelte

@@ -9,7 +9,7 @@
 
   let { children, files = $bindable<FileList | null>(), class: className, onDrop, onDragOver, onChange, ...restProps }: DropzoneProps = $props();
 
-  const theme = getTheme("dropzone");
+  const theme = $derived(getTheme("dropzone"));
 
   let inputElement: HTMLInputElement;
 

package/dist/forms/fileupload/Fileupload.svelte

@@ -30,7 +30,7 @@
 
   const styling = $derived(classes ?? { wrapper: wrapperClass, close: clearableClass, svg: clearableSvgClass });
 
-  const theme = getTheme("fileupload");
+  const theme = $derived(getTheme("fileupload"));
 
   const { base, wrapper, close } = fileupload();
 

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -41,7 +41,7 @@
 
   const styling = $derived(classes ?? { input: inputClass, label: labelClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass });
 
-  const theme = getTheme("floatingLabelInput");
+  const theme = $derived(getTheme("floatingLabelInput"));
 
   const { base, input, label, close, combo } = $derived(floatingLabelInput({ variant, size, color }));