varsel 0.5.2 → 0.6.0

package/dist/internals.js

@@ -4,10 +4,10 @@
  * This file is meant for internal package usage and shouldn't generally be imported directly by consumers.
  */
 export { ANIMATION_CONFIG } from "./core/animations";
-export { FOCUSABLE_SELECTORS } from "./core/accessibility";
+export { FOCUSABLE_SELECTORS, focusManager, isFocusVisible, } from "./core/accessibility";
 export { POSITION_CONFIGS } from "./core/positions";
-export { SWIPE_DISMISS_THRESHOLD, SWIPE_DISMISS_VELOCITY, SWIPE_EXIT_DISTANCE, getDefaultSwipeDirections, } from "./core/swipe";
-export { toastContainerVariants, toastContentVariants, } from "./core/variants";
+export { SWIPE_DISMISS_THRESHOLD, SWIPE_DISMISS_VELOCITY, SWIPE_EXIT_DISTANCE, SWIPE_REVERSE_CANCEL_THRESHOLD, getDefaultSwipeDirections, } from "./core/swipe";
+export { toastContainerVariants, toastContentVariants } from "./core/variants";
 export { cn } from "./core/utils";
 export { toast } from "./core/toast-factory";
 export { toastState } from "./core/toast-state";

package/dist/styles.css

@@ -1,7 +1,7 @@
 /*
  * Main stylesheet for Varsel.
  * Built with Tailwind CSS v4 using the @theme directive.
- * 
+ *
  * Defines custom CSS variables for colors, shadows, and animations.
  * Supports light and dark modes via the .dark class (standard Tailwind approach).
  */
@@ -11,50 +11,47 @@
 
 :root {
 	/* Base hue used for generating the color palette (oklch) */
-	--base-hue: 265;
+	--base-hue: 285;
 
 	/* Semantic color tokens */
-	--color-vs-popover: oklch(1 0 0);
-	--color-vs-popover-muted: oklch(0.96 0.002 var(--base-hue));
-	--color-vs-foreground: oklch(0.1408 0.0044 var(--base-hue));
-	--color-vs-border: oklch(0.8925 0.0014 var(--base-hue));
-	--color-vs-ring: oklch(0.55 0.012 var(--base-hue));
-	--color-vs-ring-offset: oklch(0.96 0.002 var(--base-hue));
-	--color-vs-destructive: oklch(0.62 0.21 25);
-	--color-vs-warning: oklch(0.8 0.2 75);
-	--color-vs-success: oklch(0.7 0.18 155);
-	--color-vs-info: oklch(0.7 0.18 240);
+	--vs-popover: oklch(0.9851 0 0);
+	--vs-popover-muted: oklch(0.9497 0.0027 var(--base-hue));
+	--vs-foreground: oklch(0.1408 0.0044 var(--base-hue));
+	--vs-border: oklch(0.9437 0.0027 var(--base-hue));
+	--vs-ring: oklch(0.55 0.012 var(--base-hue));
+	--vs-ring-offset: oklch(0.96 0.002 var(--base-hue));
+	--vs-destructive: oklch(0.62 0.21 25);
+	--vs-warning: oklch(0.8 0.2 75);
+	--vs-success: oklch(0.7 0.18 155);
+	--vs-info: oklch(0.7 0.18 240);
 
 	/* Shadows */
 	--shadow-vs-button:
-		0px 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0px 3px 3px -1.5px
-		rgba(0, 0, 0, 0.05);
+		0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06),
+		0px 6px 6px -3px rgb(0 0 0 / 0.06);
 	--shadow-vs-toast:
-		0px 1px 1px -0.5px rgba(0, 0, 0, 0.15),
-		0px 3px 3px -1.5px rgba(0, 0, 0, 0.05),
-		0px 6px 6px -3px rgba(0, 0, 0, 0.05),
-		0px 12px 12px -6px rgba(0, 0, 0, 0.05),
-		0px 24px 24px -12px rgba(0, 0, 0, 0.05),
-		0px 48px 48px -24px rgba(0, 0, 0, 0.05);
+		0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06),
+		0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06),
+		0px 24px 24px -12px rgb(0 0 0 / 0.06);
 
 	/* Radius & Easing */
-	--radius-base: 0.125rem;
+	--radius-base: 0.15rem;
 	--ease-vs-button: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 	--ease-vs-toast: cubic-bezier(0.32, 0.72, 0, 1);
 	--ease-vs-pop: cubic-bezier(0.18, 0.89, 0.32, 1.28);
 }
 
 .dark {
-	--color-vs-popover: oklch(0.2139 0.0101 var(--base-hue));
-	--color-vs-popover-muted: oklch(0.2502 0.016 var(--base-hue));
-	--color-vs-foreground: oklch(0.9824 0.0013 var(--base-hue));
-	--color-vs-border: oklch(0.278 0.015 var(--base-hue));
-	--color-vs-ring: oklch(0.58 0.012 var(--base-hue));
-	--color-vs-ring-offset: oklch(0.15 0.005 var(--base-hue));
-	--color-vs-destructive: oklch(0.72 0.27 25);
-	--color-vs-warning: oklch(0.82 0.24 85);
-	--color-vs-success: oklch(0.78 0.25 155);
-	--color-vs-info: oklch(0.78 0.18 240);
+	--vs-popover: oklch(0.2103 0.0059 var(--base-hue));
+	--vs-popover-muted: oklch(0.2367 0.0076 var(--base-hue));
+	--vs-foreground: oklch(0.9851 0 0);
+	--vs-border: oklch(0.2739 0.0055 var(--base-hue));
+	--vs-ring: oklch(0.58 0.012 var(--base-hue));
+	--vs-ring-offset: oklch(0.15 0.005 var(--base-hue));
+	--vs-destructive: oklch(0.72 0.27 25);
+	--vs-warning: oklch(0.82 0.24 85);
+	--vs-success: oklch(0.78 0.25 155);
+	--vs-info: oklch(0.78 0.18 240);
 }
 
 @theme {
@@ -124,7 +121,8 @@
 
 .vs-icon--waiting {
 	opacity: 0;
-	transform: scale(0.75) rotate(-6deg);
+	transform: scale(0.25);
+	filter: blur(4px);
 }
 
 .vs-icon--pop {
@@ -136,6 +134,18 @@
 	height: 100%;
 }
 
+.vs-sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
 @keyframes vs-spin {
 	to {
 		transform: rotate(360deg);
@@ -145,35 +155,25 @@
 @keyframes vs-spinner-finish {
 	0% {
 		opacity: 1;
-		transform: scale(1) rotate(0deg);
+		transform: scale(1);
 		filter: blur(0);
 	}
-	60% {
-		opacity: 0.65;
-		transform: scale(0.55) rotate(140deg);
-		filter: blur(0.3px);
-	}
 	100% {
 		opacity: 0;
-		transform: scale(0) rotate(220deg);
-		filter: blur(0.8px);
+		transform: scale(0.25);
+		filter: blur(4px);
 	}
 }
 
 @keyframes vs-icon-pop {
 	0% {
 		opacity: 0;
-		transform: scale(0.5) rotate(-10deg);
-		filter: blur(2px);
-	}
-	60% {
-		opacity: 1;
-		transform: scale(1.18) rotate(2deg);
-		filter: blur(0);
+		transform: scale(0.25);
+		filter: blur(4px);
 	}
 	100% {
 		opacity: 1;
-		transform: scale(1) rotate(0deg);
+		transform: scale(1);
 		filter: blur(0);
 	}
 }
@@ -192,4 +192,4 @@
 		opacity: 1;
 		transform: scale(1);
 	}
-}
+}

package/dist/variant-icons.d.ts

@@ -5,15 +5,20 @@
 import type { ToastData } from "./internals";
 declare const ICON_VARIANTS: readonly ["success", "warning", "destructive", "info"];
 export type IconVariant = (typeof ICON_VARIANTS)[number];
-type IconElement = {
+export type IconElement = {
     tag: "path";
     d: string;
+    fill?: boolean;
 } | {
     tag: "line";
     x1: number;
     y1: number;
     x2: number;
     y2: number;
+    opacity?: number;
+} | {
+    tag: "polyline";
+    points: string;
 } | {
     tag: "circle";
     cx: number;
@@ -27,74 +32,43 @@ export interface VariantIconDefinition {
 export declare const variantIconMap: {
     success: {
         viewBox: string;
-        elements: ({
-            tag: "circle";
-            cx: number;
-            cy: number;
-            r: number;
-            d?: undefined;
-        } | {
-            tag: "path";
-            d: string;
-            cx?: undefined;
-            cy?: undefined;
-            r?: undefined;
-        })[];
+        elements: {
+            tag: "polyline";
+            points: string;
+        }[];
     };
     warning: {
         viewBox: string;
         elements: ({
             tag: "path";
             d: string;
-            x1?: undefined;
-            y1?: undefined;
-            x2?: undefined;
-            y2?: undefined;
+            fill?: undefined;
         } | {
+            tag: "path";
+            d: string;
+            fill: true;
+        })[];
+    };
+    destructive: {
+        viewBox: string;
+        elements: {
             tag: "line";
             x1: number;
             y1: number;
             x2: number;
             y2: number;
-            d?: undefined;
-        })[];
+        }[];
     };
-    destructive: {
+    info: {
         viewBox: string;
         elements: ({
-            tag: "circle";
-            cx: number;
-            cy: number;
-            r: number;
-            d?: undefined;
-        } | {
             tag: "path";
             d: string;
-            cx?: undefined;
-            cy?: undefined;
-            r?: undefined;
-        })[];
-    };
-    info: {
-        viewBox: string;
-        elements: ({
-            tag: "circle";
-            cx: number;
-            cy: number;
-            r: number;
-            x1?: undefined;
-            y1?: undefined;
-            x2?: undefined;
-            y2?: undefined;
+            fill?: undefined;
         } | {
-            tag: "line";
-            x1: number;
-            y1: number;
-            x2: number;
-            y2: number;
-            cx?: undefined;
-            cy?: undefined;
-            r?: undefined;
+            tag: "path";
+            d: string;
+            fill: true;
         })[];
     };
 };

package/dist/variant-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variant-icons.d.ts","sourceRoot":"","sources":["../src/lib/variant-icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,QAAA,MAAM,aAAa,wDAAyD,CAAC;AAE7E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,KAAK,WAAW,GACb;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAC1B;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/D;IAAE,GAAG,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,MAAM,WAAW,qBAAqB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC2B,CAAC;AAEvD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAC1B,UAAU,SAAS,CAAC,SAAS,CAAC,KAC5B,OAAO,IAAI,WAEb,CAAC"}
+{"version":3,"file":"variant-icons.d.ts","sourceRoot":"","sources":["../src/lib/variant-icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,QAAA,MAAM,aAAa,wDAAyD,CAAC;AAE7E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,MAAM,MAAM,WAAW,GACpB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,GAC1C;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GACjF;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,GAAG,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,MAAM,WAAW,qBAAqB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C2B,CAAC;AAEvD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAC1B,UAAU,SAAS,CAAC,SAAS,CAAC,KAC5B,OAAO,IAAI,WAEb,CAAC"}

package/dist/variant-icons.js

@@ -1,37 +1,47 @@
 const ICON_VARIANTS = ["success", "warning", "destructive", "info"];
 export const variantIconMap = {
     success: {
-        viewBox: "0 0 24 24",
-        elements: [
-            { tag: "circle", cx: 12, cy: 12, r: 10 },
-            { tag: "path", d: "m9 12 2 2 4-4" },
-        ],
+        viewBox: "0 0 18 18",
+        elements: [{ tag: "polyline", points: "2.75 9.25 6.75 14.25 15.25 3.75" }],
     },
     warning: {
-        viewBox: "0 0 24 24",
+        viewBox: "0 0 18 18",
         elements: [
             {
                 tag: "path",
-                d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z",
+                d: "M7.63796 3.48996L2.21295 12.89C1.60795 13.9399 2.36395 15.25 3.57495 15.25H14.425C15.636 15.25 16.392 13.9399 15.787 12.89L10.362 3.48996C9.75696 2.44996 8.24296 2.44996 7.63796 3.48996Z",
+            },
+            { tag: "path", d: "M9 6.75V9.75" },
+            {
+                tag: "path",
+                d: "M9 13.5C8.448 13.5 8 13.05 8 12.5C8 11.95 8.448 11.5 9 11.5C9.552 11.5 10 11.9501 10 12.5C10 13.0499 9.552 13.5 9 13.5Z",
+                fill: true,
             },
-            { tag: "line", x1: 12, y1: 9, x2: 12, y2: 13 },
-            { tag: "line", x1: 12, y1: 17, x2: 12.01, y2: 17 },
         ],
     },
     destructive: {
-        viewBox: "0 0 24 24",
+        viewBox: "0 0 18 18",
         elements: [
-            { tag: "circle", cx: 12, cy: 12, r: 10 },
-            { tag: "path", d: "m15 9-6 6" },
-            { tag: "path", d: "m9 9 6 6" },
+            { tag: "line", x1: 14, y1: 4, x2: 4, y2: 14 },
+            { tag: "line", x1: 4, y1: 4, x2: 14, y2: 14 },
         ],
     },
     info: {
-        viewBox: "0 0 24 24",
+        viewBox: "0 0 18 18",
         elements: [
-            { tag: "circle", cx: 12, cy: 12, r: 10 },
-            { tag: "line", x1: 12, y1: 16, x2: 12, y2: 12 },
-            { tag: "line", x1: 12, y1: 8, x2: 12.01, y2: 8 },
+            {
+                tag: "path",
+                d: "M9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25Z",
+            },
+            {
+                tag: "path",
+                d: "M9 12.75V9.25C9 8.9739 8.7761 8.75 8.5 8.75H7.75",
+            },
+            {
+                tag: "path",
+                d: "M9 6.75C8.448 6.75 8 6.301 8 5.75C8 5.199 8.448 4.75 9 4.75C9.552 4.75 10 5.199 10 5.75C10 6.301 9.552 6.75 9 6.75Z",
+                fill: true,
+            },
         ],
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "varsel",
-	"version": "0.5.2",
+	"version": "0.6.0",
 	"description": "Headless yet opinionated toast notifications for Svelte apps.",
 	"type": "module",
 	"license": "MIT",
@@ -41,6 +41,7 @@
 		"build": "bun run build:css && svelte-package",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"dev": "bun run build:css:watch & svelte-package --watch",
+		"test": "vitest run",
 		"lint": "tsc -p tsconfig.json --noEmit",
 		"prepublishOnly": "bun run build"
 	},
@@ -52,7 +53,6 @@
 		"tailwindcss": "^4.1.18"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.3.8",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/cli": "^4",