flowbite-svelte 1.19.1 → 1.20.0

package/dist/dropdown/DropdownItem.svelte

@@ -40,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L611)
+[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L612)
 ## Props
 @prop aClass
 @prop children

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropdownItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L611)
+ * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L612)
  * ## Props
  * @prop aClass
  * @prop children

package/dist/footer/Footer.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L626)
+[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L627)
 ## Props
 @prop children
 @prop footerType = "default"

package/dist/footer/Footer.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L626)
+ * [FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L627)
  * ## Props
  * @prop children
  * @prop footerType = "default"

package/dist/footer/FooterBrand.svelte

@@ -31,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L631)
+[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L632)
 ## Props
 @prop children
 @prop aClass

package/dist/footer/FooterBrand.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterBrandProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L631)
+ * [FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L632)
  * ## Props
  * @prop children
  * @prop aClass

package/dist/footer/FooterCopyright.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L642)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L643)
 ## Props
 @prop spanClass
 @prop aClass

package/dist/footer/FooterCopyright.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterCopyrightProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L642)
+ * [FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L643)
  * ## Props
  * @prop spanClass
  * @prop aClass

package/dist/footer/FooterIcon.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L652)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L653)
 ## Props
 @prop children
 @prop href

package/dist/footer/FooterIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterIconProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L652)
+ * [FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L653)
  * ## Props
  * @prop children
  * @prop href

package/dist/footer/FooterLink.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L663)
 ## Props
 @prop children
 @prop liClass

package/dist/footer/FooterLink.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterLinkProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
+ * [FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L663)
  * ## Props
  * @prop children
  * @prop liClass

package/dist/footer/FooterLinkGroup.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L658)
+[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L659)
 ## Props
 @prop class: className
 @prop children

package/dist/footer/FooterLinkGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterLinkGroupProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L658)
+ * [FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L659)
  * ## Props
  * @prop class: className
  * @prop children

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

@@ -35,7 +35,15 @@
   });
 </script>
 
-<button type="button" class={button({ selected, color: actualColor, size, roundedSize, class: clsx(theme?.button, ctxBtnClass, className) })} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
+<button
+  type="button"
+  class={button({ selected, color: actualColor, size, roundedSize, class: clsx(theme?.button, ctxBtnClass, className) })}
+  data-selected={selected}
+  onclick={handleClick}
+  role={multiSelect ? "checkbox" : "radio"}
+  aria-checked={selected}
+  {...restProps}
+>
   <div class={content({ class: clsx(theme?.content, styling.content) })}>
     {#if selected}
       {#if iconSlot}
@@ -54,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L336)
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L337)
 ## Props
 @prop value
 @prop selected = false

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

@@ -2,7 +2,7 @@ import type { ButtonToggleProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L336)
+ * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L337)
  * ## Props
  * @prop value
  * @prop selected = false

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

@@ -5,7 +5,20 @@
   import { buttonToggleGroup } from "./theme";
   import { getTheme } from "../../theme/themeUtils";
 
-  let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = () => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
+  let {
+    multiSelect = false,
+    name = "toggle-group",
+    value = multiSelect ? [] : null,
+    color,
+    size = "md",
+    roundedSize = "md",
+    onSelect = () => {},
+    children,
+    ctxIconClass,
+    ctxBtnClass,
+    class: className,
+    ...restProps
+  }: ButtonToggleGroupProps = $props();
 
   const theme = getTheme("buttonToggleGroup");
 

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

@@ -4,7 +4,19 @@
   let { class: className, ...restProps }: CheckIconProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={clsx(className)} {...restProps}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={clsx(className)}
+  {...restProps}
+>
   <polyline points="20 6 9 17 4 12"></polyline>
 </svg>
 
@@ -12,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L353)
+[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L354)
 ## Props
 @prop class: className
 @prop ...restProps

package/dist/forms/button-toggle/CheckIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CheckIconProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L353)
+ * [CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L354)
  * ## Props
  * @prop class: className
  * @prop ...restProps

package/dist/forms/checkbox/Checkbox.svelte

@@ -5,7 +5,24 @@
   import Label from "../label/Label.svelte";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
