version-2 part 4

e2e/page.spec.ts

@@ -39,8 +39,3 @@ test("Type list page should have h1", async ({ page }) => {
   await page.goto("/docs/pages/typescript");
   expect(await page.textContent("h1")).toBe("TypeScript Types - Flowbite Svelte");
 });
-
-test("Faster Compiling Speed page should have h1", async ({ page }) => {
-  await page.goto("/docs/pages/compiler-speed");
-  expect(await page.textContent("h1")).toBe("Compiler Speed - Flowbite Svelte");
-});

src/lib/accordion/Accordion.svelte

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

src/lib/accordion/AccordionItem.svelte

@@ -5,6 +5,7 @@
   import clsx from "clsx";
   import { getAccordionContext } from "$lib/context";
   import { slide } from "svelte/transition";
+  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();
@@ -25,6 +26,14 @@
   // Check if transitionType is explicitly set to undefined in props
   const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
 
+  // Get respectReducedMotion from context (defaults to true)
+  const ctxRespectReducedMotion = $derived(ctx?.respectReducedMotion ?? true);
+
+  // Merge transition params with reduced motion handling
+  // Only check prefersReducedMotion in the browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+  const effectiveTransitionParams = $derived(isBrowser && ctxRespectReducedMotion && prefersReducedMotion.current ? { duration: 0, ...transitionParams } : transitionParams);
+
   // Theme context
   const theme = $derived(getTheme("accordionItem"));
 
