diff --git a/src/lib/accordion/Accordion.svelte b/src/lib/accordion/Accordion.svelte
index 9fb3c151fc..6f411ca8ac 100644
--- a/src/lib/accordion/Accordion.svelte
+++ b/src/lib/accordion/Accordion.svelte
@@ -7,7 +7,7 @@
   import { createSingleSelectionContext } from "$lib/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
diff --git a/src/lib/accordion/AccordionItem.svelte b/src/lib/accordion/AccordionItem.svelte
index ddcf031042..f8e2f3d937 100644
--- a/src/lib/accordion/AccordionItem.svelte
+++ b/src/lib/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
diff --git a/src/lib/alert/Alert.svelte b/src/lib/alert/Alert.svelte
index 3423a8882b..51f03926b9 100644
--- a/src/lib/alert/Alert.svelte
+++ b/src/lib/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
diff --git a/src/lib/badge/Badge.svelte b/src/lib/badge/Badge.svelte
index f8fc2b9fdb..7f1496e33b 100644
--- a/src/lib/badge/Badge.svelte
+++ b/src/lib/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
 -->
diff --git a/src/lib/banner/Banner.svelte b/src/lib/banner/Banner.svelte
index 884465fa4e..1c51c51eed 100644
--- a/src/lib/banner/Banner.svelte
+++ b/src/lib/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
diff --git a/src/lib/drawer/Drawer.svelte b/src/lib/drawer/Drawer.svelte
index be40f6c943..07c9cfc209 100644
--- a/src/lib/drawer/Drawer.svelte
+++ b/src/lib/drawer/Drawer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { innerWidth, innerHeight } from "svelte/reactivity/window";
   import type { DrawerProps } from "$lib";
   import Dialog from "$lib/dialog/Dialog.svelte";
   import { getTheme } from "$lib/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
 
diff --git a/src/lib/forms/select/MultiSelect.svelte b/src/lib/forms/select/MultiSelect.svelte
index 5fe7881c52..8f0897db3c 100644
--- a/src/lib/forms/select/MultiSelect.svelte
+++ b/src/lib/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}
diff --git a/src/lib/sidebar/Sidebar.svelte b/src/lib/sidebar/Sidebar.svelte
index b45fa5e731..f2d1e29214 100644
--- a/src/lib/sidebar/Sidebar.svelte
+++ b/src/lib/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 "$lib/types";
   import { getTheme } from "$lib/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
diff --git a/src/lib/sidebar/SidebarDropdownWrapper.svelte b/src/lib/sidebar/SidebarDropdownWrapper.svelte
index 0c141a31de..ad73a14210 100644
--- a/src/lib/sidebar/SidebarDropdownWrapper.svelte
+++ b/src/lib/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
diff --git a/src/lib/toast/Toast.svelte b/src/lib/toast/Toast.svelte
index f63ba9cae2..3a676f4bed 100644
--- a/src/lib/toast/Toast.svelte
+++ b/src/lib/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
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 610b6b86c4..bdf29380f4 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -213,7 +213,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<{
     // for AccordionItem
@@ -230,7 +230,7 @@ export interface AccordionItemProps extends AccordionItemVariants, HTMLAttribute
   header?: Snippet;
   arrowup?: Snippet;
   arrowdown?: Snippet;
-  transitionType?: TransitionFunc | "none";
+  transition?: TransitionFunc | "none";
   transitionParams?: ParamsType;
 }
 
@@ -241,7 +241,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;
@@ -270,7 +270,7 @@ export interface BadgeProps extends Omit<BadgeVariants, "href">, Omit<HTMLAttrib
   href?: HTMLAnchorAttributes["href"];
   target?: HTMLAnchorAttributes["target"];
   transition?: TransitionFunc;
-  params?: ParamsType;
+  transitionParams?: ParamsType;
   closeButtonProps?: CloseButtonConfig;
 }
 
@@ -280,7 +280,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;
 }
@@ -353,7 +353,7 @@ export interface GradientButtonProps extends GradientButtonVariants, HTMLButtonO
 // Context - pass classes through
 export interface AccordionContextType {
   flush?: boolean;
-  transitionType?: TransitionFunc | "none";
+  transition?: TransitionFunc | "none";
   respectReducedMotion?: boolean;
   classes?: Partial<{
     button?: ClassValue;
@@ -1198,8 +1198,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;
 }
 
@@ -1335,8 +1335,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;
@@ -1374,8 +1374,8 @@ export interface SidebarDropdownWrapperProps extends SidebarDropdownWrapperVaria
   icon?: Snippet;
   isOpen?: boolean;
   label?: string;
-  params?: ParamsType;
   transition?: TransitionFunc;
+  transitionParams?: ParamsType;
   onclick?: () => void;
   isSingle?: boolean;
 }
