flowbite-svelte 1.19.0 → 1.20.0

package/dist/accordion/AccordionItem.svelte

@@ -7,7 +7,21 @@
   import { slide } from "svelte/transition";
   import { accordionItem } from "./theme";
 
-  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className, classes, headerClass, contentClass }: AccordionItemProps = $props();
+  let {
+    children,
+    header,
+    arrowup,
+    arrowdown,
+    open = $bindable(false),
+    activeClass,
+    inactiveClass,
+    transitionType = slide,
+    transitionParams,
+    class: className,
+    classes,
+    headerClass,
+    contentClass
+  }: AccordionItemProps = $props();
 
   warnThemeDeprecation(
     "AccordionItem",

package/dist/alert/Alert.svelte

@@ -7,7 +7,20 @@
   import { getTheme } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
 
-  let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, ...restProps }: AlertProps = $props();
+  let {
+    children,
+    icon,
+    alertStatus = $bindable(true),
+    closeIcon: CloseIcon,
+    color = "primary",
+    rounded = true,
+    border,
+    class: className,
+    dismissable,
+    transition = fade,
+    params,
+    ...restProps
+  }: AlertProps = $props();
 
   // Theme context
   const theme = getTheme("alert");
@@ -25,7 +38,7 @@
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
-  function close(event: MouseEvent) {
+  function close() {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
       alertStatus = false;
     }

package/dist/badge/Badge.svelte

@@ -7,7 +7,24 @@
   import { badge } from "./theme";
   import { createDismissableContext } from "../utils/dismissable";
 
-  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, classes, border, href, target, rounded, transition = fade, params, aClass, ...restProps }: BadgeProps = $props();
+  let {
+    children,
+    icon,
+    badgeStatus = $bindable(true),
+    color = "primary",
+    large = false,
+    dismissable = false,
+    class: className,
+    classes,
+    border,
+    href,
+    target,
+    rounded,
+    transition = fade,
+    params,
+    aClass,
+    ...restProps
+  }: BadgeProps = $props();
 
   warnThemeDeprecation("Badge", { aClass }, { aClass: "linkClass" });
 