@@ -73,7 +82,7 @@
 
 {#if useTransition}
   {#if open && transitionType !== "none"}
-    <div class={contentWrapperCls} transition:transitionType={transitionParams as ParamsType}>
+    <div class={contentWrapperCls} transition:transitionType={effectiveTransitionParams as ParamsType}>
       <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
         {@render children()}
       </div>

src/lib/alert/Alert.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { alert } from "./theme";
   import clsx from "clsx";
   import { type AlertProps, type ParamsType } from "$lib";
@@ -41,6 +42,12 @@
     })
   );
 
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { duration: 0, ...params } : params);
+
   let ref: HTMLDivElement | undefined = $state(undefined);
 
   function close() {
@@ -53,7 +60,7 @@
 </script>
 
 {#if alertStatus}
-  <div role="alert" bind:this={ref} {...restProps} transition:transition={params as ParamsType} class={divCls}>
+  <div role="alert" bind:this={ref} {...restProps} transition:transition={effectiveParams as ParamsType} class={divCls}>
     {#if icon}
       {@render icon()}
     {/if}

src/lib/badge/Badge.svelte

@@ -4,6 +4,7 @@
   import { getTheme } from "$lib/theme/themeUtils";
   import clsx from "clsx";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { badge } from "./theme";
   import { createDismissableContext } from "$lib/utils/dismissable";
 
@@ -33,6 +34,12 @@
 
   const { base, linkClass } = $derived(badge({ color, size: large ? "large" : "small", rounded, border, href: !!href }));
 
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { duration: 0, ...params } : params);
+
   let ref: HTMLDivElement | undefined = $state(undefined);
 
   const close = () => {
@@ -45,7 +52,7 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} bind:this={ref} transition:transition={params as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
+  <div {...restProps} bind:this={ref} transition:transition={effectiveParams as ParamsType} class={base({ class: clsx(theme?.base, className) })}>
     {#if href}
       <a {href} {target} class={linkClass({ class: clsx(theme?.linkClass, styling?.linkClass) })}>
         {@render children()}

src/lib/banner/Banner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { banner } from "./theme";
   import clsx from "clsx";
   import { type ParamsType, type BannerProps } from "$lib";
@@ -30,6 +31,12 @@
 
   const { base, insideDiv, dismissable: dismissableClass } = $derived(banner({ type, color }));
 
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { duration: 0, ...params } : params);
+
   let ref: HTMLDivElement | undefined = $state(undefined);
   function close(event: MouseEvent) {
     if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
@@ -41,7 +48,7 @@
 </script>
 
 {#if open}
-  <div tabindex="-1" bind:this={ref} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
+  <div tabindex="-1" bind:this={ref} class={base({ class: clsx(theme?.base, className) })} {...restProps} transition:transition={effectiveParams as ParamsType}>
     <div class={insideDiv({ class: clsx(theme?.insideDiv, styling?.insideDiv) })}>
       {@render children?.()}
     </div>

src/lib/carousel/Slide.svelte

@@ -4,6 +4,7 @@
   import clsx from "clsx";
   import { getCarouselContext } from "$lib/context";
   import { fly } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { slide } from "./theme";
 
   const _state = getCarouselContext();
@@ -12,20 +13,23 @@
 
   const theme = $derived(getTheme("slide"));
 
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
   let transitionSlideIn = $derived({
     x: _state?.forward ? "100%" : "-100%",
     opacity: 1,
     width: "100%",
     height: "100%",
-    duration: _state?.slideDuration ?? 1000
+    duration: isBrowser && prefersReducedMotion.current ? 0 : (_state?.slideDuration ?? 1000)
   });
 
   let transitionSlideOut = $derived({
     x: _state?.forward ? "-100%" : "100%",
     opacity: 0.9,
     width: "100%",
     height: "100%",
-    duration: _state?.slideDuration ?? 1000
+    duration: isBrowser && prefersReducedMotion.current ? 0 : (_state?.slideDuration ?? 1000)
   });
 
   let imgClass = $derived(slide({ fit, class: clsx(theme, className) }));

src/lib/darkmode/theme.ts

@@ -1,5 +1,5 @@
 import { tv } from "tailwind-variants";
 
 export const darkmode = tv({
-  base: "inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2"
+  base: "inline-flex hover:text-heading items-center justify-center text-body w-8 h-8 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-base text-sm p-2"
 });

src/lib/datepicker/Datepicker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import clsx from "clsx";
   import type { DatepickerProps } from "$lib";
   import Button from "$lib/buttons/Button.svelte";
@@ -452,7 +453,14 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline, class: clsx(theme?.base, className) })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div
+      bind:this={calendarRef}
+      id="datepicker-dropdown"
+      class={base({ inline, class: clsx(theme?.base, className) })}
+      transition:fade={{ duration: typeof window !== "undefined" && prefersReducedMotion.current ? 0 : 100 }}
+      role="dialog"
+      aria-label="Calendar"
+    >
       {#if title}
         <h2 class={titleVariant({ class: clsx(theme?.titleVariant, styling?.titleVariant) })}>{title}</h2>
       {/if}

src/lib/dialog/Dialog.svelte

@@ -6,6 +6,7 @@
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { dialog } from "./theme";
 
   let {
@@ -29,7 +30,13 @@
     ...restProps
   }: DialogProps = $props();
 
-  const paramsOptions = $derived(transitionParams ?? { duration: 100, easing: sineIn });
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(
+    isBrowser && prefersReducedMotion.current ? { duration: 0, ...(transitionParams ?? { duration: 100, easing: sineIn }) } : (transitionParams ?? { duration: 100, easing: sineIn })
+  );
 
   const styling = $derived(classes);
   let { base, form: formCls, close: closeCls } = $derived(dialog());
@@ -160,7 +167,7 @@
     oncancel={_oncancel}
     onclick={_onclick}
     ontoggle={_ontoggle}
-    transition:transition|global={paramsOptions as ParamsType}
+    transition:transition|global={effectiveParams as ParamsType}
     {...restProps}
     class={base({ class: clsx(className) })}
   >

src/lib/drawer/Drawer.svelte

@@ -4,6 +4,7 @@
   import { getTheme } from "$lib/theme/themeUtils";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
+  import { prefersReducedMotion } from "svelte/motion";
   import { fly } from "svelte/transition";
   import { drawer } from "./theme";
   import { setDrawerContext } from "$lib/context";
@@ -45,7 +46,11 @@
   let x = $state(),
     y = $state();
 
-  let transition_params = $derived({ x, y, duration: 300, easing: sineIn, opacity: 1, ...transitionParams });
+  const isBrowser = typeof window !== "undefined";
+
+  let transition_params = $derived(
+    isBrowser && prefersReducedMotion.current ? { x, y, easing: sineIn, opacity: 1, ...transitionParams, duration: 0 } : { x, y, duration: 300, easing: sineIn, opacity: 1, ...transitionParams }
+  );
 
   function init(node: HTMLDialogElement) {
     // set initial offset, later it will be switched on/off by onintrostart

src/lib/drawer/theme.ts

@@ -70,7 +70,7 @@ export const drawerhead = tv({
   slots: {
     base: "flex items-center justify-between",
     button:
-      "ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
+      "ms-auto inline-flex h-8 w-8 items-center justify-center rounded-base bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white",
     svg: "h-4 w-4"
   }
 });

src/lib/index.ts

@@ -5,6 +5,7 @@ export * from "./utils";
 // export { default as ThemeProvider } from "./theme/ThemeProvider.svelte";
 export * from "./theme";
 export { getTheme } from "./theme/themeUtils";
+export * from "./theme-selector";
 // components
 export * from "./accordion";
 export * from "./alert";

src/lib/modal/Modal.svelte

@@ -6,6 +6,7 @@
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
   import { modal as modalStyle } from "./theme";
 
   let {
@@ -31,7 +32,12 @@
   const theme = $derived(getTheme("modal"));
 
   const paramsDefault = { duration: 100, easing: sineIn };
-  const paramsOptions = $derived(transitionParams ?? paramsDefault);
+
+  // Check if running in browser to avoid SSR issues
+  const isBrowser = typeof window !== "undefined";
+
+  // Respect reduced motion preference by setting duration to 0
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...(transitionParams ?? paramsDefault), duration: 0 } : (transitionParams ?? paramsDefault));
 
   const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement, size }));
 </script>
@@ -40,7 +46,7 @@
   bind:open
   {transition}
   dismissable={dismissable && !title && !permanent}
-  transitionParams={paramsOptions}
+  transitionParams={effectiveParams}
   {classes}
   {permanent}
   {...restProps}

src/lib/sidebar/Sidebar.svelte

@@ -5,6 +5,7 @@
   import clsx from "clsx";
   import { setSidebarContext, setActiveUrlContext } from "$lib/context";
   import { sineIn } from "svelte/easing";
+  import { prefersReducedMotion } from "svelte/motion";
   import { writable } from "svelte/store";
   import { fly } from "svelte/transition";
   import { sidebar } from "./theme";
@@ -76,7 +77,11 @@
     }
   };
 
