flowbite-svelte 1.19.0 → 1.20.0

package/dist/forms/timepicker/Timepicker.svelte

@@ -13,7 +13,32 @@
   import { parse, isValid, isBefore, isAfter } from "date-fns";
   import { getTheme } from "../../theme/themeUtils";
 
-  let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400", type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
+  let {
+    id = "time",
+    endId = "end-time",
+    value = $bindable("00:00"),
+    endValue = $bindable("00:00"),
+    min = "",
+    max = "",
+    required = true,
+    disabled = false,
+    inputColor,
+    buttonColor = "primary",
+    Icon,
+    iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400",
+    type = "default",
+    optionLabel = "Options",
+    options = [],
+    size = "md",
+    divClass,
+    inputClass,
+    selectClass,
+    timerangeLabel = "Choose time range",
+    timerangeButtonLabel = "Save time",
+    timeIntervals = [],
+    columns = 2,
+    onselect
+  }: TimepickerProps = $props();
 
   const theme = getTheme("timepicker");
 
@@ -22,7 +47,6 @@
 
   // State
   let selectedOption = $state("");
-  let dropdownOpen = $state(false);
   let showTimerange = $state(false);
 
   // Helper functions using date-fns
@@ -117,7 +141,6 @@
   }
 
   function handleDropdownSelect(option: TimePickerOption): void {
-    dropdownOpen = false;
     selectedOption = option.value;
     notifyChange();
   }
@@ -133,7 +156,6 @@
   }
 
   function applyTimerange(): void {
-    dropdownOpen = false;
     notifyChange();
   }
 