@@ -20,7 +37,7 @@
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
-  const close = (ev: Event) => {
+  const close = () => {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
       badgeStatus = false;
     }

package/dist/banner/Banner.svelte

@@ -7,7 +7,22 @@
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
 
-  let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, classes, innerClass, transition = fade, params, closeClass, onclose, ...restProps }: BannerProps = $props();
+  let {
+    children,
+    header,
+    open = $bindable(true),
+    dismissable = true,
+    color = "gray",
+    type,
+    class: className,
+    classes,
+    innerClass,
+    transition = fade,
+    params,
+    closeClass,
+    onclose,
+    ...restProps
+  }: BannerProps = $props();
 
   warnThemeDeprecation("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
 

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -23,7 +23,13 @@
   // Determine active state based on manual prop or URL matching
   let isActive = $derived.by(() => {
     const href = restProps.href ?? "";
-    return manualActive !== undefined ? !!manualActive : navUrl ? (href === "/" ? navUrl === "/" : href && (navUrl === href || navUrl.startsWith(href + "/") || (href !== "/" && navUrl.replace(/^https?:\/\/[^/]+/, "").startsWith(href)))) : false;
+    return manualActive !== undefined
+      ? !!manualActive
+      : navUrl
+        ? href === "/"
+          ? navUrl === "/"
+          : href && (navUrl === href || navUrl.startsWith(href + "/") || (href !== "/" && navUrl.replace(/^https?:\/\/[^/]+/, "").startsWith(href)))
+        : false;
   });
 
   function getCommonClass() {

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -25,7 +25,9 @@
         {@render icon()}
       {:else}
         <svg class="me-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+          <path
+            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+          />
         </svg>
       {/if}
 

package/dist/carousel/Carousel.svelte

@@ -9,7 +9,24 @@
 
   const SLIDE_DURATION_RATIO = 0.25;
 
-  let { children, slide, images, index = $bindable(0), slideDuration = 1000, slideFit, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, classes, onchange, isPreload = false, ...restProps }: CarouselProps = $props();
+  let {
+    children,
+    slide,
+    images,
+    index = $bindable(0),
+    slideDuration = 1000,
+    slideFit,
+    transition,
+    duration = 0,
+    "aria-label": ariaLabel = "Draggable Carousel",
+    disableSwipe = false,
+    imgClass = "",
+    class: className,
+    classes,
+    onchange,
+    isPreload = false,
+    ...restProps
+  }: CarouselProps = $props();
 
   warnThemeDeprecation("Carousel", { imgClass }, { imgClass: "slide" });
 
@@ -57,7 +74,7 @@
   const nextSlide = () => changeSlide(_state.index + 1);
   const prevSlide = () => changeSlide(_state.index - 1);
 
-  const loop = (node: HTMLElement) => {
+  const loop = () => {
     // loop timer
     /* eslint-disable  @typescript-eslint/no-explicit-any */
     let intervalId: any;
@@ -127,7 +144,7 @@
   let onDragStop = $derived(
     activeDragGesture === undefined
       ? undefined
-      : (evt: MouseEvent | TouchEvent) => {
+      : () => {
           // These might be exposed one day, keep them safely tucked away as constants.
           const SWIPE_MAX_DURATION = 250;
           const SWIPE_MIN_DISTANCE = 30;
@@ -173,7 +190,21 @@
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
-<div bind:this={carouselDiv} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0" {...restProps} class={base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme?.base, className) })} {@attach loop}>
+<div
+  bind:this={carouselDiv}
+  onmousedown={onDragStart}
+  ontouchstart={onDragStart}
+  onmousemove={onDragMove}
+  onmouseup={onDragStop}
+  ontouchmove={onDragMove}
+  ontouchend={onDragStop}
+  role="button"
+  aria-label={ariaLabel}
+  tabindex="0"
+  {...restProps}
+  class={base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme?.base, className) })}
+  {@attach loop}
+>
   {#if slide}
     {@render slide({ index: _state.index, Slide })}
   {:else}

package/dist/datepicker/Datepicker.svelte

@@ -9,7 +9,41 @@
   import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
   import { getTheme } from "../theme/themeUtils";
 
-  let { value = $bindable(), defaultDate = null, range = false, rangeFrom = $bindable(), rangeTo = $bindable(), availableFrom = null, availableTo = null, locale = "default", translationLocale = locale, firstDayOfWeek = 0, dateFormat, placeholder = "Select date", disabled = false, required = false, inputClass = "", color = "primary", inline = false, autohide = true, showActionButtons = false, title = "", onselect, onclear, onapply, btnClass, inputmode = "none", classes, monthColor = "alternative", monthBtnSelected = "bg-primary-500 text-white", monthBtn = "text-gray-700 dark:text-gray-300", class: className, elementRef = $bindable(), actionSlot, inputProps = {} }: DatepickerProps = $props();
+  let {
+    value = $bindable(),
+    defaultDate = null,
+    range = false,
+    rangeFrom = $bindable(),
+    rangeTo = $bindable(),
+    availableFrom = null,
+    availableTo = null,
+    locale = "default",
+    translationLocale = locale,
+    firstDayOfWeek = 0,
+    dateFormat,
+    placeholder = "Select date",
+    disabled = false,
+    required = false,
+    inputClass = "",
+    color = "primary",
+    inline = false,
+    autohide = true,
+    showActionButtons = false,
+    title = "",
+    onselect,
+    onclear,
+    onapply,
+    btnClass,
+    inputmode = "none",
+    classes,
+    monthColor = "alternative",
+    monthBtnSelected = "bg-primary-500 text-white",
+    monthBtn = "text-gray-700 dark:text-gray-300",
+    class: className,
+    elementRef = $bindable(),
+    actionSlot,
+    inputProps = {}
+  }: DatepickerProps = $props();
 
   const theme = getTheme("datepicker");
 
@@ -326,7 +360,9 @@
 
     // Use translationLocale for aria-label
     setTimeout(() => {
-      const focusedButton = calendarRef?.querySelector(`button[aria-label="${focusedDate!.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`) as HTMLButtonElement | null;
+      const focusedButton = calendarRef?.querySelector(
+        `button[aria-label="${focusedDate!.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`
+      ) as HTMLButtonElement | null;
       focusedButton?.focus();
     }, 0);
   }
@@ -377,10 +413,32 @@
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input {...inputProps} bind:this={inputElement} type="text" class={input({ color, class: clsx(theme?.input, inputClass) })} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} onchange={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
-      <button type="button" class={button({ class: clsx(btnClass, theme?.button, classes?.button) })} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
+      <input
+        {...inputProps}
+        bind:this={inputElement}
+        type="text"
+        class={input({ color, class: clsx(theme?.input, inputClass) })}
+        {placeholder}
+        value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)}
+        onfocus={() => (isOpen = true)}
+        onchange={handleInputChangeWithDateFns}
+        onkeydown={handleInputKeydown}
+        {disabled}
+        {required}
+        {inputmode}
+        aria-haspopup="dialog"
+      />
+      <button
+        type="button"
+        class={button({ class: clsx(btnClass, theme?.button, classes?.button) })}
+        onclick={() => (isOpen = !isOpen)}
+        {disabled}
+        aria-label={isOpen ? "Close date picker" : "Open date picker"}
+      >
         <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-          <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
+          <path
+            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
+          ></path>
         </svg>
       </button>
     </div>
@@ -418,7 +476,12 @@
       {:else}
         <div class={nav({ class: clsx(classes?.nav) })}>
           {@render navButton(false)}
-          <Button type="button" class={polite({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", classes?.polite) })} aria-live="polite" onclick={(event: MouseEvent) => toggleMonthSelector(event)}>
+          <Button
+            type="button"
+            class={polite({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", classes?.polite) })}
+            aria-live="polite"
+            onclick={(event: MouseEvent) => toggleMonthSelector(event)}
+          >
             {currentMonth.toLocaleString(translationLocale, { month: "long", year: "numeric" })}
           </Button>
           {@render navButton(true)}

package/dist/device-mockups/Android.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: AndroidProps = $props();
 
-  warnThemeDeprecation("Android", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class }, { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" });
+  warnThemeDeprecation(
+    "Android",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class },
+    { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftMid", div5Class: "leftBot", div6Class: "right", div7Class: "slot" }
+  );
 
   const styling = $derived(
     classes ?? {

package/dist/device-mockups/DefaultMockup.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: DefaultMockupProps = $props();
 
-  warnThemeDeprecation("DefaultMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "DefaultMockup",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "top", div3Class: "leftTop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       top: div2Class,

package/dist/device-mockups/Ios.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: IosProps = $props();
 
-  warnThemeDeprecation("Ios", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Ios",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       top: div2Class,

package/dist/device-mockups/Laptop.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: LaptopProps = $props();
 
-  warnThemeDeprecation("Laptop", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Laptop",
+    { divClass, div2Class, div3Class, div4Class },
+    { divClass: "class", div2Class: "top", div3Class: "lefttop", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       inner: div2Class,

package/dist/device-mockups/Smartwatch.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: SmartwatchProps = $props();
 
-  warnThemeDeprecation("Smartwatch", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "top", div3Class: "rightTop", div4Class: "rightBot", div5Class: "bot", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Smartwatch",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "top", div3Class: "rightTop", div4Class: "rightBot", div5Class: "bot", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       top: div2Class,

package/dist/device-mockups/Tablet.svelte

@@ -6,7 +6,11 @@
 
   let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: TabletProps = $props();
 
-  warnThemeDeprecation("Tablet", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
+  warnThemeDeprecation(
+    "Tablet",
+    { divClass, div2Class, div3Class, div4Class, div5Class, div6Class },
+    { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" }
+  );
   const styling = $derived(
     classes ?? {
       leftTop: div2Class,

package/dist/dialog/Dialog.svelte

@@ -8,13 +8,32 @@
   import { fade } from "svelte/transition";
   import { dialog } from "./theme";
 
-  let { children, onaction = () => true, oncancel, onsubmit, ontoggle, form = false, modal = true, autoclose = false, focustrap = false, open = $bindable(false), permanent = false, dismissable = true, outsideclose = true, class: className, classes, transition = fade, transitionParams, ...restProps }: DialogProps = $props();
+  let {
+    children,
+    onaction = () => true,
+    oncancel,
+    onsubmit,
+    ontoggle,
+    form = false,
+    modal = true,
+    autoclose = false,
+    focustrap = false,
+    open = $bindable(false),
+    permanent = false,
+    dismissable = true,
+    outsideclose = true,
+    class: className,
+    classes,
+    transition = fade,
+    transitionParams,
+    ...restProps
+  }: DialogProps = $props();
 
   const paramsOptions = $derived(transitionParams ?? { duration: 100, easing: sineIn });
 
   let { base, form: formCls, close: closeCls } = dialog();
 
-  const close = (dlg: HTMLDialogElement) => (open = false);
+  const close = () => (open = false);
 
   // Prefer requestClose when available to trigger a cancellable "cancel" event; otherwise synthesize it.
   const cancel = (dlg: HTMLDialogElement) => {
@@ -34,7 +53,7 @@
     if (ev.defaultPrevented) return;
 
     ev.preventDefault(); // prevent anyway, we need clean close
-    if (!permanent) close(ev.currentTarget);
+    if (!permanent) close();
   }
 
   function _onclick(ev: MouseEvent & { currentTarget: HTMLDialogElement }) {
@@ -50,7 +69,7 @@
     }
 
     if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
-      return close(dlg);
+      return close();
     }
   }
 
@@ -82,7 +101,7 @@
       if (result === false) return;
     }
 
-    close(dlg);
+    close();
   }
 
   function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
@@ -112,7 +131,7 @@
 
   let ref: HTMLDialogElement | undefined = $state(undefined);
 
-  function close_handler(ev: MouseEvent) {
+  function close_handler() {
     if (form) {
       // dialog/form mechanism will close the dialog
       return;
@@ -132,7 +151,19 @@
 {/snippet}
 
 {#if open}
-  <dialog {@attach init} bind:this={ref} use:focusTrap tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps} class={base({ class: clsx(className) })}>
+  <dialog
+    {@attach init}
+    bind:this={ref}
+    use:focusTrap
+    tabindex="-1"
+    onsubmit={_onsubmit}
+    oncancel={_oncancel}
+    onclick={_onclick}
+    ontoggle={_ontoggle}
+    transition:transition|global={paramsOptions as ParamsType}
+    {...restProps}
+    class={base({ class: clsx(className) })}
+  >
     {#if form}
       <form method="dialog" class={formCls({ class: clsx(classes?.form) })}>
         {@render content()}

package/dist/drawer/Drawer.svelte

@@ -8,7 +8,22 @@
   import { drawer } from "./theme";
   import { setContext, tick } from "svelte";
 
-  let { children, open = $bindable(false), hidden = $bindable(), modal, offset, width, dismissable = offset ? false : undefined, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
+  let {
+    children,
+    open = $bindable(false),
+    hidden = $bindable(),
+    modal,
+    offset,
+    width,
+    dismissable = offset ? false : undefined,
+    placement = "left",
+    class: className,
+    transitionParams,
+    transition = fly,
+    outsideclose,
+    activateClickOutside,
+    ...restProps
+  }: DrawerProps = $props();
 
   setContext("drawer", {
     get placement() {
@@ -94,7 +109,19 @@
   }
 </script>
 
-<Dialog {@attach init} bind:open {modal} {dismissable} {transition} {outsideclose} transitionParams={transition_params} {...restProps} {onintrostart} {onoutrostart} class={base({ class: clsx(theme?.base, className) })}>
+<Dialog
+  {@attach init}
+  bind:open
+  {modal}
+  {dismissable}
+  {transition}
+  {outsideclose}
+  transitionParams={transition_params}
+  {...restProps}
+  {onintrostart}
+  {onoutrostart}
+  class={base({ class: clsx(theme?.base, className) })}
+>
   {@render children?.()}
 </Dialog>
 

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}

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>
 

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/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 });