-  let { children, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), classes, class: className, divClass, disabled, value, labelProps = {}, ...restProps }: CheckboxProps = $props();
+  let {
+    children,
+    color = "primary",
+    custom,
+    inline,
+    tinted,
+    rounded,
+    group = $bindable([]),
+    choices = [],
+    checked = $bindable(false),
+    classes,
+    class: className,
+    divClass,
+    disabled,
+    value,
+    labelProps = {},
+    ...restProps
+  }: CheckboxProps = $props();
 
   warnThemeDeprecation("Checkbox", { divClass }, { divClass: "div" });
   const styling = $derived(classes ?? { div: divClass });

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -22,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L690)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L691)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CheckboxButtonProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L690)
+ * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L691)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/dropzone/Dropzone.svelte

@@ -52,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L700)
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L701)
 ## Props
 @prop children
 @prop files = $bindable<FileList | null>()

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropzoneProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L700)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L701)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()

package/dist/forms/fileupload/Fileupload.svelte

@@ -6,7 +6,20 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, classes, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, wrapperClass, ...restProps }: FileuploadProps = $props();
+  let {
+    files = $bindable(),
+    size = "md",
+    clearable = false,
+    elementRef = $bindable(),
+    class: className,
+    classes,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    wrapperClass,
+    ...restProps
+  }: FileuploadProps = $props();
 
   warnThemeDeprecation("Fileupload", { wrapperClass, clearableClass, clearableSvgClass }, { wrapperClass: "wrapper", clearableClass: "close", clearableSvgClass: "svg" });
   const styling = $derived(classes ?? { wrapper: wrapperClass, close: clearableClass, svg: clearableSvgClass });
@@ -37,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L709)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L710)
 ## Props
 @prop files = $bindable()
 @prop size = "md"

package/dist/forms/fileupload/Fileupload.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FileuploadProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L709)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L710)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"

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

@@ -7,9 +7,36 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), variant = "standard", size = "default", color = "default", class: className, classes, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, placeholder, ...restProps }: FloatingLabelInputProps = $props();
-
-  warnThemeDeprecation("FloatingLabelInput", { inputClass, labelClass, clearableSvgClass, clearableClass, comboClass }, { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" });
+  let {
+    children,
+    id = idGenerator(),
+    value = $bindable(),
+    elementRef = $bindable(),
+    variant = "standard",
+    size = "default",
+    color = "default",
+    class: className,
+    classes,
+    inputClass,
+    labelClass,
+    clearable,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    data = [],
+    maxSuggestions = 5,
+    onSelect,
+    comboClass,
+    placeholder,
+    ...restProps
+  }: FloatingLabelInputProps = $props();
+
+  warnThemeDeprecation(
+    "FloatingLabelInput",
+    { inputClass, labelClass, clearableSvgClass, clearableClass, comboClass },
+    { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" }
+  );
   const styling = $derived(classes ?? { input: inputClass, label: labelClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass });
 
   const theme = getTheme("floatingLabelInput");
@@ -145,7 +172,18 @@
 {/if}
 
 <div class={base({ class: clsx(isCombobox ? "relative" : "", theme?.base, className) })}>
-  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} class={input({ class: clsx(theme?.input, styling.input) })} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
+  <input
+    {id}
+    placeholder=" "
+    bind:value
+    bind:this={elementRef}
+    {...restProps}
+    class={input({ class: clsx(theme?.input, styling.input) })}
+    oninput={handleInput}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    onkeydown={handleKeydown}
+  />
   {#if value !== undefined && value !== "" && clearable}
     <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
   {/if}
@@ -156,7 +194,12 @@
   {#if isCombobox && isFocused && filteredSuggestions.length > 0}
     <div class={combo({ class: clsx(theme?.combo, styling.combo) })}>
       {#each filteredSuggestions as item, i}
-        <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
+        <button
+          type="button"
+          class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none"
+          onclick={() => selectItem(item)}
+          onmouseenter={() => (selectedIndex = i)}
+        >
           {item}
         </button>
       {/each}
@@ -168,7 +211,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L723)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L724)
 ## Props
 @prop children
 @prop id = idGenerator()

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

@@ -2,7 +2,7 @@ import type { FloatingLabelInputProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L723)
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L724)
  * ## Props
  * @prop children
  * @prop id = idGenerator()

package/dist/forms/helper/Helper.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L747)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L748)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/helper/Helper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { HelperProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L747)
+ * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L748)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/input-addon/InputAddon.svelte

@@ -31,7 +31,18 @@
   // size: explicit, inherited, default
   let _size = size || clampSize(group?.size) || "md";
 