@@ -1809,8 +1809,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;
 }
diff --git a/src/routes/admin-dashboard/(sidebar)/Sidebar.svelte b/src/routes/admin-dashboard/(sidebar)/Sidebar.svelte
index bcf895df92..1b449e8a6a 100644
--- a/src/routes/admin-dashboard/(sidebar)/Sidebar.svelte
+++ b/src/routes/admin-dashboard/(sidebar)/Sidebar.svelte
@@ -124,7 +124,7 @@
   backdrop={false}
   {isOpen}
   {closeSidebar}
-  params={{ x: -50, duration: 50 }}
+  transitionParams={{ x: -50, duration: 50 }}
   class="top-0 left-0 mt-[69px] h-screen w-64 bg-gray-50 transition-transform lg:block dark:bg-gray-800"
   classes={{ content: "h-full px-1 py-1 overflow-y-auto bg-gray-50 dark:bg-gray-800", nonactive: "p-2 group-has-[ul]:ms-0", active: "p-2 group-has-[ul]:ms-0" }}
 >
diff --git a/src/routes/builder/alert/+page.svelte b/src/routes/builder/alert/+page.svelte
index 1806518462..a17491cd45 100644
--- a/src/routes/builder/alert/+page.svelte
+++ b/src/routes/builder/alert/+page.svelte
@@ -94,7 +94,7 @@
             return `${key}:${value}`;
           })
           .join(",");
-        props.push(` params={{${paramsString}}}`);
+        props.push(` transitionParams={{${paramsString}}}`);
       }
 
       const propsString = props.length > 0 ? props.map((prop) => `\n  ${prop}`).join("") + "\n  " : "";
@@ -134,7 +134,7 @@
 
 <CodeWrapper>
   <div class="mb-4 h-20">
-    <Alert {color} {rounded} {border} {dismissable} class={alertClass} bind:alertStatus={alertStatusInteractive} transition={currentTransition.transition} params={currentTransition.params}>
+    <Alert {color} {rounded} {border} {dismissable} class={alertClass} bind:alertStatus={alertStatusInteractive} transition={currentTransition.transition} transitionParams={currentTransition.params}>
       {#snippet icon()}
         {#if iconSlot}
           <InfoCircleSolid class="h-5 w-5" />
diff --git a/src/routes/builder/badge/+page.svelte b/src/routes/builder/badge/+page.svelte
index 6b118bc894..426fac26e5 100644
--- a/src/routes/builder/badge/+page.svelte
+++ b/src/routes/builder/badge/+page.svelte
@@ -110,7 +110,7 @@
           })
           .join(",");
 
-        props.push(` params={{${paramsString}}}`);
+        props.push(` transitionParams={{${paramsString}}}`);
       }
 
       const propsString = props.length > 0 ? props.map((prop) => `\n  ${prop}`).join("") + "\n" : "";
@@ -156,7 +156,7 @@
       {border}
       {rounded}
       transition={currentTransition.transition}
-      params={currentTransition.params}
+      transitionParams={currentTransition.params}
       href={link}
     >
       {#if iconSlot}
diff --git a/src/routes/builder/banner/+page.svelte b/src/routes/builder/banner/+page.svelte
index d76bbd118f..566a2be101 100644
--- a/src/routes/builder/banner/+page.svelte
+++ b/src/routes/builder/banner/+page.svelte
@@ -66,7 +66,7 @@
             return `${key}:${value}`;
           })
           .join(",");
-        props.push(` params={{${paramsString}}}`);
+        props.push(` transitionParams={{${paramsString}}}`);
       }
 
       const propsString = props.length > 0 ? props.map((prop) => `\n  ${prop}`).join("") + "\n" : "";
@@ -104,7 +104,7 @@
       <Skeleton class="py-4" />
       <ImagePlaceholder class="py-4" />
     </div>
-    <Banner id="sample-banner" {color} bind:open={bannerStatus} class={bannerClass} transition={currentTransition.transition} params={currentTransition.params}>
+    <Banner id="sample-banner" {color} bind:open={bannerStatus} class={bannerClass} transition={currentTransition.transition} transitionParams={currentTransition.params}>
       <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
         <span class="me-3 inline-flex rounded-full bg-gray-200 p-1 dark:bg-gray-600">
           <BullhornOutline class="h-3 w-3 text-gray-500 dark:text-gray-400" />
