@loidolt/theme-svelte 0.3.0 → 0.5.0

package/dist/theme.svelte.js

@@ -138,14 +138,24 @@ export function createTheme(options = {}) {
  */
 export function themeScript(options = {}) {
     const { storageKey = 'loidolt-theme', attribute = 'data-theme', defaultPreference = 'system', defaultScheme = 'light', tag = false, } = options;
-    // JSON.stringify keeps a caller-supplied key or attribute from breaking out of its literal.
-    const key = JSON.stringify(storageKey);
-    const attr = JSON.stringify(attribute);
-    const fallback = JSON.stringify(defaultPreference);
-    const scheme = JSON.stringify(defaultScheme);
+    // JSON string escaping alone leaves `<` intact, including a literal `</script>` that would end
+    // an inline script element. Escaping HTML-significant characters and the two JavaScript line
+    // separators keeps every option inside its string literal in both source-only and tagged forms.
+    const serialize = (value) => JSON.stringify(value)
+        .replaceAll('<', '\\u003c')
+        .replaceAll('>', '\\u003e')
+        .replaceAll('&', '\\u0026')
+        .replaceAll('\u2028', '\\u2028')
+        .replaceAll('\u2029', '\\u2029');
+    const key = serialize(storageKey);
+    const attr = serialize(attribute);
+    const fallback = serialize(defaultPreference);
+    const scheme = serialize(defaultScheme);
     const source = `(function(){try{` +
-        `var p=${key}===null?null:localStorage.getItem(${key});` +
-        `if(p!=="light"&&p!=="dark"&&p!=="system")p=${fallback};` +
+        `var p=${fallback};` +
+        // Storage failure must not skip system resolution and attribute application.
+        `try{var v=${key}===null?null:localStorage.getItem(${key});` +
+        `if(v==="light"||v==="dark"||v==="system")p=v;}catch(e){}` +
         `var s=${scheme};` +
         `if(typeof matchMedia==="function")s=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";` +
         `document.documentElement.setAttribute(${attr},p==="system"?s:p);` +

package/dist/toaster.svelte.d.ts

@@ -10,7 +10,7 @@ export interface ToastRecord extends ToastOptions {
     id: string;
 }
 export interface ToasterOptions {
-    /** Default `duration` for toasts that do not set one. */
+    /** Default `duration` for toasts that do not set one. Defaults to persistent (`0`). */
     duration?: number;
     /** Oldest toasts past this count are dropped. */
     max?: number;
@@ -26,6 +26,8 @@ export interface Toaster {
     pause(): void;
     /** Resumes with the time each toast had left — call on pointer leave / focus out. */
     resume(): void;
+    /** Clears the queue and every timer. Automatic for a component-scoped instance. */
+    destroy(): void;
 }
 /**
  * Queue behind `Toast` / `ToastViewport`: auto-dismiss with the remaining time preserved
@@ -33,7 +35,12 @@ export interface Toaster {
  *
  * ```svelte
  * const toaster = createToaster();
- * <ToastViewport onpointerenter={toaster.pause} onpointerleave={toaster.resume}>
+ * <ToastViewport
+ *   onpointerenter={toaster.pause}
+ *   onpointerleave={toaster.resume}
+ *   onfocusin={toaster.pause}
+ *   onfocusout={toaster.resume}
+ * >
  *   {#each toaster.toasts as toast (toast.id)}
  *     <Toast {...toast} onDismiss={() => toaster.dismiss(toast.id)} />
  *   {/each}

package/dist/toaster.svelte.js

@@ -1,10 +1,16 @@
+import { onDestroy } from 'svelte';
 /**
  * Queue behind `Toast` / `ToastViewport`: auto-dismiss with the remaining time preserved
  * across `pause()`/`resume()`, so hovering a toast does not lose the countdown.
  *
  * ```svelte
  * const toaster = createToaster();
- * <ToastViewport onpointerenter={toaster.pause} onpointerleave={toaster.resume}>
+ * <ToastViewport
+ *   onpointerenter={toaster.pause}
+ *   onpointerleave={toaster.resume}
+ *   onfocusin={toaster.pause}
+ *   onfocusout={toaster.resume}
+ * >
  *   {#each toaster.toasts as toast (toast.id)}
  *     <Toast {...toast} onDismiss={() => toaster.dismiss(toast.id)} />
  *   {/each}
@@ -12,7 +18,14 @@
  * ```
  */
 export function createToaster(options = {}) {
-    const { duration: defaultDuration = 5000, max = 5 } = options;
+    const { duration: defaultDuration = 0, max = 5 } = options;
+    if (!Number.isInteger(max) || max < 1) {
+        throw new RangeError('createToaster: `max` must be a positive integer');
+    }
+    const validDuration = (duration) => duration === Infinity || (Number.isFinite(duration) && duration >= 0);
+    if (!validDuration(defaultDuration)) {
+        throw new RangeError('createToaster: `duration` must be non-negative or Infinity');
+    }
     const toasts = $state([]);
     // Plain Map on purpose: these are timer handles, not UI state, and nothing renders from them.
     // `startedAt` lives per entry: toasts are pushed at different moments, so a shared start
@@ -44,17 +57,36 @@ export function createToaster(options = {}) {
             toasts.splice(index, 1);
     }
     function push(toast) {
+        const duration = toast.duration ?? defaultDuration;
+        if (!validDuration(duration)) {
+            throw new RangeError('createToaster: toast `duration` must be non-negative or Infinity');
+        }
         const id = `ldt-toast-${++counter}`;
         toasts.push({ ...toast, id });
         while (toasts.length > max)
             dismiss(toasts[0].id);
         if (!paused)
-            arm(id, toast.duration ?? defaultDuration);
+            arm(id, duration);
         else {
-            timers.set(id, { timeout: null, remaining: toast.duration ?? defaultDuration, startedAt: 0 });
+            timers.set(id, { timeout: null, remaining: duration, startedAt: 0 });
         }
         return id;
     }
+    const destroy = () => {
+        for (const timer of timers.values()) {
+            if (timer.timeout !== null)
+                clearTimeout(timer.timeout);
+        }
+        timers.clear();
+        toasts.splice(0);
+        paused = false;
+    };
+    try {
+        onDestroy(destroy);
+    }
+    catch {
+        /* module scope: the caller owns `destroy()` */
+    }
     return {
         get toasts() {
             return toasts;
@@ -92,5 +124,6 @@ export function createToaster(options = {}) {
                 arm(id, timer.remaining);
             }
         },
+        destroy,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-svelte",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Accessible Svelte 5 components for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -21,32 +21,33 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "engines": {
-    "node": ">=22"
-  },
   "scripts": {
     "build": "svelte-package -i src/lib -o dist && cp src/styles.css dist/styles.css",
     "prepack": "npm run build",
     "typecheck": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run && vitest run --config vitest.config.ssr.ts",
+    "test:coverage": "vitest run --coverage",
     "test:a11y": "vitest run tests/a11y.test.ts",
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@loidolt/theme-styles": "^0.3.0",
-    "@loidolt/theme-tokens": "^0.3.0",
+    "@loidolt/theme-styles": "^0.5.0",
+    "@loidolt/theme-tokens": "^0.5.0",
     "bits-ui": "^2.19.0"
   },
   "peerDependencies": {
     "svelte": "^5.33.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
+    "@playwright/test": "^1.62.1",
     "@sveltejs/package": "^2.5.8",
-    "@types/node": "^24.3.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.3.0",
+    "@vitest/coverage-v8": "^4.1.11",
     "jsdom": "^27.0.0",
     "rimraf": "^6.0.1",
     "svelte": "^5.56.10",