flowbite-svelte 2.0.0-next.8 → 2.0.0-next.9

package/dist/accordion/Accordion.svelte

@@ -7,7 +7,7 @@
   import { createSingleSelectionContext } from "../utils/singleselection.svelte";
   import { untrack } from "svelte";
 
-  let { children, flush, multiple = false, class: className, transitionType, respectReducedMotion = true, classes, ...restProps }: AccordionProps = $props();
+  let { children, flush, multiple = false, class: className, transition, respectReducedMotion = true, classes, ...restProps }: AccordionProps = $props();
 
   const theme = $derived(getTheme("accordion"));
 
@@ -16,8 +16,8 @@
     get flush() {
       return flush;
     },
-    get transitionType() {
-      return transitionType;
+    get transition() {
+      return transition;
     },
     get respectReducedMotion() {
       return respectReducedMotion;
@@ -51,7 +51,7 @@
 @prop flush
 @prop multiple = false
 @prop class: className
-@prop transitionType
+@prop transition
 @prop respectReducedMotion = true
 @prop classes
 @prop ...restProps

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

@@ -8,7 +8,7 @@ import type { AccordionProps } from "../types";
  * @prop flush
  * @prop multiple = false
  * @prop class: className
- * @prop transitionType
+ * @prop transition
  * @prop respectReducedMotion = true
  * @prop classes
  * @prop ...restProps

package/dist/accordion/AccordionItem.svelte

@@ -8,7 +8,7 @@
   import { prefersReducedMotion } from "svelte/motion";
   import { accordionItem } from "./theme";
 
-  let { children, header, arrowup, arrowdown, open = $bindable(false), transitionType = slide, transitionParams, class: className, classes }: AccordionItemProps = $props();
+  let { children, header, arrowup, arrowdown, open = $bindable(false), transition = slide, transitionParams, class: className, classes }: AccordionItemProps = $props();
 
   // Get context - it will be undefined if used outside Accordion
   const ctx = getAccordionContext();
@@ -22,9 +22,9 @@
     inactive: classes?.inactive || ctx?.classes?.inactive
   });
 
-  const ctxTransitionType = $derived(ctx?.transitionType ?? transitionType);
-  // Check if transitionType is explicitly set to undefined in props
-  const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
+  const ctxTransitionType = $derived(ctx?.transition ?? transition);
+  // Check if transition is explicitly set to undefined in props
+  const useTransition = $derived(transition === "none" ? false : ctxTransitionType === "none" ? false : true);
 
   // Get respectReducedMotion from context (defaults to true)
   const ctxRespectReducedMotion = $derived(ctx?.respectReducedMotion ?? true);
@@ -81,8 +81,8 @@
 </h2>
 
 {#if useTransition}
-  {#if open && transitionType !== "none"}
-    <div data-part="content-wrapper" class={contentWrapperCls} transition:transitionType={effectiveTransitionParams as ParamsType}>
+  {#if open && transition !== "none"}
+    <div data-part="content-wrapper" class={contentWrapperCls} transition:transition={effectiveTransitionParams as ParamsType}>
       <div data-part="content" class={content({ class: clsx(theme?.content, finalClasses.content) })}>
         {@render children()}
       </div>
@@ -107,7 +107,7 @@
 @prop arrowup
 @prop arrowdown
 @prop open = $bindable(false)
-@prop transitionType = slide
+@prop transition = slide
 @prop transitionParams
 @prop class: className
 @prop classes

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

@@ -9,7 +9,7 @@ import type { AccordionItemProps } from "..";
  * @prop arrowup
  * @prop arrowdown
  * @prop open = $bindable(false)
- * @prop transitionType = slide
+ * @prop transition = slide
  * @prop transitionParams
  * @prop class: className
  * @prop classes

package/dist/alert/Alert.svelte

@@ -19,7 +19,7 @@
     class: className,
     dismissable,
     transition = fade,
-    params,
+    transitionParams,
     listContent,
     borderAccent,
     closeButtonProps,
@@ -46,7 +46,7 @@
   const isBrowser = typeof window !== "undefined";
 
   // Respect reduced motion preference by setting duration to 0
-  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...params, duration: 0 } : params);
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...transitionParams, duration: 0 } : transitionParams);
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
@@ -111,7 +111,7 @@
 @prop class: className
 @prop dismissable
 @prop transition = fade
-@prop params
+@prop transitionParams
 @prop listContent
 @prop borderAccent
 @prop closeButtonProps

package/dist/alert/Alert.svelte.d.ts

@@ -14,7 +14,7 @@ import { type AlertProps } from "..";
  * @prop class: className
  * @prop dismissable
  * @prop transition = fade