@@ -165,7 +187,19 @@
 {#if type !== "inline-buttons"}
   <ButtonGroup {size} class={styles.buttonGroup({ class: clsx(theme?.buttonGroup, divClass) })}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.inputWithIcon(), theme?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Input
+        {id}
+        color={inputColor}
+        type="time"
+        {min}
+        {max}
+        {required}
+        {disabled}
+        class={styles.input({ class: clsx(styles.inputWithIcon(), theme?.input, inputClass) })}
+        bind:value
+        oninput={(e) => handleTimeChange(e)}
+        onchange={(e) => handleTimeChange(e)}
+      />
       <div class={styles.iconWrapper({ class: clsx(theme?.iconWrapper) })}>
         {#if Icon}
           <Icon class={iconClass} />
@@ -176,10 +210,34 @@
         {/if}
       </div>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(theme?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Input
+        {id}
+        color={inputColor}
+        type="time"
+        {min}
+        {max}
+        {required}
+        {disabled}
+        class={styles.input({ class: clsx(theme?.input, inputClass) })}
+        bind:value
+        oninput={(e) => handleTimeChange(e)}
+        onchange={(e) => handleTimeChange(e)}
+      />
       <Select selectClass={styles.select({ class: clsx(theme?.select, selectClass) })} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(theme?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Input
+        {id}
+        color={inputColor}
+        type="time"
+        {min}
+        {max}
+        {required}
+        {disabled}
+        class={styles.input({ class: clsx(theme?.input, inputClass) })}
+        bind:value
+        oninput={(e) => handleTimeChange(e)}
+        onchange={(e) => handleTimeChange(e)}
+      />
       <Button color={buttonColor} class={styles.button({ class: clsx(theme?.button) })}>
         {optionLabel}
         <svg class={styles.buttonIcon({ class: clsx(theme?.buttonIcon) })} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -195,7 +253,19 @@
       </Dropdown>
     {:else if type === "range"}
       <div class={styles.rangeInputWrapper({ class: clsx(theme?.rangeInputWrapper) })}>
-        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(theme?.rangeInput, styles.rangeInput(), inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+        <Input
+          {id}
+          color={inputColor}
+          type="time"
+          {min}
+          {max}
+          {required}
+          {disabled}
+          class={styles.input({ class: clsx(theme?.rangeInput, styles.rangeInput(), inputClass) })}
+          bind:value
+          oninput={(e) => handleTimeChange(e)}
+          onchange={(e) => handleTimeChange(e)}
+        />
         <button type="button" class={styles.rangeButton({ class: clsx(theme?.rangeButton) })} onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
           {#if Icon}
             <Icon class={iconClass} />
@@ -208,7 +278,19 @@
       </div>
       <span class={styles.rangeSeparator({ class: clsx(theme?.rangeSeparator) })}>-</span>
       <div class={styles.rangeInputWrapper({ class: clsx(theme?.rangeInputWrapper) })}>
-        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.rangeInput(), theme?.rangeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+        <Input
+          id={endId}
+          color={inputColor}
+          type="time"
+          {min}
+          {max}
+          {required}
+          {disabled}
+          class={styles.input({ class: clsx(styles.rangeInput(), theme?.rangeInput, inputClass) })}
+          bind:value={endValue}
+          oninput={(e) => handleTimeChange(e, true)}
+          onchange={(e) => handleTimeChange(e, true)}
+        />
         <button type="button" class={styles.rangeButton({ class: clsx(theme?.rangeButton) })} onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
           {#if Icon}
             <Icon class={iconClass} />
@@ -231,11 +313,35 @@
           <div class={styles.dropdownTimeRow({ class: clsx(theme?.dropdownTimeRow) })}>
             <div class={styles.dropdownTimeCol({ class: clsx(theme?.dropdownTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input
+                {id}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })}
+                bind:value
+                oninput={(e) => handleTimeChange(e)}
+                onchange={(e) => handleTimeChange(e)}
+              />
             </div>
             <div class={styles.dropdownTimeCol({ class: clsx(theme?.dropdownTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input
+                id={endId}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.dropdownTimeInput({ class: clsx(theme?.dropdownTimeInput, inputClass) })}
+                bind:value={endValue}
+                oninput={(e) => handleTimeChange(e, true)}
+                onchange={(e) => handleTimeChange(e, true)}
+              />
             </div>
           </div>
           <Button color={buttonColor} class={styles.dropdownButton({ class: clsx(theme?.dropdownButton) })} onclick={applyTimerange}>
@@ -252,11 +358,35 @@
           <div class={styles.toggleTimeRow({ class: clsx(theme?.toggleTimeRow) })}>
             <div class={styles.toggleTimeCol({ class: clsx(theme?.toggleTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input
+                {id}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })}
+                bind:value
+                oninput={(e) => handleTimeChange(e)}
+                onchange={(e) => handleTimeChange(e)}
+              />
             </div>
             <div class={styles.toggleTimeCol({ class: clsx(theme?.toggleTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input
+                id={endId}
+                color={inputColor}
+                type="time"
+                {min}
+                {max}
+                {required}
+                {disabled}
+                class={styles.toggleTimeInput({ class: clsx(theme?.toggleTimeInput, inputClass) })}
+                bind:value={endValue}
+                oninput={(e) => handleTimeChange(e, true)}
+                onchange={(e) => handleTimeChange(e, true)}
+              />
             </div>
           </div>
         {/if}

package/dist/index.d.ts

@@ -79,3 +79,4 @@ export * from "./video";
 export * from "./utils";
 export * from "./types";
 export * from "./virtuallist";
+export * from "./kanban";

package/dist/index.js

@@ -85,3 +85,4 @@ export * from "./utils";
 export * from "./types";
 // extend
 export * from "./virtuallist";
+export * from "./kanban";

package/dist/kanban/KanbanBoard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { KanbanBoardProps, KanbanCardType, KanbanColumnType } from "../types";
+  import clsx from "clsx";
+  import { kanbanBoard } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import KanbanCard from "./KanbanCard.svelte";
+
+  let {
+    columns = $bindable([]),
+    onMove = (_card: KanbanCardType, _from: KanbanColumnType, _to: KanbanColumnType) => {},
+    onAddCard = (_col: KanbanColumnType) => {},
+    class: className,
+    classes,
+    ...restProps
+  }: KanbanBoardProps = $props();
+
+  const theme = getTheme("kanbanBoard");
+
+  // Changed from KanbanCard to KanbanCardType
+  let draggedCard = $state<KanbanCardType | null>(null);
+  let sourceColumnId = $state<string | number | null>(null);
+  let dragOverColumnId = $state<string | number | null>(null);
+
+  const styles = kanbanBoard();
+
+  // Changed parameter type from KanbanCard to KanbanCardType
+  function handleDragStart(card: KanbanCardType, colId: string | number) {
+    draggedCard = card;
+    sourceColumnId = colId;
+  }
+
+  function handleDragOver(e: DragEvent, colId: string | number) {
+    e.preventDefault();
+    dragOverColumnId = colId;
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    const currentTarget = e.currentTarget as HTMLElement;
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+      dragOverColumnId = null;
+    }
+  }
+
+  function handleDrop(e: DragEvent, targetColId: string | number) {
+    e.preventDefault();
+    dragOverColumnId = null;
+
+    if (draggedCard === null || sourceColumnId === null) return;
+    if (sourceColumnId === targetColId) {
+      draggedCard = null;
+      sourceColumnId = null;
+      return;
+    }
+
+    const fromCol = columns.find((c) => c.id === sourceColumnId);
+    const toCol = columns.find((c) => c.id === targetColId);
+    if (!fromCol || !toCol) return;
+
+    fromCol.cards = fromCol.cards.filter((c) => c.id !== draggedCard!.id);
+    toCol.cards = [...toCol.cards, draggedCard!];
+
+    onMove(draggedCard, fromCol, toCol);
+
+    draggedCard = null;
+    sourceColumnId = null;
+  }
+
+  function handleDragEnd() {
+    draggedCard = null;
+    sourceColumnId = null;
+    dragOverColumnId = null;
+  }
+</script>
+
+<div {...restProps} class={styles.container({ class: clsx(theme?.container, className) })}>
+  {#each columns as col (col.id)}
+    <div
+      role="group"
+      aria-label={`${col.title} column drop zone`}
+      class={styles.column({ isDragOver: dragOverColumnId === col.id, class: clsx(theme?.column, classes?.column) })}
+      ondragover={(e) => handleDragOver(e, col.id)}
+      ondragleave={(e) => handleDragLeave(e)}
+      ondrop={(e) => handleDrop(e, col.id)}
+      style={col.color ? `border-top: 4px solid ${col.color}` : ""}
+    >
+      <h2 class={styles.columnTitle({ class: clsx(theme?.columnTitle, classes?.columnTitle) })}>{col.title}</h2>
+
+      <div class={styles.cardList({ class: clsx(theme?.cardList, classes?.cardList) })} role="list" aria-label={`${col.title} cards`}>
+        {#each col.cards as card (card.id)}
+          <KanbanCard {card} {classes} isDragging={draggedCard?.id === card.id} onDragStart={() => handleDragStart(card, col.id)} onDragEnd={handleDragEnd} />
+        {/each}
+      </div>
+
+      <button class={styles.addButton({ class: clsx(theme?.addButton, classes?.addButton) })} onclick={() => onAddCard(col)} aria-label={`Add card to ${col.title}`}>+ Add card</button>
+    </div>
+  {/each}
+</div>

package/dist/kanban/KanbanBoard.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { KanbanBoardProps } from "../types";
+declare const KanbanBoard: import("svelte").Component<KanbanBoardProps, {}, "columns">;
+type KanbanBoard = ReturnType<typeof KanbanBoard>;
+export default KanbanBoard;

package/dist/kanban/KanbanCard.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { KanbanCardProps } from "../types";
+  import { kanbanCard } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { card, isDragging = false, onDragStart, onDragEnd, classes, ...restProps }: KanbanCardProps = $props();
+
+  const theme = getTheme("kanbanCard");
+  const styles = kanbanCard();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<article
+  role="listitem"
+  draggable="true"
+  {...restProps}
+  ondragstart={(ev) => onDragStart?.(card, ev)}
+  ondragend={(ev) => onDragEnd?.(ev)}
+  tabindex="0"
+  aria-grabbed={isDragging}
+  aria-label={card.title}
+  class={styles.card({ isDragging, class: clsx(theme?.card, classes?.card) })}
+>
+  <p class={styles.cardTitle({ class: clsx(theme?.cardTitle, classes?.cardTitle) })}>
+    {card.title}
+  </p>
+
+  {#if card.description}
+    <p class={styles.cardDescription({ class: clsx(theme?.cardDescription, classes?.cardDescription) })}>
+      {card.description}
+    </p>
+  {/if}
+
+  {#if card.tags?.length}
+    <div class={styles.cardTags({ class: clsx(theme?.cardTags, classes?.cardTags) })}>
+      {#each card.tags as tag, i (i)}
+        <span class={styles.cardTag({ class: clsx(theme?.cardTag, classes?.cardTag) })}>
+          {tag}
+        </span>
+      {/each}
+    </div>
+  {/if}
+</article>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2082)
+## Props
+@prop card
+@prop isDragging = false
+@prop onDragStart
+@prop onDragEnd
+@prop classes
+@prop ...restProps
+-->

package/dist/kanban/KanbanCard.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { KanbanCardProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2082)
+ * ## Props
+ * @prop card
+ * @prop isDragging = false
+ * @prop onDragStart
+ * @prop onDragEnd
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const KanbanCard: import("svelte").Component<KanbanCardProps, {}, "">;
+type KanbanCard = ReturnType<typeof KanbanCard>;
+export default KanbanCard;

package/dist/kanban/index.d.ts

@@ -0,0 +1,3 @@
+export { default as KanbanBoard } from "./KanbanBoard.svelte";
+export { default as KanbanCard } from "./KanbanCard.svelte";
+export { kanbanBoard } from "./theme";

package/dist/kanban/index.js

@@ -0,0 +1,3 @@
+export { default as KanbanBoard } from "./KanbanBoard.svelte";
+export { default as KanbanCard } from "./KanbanCard.svelte";
+export { kanbanBoard } from "./theme";

package/dist/kanban/theme.d.ts

@@ -0,0 +1,108 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type KanbanBoardVariants = VariantProps<typeof kanbanBoard> & Classes<typeof kanbanBoard>;
+export type KanbanCardVariants = VariantProps<typeof kanbanCard> & Classes<typeof kanbanCard>;
+export declare const kanbanBoard: import("tailwind-variants").TVReturnType<{
+    isDragOver: {
+        true: {
+            column: string;
+        };
+    };
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    container: string;
+    column: string;
+    columnTitle: string;
+    cardList: string;
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+    addButton: string;
+}, undefined, {
+    isDragOver: {
+        true: {
+            column: string;
+        };
+    };
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    container: string;
+    column: string;
+    columnTitle: string;
+    cardList: string;
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+    addButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    isDragOver: {
+        true: {
+            column: string;
+        };
+    };
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    container: string;
+    column: string;
+    columnTitle: string;
+    cardList: string;
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+    addButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const kanbanCard: import("tailwind-variants").TVReturnType<{
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+}, undefined, {
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+}, import("tailwind-variants").TVReturnType<{
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/kanban/theme.js

@@ -0,0 +1,43 @@
+import { tv } from "tailwind-variants";
+export const kanbanBoard = tv({
+    slots: {
+        container: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 p-2 md:p-4",
+        column: "w-full rounded-xl shadow-sm p-3 md:p-4 flex flex-col bg-surface-elevated text-surface-foreground transition-colors",
+        columnTitle: "text-sm md:text-base font-semibold mb-2 md:mb-3",
+        cardList: "flex flex-col gap-2 flex-1 min-h-[60px]",
+        card: "bg-surface text-surface-foreground rounded-lg p-2.5 md:p-3 shadow-sm cursor-grab active:cursor-grabbing transition-all hover:bg-surface-hover hover:shadow-md",
+        cardTitle: "font-medium text-sm md:text-base",
+        cardDescription: "text-xs md:text-sm text-muted mt-1",
+        cardTags: "flex flex-wrap gap-1 mt-2",
+        cardTag: "text-[10px] md:text-xs bg-primary/10 text-primary px-1.5 md:px-2 py-0.5 rounded-full",
+        addButton: "mt-2 md:mt-3 w-full bg-primary text-primary-foreground rounded-lg py-1.5 text-xs md:text-sm font-medium hover:bg-primary/90 transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2"
+    },
+    variants: {
+        isDragOver: {
+            true: {
+                column: "ring-2 ring-primary"
+            }
+        },
+        isDragging: {
+            true: {
+                card: "opacity-50"
+            }
+        }
+    }
+});
+export const kanbanCard = tv({
+    slots: {
+        card: "bg-surface text-surface-foreground rounded-lg p-2.5 md:p-3 shadow-sm cursor-grab active:cursor-grabbing transition-all hover:bg-surface-hover hover:shadow-md",
+        cardTitle: "font-medium text-sm md:text-base",
+        cardDescription: "text-xs md:text-sm text-muted mt-1",
+        cardTags: "flex flex-wrap gap-1 mt-2",
+        cardTag: "text-[10px] md:text-xs bg-primary/10 text-primary px-1.5 md:px-2 py-0.5 rounded-full"
+    },
+    variants: {
+        isDragging: {
+            true: {
+                card: "opacity-50"
+            }
+        }
+    }
+});

package/dist/mega-menu/MegaMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { megamenu } from "./theme";
   import clsx from "clsx";
-  import type { MegaMenuProps, LinkType } from "..";
+  import type { MegaMenuProps } from "..";
   import Popper from "../utils/Popper.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
@@ -10,14 +10,7 @@
   //  ulClass, extraClass
   warnThemeDeprecation("MegaMenu", { ulClass, extraClass }, { ulClass: "ul", extraClass: "extra" });
   const styling = $derived(classes ?? { ul: ulClass, extra: extraClass });
-
   const theme = getTheme("megamenu");
-
-  /* eslint-disable  @typescript-eslint/no-explicit-any */
-  interface LinkTypeLike extends LinkType {
-    [propName: string]: any;
-  }
-
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
 </script>
 

package/dist/modal/Modal.svelte

@@ -8,7 +8,27 @@
   import { fade } from "svelte/transition";
   import { modal as modalStyle } from "./theme";
 
-  let { children, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, size = "md", placement, class: className, classes, transitionParams, transition = fade, fullscreen = false, ...restProps }: ModalProps = $props();
+  let {
+    children,
+    header,
+    footer,
+    title,
+    open = $bindable(false),
+    permanent = false,
+    dismissable = true,
+    closeBtnClass,
+    headerClass,
+    bodyClass,
+    footerClass,
+    size = "md",
+    placement,
+    class: className,
+    classes,
+    transitionParams,
+    transition = fade,
+    fullscreen = false,
+    ...restProps
+  }: ModalProps = $props();
 
   // form, header, footer, body, close
   warnThemeDeprecation("Modal", { headerClass, bodyClass, footerClass, closeBtnClass }, { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" });
@@ -22,7 +42,15 @@
   const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement, size }));
 </script>
 
-<Dialog bind:open {transition} dismissable={dismissable && !title && !permanent} transitionParams={paramsOptions} {classes} {...restProps} class={base({ fullscreen, class: clsx(theme?.base, className) })}>
+<Dialog
+  bind:open
+  {transition}
+  dismissable={dismissable && !title && !permanent}
+  transitionParams={paramsOptions}
+  {classes}
+  {...restProps}
+  class={base({ fullscreen, class: clsx(theme?.base, className) })}
+>
   {#if title || header}
     <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
       {#if title}

package/dist/navbar/NavHamburger.svelte

@@ -18,7 +18,7 @@
   const navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
   const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint });
 
-  const toggle: MouseEventHandler<HTMLButtonElement> = (ev) => {
+  const toggle: MouseEventHandler<HTMLButtonElement> = () => {
     navState.hidden = !navState.hidden;
   };
 </script>

package/dist/navbar/NavLi.svelte

@@ -13,7 +13,9 @@
   const theme = getTheme("navbarLi");
 
   let active = $derived(navState.activeUrl ? restProps.href === navState.activeUrl : false);
-  let liClass = $derived(navbarLi({ breakpoint: navBreakpoint, hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
+  let liClass = $derived(
+    navbarLi({ breakpoint: navBreakpoint, hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) })
+  );
 
   function handleClick(event: any) {
     // Close the mobile menu when a link is clicked