diff --git a/src/routes/builder/drawer/+page.svelte b/src/routes/builder/drawer/+page.svelte
index a3d8201413..0dc873587b 100644
--- a/src/routes/builder/drawer/+page.svelte
+++ b/src/routes/builder/drawer/+page.svelte
@@ -76,7 +76,7 @@
       if (!outsideclickStatus) props.push(" activateClickOutside={false}");
       if (currentPlacement.width !== "default") props.push(` width="${currentPlacement.width}"`);
       if (currentTransition !== transitions[0]) {
-        props.push(` transitionType={${currentTransition.transition.name}}`);
+        props.push(` transition={${currentTransition.transition.name}}`);
 
         const paramsString = Object.entries(currentTransition.params)
           .map(([key, value]) => {
@@ -88,7 +88,7 @@
             return `${key}:${value}`;
           })
           .join(",");
-        props.push(` params={{${paramsString}}}`);
+        props.push(` transitionParams={{${paramsString}}}`);
       }
       // placement
       if (currentPlacement !== placements[0]) {
diff --git a/src/routes/builder/dropdown/+page.svelte b/src/routes/builder/dropdown/+page.svelte
index 13398dd6af..3190d789f6 100644
--- a/src/routes/builder/dropdown/+page.svelte
+++ b/src/routes/builder/dropdown/+page.svelte
@@ -91,7 +91,7 @@
             return `${key}:${value}`;
           })
           .join(",");
-        props.push(` params={{${paramsString}}}`);
+        props.push(` transitionParams={{${paramsString}}}`);
       }
 
       const propsString = props.length > 0 ? props.map((prop) => `\n  ${prop}`).join("") + "\n" : "";
diff --git a/src/routes/builder/modal/+page.svelte b/src/routes/builder/modal/+page.svelte
index 43e8a86b13..6cf52f0a12 100644
--- a/src/routes/builder/modal/+page.svelte
+++ b/src/routes/builder/modal/+page.svelte
@@ -62,7 +62,7 @@
             return `${key}:${value}`;
           })
           .join(",");
-        props.push(`params={{${paramsString}}}`);
+        props.push(`transitionParams={{${paramsString}}}`);
       }
 
       const propsString = props.length > 0 ? props.map((prop) => `\n  ${prop}`).join("") + "\n" : "";
diff --git a/src/routes/builder/popover/+page.svelte b/src/routes/builder/popover/+page.svelte
index e867397715..876afd1365 100644
--- a/src/routes/builder/popover/+page.svelte
+++ b/src/routes/builder/popover/+page.svelte
@@ -77,7 +77,7 @@
             return `${key}:${value}`;
           })
           .join(",");
-        props.push(` params={{${paramsString}}}`);
+        props.push(` transitionParams={{${paramsString}}}`);
       }
 
       const propsString = props.length > 0 ? props.map((prop) => `\n  ${prop}`).join("") + "\n" : "";
@@ -109,7 +109,7 @@
 <CodeWrapper class="">
   <div class="flex h-80 items-center justify-center">
     <Button id="b1">Popover</Button>
-    <Popover {color} {placement} {arrow} {offset} class={popoverClass} transition={currentTransition.transition} params={currentTransition.params} title="Popover title" triggeredBy="#b1">
+    <Popover {color} {placement} {arrow} {offset} class={popoverClass} transition={currentTransition.transition} transitionParams={currentTransition.params} title="Popover title" triggeredBy="#b1">
       <p>And here's some amazing content. It's very engaging. Right?</p>
     </Popover>
   </div>
diff --git a/src/routes/builder/toast/+page.svelte b/src/routes/builder/toast/+page.svelte
index 79d47d76f8..23bde4dc66 100644
--- a/src/routes/builder/toast/+page.svelte
+++ b/src/routes/builder/toast/+page.svelte
@@ -62,7 +62,7 @@
             return `${key}:${value}`;
           })
           .join(",");
-        props.push(` params={{${paramsString}}}`);
+        props.push(` transitionParams={{${paramsString}}}`);
       }
 
       const propsString = props.length > 0 ? props.map((prop) => `\n  ${prop}`).join("") + "\n" : "";
@@ -90,7 +90,7 @@
 <H1>Toast Builder</H1>
 <CodeWrapper>
   <div class="relative h-28 md:h-56">
-    <Toast color={toastColor} bind:toastStatus {dismissable} transition={currentTransition.transition} params={currentTransition.params} position={toastPosition}>
+    <Toast color={toastColor} bind:toastStatus {dismissable} transition={currentTransition.transition} transitionParams={currentTransition.params} position={toastPosition}>
       {#snippet icon()}
         <CheckCircleSolid class="h-5 w-5" />
         <span class="sr-only">Check icon</span>
diff --git a/src/routes/component-data/Accordion.json b/src/routes/component-data/Accordion.json
index 8666762201..d88af47b77 100644
--- a/src/routes/component-data/Accordion.json
+++ b/src/routes/component-data/Accordion.json
@@ -9,7 +9,7 @@
     ["flush", ""],
     ["multiple", "false"],
     ["class: className", ""],
-    ["transitionType", ""],
+    ["transition", ""],
     ["respectReducedMotion", "true"],
     ["classes", ""]
   ]
