flowbite-svelte 1.19.0 → 1.20.0

package/dist/theme/themes.js

@@ -76,3 +76,4 @@ export { secondary } from "../typography/secondary";
 export { span } from "../typography/span";
 // extend
 export { virtualList } from "../virtuallist";
+export { kanbanBoard, kanbanCard } from "../kanban/theme";

package/dist/timeline/GroupItem.svelte

@@ -46,13 +46,21 @@
         <span class={span({ class: clsx(theme?.span, styling.span) })}>
           {#if isPrivate}
             <svg class={svg({ class: clsx(theme?.svg, classes?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
+              <path
+                fill-rule="evenodd"
+                d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+                clip-rule="evenodd"
+              />
               <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
             </svg>
             Private
           {:else}
             <svg class={svg({ class: clsx(theme?.svg, classes?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd" />
+              <path
+                fill-rule="evenodd"
+                d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
+                clip-rule="evenodd"
+              />
             </svg>
             Public
           {/if}

package/dist/timeline/TimelineItem.svelte

@@ -5,7 +5,25 @@
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
-  let { children, orientationSlot, title, date, dateFormat = "month-year", color = "primary", isLast = false, svgClass, liClass, divClass, timeClass, h3Class, connectorClass, datePrefix, class: className, classes, ...restProps }: TimelineItemProps = $props();
+  let {
+    children,
+    orientationSlot,
+    title,
+    date,
+    dateFormat = "month-year",
+    color = "primary",
+    isLast = false,
+    svgClass,
+    liClass,
+    divClass,
+    timeClass,
+    h3Class,
+    connectorClass,
+    datePrefix,
+    class: className,
+    classes,
+    ...restProps
+  }: TimelineItemProps = $props();
 
   warnThemeDeprecation(
     "TimelineItem",
@@ -74,7 +92,11 @@
     {:else}
       <div class={div({ class: clsx(theme?.div, styling.div) })}>
         <svg aria-hidden="true" class={svg({ class: clsx(theme?.svg, styling.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+          <path
+            fill-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            clip-rule="evenodd"
+          />
         </svg>
       </div>
     {/if}

package/dist/toast/Toast.svelte

@@ -7,7 +7,22 @@
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
 
-  let { children, icon, toastStatus = $bindable(true), dismissable = true, color = "primary", position, iconClass, contentClass, align = true, params, transition = fly, class: className, classes, ...restProps }: ToastProps = $props();
+  let {
+    children,
+    icon,
+    toastStatus = $bindable(true),
+    dismissable = true,
+    color = "primary",
+    position,
+    iconClass,
+    contentClass,
+    align = true,
+    params,
+    transition = fly,
+    class: className,
+    classes,
+    ...restProps
+  }: ToastProps = $props();
 
   warnThemeDeprecation(
     "Toast",
@@ -30,7 +45,7 @@
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
-  function _close(event: MouseEvent) {
+  function _close() {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
       toastStatus = false;
     }

package/dist/tooltip/Tooltip.svelte

@@ -3,11 +3,19 @@
   import Popper from "../utils/Popper.svelte";
   import { tooltip } from "./theme";
   import type { TooltipProps, TriggeredToggleEvent } from "../types";
-  import { getTheme } from "../theme/themeUtils";
 
-  let { type = "dark", color = undefined, trigger = "hover", arrow = true, children, placement = "top", onbeforetoggle: _onbeforetoggle, class: className, isOpen = $bindable(false), ...restProps }: TooltipProps = $props();
-
-  const theme = getTheme("tooltip");
+  let {
+    type = "dark",
+    color = undefined,
+    trigger = "hover",
+    arrow = true,
+    children,
+    placement = "top",
+    onbeforetoggle: _onbeforetoggle,
+    class: className,
+    isOpen = $bindable(false),
+    ...restProps
+  }: TooltipProps = $props();
 
   const base = $derived(tooltip({ color, type, class: clsx(className) }));
   function onbeforetoggle(ev: TriggeredToggleEvent) {

package/dist/types.d.ts

@@ -73,6 +73,7 @@ import type { ApexOptions } from "apexcharts";
 import type { ButtonToggleVariants } from "./forms/button-toggle/theme";
 import type { TagsVariants } from "./forms/tags/theme";
 import type { VirtualListVariants } from "./virtuallist/theme";
+import type { KanbanBoardVariants, KanbanCardVariants } from "./kanban/theme";
 import type { CloseButtonVariants } from "./utils/theme";
 import type { DialogVariants } from "./dialog/theme";
 export declare const xs = "xs";
@@ -686,7 +687,7 @@ export interface InputAddonProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
     size?: ButtonGroupProps["size"];
 }
-export interface PhoneInputProps<T extends InputValue = number> extends PhoneInputVariants, Omit<HTMLInputAttributes, "size" | "children" | "value"> {
+export interface PhoneInputProps extends PhoneInputVariants, Omit<HTMLInputAttributes, "size" | "children" | "value"> {
     phoneType?: "default" | "floating" | "countryCode" | "copy" | "advanced";
     children?: Snippet;
     floatingLabel?: string;
@@ -1764,3 +1765,28 @@ export interface VirtualListProps<T = unknown> extends VirtualListVariants, Omit
     scrollToIndex?: (fn: (index: number) => void) => void;
     class?: ClassValue | null;
 }
+export interface KanbanCardType {
+    id: string | number;
+    title: string;
+    description?: string;
+    tags?: string[];
+}
+export interface KanbanColumnType {
+    id: string | number;
+    title: string;
+    cards: KanbanCardType[];
+    color?: string;
+}
+export interface KanbanBoardProps extends KanbanBoardVariants, HTMLAttributes<HTMLDivElement> {
+    columns?: KanbanColumnType[];
+    onMove?: (card: KanbanCardType, from: KanbanColumnType, to: KanbanColumnType) => void;
+    onAddCard?: (col: KanbanColumnType) => void;
+    class?: ClassValue | null;
+}
+export interface KanbanCardProps extends KanbanCardVariants, HTMLAttributes<HTMLElement> {
+    card: KanbanCardType;
+    isDragging?: boolean;
+    onDragStart?: (card: KanbanCardType, ev?: DragEvent) => void;
+    onDragEnd?: (ev?: DragEvent) => void;
+    class?: ClassValue | null;
+}

package/dist/typography/paragraph/P.svelte

@@ -4,7 +4,20 @@
   import type { ParagraphProps } from "../../types";
   import { getTheme } from "../../theme/themeUtils";
 
-  let { children, class: className = "text-gray-900 dark:text-white", height = "normal", align = "left", justify = false, italic, firstUpper = false, whitespace = "normal", size = "base", space = "normal", weight = "normal", ...restProps }: ParagraphProps = $props();
+  let {
+    children,
+    class: className = "text-gray-900 dark:text-white",
+    height = "normal",
+    align = "left",
+    justify = false,
+    italic,
+    firstUpper = false,
+    whitespace = "normal",
+    size = "base",
+    space = "normal",
+    weight = "normal",
+    ...restProps
+  }: ParagraphProps = $props();
 
   const theme = getTheme("paragraph");
 

package/dist/utils/CloseButton.svelte

@@ -24,7 +24,11 @@
       {@render children()}
     {:else}
       <svg class={svg({ class: svgClass })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
       </svg>
     {/if}
   </button>
@@ -35,7 +39,11 @@
       {@render children()}
     {:else}
       <svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
       </svg>
     {/if}
   </a>

package/dist/utils/Popper.svelte

@@ -7,7 +7,28 @@
   import { sineIn } from "svelte/easing";
   import clsx from "clsx";
 
-  let { triggeredBy, triggerDelay = 200, trigger = "click", placement = "top", offset = 8, arrow = false, yOnly = false, strategy = "absolute", reference, middlewares = [dom.flip(), dom.shift()], onbeforetoggle: _onbeforetoggle, ontoggle: _ontoggle, onclose: _onclose, class: className = "", arrowClass = "", isOpen = $bindable(false), transitionParams, transition = fade, children, ...restProps }: PopperProps = $props();
+  let {
+    triggeredBy,
+    triggerDelay = 200,
+    trigger = "click",
+    placement = "top",
+    offset = 8,
+    arrow = false,
+    yOnly = false,
+    strategy = "absolute",
+    reference,
+    middlewares = [dom.flip(), dom.shift()],
+    onbeforetoggle: _onbeforetoggle,
+    ontoggle: _ontoggle,
+    onclose: _onclose,
+    class: className = "",
+    arrowClass = "",
+    isOpen = $bindable(false),
+    transitionParams,
+    transition = fade,
+    children,
+    ...restProps
+  }: PopperProps = $props();
 
   let focusable: boolean = true;
   let clickable: boolean = $derived(trigger === "click");
@@ -205,7 +226,22 @@
 <div use:set_triggers hidden></div>
 
 {#if isOpen}
-  <div popover="manual" role="tooltip" bind:this={popover} class:overflow-visible={true} onfocusout={close_popover} onmouseleave={hoverable ? close_popover : undefined} onmouseenter={hoverable ? open_popover : undefined} onbeforetoggle={on_before_toggle} ontoggle={on_toggle} class={clsx(className)} transition:transition={paramsOptions as ParamsType} onintrostart={() => popover?.showPopover()} onoutroend={() => popover?.hidePopover()} {...restProps}>
+  <div
+    popover="manual"
+    role="tooltip"
+    bind:this={popover}
+    class:overflow-visible={true}
+    onfocusout={close_popover}
+    onmouseleave={hoverable ? close_popover : undefined}
+    onmouseenter={hoverable ? open_popover : undefined}
+    onbeforetoggle={on_before_toggle}
+    ontoggle={on_toggle}
+    class={clsx(className)}
+    transition:transition={paramsOptions as ParamsType}
+    onintrostart={() => popover?.showPopover()}
+    onoutroend={() => popover?.hidePopover()}
+    {...restProps}
+  >
     {@render children()}
     {#if arrow}
       <Arrow {...arrowParams} class={arrowClass} />

package/dist/virtuallist/VirtualList.svelte

@@ -90,7 +90,14 @@
   });
 </script>
 
-<div bind:this={container} onscroll={handleScroll} role="list" aria-label="Virtual scrolling list" class={styles.container({ class: clsx(theme?.container, className) })} style={`height:${height}px; position:relative;`}>
+<div
+  bind:this={container}
+  onscroll={handleScroll}
+  role="list"
+  aria-label="Virtual scrolling list"
+  class={styles.container({ class: clsx(theme?.container, className) })}
+  style={`height:${height}px; position:relative;`}
+>
   <div class={styles.spacer({ class: clsx(theme?.spacer, classes?.spacer) })} style={`height:${totalHeight}px;`}>
     <div class={styles.content({ class: clsx(theme?.content, classes?.content) })} style={`transform:translateY(${offsetY}px); will-change:transform;`}>
       {#each visibleItems as item, i (startIndex + i)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -24,7 +24,7 @@
     "@resvg/resvg-js": "^2.6.2",
     "@sveltejs/adapter-vercel": "^6.0.0",
     "@sveltejs/enhanced-img": "0.8.3",
-    "@sveltejs/kit": "^2.47.3",
+    "@sveltejs/kit": "^2.48.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
@@ -60,9 +60,9 @@
     "satori": "^0.18.3",
     "satori-html": "^0.3.2",
     "super-sitemap": "^1.0.5",
-    "svelte": "^5.41.3",
+    "svelte": "^5.42.2",
     "svelte-check": "^4.3.3",
-    "svelte-doc-llm": "^0.4.1",
+    "svelte-doc-llm": "^0.5.1",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.5.0",
     "svelte-rune-highlight": "^0.7.1",
@@ -445,6 +445,14 @@
       "types": "./dist/indicator/Indicator.svelte.d.ts",
       "svelte": "./dist/indicator/Indicator.svelte"
     },
+    "./KanbanBoard.svelte": {
+      "types": "./dist/kanban/KanbanBoard.svelte.d.ts",
+      "svelte": "./dist/kanban/KanbanBoard.svelte"
+    },
+    "./KanbanCard.svelte": {
+      "types": "./dist/kanban/KanbanCard.svelte.d.ts",
+      "svelte": "./dist/kanban/KanbanCard.svelte"
+    },
     "./Kbd.svelte": {
       "types": "./dist/kbd/Kbd.svelte.d.ts",
       "svelte": "./dist/kbd/Kbd.svelte"