src/shared/lib/accessibility/motion.svelte.ts

@@ -4,11 +4,6 @@ const isBrowser = typeof window !== 'undefined';
 class MotionPreference {
     // Reactive state
     #reduced = $state(false);
-    #mediaQuery: MediaQueryList = new MediaQueryList();
-
-    private handleChange = (e: MediaQueryListEvent) => {
-        this.#reduced = e.matches;
-    };
 
     constructor() {
         if (isBrowser) {
@@ -17,9 +12,12 @@ class MotionPreference {
             // Set initial value immediately
             this.#reduced = mediaQuery.matches;
 
-            mediaQuery.addEventListener('change', this.handleChange);
+            // Simple listener that updates the reactive state
+            const handleChange = (e: MediaQueryListEvent) => {
+                this.#reduced = e.matches;
+            };
 
-            this.#mediaQuery = mediaQuery;
+            mediaQuery.addEventListener('change', handleChange);
         }
     }
 
@@ -27,10 +25,6 @@ class MotionPreference {
     get reduced() {
         return this.#reduced;
     }
-
-    destroy() {
-        this.#mediaQuery.removeEventListener('change', this.handleChange);
-    }
 }
 
 // Export a single instance to be used everywhere