diff --git a/src/routes/component-data/AccordionItem.json b/src/routes/component-data/AccordionItem.json
index 792620d35b..ac60838bce 100644
--- a/src/routes/component-data/AccordionItem.json
+++ b/src/routes/component-data/AccordionItem.json
@@ -10,7 +10,7 @@
     ["arrowup", ""],
     ["arrowdown", ""],
     ["open", "$bindable(false)"],
-    ["transitionType", "slide"],
+    ["transition", "slide"],
     ["transitionParams", ""],
     ["class: className", ""],
     ["classes", ""]
diff --git a/src/routes/docs-examples/components/accordion/TransitionNone.svelte b/src/routes/docs-examples/components/accordion/TransitionNone.svelte
index 8e36d04488..9304168c04 100644
--- a/src/routes/docs-examples/components/accordion/TransitionNone.svelte
+++ b/src/routes/docs-examples/components/accordion/TransitionNone.svelte
@@ -2,7 +2,7 @@
   import { AccordionItem, Accordion } from "flowbite-svelte";
 </script>
 
-<Accordion transitionType="none">
+<Accordion transition="none">
   <AccordionItem>
     {#snippet header()}My Header 1{/snippet}
     Content A
@@ -14,12 +14,12 @@
 </Accordion>
 
 <Accordion>
-  <AccordionItem transitionType="none">
-    {#snippet header()}transitionType: "none"{/snippet}
+  <AccordionItem transition="none">
+    {#snippet header()}transition: "none"{/snippet}
     Content C
   </AccordionItem>
   <AccordionItem>
-    {#snippet header()}transitionType: default{/snippet}
+    {#snippet header()}transition: default{/snippet}
     Content D
   </AccordionItem>
 </Accordion>
diff --git a/src/routes/docs-examples/components/accordion/Transitions.svelte b/src/routes/docs-examples/components/accordion/Transitions.svelte
index c009ad9a59..8f0c1d1d90 100644
--- a/src/routes/docs-examples/components/accordion/Transitions.svelte
+++ b/src/routes/docs-examples/components/accordion/Transitions.svelte
@@ -8,11 +8,11 @@
     {#snippet header()}Slide duration:1000{/snippet}
     <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
   </AccordionItem>
-  <AccordionItem transitionType={blur} transitionParams={{ duration: 300 }}>
+  <AccordionItem transition={blur} transitionParams={{ duration: 300 }}>
     {#snippet header()}Blur duration:300{/snippet}
     <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
   </AccordionItem>
-  <AccordionItem transitionType={fade} transitionParams={{ duration: 300 }}>
+  <AccordionItem transition={fade} transitionParams={{ duration: 300 }}>
     {#snippet header()}Fade duration:300{/snippet}
     <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
   </AccordionItem>
diff --git a/src/routes/docs-examples/components/alert/Dismissable.svelte b/src/routes/docs-examples/components/alert/Dismissable.svelte
index b07ef20461..d84e40ee64 100644
--- a/src/routes/docs-examples/components/alert/Dismissable.svelte
+++ b/src/routes/docs-examples/components/alert/Dismissable.svelte
@@ -22,7 +22,7 @@
   <a href="/" class="font-semibold underline hover:text-green-800 dark:hover:text-green-900">example link</a>
   . Give it a click if you like.
 </Alert>
-<Alert color="warning" dismissable transition={fly} params={{ x: 200 }}>
+<Alert color="warning" dismissable transition={fly} transitionParams={{ x: 200 }}>
   {#snippet icon()}<InfoCircleSolid class="h-5 w-5" />{/snippet}
   An alert with non default animation - fly away.
 </Alert>
diff --git a/src/routes/docs-examples/components/banner/Transition.svelte b/src/routes/docs-examples/components/banner/Transition.svelte
index 5f476627e7..a37f55d46a 100644
--- a/src/routes/docs-examples/components/banner/Transition.svelte
+++ b/src/routes/docs-examples/components/banner/Transition.svelte
@@ -10,7 +10,7 @@
 <Skeleton class="py-4" />
 <ImagePlaceholder class="py-4" />
 
-<Banner transition={slide} {params} class="absolute">
+<Banner transition={slide} transitionParams={params} class="absolute">
   <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
     <span class="me-3 inline-flex rounded-full bg-gray-200 p-1 dark:bg-gray-600">
       <BullhornSolid class="h-3 w-3 text-gray-500 dark:text-gray-400" />
diff --git a/src/routes/docs-examples/components/sidebar/AllOpen.svelte b/src/routes/docs-examples/components/sidebar/AllOpen.svelte
index d54af32a48..21cb7fc9af 100644
--- a/src/routes/docs-examples/components/sidebar/AllOpen.svelte
+++ b/src/routes/docs-examples/components/sidebar/AllOpen.svelte
@@ -22,7 +22,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
     class="z-50 h-full"
diff --git a/src/routes/docs-examples/components/sidebar/AlwaysOpen.svelte b/src/routes/docs-examples/components/sidebar/AlwaysOpen.svelte
index 6bfad6bd82..530546976a 100644
--- a/src/routes/docs-examples/components/sidebar/AlwaysOpen.svelte
+++ b/src/routes/docs-examples/components/sidebar/AlwaysOpen.svelte
@@ -21,7 +21,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/Branding.svelte b/src/routes/docs-examples/components/sidebar/Branding.svelte
index 2fc7a806ba..39eea44a8e 100644
--- a/src/routes/docs-examples/components/sidebar/Branding.svelte
+++ b/src/routes/docs-examples/components/sidebar/Branding.svelte
@@ -26,7 +26,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/BrandingUsingChildren.svelte b/src/routes/docs-examples/components/sidebar/BrandingUsingChildren.svelte
index 59c4351a59..4c4e192553 100644
--- a/src/routes/docs-examples/components/sidebar/BrandingUsingChildren.svelte
+++ b/src/routes/docs-examples/components/sidebar/BrandingUsingChildren.svelte
@@ -21,7 +21,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/CloseButton.svelte b/src/routes/docs-examples/components/sidebar/CloseButton.svelte
index c88ed7c70a..2719a37413 100644
--- a/src/routes/docs-examples/components/sidebar/CloseButton.svelte
+++ b/src/routes/docs-examples/components/sidebar/CloseButton.svelte
@@ -21,7 +21,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full pt-6"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/Cta.svelte b/src/routes/docs-examples/components/sidebar/Cta.svelte
index d9f076f743..cb2f440e1f 100644
--- a/src/routes/docs-examples/components/sidebar/Cta.svelte
+++ b/src/routes/docs-examples/components/sidebar/Cta.svelte
@@ -21,7 +21,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/Default.svelte b/src/routes/docs-examples/components/sidebar/Default.svelte
index 9bb3f73058..364c06c094 100644
--- a/src/routes/docs-examples/components/sidebar/Default.svelte
+++ b/src/routes/docs-examples/components/sidebar/Default.svelte
@@ -21,7 +21,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/LinksAndActive.svelte b/src/routes/docs-examples/components/sidebar/LinksAndActive.svelte
index b87c20f03b..49a8c76c9d 100644
--- a/src/routes/docs-examples/components/sidebar/LinksAndActive.svelte
+++ b/src/routes/docs-examples/components/sidebar/LinksAndActive.svelte
@@ -23,7 +23,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     classes={{ nonactive: nonActiveClass, active: activeClass }}
     position="absolute"
     class="z-50 h-full"
diff --git a/src/routes/docs-examples/components/sidebar/LinksAndActive2.svelte b/src/routes/docs-examples/components/sidebar/LinksAndActive2.svelte
index 0011ebe5a8..6b1d2d39d7 100644
--- a/src/routes/docs-examples/components/sidebar/LinksAndActive2.svelte
+++ b/src/routes/docs-examples/components/sidebar/LinksAndActive2.svelte
@@ -23,7 +23,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     position="absolute"
     classes={{ nonactive: nonActiveClass, active: activeClass }}
     class="z-50 h-full"
diff --git a/src/routes/docs-examples/components/sidebar/MultiLevel.svelte b/src/routes/docs-examples/components/sidebar/MultiLevel.svelte
index eaef7d73d2..ba230b4c0b 100644
--- a/src/routes/docs-examples/components/sidebar/MultiLevel.svelte
+++ b/src/routes/docs-examples/components/sidebar/MultiLevel.svelte
@@ -29,7 +29,7 @@
     isOpen={isDemoOpen}
     isSingle={false}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
     class="z-50 h-full"
diff --git a/src/routes/docs-examples/components/sidebar/MultiLevel2.svelte b/src/routes/docs-examples/components/sidebar/MultiLevel2.svelte
index 3717720a4b..c4fe203cb4 100644
--- a/src/routes/docs-examples/components/sidebar/MultiLevel2.svelte
+++ b/src/routes/docs-examples/components/sidebar/MultiLevel2.svelte
@@ -27,7 +27,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     position="absolute"
     class="z-50 h-full"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/ObjectEx.svelte b/src/routes/docs-examples/components/sidebar/ObjectEx.svelte
index c8a8ce75b8..df9f433b06 100644
--- a/src/routes/docs-examples/components/sidebar/ObjectEx.svelte
+++ b/src/routes/docs-examples/components/sidebar/ObjectEx.svelte
@@ -45,7 +45,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/Separator.svelte b/src/routes/docs-examples/components/sidebar/Separator.svelte
index 9a58b956af..002dff427a 100644
--- a/src/routes/docs-examples/components/sidebar/Separator.svelte
+++ b/src/routes/docs-examples/components/sidebar/Separator.svelte
@@ -21,7 +21,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     class="z-50 h-full"
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/Single.svelte b/src/routes/docs-examples/components/sidebar/Single.svelte
index 987056f260..97b0392291 100644
--- a/src/routes/docs-examples/components/sidebar/Single.svelte
+++ b/src/routes/docs-examples/components/sidebar/Single.svelte
@@ -21,7 +21,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
     class="z-50 h-full"
diff --git a/src/routes/docs-examples/components/sidebar/Static.svelte b/src/routes/docs-examples/components/sidebar/Static.svelte
index 504af2badf..6ac41248bd 100644
--- a/src/routes/docs-examples/components/sidebar/Static.svelte
+++ b/src/routes/docs-examples/components/sidebar/Static.svelte
@@ -23,7 +23,7 @@
         backdrop={false}
         isOpen={isDemoOpen}
         closeSidebar={closeDemoSidebar}
-        params={{ x: -50, duration: 50 }}
+        transitionParams={{ x: -50, duration: 50 }}
         class="z-50"
         position="static"
         classes={{ nonactive: "p-2", active: "p-2" }}
diff --git a/src/routes/docs-examples/components/sidebar/Transition.svelte b/src/routes/docs-examples/components/sidebar/Transition.svelte
index b1572302d1..47cc06b6c8 100644
--- a/src/routes/docs-examples/components/sidebar/Transition.svelte
+++ b/src/routes/docs-examples/components/sidebar/Transition.svelte
@@ -27,7 +27,7 @@
     backdrop={false}
     isOpen={isDemoOpen}
     closeSidebar={closeDemoSidebar}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
     position="absolute"
     classes={{ nonactive: "p-2", active: "p-2" }}
     class="z-50 h-full"
@@ -38,7 +38,7 @@
           <ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
         {/snippet}
       </SidebarItem>
-      <SidebarDropdownWrapper label="E-commerce" classes={{ trigger: "p-2" }} transition={fade} {params}>
+      <SidebarDropdownWrapper label="E-commerce" classes={{ trigger: "p-2" }} transition={fade} transitionParams={params}>
         {#snippet icon()}
           <ShoppingBagSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
         {/snippet}
diff --git a/src/routes/docs-examples/components/toast/Blur.svelte b/src/routes/docs-examples/components/toast/Blur.svelte
index eb26ac3cce..0a99974d16 100644
--- a/src/routes/docs-examples/components/toast/Blur.svelte
+++ b/src/routes/docs-examples/components/toast/Blur.svelte
@@ -4,14 +4,14 @@
   import { BellOutline } from "flowbite-svelte-icons";
 </script>
 
-<Toast transition={blur} color="purple" params={{ amount: 10 }} class="mb-4">
+<Toast transition={blur} color="purple" transitionParams={{ amount: 10 }} class="mb-4">
   {#snippet icon()}
     <BellOutline class="h-6 w-6" />
   {/snippet}
   Transition type: blur, amount: 10
 </Toast>
 
-<Toast transition={blur} color="purple" params={{ amount: 50, delay: 1000 }}>
+<Toast transition={blur} color="purple" transitionParams={{ amount: 50, delay: 1000 }}>
   {#snippet icon()}
     <BellOutline class="h-6 w-6" />
   {/snippet}
diff --git a/src/routes/docs-examples/components/toast/Fly.svelte b/src/routes/docs-examples/components/toast/Fly.svelte
index c99bfb91b2..fc455a077e 100644
--- a/src/routes/docs-examples/components/toast/Fly.svelte
+++ b/src/routes/docs-examples/components/toast/Fly.svelte
@@ -4,14 +4,14 @@
   import { DownloadOutline } from "flowbite-svelte-icons";
 </script>
 
-<Toast transition={fly} params={{ x: 200 }} color="green" class="mb-4">
+<Toast transition={fly} transitionParams={{ x: 200 }} color="green" class="mb-4">
   {#snippet icon()}
     <DownloadOutline class="h-6 w-6" />
   {/snippet}
   Transition type: fly right
 </Toast>
 
-<Toast transition={fly} params={{ y: 200 }} color="green">
+<Toast transition={fly} transitionParams={{ y: 200 }} color="green">
   {#snippet icon()}
     <DownloadOutline class="h-6 w-6" />
   {/snippet}
diff --git a/src/routes/docs-examples/components/toast/StackVertical.svelte b/src/routes/docs-examples/components/toast/StackVertical.svelte
index 7bda79fc7a..dfabde0ec7 100644
--- a/src/routes/docs-examples/components/toast/StackVertical.svelte
+++ b/src/routes/docs-examples/components/toast/StackVertical.svelte
@@ -59,7 +59,7 @@
 <div class="relative min-h-screen p-8">
   <div class="z-50 space-y-3" style="position: absolute; top: 1rem; right: 1rem;">
     {#each toasts as toast (toast.id)}
-      <Toast color={toast.color} dismissable={true} transition={fly} params={{ x: 400, duration: 300 }} class="w-64" onclose={handleClose(toast.id)}>
+      <Toast color={toast.color} dismissable={true} transition={fly} transitionParams={{ x: 400, duration: 300 }} class="w-64" onclose={handleClose(toast.id)}>
         {toast.message}
       </Toast>
     {/each}
diff --git a/src/routes/docs-examples/components/toast/ToastContainerEx.svelte b/src/routes/docs-examples/components/toast/ToastContainerEx.svelte
index 5924b62066..4451246f5e 100644
--- a/src/routes/docs-examples/components/toast/ToastContainerEx.svelte
+++ b/src/routes/docs-examples/components/toast/ToastContainerEx.svelte
@@ -75,7 +75,7 @@
 
 <ToastContainer position="top-right">
   {#each toasts as toast (toast.id)}
-    <Toast color={toast.color} dismissable={true} transition={fly} params={{ x: 200, duration: 800 }} class="w-64" onclose={handleClose(toast.id)} bind:toastStatus={toast.visible}>
+    <Toast color={toast.color} dismissable={true} transition={fly} transitionParams={{ x: 200, duration: 800 }} class="w-64" onclose={handleClose(toast.id)} bind:toastStatus={toast.visible}>
       {toast.message}
     </Toast>
   {/each}
diff --git a/src/routes/docs-examples/components/toast/Transitions.svelte b/src/routes/docs-examples/components/toast/Transitions.svelte
index b694bcdc69..3606a8d0eb 100644
--- a/src/routes/docs-examples/components/toast/Transitions.svelte
+++ b/src/routes/docs-examples/components/toast/Transitions.svelte
@@ -12,14 +12,14 @@
   Transition type: slide
 </Toast>
 
-<Toast transition={scale} params={{ delay: 250, duration: 300, easing: quintOut }}>
+<Toast transition={scale} transitionParams={{ delay: 250, duration: 300, easing: quintOut }}>
   {#snippet icon()}
     <CheckCircleSolid class="h-6 w-6" />
   {/snippet}
   Transition type: scale, delay: 250, duration: 300, easing: quintOut
 </Toast>
 
-<Toast params={{ delay: 250, duration: 1000 }}>
+<Toast transitionParams={{ delay: 250, duration: 1000 }}>
   {#snippet icon()}
     <CheckCircleSolid class="h-6 w-6" />
   {/snippet}
diff --git a/src/routes/docs-examples/forms/select/Customization.svelte b/src/routes/docs-examples/forms/select/Customization.svelte
index 7cc4c7fd88..a28cfd02b1 100644
--- a/src/routes/docs-examples/forms/select/Customization.svelte
+++ b/src/routes/docs-examples/forms/select/Customization.svelte
@@ -13,7 +13,7 @@
 
 <MultiSelect items={countries} value={selected}>
   {#snippet children({ item, clear })}
-    <Badge color={item.color} dismissable params={{ duration: 100 }} onclose={clear} class="mx-0.5">
+    <Badge color={item.color} dismissable transitionParams={{ duration: 100 }} onclose={clear} class="mx-0.5">
       {item.name}
     </Badge>
   {/snippet}
diff --git a/src/routes/docs-examples/forms/select/Preselect.svelte b/src/routes/docs-examples/forms/select/Preselect.svelte
index eccabedd26..0ec797143e 100644
--- a/src/routes/docs-examples/forms/select/Preselect.svelte
+++ b/src/routes/docs-examples/forms/select/Preselect.svelte
@@ -13,7 +13,7 @@
 
 <MultiSelect items={colorCountries} value={preselected}>
   {#snippet children({ item, clear })}
-    <Badge color={item.color} dismissable params={{ duration: 100 }} onclose={clear} class="mx-0.5">
+    <Badge color={item.color} dismissable transitionParams={{ duration: 100 }} onclose={clear} class="mx-0.5">
       {item.name}
     </Badge>
   {/snippet}
diff --git a/src/routes/docs/components/accordion.md b/src/routes/docs/components/accordion.md
index ca48d6f403..41576669d1 100644
--- a/src/routes/docs/components/accordion.md
+++ b/src/routes/docs/components/accordion.md
@@ -102,7 +102,7 @@ Here's an example of how to use the `multiple` option together with "expand all"
 
 ## Custom transitions
 
-The default transition of `AccordionItem`s is <A href="https://svelte.dev/docs#run-time-svelte-transition-slide">slide</A>. Use the `transitionType` and `transitionParams` prop to create custom transitions.
+The default transition of `AccordionItem`s is <A href="https://svelte.dev/docs#run-time-svelte-transition-slide">slide</A>. Use the `transition` and `transitionParams` prop to create custom transitions.
 
 You can use any Svelte transition function such as `fade`, `blur`, `fly`, or `scale` from the `svelte/transition` module, and customize them with parameters like duration and easing.
 
@@ -130,9 +130,9 @@ To test: Fill out the form, navigate to a different page, and then use your brow
 {#include Snapshot.svelte}
 ```
 
-## Using transitionType="none"
+## Using transition="none"
 
-When you set `transitionType="none"` on an Accordion or an AccordionItem, it disables Svelte transitions completely and instead uses CSS display properties (block/hidden) to show or hide content. This prevents Svelte from destroying and recreating components when toggling the accordion.
+When you set `transition="none"` on an Accordion or an AccordionItem, it disables Svelte transitions completely and instead uses CSS display properties (block/hidden) to show or hide content. This prevents Svelte from destroying and recreating components when toggling the accordion.
 
 This approach is useful when:
 - You want to preserve form state or component lifecycle
@@ -195,7 +195,7 @@ Combining multiple responsive patterns for sophisticated adaptive layouts:
 
 - `multiple`: Allow multiple items open simultaneously (default: `false`)
 - `flush`: Remove rounded borders for minimal design
-- `transitionType`: Control transitions (`TransitionFunc` or `"none"`)
+- `transition`: Control transitions (`TransitionFunc` or `"none"`)
 - `classes`: Customize styling with `active`, `inactive`, `button`, `contentWrapper`, `content` properties
 
 ### AccordionItem
@@ -203,7 +203,7 @@ Combining multiple responsive patterns for sophisticated adaptive layouts:
 - `open`: Control open state (bindable)
 - `header`: Snippet for header content
 - `arrowup` / `arrowdown`: Snippets for custom icons
-- `transitionType`: Override parent transition (`TransitionFunc` or `"none"`)
+- `transition`: Override parent transition (`TransitionFunc` or `"none"`)
 - `transitionParams`: Custom transition parameters
 - `classes`: Item-specific styling overrides
 
diff --git a/src/routes/layouts/ComponentsLayout.svelte b/src/routes/layouts/ComponentsLayout.svelte
index da7d480fa0..3799f350d8 100644
--- a/src/routes/layouts/ComponentsLayout.svelte
+++ b/src/routes/layouts/ComponentsLayout.svelte
@@ -90,7 +90,7 @@
     classes={{ content: contentClass, nonactive: nonActiveClass, active: activeClass }}
     activeUrl={mainSidebarUrl}
     class={mainClass}
-    params={{ x: -50, duration: 50 }}
+    transitionParams={{ x: -50, duration: 50 }}
   >
     <h4 id="sidebar-label" class="sr-only">Browse docs</h4>
     <SidebarGroup>
diff --git a/src/tests/accordion/no-transition-accordion.test.svelte b/src/tests/accordion/no-transition-accordion.test.svelte
index 62a24eb056..0d9143dc5f 100644
--- a/src/tests/accordion/no-transition-accordion.test.svelte
+++ b/src/tests/accordion/no-transition-accordion.test.svelte
@@ -2,7 +2,7 @@
   import { Accordion, AccordionItem } from "$lib";
 </script>
 
-<Accordion transitionType="none" data-testid="no-transition-accordion">
+<Accordion transition="none" data-testid="no-transition-accordion">
   <AccordionItem data-testid="no-transition-item">
     {#snippet header()}No Transition{/snippet}
     Content without transition
diff --git a/v2-migration-guide.md b/v2-migration-guide.md
index bf11c63b79..47149fc98e 100644
--- a/v2-migration-guide.md
+++ b/v2-migration-guide.md
@@ -1 +1,37 @@
 # Version 2 Migration Guide
+
+## transition and transitionParams
+
+v2 introduced breaking prop renames
+- transitionType → transition 
+- params → transitionParams
+
+### Affected Components 
+- Accordion 
+- Alert 
+- Avatar
+- Badge 
+- Banner
+- Popover
+- Sidebar
+- SidebarDropdownWrapper
+- Toast
+
+### Migration Example
+
+**Before (v1):**
+```svelte
+<Accordion transitionType={slide} />
+<Toast params={{ duration: 300 }} />
+```
+
+**After (v2):**
+```svelte
+<Accordion transition={slide} />
+<Toast transitionParams={{ duration: 300 }} />
+```
+
+## Order of styling 
+The component classes have the highest precedence.
+
+Theme provider -> context classes (if exists) -> classes