Clean up transition related prop names. (#1912)

* feat: use svelte-reactivity-window

* Clean up transition related prop names. Some use transitionType and some use transition. Use the following patterns:
- transition for the function or "none" string, which reads well and is clear.
- transitionParams for the params specifically tied to the transition.

* fix: transitionType to transition and params to transitionParams for all the usage

* fix: transitionType to transition and params to transitionParams for all the usage

* docs: v2-migration-guide

* fix: coderabbitai fix

Author: shinokada

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

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

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

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
 -->

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

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
 

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}

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

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

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