- * @prop params
+ * @prop transitionParams
  * @prop listContent
  * @prop borderAccent
  * @prop closeButtonProps

package/dist/badge/Badge.svelte

@@ -22,7 +22,7 @@
     target,
     rounded,
     transition = fade,
-    params,
+    transitionParams,
     closeButtonProps,
     ...restProps
   }: BadgeProps = $props();
@@ -49,7 +49,7 @@
   const isBrowser = typeof window !== "undefined";
 
   // Respect reduced motion preference by setting duration to 0
-  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...params, duration: 0 } : params);
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...transitionParams, duration: 0 } : transitionParams);
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
@@ -103,7 +103,7 @@
 @prop target
 @prop rounded
 @prop transition = fade
-@prop params
+@prop transitionParams
 @prop closeButtonProps
 @prop ...restProps
 -->

package/dist/badge/Badge.svelte.d.ts

@@ -17,7 +17,7 @@ import { type BadgeProps } from "..";
  * @prop target
  * @prop rounded
  * @prop transition = fade
- * @prop params
+ * @prop transitionParams
  * @prop closeButtonProps
  * @prop ...restProps
  */

package/dist/banner/Banner.svelte

@@ -18,7 +18,7 @@
     class: className,
     classes,
     transition = fade,
-    params,
+    transitionParams,
     onclose,
     closeButtonProps,
     ...restProps
@@ -35,7 +35,7 @@
   const isBrowser = typeof window !== "undefined";
 
   // Respect reduced motion preference by setting duration to 0