-  let divClass: string = clsx(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className);
+  let divClass: string = clsx(
+    textSizes[_size],
+    prefixPadding[_size],
+    "text-gray-500 bg-gray-200",
+    background ? darkBgClasses.tinted : darkBgClasses.base,
+    background ? divider.tinted : divider.base,
+    background ? borderClasses["tinted"] : borderClasses["base"],
+    "inline-flex items-center border",
+    group && "not-first:-ms-px",
+    "first:rounded-s-lg last:rounded-e-lg",
+    className
+  );
 </script>
 
 <div {...restProps} class={divClass}>
@@ -42,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L789)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L790)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/input-addon/InputAddon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { InputAddonProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L789)
+ * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L790)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/input-field/Input.svelte

@@ -8,10 +8,47 @@
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
-  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, classes, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, comboItemClass, onInput, onFocus, onBlur, onKeydown, oninput, onfocus, onblur, onkeydown, ...restProps }: InputProps<InputValue> = $props();
+  let {
+    children,
+    left,
+    right,
+    value = $bindable(),
+    elementRef = $bindable(),
+    clearable = false,
+    size,
+    color = "default",
+    class: className,
+    classes,
+    wrapperClass,
+    leftClass,
+    rightClass,
+    divClass,
+    clearableSvgClass,
+    clearableColor = "none",
+    clearableClass,
+    clearableOnClick,
+    data = [],
+    maxSuggestions = 5,
+    onSelect,
+    comboClass,
+    comboItemClass,
+    onInput,
+    onFocus,
+    onBlur,
+    onKeydown,
+    oninput,
+    onfocus,
+    onblur,
+    onkeydown,
+    ...restProps
+  }: InputProps<InputValue> = $props();
 
   // input, left, right, close, combo, comboItem, div, svg
-  warnThemeDeprecation("Input", { wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass }, { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" });
+  warnThemeDeprecation(
+    "Input",
+    { wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass },
+    { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" }
+  );
 
   const styling = $derived(classes ?? { left: leftClass, right: rightClass, div: divClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass, comboItem: comboItemClass });
 
@@ -235,7 +272,12 @@
     {#if isCombobox && isFocused && filteredSuggestions.length > 0}
       <div class={combo({ class: clsx(theme?.combo, styling.combo) })}>
         {#each filteredSuggestions as item, i (item)}
-          <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
+          <button
+            type="button"
+            class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none"
+            onclick={() => selectItem(item)}
+            onmouseenter={() => (selectedIndex = i)}
+          >
             <p class={comboItem({ class: clsx(theme?.comboItem, styling.comboItem) })}>{item}</p>
           </button>
         {/each}
@@ -250,7 +292,16 @@
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={[wrapped || base(), inputCls({ class: clsx(theme?.input, className) })]} />
+    <input
+      {...restProps}
+      bind:value
+      bind:this={elementRef}
+      oninput={handleInput}
+      onfocus={handleFocus}
+      onblur={handleBlur}
+      onkeydown={handleKeydown}
+      class={[wrapped || base(), inputCls({ class: clsx(theme?.input, className) })]}
+    />
     {#if value !== undefined && value !== "" && clearable}
       <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
     {/if}

package/dist/forms/label/Label.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L804)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L805)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/forms/label/Label.svelte.d.ts

@@ -2,7 +2,7 @@ import type { LabelProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L804)
+ * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L805)
  * ## Props
  * @prop children
  * @prop color = "gray"

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -4,7 +4,17 @@
   import clsx from "clsx";
   import { getTheme } from "../../theme/themeUtils";
 
-  let { children, phoneIcon = true, pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}", phoneType = "default", floatingLabel = "Phone number", labelFor = "floating-phone-number", class: className, classes, ...restProps }: PhoneInputProps = $props();
+  let {
+    children,
+    phoneIcon = true,
+    pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+    phoneType = "default",
+    floatingLabel = "Phone number",
+    labelFor = "floating-phone-number",
+    class: className,
+    classes,
+    ...restProps
+  }: PhoneInputProps = $props();
 
   const theme = getTheme("phoneInput");
 
@@ -13,7 +23,9 @@
 
 {#snippet phoneIconSnippet()}
   <svg class={svg({ class: clsx(theme?.svg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
-    <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z" />
+    <path
+      d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z"
+    />
   </svg>
 {/snippet}