-  let transitionParams = $derived(params ? params : { x: -320, duration: 200, easing: sineIn });
+  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 }
+  );
 
   setSidebarContext(sidebarCtx);
 

src/lib/sidebar/SidebarDropdownWrapper.svelte

@@ -3,6 +3,7 @@
   import type { ParamsType, SidebarDropdownWrapperProps } from "$lib/types";
   import clsx from "clsx";
   import { getSidebarContext } from "$lib/context";
+  import { prefersReducedMotion } from "svelte/motion";
   import { writable } from "svelte/store";
   import { slide } from "svelte/transition";
   import { sidebarDropdownWrapper } from "./theme";
@@ -15,6 +16,10 @@
   const { base, btn, span, svg, ul } = sidebarDropdownWrapper();
   const isControlled = $derived(isOpen !== undefined);
 
+  const isBrowser = typeof window !== "undefined";
+
+  const effectiveParams = $derived(isBrowser && prefersReducedMotion.current ? { ...(params as ParamsType), duration: 0 } : (params as ParamsType));
+
   let ctx = getSidebarContext() || { isSingle: false };
 
   let self = {};
@@ -64,7 +69,7 @@
     {/if}
   </button>
   {#if openState}
-    <ul class={ul({ class: clsx(theme?.ul, styling?.ul) })} transition:transition={params as ParamsType}>
+    <ul class={ul({ class: clsx(theme?.ul, styling?.ul) })} transition:transition={effectiveParams}>
       {@render children()}
     </ul>
   {/if}

src/lib/theme-selector/ThemeIcon.svelte

@@ -0,0 +1,9 @@
+<svg class="h-4.5 w-4.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 7h.01m3.486 1.513h.01m-6.978 0h.01M6.99 12H7m9 4h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 3.043 12.89 9.1 9.1 0 0 0 8.2 20.1a8.62 8.62 0 0 0 3.769.9 2.013 2.013 0 0 0 2.03-2v-.857A2.036 2.036 0 0 1 16 16Z"
+  />
+</svg>