-  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...params, duration: 0 } : params);
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...transitionParams, duration: 0 } : transitionParams);
 
   let ref: HTMLDivElement | undefined = $state(undefined);
   function close(event: MouseEvent) {
@@ -86,7 +86,7 @@
 @prop class: className
 @prop classes
 @prop transition = fade
-@prop params
+@prop transitionParams
 @prop onclose
 @prop closeButtonProps
 @prop ...restProps

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

@@ -13,7 +13,7 @@ import { type BannerProps } from "..";
  * @prop class: className
  * @prop classes
  * @prop transition = fade
- * @prop params
+ * @prop transitionParams
  * @prop onclose
  * @prop closeButtonProps
  * @prop ...restProps

package/dist/drawer/Drawer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { innerWidth, innerHeight } from "svelte/reactivity/window";
   import type { DrawerProps } from "..";
   import Dialog from "../dialog/Dialog.svelte";
   import { getTheme } from "../theme-provider/themeUtils";
@@ -71,12 +72,14 @@
 
     // set the values for transition start position
     const dlg = ev.currentTarget;
-    const { innerWidth = 0, innerHeight = 0 } = dlg.ownerDocument.defaultView ?? {};
-
     const rect = dlg.getBoundingClientRect();
 
-    x = placement === "left" ? rect.left : placement === "right" ? rect.right - innerWidth : undefined;
-    y = placement === "top" ? rect.top : placement === "bottom" ? rect.bottom - innerHeight : undefined;
+    const vw = innerWidth.current ?? 0;
+    const vh = innerHeight.current ?? 0;
+
+    x = placement === "left" ? rect.left : placement === "right" ? rect.right - vw : undefined;
+
+    y = placement === "top" ? rect.top : placement === "bottom" ? rect.bottom - vh : undefined;
 
     await tick(); // let transition start
 

package/dist/forms/select/MultiSelect.svelte

@@ -236,7 +236,14 @@
         {#if children}
           {@render children({ item, clear: () => clearThisOption(item) })}
         {:else}
-          <Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={["mx-0.5 px-2 py-0", disabled && "pointer-events-none"]}>
+          <Badge
+            color="gray"
+            large={size === "lg"}
+            dismissable
+            transitionParams={{ duration: 100 }}
+            onclose={() => clearThisOption(item)}
+            class={["mx-0.5 px-2 py-0", disabled && "pointer-events-none"]}
+          >
             {item.name}
           </Badge>
         {/if}

package/dist/sidebar/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { innerWidth } from "svelte/reactivity/window";
   import type { Attachment } from "svelte/attachments";
   import type { SidebarContextType, SidebarProps } from "../types";
   import { getTheme } from "../theme-provider/themeUtils";
@@ -21,7 +22,7 @@
     activateClickOutside = true,
     backdrop = true,
     transition = fly,
-    params,
+    transitionParams,
     ariaLabel,
     activeUrl = "",
     class: className,
@@ -42,8 +43,7 @@
     "2xl": 1536
   };
 
-  let innerWidth: number = $state(-1);
-  let isLargeScreen = $derived(disableBreakpoints ? false : alwaysOpen || innerWidth >= breakpointValues[breakpoint]);
+  let isLargeScreen = $derived(disableBreakpoints ? false : alwaysOpen || (innerWidth.current ?? 0) >= breakpointValues[breakpoint]);
 
   // Create reactive context for activeUrl using getter
   const activeUrlContext = {
@@ -79,9 +79,9 @@
 
   const isBrowser = typeof window !== "undefined";
 
-  let transitionParams = $derived(
-    isBrowser && prefersReducedMotion.current ? { ...(params ? params : { x: -320, duration: 200, easing: sineIn }), duration: 0 } : params ? params : { x: -320, duration: 200, easing: sineIn }
-  );
+  const defaultTransitionParams = { x: -320, duration: 200, easing: sineIn };
+
+  let finalTransitionParams = $derived(isBrowser && prefersReducedMotion.current ? { ...(transitionParams ?? defaultTransitionParams), duration: 0 } : (transitionParams ?? defaultTransitionParams));
 
   setSidebarContext(sidebarCtx);
 
@@ -134,8 +134,6 @@
   };
 </script>
 
-<svelte:window bind:innerWidth />
-
 {#if !disableBreakpoints}
   {#if isOpen || isLargeScreen}
     {#if isOpen && !alwaysOpen}
@@ -151,7 +149,7 @@
     {/if}
     <aside
       {@attach trapFocusAttachment}
-      transition:transition={!alwaysOpen ? transitionParams : undefined}
+      transition:transition={!alwaysOpen ? finalTransitionParams : undefined}
       {...restProps}
       data-scope="sidebar"
       data-part="base"
@@ -187,7 +185,7 @@
 @prop activateClickOutside = true
 @prop backdrop = true
 @prop transition = fly
-@prop params
+@prop transitionParams
 @prop ariaLabel
 @prop activeUrl = ""
 @prop class: className

package/dist/sidebar/Sidebar.svelte.d.ts

@@ -14,7 +14,7 @@ import type { SidebarProps } from "../types";
  * @prop activateClickOutside = true
  * @prop backdrop = true
  * @prop transition = fly
- * @prop params
+ * @prop transitionParams
  * @prop ariaLabel
  * @prop activeUrl = ""
  * @prop class: className

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -8,7 +8,20 @@
   import { slide } from "svelte/transition";
   import { sidebarDropdownWrapper } from "./theme";
 
-  let { children, arrowup, arrowdown, icon, isOpen = $bindable(), label, transition = slide, params, class: className, classes, onclick, ...restProps }: SidebarDropdownWrapperProps = $props();
+  let {
+    children,
+    arrowup,
+    arrowdown,
+    icon,
+    isOpen = $bindable(),
+    label,
+    transition = slide,
+    transitionParams,
+    class: className,
+    classes,
+    onclick,
+    ...restProps
+  }: SidebarDropdownWrapperProps = $props();
 
   const styling = $derived(classes);
 
@@ -18,7 +31,7 @@
 
   const isBrowser = typeof window !== "undefined";
 
-  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...(params as ParamsType), duration: 0 } : (params as ParamsType));
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...(transitionParams as ParamsType), duration: 0 } : (transitionParams as ParamsType));
 
   let ctx = getSidebarContext() || { isSingle: false };
 
@@ -88,7 +101,7 @@
 @prop isOpen = $bindable()
 @prop label
 @prop transition = slide
-@prop params
+@prop transitionParams
 @prop class: className
 @prop classes
 @prop onclick

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

@@ -11,7 +11,7 @@ import type { SidebarDropdownWrapperProps } from "../types";
  * @prop isOpen = $bindable()
  * @prop label
  * @prop transition = slide
- * @prop params
+ * @prop transitionParams
  * @prop class: className
  * @prop classes
  * @prop onclick

package/dist/toast/Toast.svelte

@@ -16,7 +16,7 @@
     color = "primary",
     position,
     align = true,
-    params,
+    transitionParams,
     transition = fly,
     class: className,
     classes,
@@ -34,7 +34,7 @@
   const isBrowser = typeof window !== "undefined";
 
   // Respect reduced motion preference by setting duration to 0
-  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...params, duration: 0 } : params);
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...transitionParams, duration: 0 } : transitionParams);
 
   let ref: HTMLDivElement | undefined = $state(undefined);
 
@@ -88,7 +88,7 @@
 @prop color = "primary"
 @prop position
 @prop align = true
-@prop params
+@prop transitionParams
 @prop transition = fly
 @prop class: className
 @prop classes

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

