flowbite-svelte 0.46.13 → 0.46.15

package/dist/accordion/AccordionItem.svelte

@@ -2,6 +2,7 @@
 import { getContext, onMount } from "svelte";
 import { writable } from "svelte/store";
 import { fade, blur, fly, slide } from "svelte/transition";
+export let tag = "h2";
 export let open = false;
 export let activeClass = void 0;
 export let inactiveClass = void 0;
@@ -47,7 +48,7 @@ $: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomCl
 $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush ? "" : borderOpenClass, borderBottomClass, borderSharedClass]);
 </script>
 
-<h2 class="group">
+<svelte:element this={tag} class="group">
   <button on:click={handleToggle} type="button" class={buttonClass} aria-expanded={open}>
     <slot name="header" />
     {#if open}
@@ -64,7 +65,7 @@ $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush
       </slot>
     {/if}
   </button>
-</h2>
+</svelte:element>
 {#if open}
   <div transition:multiple={transitionParams}>
     <div class={contentClass}>
@@ -77,6 +78,7 @@ $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let tag: string = 'h2';
 @prop export let open: boolean = false;
 @prop export let activeClass: string | undefined = undefined;
 @prop export let inactiveClass: string | undefined = undefined;

package/dist/accordion/AccordionItem.svelte.d.ts

@@ -3,6 +3,7 @@ import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        tag?: string;
         open?: boolean;
         activeClass?: string | undefined;
         inactiveClass?: string | undefined;
@@ -36,6 +37,7 @@ export type AccordionItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let tag: string = 'h2';
  * @prop export let open: boolean = false;
  * @prop export let activeClass: string | undefined = undefined;
  * @prop export let inactiveClass: string | undefined = undefined;

package/dist/banner/Banner.svelte

@@ -1,14 +1,14 @@
 <script>import { twMerge } from "tailwind-merge";
 import CloseButton from "../utils/CloseButton.svelte";
-import { createEventDispatcher } from "svelte";
+import { fade } from "svelte/transition";
 export let position = "sticky";
 export let dismissable = true;
 export let bannerType = "default";
 export let divClass = "z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600";
 export let innerClass = "flex";
-let open = true;
-const dispatch = createEventDispatcher();
-$: dispatch(open ? "open" : "close");
+export let bannerStatus = true;
+export let transition = fade;
+export let params = {};
 const divClasses = {
   default: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
   bottom: "bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50",
@@ -27,12 +27,13 @@ $: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classD
 $: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
 function close(e) {
   e.preventDefault();
-  open = false;
+  bannerStatus = false;
 }
 </script>
 
-{#if open}
-  <div tabindex="-1" class={divClass} {...$$restProps}>
+{#if bannerStatus}
+  <div tabindex="-1" class={divClass} {...$$restProps}
+  transition:transition={params}>
     <slot name="header" />
     <div class={div2Class}>
       <slot />
@@ -54,4 +55,7 @@ function close(e) {
 @prop export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
 @prop export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
 @prop export let innerClass: string = 'flex';
+@prop export let bannerStatus: boolean = true;
+@prop export let transition: TransitionFunc = fade;
+@prop export let params = {};
 -->

package/dist/banner/Banner.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,6 +8,9 @@ declare const __propDef: {
         bannerType?: "default" | "bottom" | "cta" | "signup" | "info";
         divClass?: string;
         innerClass?: string;
+        bannerStatus?: boolean;
+        transition?: (node: HTMLElement, params: any) => TransitionConfig;
+        params?: {};
     };
     events: {
         click: MouseEvent;
@@ -36,6 +40,9 @@ export type BannerSlots = typeof __propDef.slots;
  * @prop export let bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' = 'default';
  * @prop export let divClass: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
  * @prop export let innerClass: string = 'flex';
+ * @prop export let bannerStatus: boolean = true;
+ * @prop export let transition: TransitionFunc = fade;
+ * @prop export let params = {};
  */
 export default class Banner extends SvelteComponentTyped<BannerProps, BannerEvents, BannerSlots> {
 }

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -5,6 +5,7 @@ export let appBtnPosition = "middle";
 export let activeClass = void 0;
 export let href = "";
 export let exact = true;
+export let spanClass = "";
 const navType = getContext("navType");
 const context = getContext("bottomNavType") ?? {};
 const activeUrlStore = getContext("activeUrl");
@@ -40,13 +41,13 @@ const appBtnClasses = {
 };
 let btnClass;
 $: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
-let spanClass;
-$: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
+let spanCls;
+$: spanCls = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), spanClass);
 </script>
 
 <svelte:element this={href ? 'a' : 'button'} aria-label={btnName} {href} role={href ? 'link' : 'button'} {...$$restProps} class={btnClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
   <slot />
-  <span class={spanClass}>{btnName}</span>
+  <span class={spanCls}>{btnName}</span>
 </svelte:element>
 
 <!--
@@ -58,4 +59,5 @@ $: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.a
 @prop export let activeClass: string | undefined = undefined;
 @prop export let href: string = '';
 @prop export let exact: boolean = true;
+@prop export let spanClass: string = '';
 -->

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         activeClass?: string | undefined;
         href?: string;
         exact?: boolean;
+        spanClass?: string;
     };
     events: {
         click: MouseEvent;
@@ -35,6 +36,7 @@ export type BottomNavItemSlots = typeof __propDef.slots;
  * @prop export let activeClass: string | undefined = undefined;
  * @prop export let href: string = '';
  * @prop export let exact: boolean = true;
+ * @prop export let spanClass: string = '';
  */
 export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps, BottomNavItemEvents, BottomNavItemSlots> {
 }

package/dist/forms/Checkbox.svelte

@@ -42,5 +42,5 @@ let background = getContext("background");
 @prop export let checked: boolean | undefined = undefined;
 @prop export let spacing: string = $$slots.default ? 'me-2' : '';
 @prop export let groupLabelClass: string = '';
-@prop export let groupInputClass: strixng = '';
+@prop export let groupInputClass: string = '';
 -->

package/dist/forms/Checkbox.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         checked?: boolean | undefined;
         spacing?: string;
         groupLabelClass?: string;
-        groupInputClass?: any;
+        groupInputClass?: string;
     };
     events: {
         keyup: KeyboardEvent;
@@ -51,7 +51,7 @@ export type CheckboxSlots = typeof __propDef.slots;
  * @prop export let checked: boolean | undefined = undefined;
  * @prop export let spacing: string = $$slots.default ? 'me-2' : '';
  * @prop export let groupLabelClass: string = '';
- * @prop export let groupInputClass: strixng = '';
+ * @prop export let groupInputClass: string = '';
  */
 export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
 }

package/dist/forms/Input.svelte

@@ -13,10 +13,10 @@ export let defaultClass = "block w-full disabled:cursor-not-allowed disabled:opa
 export let color = "base";
 export let floatClass = "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400";
 const borderClasses = {
-  base: "border-gray-300 dark:border-gray-600",
-  tinted: "border-gray-300 dark:border-gray-500",
-  green: "border-green-500 dark:border-green-400",
-  red: "border-red-500 dark:border-red-400"
+  base: "border border-gray-300 dark:border-gray-600",
+  tinted: "border border-gray-300 dark:border-gray-500",
+  green: "border border-green-500 dark:border-green-400",
+  red: "border border-red-500 dark:border-red-400"
 };
 const ringClasses = {
   base: "focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500",

package/dist/toast/Toast.svelte

@@ -1,4 +1,5 @@
-<script>import { fade } from "svelte/transition";
+<script>import { createEventDispatcher } from "svelte";
+import { fade } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import { CloseButton } from "..";
 export let dismissable = true;
@@ -11,6 +12,7 @@ export let align = true;
 export let transition = fade;
 export let params = {};
 export let toastStatus = true;
+const dispatch = createEventDispatcher();
 const positions = {
   "top-left": "absolute top-5 start-5",
   "top-right": "absolute top-5 end-5",
@@ -69,6 +71,7 @@ const clsBtnExtraClass = "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:t
         {color}
         on:click={() => {
           toastStatus = false;
+          dispatch('close');
         }}
       />
     {/if}

package/dist/toast/Toast.svelte.d.ts

@@ -16,6 +16,8 @@ declare const __propDef: {
         toastStatus?: boolean;
     };
     events: {
+        close: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/types.d.ts

@@ -76,6 +76,7 @@ export interface GroupTimelineType {
     comment?: string | HTMLElement;
 }
 export interface ListGroupItemType {
+    name?: string;
     current?: boolean;
     disabled?: boolean;
     href?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.13",
+  "version": "0.46.15",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -28,7 +28,7 @@
     "eslint": "^9.6.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.41.0",
-    "flowbite-svelte": "^0.46.13",
+    "flowbite-svelte": "^0.46.15",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.11.2",
@@ -53,7 +53,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "svelte": "^3.55.1 || ^4.0.0"
+    "svelte": "^3.55.1 || ^4.0.0 || ^5.0.0"
   },
   "type": "module",
   "keywords": [