Changelog

All notable changes to Varsel will be documented in this file.
The format follows Keep a Changelog,
and the project adheres to Semantic Versioning.

[0.5.4] – 2026-02-21

Fixed

  • SSR-safe toaster registration
    Moved <VarselToaster /> instance registration to onMount, preventing singleton instance leakage during SSR and ensuring unregister runs only for client-mounted instances.
  • Hardened toast.promise error path
    Added a defensive final fallback when promise success/error render callbacks throw, so the toast always leaves loading state and resolves into a safe destructive notification.

Changed

  • Promise fallback regression coverage
    Added integration coverage for callback-throwing toast.promise flows to guard against unhandled rejections and stuck loading toasts.

Performance

  • Stack hover throttling
    Optimized hover hit-testing for toast stacks by throttling mousemove processing through requestAnimationFrame, reducing repeated layout reads under high pointer frequency.

[0.5.3] – 2026-02-21

Fixed

  • Promise toast dismissibility defaults
    toast.promise(...) now keeps the close button enabled by default (consistent with global toast defaults), while still respecting explicit showClose: false.
  • Toaster instance failover
    When the active <VarselToaster /> unmounts, the next registered instance is now promoted automatically, preventing rendering gaps with multiple mounted toasters.

Changed

  • Regression coverage for instance management
    Added dedicated unit tests for active-instance promotion and stale active-id recovery in the toaster instance manager.
  • Test runner ergonomics
    Added a package-level test script (vitest run) for straightforward test execution via bun run --cwd=packages/varsel test.

[0.5.2] – 2026-02-21

Fixed

  • Reliable npm release artifacts
    Fixed package publishing configuration so npm releases now always include built dist/* output instead of metadata files only.
  • Persistent toast duration
    duration: 0 now consistently keeps a toast visible until manual dismissal.

Changed

  • Release pipeline scripts
    Added prepublishOnly build hook and split CSS scripts into one-shot (build:css) and watch mode (build:css:watch) to avoid blocking publish builds.

[0.5.1] – 2026-02-21

Fixed

  • Persistent toast duration
    Fixed a regression where duration: 0 could be treated as the default timeout, causing “persistent” toasts to auto-dismiss. duration: 0 now correctly keeps a toast visible until manual dismissal.

Changed

  • Regression test coverage
    Added an interaction test that verifies duration: 0 toasts remain open over time.

[0.5.0] – 2025-12-20

Added

  • Info Toast Variant
    Added toast.info() helper method to the toast API, providing a dedicated variant for informational messages alongside the existing success, warning, and error toasts.

Changed

  • Lifecycle callbacks
    Replaced the single onClose hook with two dedicated callbacks: onAutoClose (fires after the auto-dismiss timer) and onDismiss (fires after manual/programmatic dismissal). Update existing toasts to use the hook that matches the desired behavior.

[0.4.0] – 2025-12-18

Added

  • Enhanced Toaster Configuration
    The <VarselToaster /> component now accepts a comprehensive set of props for global configuration:

    • position (default: 'bottom-center'): Sets the default placement for toasts.
    • visibleToasts (default: 3): Controls the maximum number of toasts visible at once.
    • expand (default: true): Determines if the toast stack expands on hover.
    • duration (default: 5000): Sets the default auto-dismiss timer in milliseconds.
    • closeButton (default: true): Toggles the visibility of the close button.
    • pauseOnHover (default: true): Pauses the timer when the user hovers over a toast.
    • offset (default: undefined): Adds custom spacing from the viewport edges.
    • dir (default: 'auto'): specifices text direction (‘ltr’, ‘rtl’, or ‘auto’).

  • API Reference Documentation
    Added a dedicated “API Reference” page to the documentation site, providing detailed information on all exported components, functions, and types.

[0.3.0] – 2025-12-16

Added

  • Headless Custom Toasts
    Introduced toast.custom(Component, options) API, allowing developers to render completely custom Svelte components as toasts. This provides full control over markup and styling while retaining Varsel’s positioning and animation logic.
  • Strict Typing for Custom Toasts
    Implemented robust TypeScript support for custom components, ensuring type safety for component props passed via toast.custom().
  • Documentation for Headless Usage
    Added a new “Headless & Custom” documentation section with live examples and code snippets.

Changed

  • Refined Animation Tokens
    Standardized cubic-bezier easing functions as CSS variables (--ease-vs-pop and --ease-vs-toast) for better consistency and easier theming customization.

Fixed

  • Mobile Swipe Dismiss
    Added touch-action: none to toast elements to prevent browser scrolling from interfering with swipe-to-dismiss gestures on touch devices.

[0.2.0] – 2025-12-15

Changed

  • Svelte 5 Runes Migration
    Complete internal refactor of all components (VarselToaster, VarselManager, VarselItem) to use the new Svelte 5 Runes syntax ($state, $props, $derived, $effect). This modernizes the codebase and aligns with the future of the Svelte ecosystem while maintaining full backward compatibility with the public API.

Added

  • Comprehensive JSDoc Documentation
    All core modules, types, and components are now fully documented with JSDoc comments, improving IntelliSense support and developer experience.

  • Robust Testing Suite
    Introduced a complete testing infrastructure using Vitest and Testing Library.

    • Unit Tests: Full coverage for state logic (toast-state).
    • Integration Tests: Verification of component rendering and API interactions.
    • Accessibility Tests: Automated checks (vitest-axe) for ARIA roles, live regions, and keyboard navigation.
    • Interaction Tests: Coverage for complex behaviors like stacking limits, action callbacks, and queue management.

  • Performance Improvements

    • Reduced reactivity overhead by leveraging fine-grained Runes.

Fixed

  • Timer Optimization
    Prevented setTimeout execution for toasts with duration: Infinity, eliminating Node.js warnings during tests and reducing unnecessary timer scheduling.

[0.1.1] – 2025-12-14

Added

  • Prebuilt CSS output – the library now ships a fully generated styles.css file.
  • CSS export entry – consumers can import styles via: 
    @import "varsel/styles.css";
  • Theme tokens as CSS variables – all colors, radii, shadows, easing curves, and motion tokens are exposed via --vs-* custom properties for easy theming without Tailwind.
  • Dark mode variables – automatic dark palette via .dark selector.

Changed

  • Tailwind is now build-time only
    Varsel no longer requires consumers to use Tailwind CSS. Tailwind is used exclusively to generate the final CSS during the library build.

  • More reliable production builds
    Removes reliance on Tailwind source scanning in consuming apps, eliminating issues with monorepos, Vercel deployments, and dynamic class generation (CVA).

  • Improved portability
    The library can now be safely consumed by:

    • non-Tailwind Svelte apps
    • SvelteKit apps with any CSS setup
    • mixed or legacy codebases

Fixed

  • Missing styles in production when using dynamic class composition (e.g. class-variance-authority).
  • Inconsistent behavior between local development and deployed builds.
  • Edge cases where Tailwind utilities were not generated due to runtime-only class resolution.

Developer Experience

  • Deterministic CSS generation during build
  • No Tailwind configuration required for consumers
  • Clear separation between:
    • library styling concerns
    • application styling concerns

[0.1.0] – Initial release

Added

  • First public, working release of Varsel.
  • Headless yet opinionated toast system for Svelte.
  • Core features:
    • Drop-in <VarselToaster /> host
    • Programmatic toast() API with helpers (success, warning, error)
    • Status variants with semantic styling
    • Multiple stack positions with mirrored swipe gestures
    • Action buttons and lifecycle hooks
    • Hover/focus pause behavior
    • Promise helpers with loading and finishing states
  • Fully interactive documentation site with live examples.