@@ -11,7 +11,7 @@ import type { ToastProps } from "../types";
  * @prop color = "primary"
  * @prop position
  * @prop align = true
- * @prop params
+ * @prop transitionParams
  * @prop transition = fly
  * @prop class: className
  * @prop classes

package/dist/types.d.ts

@@ -160,7 +160,7 @@ export type AnchorButtonDivAttributes = ({
 export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<HTMLDivElement>, "color"> {
     children: Snippet;
     multiple?: boolean;
-    transitionType?: TransitionFunc | "none";
+    transition?: TransitionFunc | "none";
     respectReducedMotion?: boolean;
     classes?: Partial<{
         button?: ClassValue;
@@ -175,7 +175,7 @@ export interface AccordionItemProps extends AccordionItemVariants, HTMLAttribute
     header?: Snippet;
     arrowup?: Snippet;
     arrowdown?: Snippet;
-    transitionType?: TransitionFunc | "none";
+    transition?: TransitionFunc | "none";
     transitionParams?: ParamsType;
 }
 export interface AlertProps extends Omit<AlertVariants, "icon">, Omit<HTMLAttributes<HTMLDivElement>, "color"> {
@@ -184,7 +184,7 @@ export interface AlertProps extends Omit<AlertVariants, "icon">, Omit<HTMLAttrib
     alertStatus?: boolean;
     closeIcon?: Component;
     transition?: TransitionFunc;
-    params?: ParamsType;
+    transitionParams?: ParamsType;
     onclick?: () => void;
     listContent?: boolean;
     borderAccent?: boolean;
@@ -209,7 +209,7 @@ export interface BadgeProps extends Omit<BadgeVariants, "href">, Omit<HTMLAttrib
     href?: HTMLAnchorAttributes["href"];
     target?: HTMLAnchorAttributes["target"];
     transition?: TransitionFunc;
-    params?: ParamsType;
+    transitionParams?: ParamsType;
     closeButtonProps?: CloseButtonConfig;
 }
 export interface BannerProps extends BannerVariants, Omit<HTMLAttributes<HTMLDivElement>, "color" | "onclose"> {
@@ -217,7 +217,7 @@ export interface BannerProps extends BannerVariants, Omit<HTMLAttributes<HTMLDiv
     open?: boolean;
     dismissable?: boolean;
     transition?: TransitionFunc;
-    params?: ParamsType;
+    transitionParams?: ParamsType;
     onclose?: (ev: MouseEvent) => void;
     closeButtonProps?: CloseButtonConfig;
 }
@@ -270,7 +270,7 @@ export interface GradientButtonProps extends GradientButtonVariants, HTMLButtonO
 }
 export interface AccordionContextType {
     flush?: boolean;
-    transitionType?: TransitionFunc | "none";
+    transition?: TransitionFunc | "none";
     respectReducedMotion?: boolean;
     classes?: Partial<{
         button?: ClassValue;
@@ -984,8 +984,8 @@ export interface PaginationProps extends PaginationVariants, HTMLLiAttributes {
 export interface PopoverProps extends PopoverVariants, Omit<PopperProps, "title"> {
     title?: Snippet | string;
     color?: PopoverVariants["color"];
-    params?: ParamsType;
     transition?: TransitionFunc;
+    transitionParams?: ParamsType;
     isOpen?: boolean;
 }
 export interface ProgressbarProps extends ProgressbarVariants, Omit<HTMLAttributes<HTMLDivElement>, "color"> {
@@ -1118,8 +1118,8 @@ export interface SidebarProps extends SidebarVariants, HTMLAttributes<HTMLElemen
     activateClickOutside?: boolean;
     isSingle?: boolean;
     ariaLabel?: string;
-    params?: ParamsType;
     transition?: TransitionFunc;
+    transitionParams?: ParamsType;
     backdrop?: boolean;
     activeUrl?: string;
     alwaysOpen?: boolean;
@@ -1151,8 +1151,8 @@ export interface SidebarDropdownWrapperProps extends SidebarDropdownWrapperVaria
     icon?: Snippet;
     isOpen?: boolean;
     label?: string;
-    params?: ParamsType;
     transition?: TransitionFunc;
+    transitionParams?: ParamsType;
     onclick?: () => void;
     isSingle?: boolean;
 }
@@ -1529,8 +1529,8 @@ export interface ToastProps extends ToastVaraints, HTMLAttributes<HTMLDivElement
     color?: ToastVaraints["color"];
     position?: ToastVaraints["position"];
     align?: boolean;
-    params?: ParamsType;
     transition?: TransitionFunc;
+    transitionParams?: ParamsType;
     class?: string;
     closeButtonProps?: CloseButtonConfig;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-next.9",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",