flowbite-svelte 1.32.0 → 1.33.0

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/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

@@ -168,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;
@@ -188,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;
@@ -198,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;
@@ -1590,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;
@@ -1701,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.32.0",
+  "version": "1.33.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {