@sveltia/ui 0.37.1 → 0.37.2

package/dist/components/dialog/dialog.svelte

@@ -65,9 +65,15 @@
 
   $effect(() => {
     if (open && content) {
+      let cancelled = false;
+
       (async () => {
         await sleep(50);
 
+        if (cancelled) {
+          return;
+        }
+
         if (focusInput) {
           /** @type {HTMLInputElement | HTMLButtonElement} */ (
             content?.querySelector('input, button.primary')
@@ -77,7 +83,13 @@
           modal?.focus();
         }
       })();
+
+      return () => {
+        cancelled = true;
+      };
     }
+
+    return undefined;
   });
 </script>
 

package/dist/components/toast/toast.svelte

@@ -83,19 +83,25 @@
   });
 
   onMount(() => {
-    if (position === 'auto') {
-      const mql = globalThis.matchMedia('(width < 1024px)');
-
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      const setMode = () => {
-        position = mql.matches
-          ? 'bottom-center'
-          : `bottom-${document.dir === 'rtl' ? 'left' : 'right'}`;
-      };
-
-      setMode();
-      mql.addEventListener('change', setMode);
+    if (position !== 'auto') {
+      return undefined;
     }
+
+    const mql = globalThis.matchMedia('(width < 1024px)');
+
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const setMode = () => {
+      position = mql.matches
+        ? 'bottom-center'
+        : `bottom-${document.dir === 'rtl' ? 'left' : 'right'}`;
+    };
+
+    setMode();
+    mql.addEventListener('change', setMode);
+
+    return () => {
+      mql.removeEventListener('change', setMode);
+    };
   });
 
   $effect(() => {

package/dist/components/util/app-shell.svelte

@@ -52,15 +52,16 @@
     };
 
     applyTheme();
+    mediaQuery.addEventListener('change', applyTheme);
 
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    mediaQuery.onchange = () => {
-      applyTheme();
-    };
-
-    globalThis.setTimeout(() => {
+    const fontTimer = globalThis.setTimeout(() => {
       fontLoaded = true;
     }, 1000);
+
+    return () => {
+      mediaQuery.removeEventListener('change', applyTheme);
+      globalThis.clearTimeout(fontTimer);
+    };
   });
 </script>
 

package/dist/components/util/popup.svelte

@@ -78,7 +78,7 @@
   /**
    * @type {{ style: { inset: string | undefined, zIndex: number | undefined, minWidth: string |
    * undefined, maxWidth: string | undefined, height: string | undefined }, open: boolean,
-   * checkPosition: () => void } | undefined}
+   * checkPosition: () => void, destroy: () => void } | undefined}
    */
   let popupInstance = $state();
   let hoveredTimeout = 0;
@@ -122,6 +122,11 @@
 
   onMount(() => {
     touchEnabled = globalThis.matchMedia('(pointer: coarse)').matches;
+
+    return () => {
+      popupInstance?.destroy?.();
+      globalThis.clearTimeout(hoveredTimeout);
+    };
   });
 </script>
 

package/dist/services/popup.svelte.d.ts

@@ -38,6 +38,8 @@ declare class Popup {
     position: PopupPosition;
     positionBaseElement: HTMLElement;
     id: string;
+    intersectionObserver: IntersectionObserver;
+    resizeObserver: ResizeObserver;
     _rafId: number;
     /**
      * Whether the anchor element is disabled.
@@ -57,6 +59,10 @@ declare class Popup {
      * Hide the popup immediately (when the anchor is being hidden).
      */
     hideImmediately(): Promise<void>;
+    /**
+     * Dispose of the popup, disconnecting observers and canceling pending work.
+     */
+    destroy(): void;
     #private;
 }
 import type { PopupPosition } from '../typedefs';

package/dist/services/popup.svelte.js

@@ -193,11 +193,12 @@ class Popup {
       }
     });
 
-    new IntersectionObserver(([entry]) => {
+    this.intersectionObserver = new IntersectionObserver(([entry]) => {
       if (!entry.isIntersecting && this.open) {
         this.hideImmediately();
       }
-    }).observe(this.anchorElement);
+    });
+    this.intersectionObserver.observe(this.anchorElement);
 
     // Close the popup when the backdrop, a menu item or an option is clicked
     on(this.popupElement, 'click', (event) => {
@@ -226,10 +227,11 @@ class Popup {
     });
 
     // Update the popup width when the base element is resized
-    new ResizeObserver(() => {
+    this.resizeObserver = new ResizeObserver(() => {
       cancelAnimationFrame(this._rafId);
       this._rafId = requestAnimationFrame(() => this.checkPosition());
-    }).observe(this.positionBaseElement);
+    });
+    this.resizeObserver.observe(this.positionBaseElement);
   }
 
   /**
@@ -265,6 +267,19 @@ class Popup {
     await sleep(50);
     this.popupElement.hidden = false;
   }
+
+  /**
+   * Dispose of the popup, disconnecting observers and canceling pending work.
+   */
+  destroy() {
+    this.intersectionObserver?.disconnect();
+    this.resizeObserver?.disconnect();
+    this.observer?.disconnect();
+
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+    }
+  }
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.37.1",
+  "version": "0.37.2",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -45,18 +45,18 @@
     "@lexical/selection": "^0.43.0",
     "@lexical/table": "^0.43.0",
     "@lexical/utils": "^0.43.0",
-    "@sveltia/i18n": "^1.0.2",
-    "@sveltia/utils": "^0.10.0",
+    "@sveltia/i18n": "^1.0.5",
+    "@sveltia/utils": "^0.10.6",
     "lexical": "^0.43.0",
     "prismjs": "^1.30.0",
     "yaml": "^2.8.3"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.57.0",
+    "@sveltejs/kit": "^2.57.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@vitest/coverage-v8": "^4.1.3",
+    "@vitest/coverage-v8": "^4.1.5",
     "cspell": "^10.0.0",
     "eslint": "^9.39.4",
     "eslint-config-airbnb-extended": "^3.1.0",
@@ -64,24 +64,24 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsdoc": "^62.9.0",
     "eslint-plugin-package-json": "^0.91.1",
-    "eslint-plugin-svelte": "^3.17.0",
-    "globals": "^17.4.0",
-    "happy-dom": "^20.8.9",
-    "oxlint": "^1.59.0",
-    "postcss": "^8.5.9",
+    "eslint-plugin-svelte": "^3.17.1",
+    "globals": "^17.5.0",
+    "happy-dom": "^20.9.0",
+    "oxlint": "^1.61.0",
+    "postcss": "^8.5.10",
     "postcss-html": "^1.8.1",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^3.5.1",
     "sass": "^1.99.0",
-    "stylelint": "^17.6.0",
+    "stylelint": "^17.8.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.0.0",
-    "svelte": "^5.55.2",
+    "svelte": "^5.55.4",
     "svelte-check": "^4.4.6",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^8.0.7",
-    "vitest": "^4.1.3"
+    "vite": "^8.0.9",
+    "vitest": "^4.1.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"