varsel 0.2.1 → 0.4.0

package/dist/VarselItem.svelte

@@ -39,34 +39,36 @@ let {
 	onHeightChange = undefined,
 	onGroupHoverEnter = undefined,
 	onGroupHoldChange = undefined,
+	defaultDuration = 5000,
+	defaultShowClose = true,
+	pauseOnHover = true,
+	offset = undefined,
+	expand = true,
+	visibleToasts = ANIMATION_CONFIG.MAX_VISIBLE_TOASTS
 }: {
-	/** The toast data object containing all content and state. */
 	toast: PositionedToast;
-	/** Callback to remove the toast from the DOM after exit animation. */
 	onRemove: (id: string) => void;
-	/** Whether the parent group (stack) is currently hovered. */
 	isGroupHovered?: boolean;
-	/** The vertical offset for this toast when the stack is expanded. */
 	expandedOffset?: number;
-	/** The gap between toasts when expanded. */
 	expandedGap?: number;
-	/** The vertical offset for this toast when the stack is collapsed. */
 	collapsedOffset?: number;
-	/** The offset to use when the toast is hidden in the stack. */
 	hiddenCollapsedOffset?: number;
-	/** Callback to report the height of the toast to the manager. */
 	onHeightChange?: (id: string, height: number) => void;
-	/** Callback to notify the manager that the user has entered the toast area. */
 	onGroupHoverEnter?: () => void;
-	/** Callback to notify the manager that the user is interacting (holding) the toast. */
 	onGroupHoldChange?: (holding: boolean) => void;
+	defaultDuration?: number;
+	defaultShowClose?: boolean;
+	pauseOnHover?: boolean;
+	offset?: number | string;
+	expand?: boolean;
+	visibleToasts?: number;
 } = $props();
 
 let id = $derived(toast.id);
 let title = $derived(toast.title);
 let description = $derived(toast.description);
 let variant = $derived(toast.variant || "default");
-let duration = $derived(toast.duration || 5000);
+let duration = $derived(toast.duration || defaultDuration);
 let action = $derived(toast.action);
 let isLoading = $derived(toast.isLoading || false);
 let index = $derived(toast.index);
@@ -75,7 +77,7 @@ let shouldClose = $derived(toast.shouldClose);
 let position = $derived(toast.position || "bottom-center");
 let className = $derived(toast.className || "");
 let onClose = $derived(toast.onClose);
-let showClose = $derived(toast.showClose ?? true);
+let showClose = $derived(toast.showClose ?? defaultShowClose);
 
 let toastRef = $state<HTMLDivElement | null>(null);
 let isItemHovered = $state(false);
@@ -312,8 +314,9 @@ $effect(() => {
 				remainingTime = duration;
 			}
 
+			const isHovering = isGroupHovered || isItemHovered;
 			const isPaused =
-				isGroupHovered || isItemHovered || isSwiping || hiddenByStacking;
+				(pauseOnHover && isHovering) || isSwiping || hiddenByStacking;
 
 			if (isPaused) {
 				if (timeoutRef) {
@@ -520,7 +523,7 @@ const zIndexBase = Number(ANIMATION_CONFIG.Z_INDEX_BASE);
 
 let isTopPosition = $derived(position?.startsWith("top-") ?? false);
 let maxVisibleIndex = $derived(
-	Math.max(0, ANIMATION_CONFIG.MAX_VISIBLE_TOASTS - 1),
+	Math.max(0, visibleToasts - 1),
 );
 let visibleIndex = $derived(Math.min(index, maxVisibleIndex));
 let defaultCollapsedOffset = $derived(
@@ -549,7 +552,7 @@ let visibleScale = $derived(
 	),
 );
 let zIndex = $derived(zIndexBase - renderIndex);
-let stackHidden = $derived(index >= ANIMATION_CONFIG.MAX_VISIBLE_TOASTS);
+let stackHidden = $derived(index >= visibleToasts);
 let hiddenByStacking = $derived(stackHidden && animationState !== "exiting");
 let isStackLeader = $derived(index === 0);
 let isLatest = $derived(isStackLeader && !shouldClose);
@@ -581,12 +584,12 @@ let transformStyle = $derived.by(() => {
 	let opacityValue = stackHidden ? 0 : 1;
 
 	if (stackHidden) {
-		if (isGroupHovered && animationState !== "exiting") {
+		if (expand && isGroupHovered && animationState !== "exiting") {
 			translateX = 0;
 			translateY = hiddenExpandedTranslateY;
 			scaleValue = 1;
 		}
-	} else if (isGroupHovered && animationState !== "exiting") {
+	} else if (expand && isGroupHovered && animationState !== "exiting") {
 		translateX = 0;
 		translateY = expandedTranslateY;
 		scaleValue = 1;
@@ -684,6 +687,14 @@ let livePoliteness = $derived(
 	(variant === "destructive" ? "assertive" : "polite") as "assertive" | "polite",
 );
 
+let offsetStyle = $derived.by(() => {
+	if (offset === undefined) return undefined;
+	const val = typeof offset === "number" ? `${offset}px` : offset;
+	if (position.startsWith("top")) return `top: ${val};`;
+	if (position.startsWith("bottom")) return `bottom: ${val};`;
+	return undefined;
+});
+
 const handleBlurCapture = (event: FocusEvent) => {
 	const next = event.relatedTarget as Node | null;
 	if (!toastRef || !next || !toastRef.contains(next)) {
@@ -709,6 +720,7 @@ const handleBlurCapture = (event: FocusEvent) => {
         : `transform ${transitionDuration} ${transitionTimingFunction}, opacity ${transitionDuration} ${transitionTimingFunction}`}
     style:transform={transformStyle.transform}
     style:opacity={transformStyle.opacity}
+    style={offsetStyle}
     role={stackHidden ? undefined : liveRole}
     aria-live={stackHidden ? undefined : livePoliteness}
     aria-atomic={stackHidden ? undefined : "true"}
@@ -720,7 +732,7 @@ const handleBlurCapture = (event: FocusEvent) => {
 >
     <div
         role="presentation"
-        class={cn(swipeCursorClass)}
+        class={cn(swipeCursorClass, "touch-none")}
         aria-busy={isLoading ? "true" : undefined}
         onpointerdown={handlePointerDown}
         onpointermove={handlePointerMove}
@@ -734,141 +746,146 @@ const handleBlurCapture = (event: FocusEvent) => {
         onfocuscapture={() => (isItemHovered = true)}
         onblurcapture={handleBlurCapture}
     >
-        <div class={cn(toastContentVariants({ variant }))}>
-            {#if showClose}
-                <button
-                    type="button"
-                    onclick={handleClose}
-                    class={cn(
-                        "absolute top-2 right-2 cursor-pointer rounded-vs-sm p-1 text-vs-foreground/45 hover:bg-vs-popover-muted hover:text-vs-foreground/70 transition-[background-color,color,box-shadow] ease-vs-button duration-100 focus-visible:ring-1 focus-visible:ring-vs-ring/50 focus-visible:outline-none",
-                    )}
-                    aria-label="Close toast"
-                >
-                    <svg
-                        aria-hidden="true"
-                        class="h-4 w-4"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <line x1="18" x2="6" y1="6" y2="18" />
-                        <line x1="6" x2="18" y1="6" y2="18" />
-                    </svg>
-                </button>
-            {/if}
-
-            <div class="p-4 pr-8">
-                <div class="flex gap-3">
-                    {#if showStatusIcon}
-                        <span class="relative inline-flex h-4 w-4 shrink-0 items-center justify-center">
-                            {#if shouldRenderSpinner}
-                                <span
-                                    class={cn(
-                                        "vs-spinner absolute inset-0",
-                                        spinnerState === "loading"
-                                            ? "vs-spinner--active"
-                                            : "vs-spinner--finish",
-                                    )}
-                                    role={spinnerState === "loading" ? "status" : undefined}
-                                    aria-label={spinnerState === "loading" ? "Loading..." : undefined}
-                                    aria-live={spinnerState === "loading" ? "assertive" : undefined}
-                                    onanimationend={handleSpinnerAnimationEnd}
-                                >
-                                    <svg
-                                        viewBox="0 0 256 256"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="24"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        <line x1="128" y1="32" x2="128" y2="64" />
-                                        <line x1="195.9" y1="60.1" x2="173.3" y2="82.7" />
-                                        <line x1="224" y1="128" x2="192" y2="128" />
-                                        <line x1="195.9" y1="195.9" x2="173.3" y2="173.3" />
-                                        <line x1="128" y1="224" x2="128" y2="192" />
-                                        <line x1="60.1" y1="195.9" x2="82.7" y2="173.3" />
-                                        <line x1="32" y1="128" x2="64" y2="128" />
-                                        <line x1="60.1" y1="60.1" x2="82.7" y2="82.7" />
-                                    </svg>
-                                </span>
-                            {/if}
-                            {#if iconConfig}
-                                <span
-                                    class={cn(
-                                        "vs-icon absolute inset-0 flex items-center justify-center",
-                                        iconStateClass,
-                                    )}
-                                    aria-hidden="true"
-                                >
-                                    <svg
-                                        viewBox={iconConfig.viewBox}
-                                        fill="none"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    >
-                                        {#each iconConfig.elements as element, elementIndex (elementIndex)}
-                                            {#if element.tag === "path"}
-                                                <path d={element.d} />
-                                            {:else if element.tag === "line"}
-                                                <line
-                                                    x1={element.x1}
-                                                    y1={element.y1}
-                                                    x2={element.x2}
-                                                    y2={element.y2}
-                                                />
-                                            {:else if element.tag === "circle"}
-                                                <circle
-                                                    cx={element.cx}
-                                                    cy={element.cy}
-                                                    r={element.r}
-                                                />
-                                            {/if}
-                                        {/each}
-                                    </svg>
-                                </span>
-                            {/if}
-                        </span>
-                    {/if}
-                    <div class="min-w-0">
-                        {#if title}
-                            <div
-                                id={titleId}
-                                class="mb-1 text-sm leading-none font-medium select-none"
-                            >
-                                {title}
-                            </div>
-                        {/if}
-                        {#if description}
-                            <div
-                                id={descriptionId}
-                                class="text-sm leading-snug text-vs-foreground/70 text-balance select-none"
-                            >
-                                {description}
-                            </div>
-                        {/if}
-                        {#if action}
-                            <div class="mt-3">
-                                <button
-                                    type="button"
-                                    onclick={() => {
-                                        action.onClick();
-                                        handleClose();
-                                    }}
-                                    class="relative inline-flex cursor-pointer items-center justify-center rounded-vs-md px-3 py-1.5 text-sm font-medium bg-vs-foreground text-vs-popover shadow-vs-button transition-[background-color,color,box-shadow] ease-vs-button duration-100 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-vs-ring-offset/50 focus-visible:outline-none focus-visible:ring-vs-ring/50"
-                                >
-                                    {action.label}
-                                </button>
-                            </div>
-                        {/if}
-                    </div>
-                </div>
-            </div>
-        </div>
+		{#if toast.component}
+			{@const Component = toast.component}
+			<Component {id} {toast} {...toast.componentProps} />
+		{:else}
+			<div class={cn(toastContentVariants({ variant }))}>
+				{#if showClose}
+					<button
+						type="button"
+						onclick={handleClose}
+						class={cn(
+							"absolute top-2 end-2 cursor-pointer rounded-vs-sm p-1 text-vs-foreground/45 hover:bg-vs-popover-muted hover:text-vs-foreground/70 transition-[background-color,color,box-shadow] ease-vs-button duration-100 focus-visible:ring-1 focus-visible:ring-vs-ring/50 focus-visible:outline-none",
+						)}
+						aria-label="Close toast"
+					>
+						<svg
+							aria-hidden="true"
+							class="h-4 w-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<line x1="18" x2="6" y1="6" y2="18" />
+							<line x1="6" x2="18" y1="6" y2="18" />
+						</svg>
+					</button>
+				{/if}
+
+				<div class="p-4 pe-8">
+					<div class="flex gap-3">
+						{#if showStatusIcon}
+							<span class="relative inline-flex h-4 w-4 shrink-0 items-center justify-center">
+								{#if shouldRenderSpinner}
+									<span
+										class={cn(
+											"vs-spinner absolute inset-0",
+											spinnerState === "loading"
+												? "vs-spinner--active"
+												: "vs-spinner--finish",
+										)}
+										role={spinnerState === "loading" ? "status" : undefined}
+										aria-label={spinnerState === "loading" ? "Loading..." : undefined}
+										aria-live={spinnerState === "loading" ? "assertive" : undefined}
+										onanimationend={handleSpinnerAnimationEnd}
+									>
+										<svg
+											viewBox="0 0 256 256"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="24"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<line x1="128" y1="32" x2="128" y2="64" />
+											<line x1="195.9" y1="60.1" x2="173.3" y2="82.7" />
+											<line x1="224" y1="128" x2="192" y2="128" />
+											<line x1="195.9" y1="195.9" x2="173.3" y2="173.3" />
+											<line x1="128" y1="224" x2="128" y2="192" />
+											<line x1="60.1" y1="195.9" x2="82.7" y2="173.3" />
+											<line x1="32" y1="128" x2="64" y2="128" />
+											<line x1="60.1" y1="60.1" x2="82.7" y2="82.7" />
+										</svg>
+									</span>
+								{/if}
+								{#if iconConfig}
+									<span
+										class={cn(
+											"vs-icon absolute inset-0 flex items-center justify-center",
+											iconStateClass,
+										)}
+										aria-hidden="true"
+									>
+										<svg
+											viewBox={iconConfig.viewBox}
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											{#each iconConfig.elements as element, elementIndex (elementIndex)}
+												{#if element.tag === "path"}
+													<path d={element.d} />
+												{:else if element.tag === "line"}
+													<line
+														x1={element.x1}
+														y1={element.y1}
+														x2={element.x2}
+														y2={element.y2}
+													/>
+												{:else if element.tag === "circle"}
+													<circle
+														cx={element.cx}
+														cy={element.cy}
+														r={element.r}
+													/>
+												{/if}
+											{/each}
+										</svg>
+									</span>
+								{/if}
+							</span>
+						{/if}
+						<div class="min-w-0">
+							{#if title}
+								<div
+									id={titleId}
+									class="mb-1 text-sm leading-none font-medium select-none"
+								>
+									{title}
+								</div>
+							{/if}
+							{#if description}
+								<div
+									id={descriptionId}
+									class="text-sm leading-snug text-vs-foreground/70 text-balance select-none"
+								>
+									{description}
+								</div>
+							{/if}
+							{#if action}
+								<div class="mt-3">
+									<button
+										type="button"
+										onclick={() => {
+											action.onClick();
+											handleClose();
+										}}
+										class="relative inline-flex cursor-pointer items-center justify-center rounded-vs-md px-3 py-1.5 text-sm font-medium bg-vs-foreground text-vs-popover shadow-vs-button transition-[background-color,color,box-shadow] ease-vs-button duration-100 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-vs-ring-offset/50 focus-visible:outline-none focus-visible:ring-vs-ring/50"
+									>
+										{action.label}
+									</button>
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
     </div>
 </div>

package/dist/VarselItem.svelte.d.ts

@@ -1,25 +1,21 @@
 import { type PositionedToast } from "./internals";
 type $$ComponentProps = {
-    /** The toast data object containing all content and state. */
     toast: PositionedToast;
-    /** Callback to remove the toast from the DOM after exit animation. */
     onRemove: (id: string) => void;
-    /** Whether the parent group (stack) is currently hovered. */
     isGroupHovered?: boolean;
-    /** The vertical offset for this toast when the stack is expanded. */
     expandedOffset?: number;
-    /** The gap between toasts when expanded. */
     expandedGap?: number;
-    /** The vertical offset for this toast when the stack is collapsed. */
     collapsedOffset?: number;
-    /** The offset to use when the toast is hidden in the stack. */
     hiddenCollapsedOffset?: number;
-    /** Callback to report the height of the toast to the manager. */
     onHeightChange?: (id: string, height: number) => void;
-    /** Callback to notify the manager that the user has entered the toast area. */
     onGroupHoverEnter?: () => void;
-    /** Callback to notify the manager that the user is interacting (holding) the toast. */
     onGroupHoldChange?: (holding: boolean) => void;
+    defaultDuration?: number;
+    defaultShowClose?: boolean;
+    pauseOnHover?: boolean;
+    offset?: number | string;
+    expand?: boolean;
+    visibleToasts?: number;
 };
 declare const VarselItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type VarselItem = ReturnType<typeof VarselItem>;

package/dist/VarselItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VarselItem.svelte.d.ts","sourceRoot":"","sources":["../src/lib/VarselItem.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAYN,KAAK,eAAe,EAIpB,MAAM,aAAa,CAAC;AAQpB,KAAK,gBAAgB,GAAI;IACzB,8DAA8D;IAC9D,KAAK,EAAE,eAAe,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iEAAiE;IACjE,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C,CAAC;AA6uBF,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"VarselItem.svelte.d.ts","sourceRoot":"","sources":["../src/lib/VarselItem.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAYN,KAAK,eAAe,EAIpB,MAAM,aAAa,CAAC;AAQpB,KAAK,gBAAgB,GAAI;IACzB,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAiwBF,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/VarselManager.svelte

@@ -18,13 +18,26 @@ let {
 	toasts = [],
 	onRemove,
 	expandedGap = ANIMATION_CONFIG.EXPANDED_GAP,
+	position: defaultPosition = 'bottom-center',
+	visibleToasts = 3,
+	expand = true,
+	duration = 5000,
+	closeButton = true,
+	pauseOnHover = true,
+	offset = undefined,
+	dir = 'auto'
 }: {
-	/** The list of all active toasts from the global state. */
 	toasts?: ToastData[];
-	/** Callback to remove a toast from the state. */
 	onRemove: (id: string) => void;
-	/** The gap in pixels between toasts when expanded. */
 	expandedGap?: number;
+	position?: ToastPosition;
+	visibleToasts?: number;
+	expand?: boolean;
+	duration?: number;
+	closeButton?: boolean;
+	pauseOnHover?: boolean;
+	offset?: number | string;
+	dir?: 'ltr' | 'rtl' | 'auto';
 } = $props();
 
 const createPositionMap = <T>(value: () => T): Record<ToastPosition, T> => ({
@@ -90,7 +103,7 @@ const updateHoldState = (
 $effect(() => {
 	const grouped = createPositionMap<ToastData[]>(() => []);
 	for (const toast of toasts) {
-		const pos = toast.position || "bottom-center";
+		const pos = toast.position || defaultPosition;
 		grouped[pos].push(toast);
 	}
 
@@ -118,6 +131,7 @@ $effect(() => {
 
 			return {
 				...toast,
+				position: position,
 				index: stackIndex,
 				renderIndex: orderIndex,
 				total: list.length,
@@ -289,7 +303,7 @@ $effect(() => {
 			let bottom = Number.NEGATIVE_INFINITY;
 			let any = false;
 			for (const t of group) {
-				if (t.index >= ANIMATION_CONFIG.MAX_VISIBLE_TOASTS) continue;
+				if (t.index >= visibleToasts) continue;
 				const el = document.querySelector(
 					`[data-toast-id="${t.id}"]`,
 				) as HTMLElement | null;
@@ -356,7 +370,10 @@ const handleHeightChange = (id: string, height: number) => {
 </script>
 
 {#if toasts.length > 0}
-	<div class="pointer-events-none fixed inset-0 z-50">
+	<div 
+		class="pointer-events-none fixed inset-0 z-50"
+		{dir}
+	>
 		{#each positionEntries as [position, positionToasts]}
 			{@const pos = position}
 			{@const expandedOffsets = expandedOffsetData.byPosition[pos]}
@@ -365,7 +382,7 @@ const handleHeightChange = (id: string, height: number) => {
 			{@const isHeld = (heldToasts[pos]?.size ?? 0) > 0}
 			{@const isGroupActive = isHovered || isHeld}
 			{@const activeToasts = positionToasts.filter((toast) => !toast.shouldClose)}
-			{@const visibleStackLimit = Math.max(ANIMATION_CONFIG.MAX_VISIBLE_TOASTS - 1, 0)}
+			{@const visibleStackLimit = Math.max(visibleToasts - 1, 0)}
 			{@const maxVisibleStackIndex = Math.min(
 				Math.max(activeToasts.length - 1, 0),
 				visibleStackLimit,
@@ -382,7 +399,7 @@ const handleHeightChange = (id: string, height: number) => {
 					: undefined}
 			{#each positionToasts as toast, idx (toast.id)}
 				{@const toastIsHidden =
-					toast.index >= ANIMATION_CONFIG.MAX_VISIBLE_TOASTS}
+					toast.index >= visibleToasts}
 				{@const hiddenCollapsedOffset = toastIsHidden
 					? sharedHiddenCollapsedOffset ?? collapsedOffsets?.[idx]
 					: collapsedOffsets?.[idx]}
@@ -401,6 +418,12 @@ const handleHeightChange = (id: string, height: number) => {
 						updateHoldState(pos, toast.id, holding)}
 					collapsedOffset={collapsedOffsetValue}
 					hiddenCollapsedOffset={hiddenCollapsedOffset}
+					defaultDuration={duration}
+					defaultShowClose={closeButton}
+					{pauseOnHover}
+					{offset}
+					{expand}
+					{visibleToasts}
 				/>
 			{/each}
 		{/each}

package/dist/VarselManager.svelte.d.ts

@@ -1,11 +1,16 @@
-import { type ToastData } from "./internals";
+import { type ToastData, type ToastPosition } from "./internals";
 type $$ComponentProps = {
-    /** The list of all active toasts from the global state. */
     toasts?: ToastData[];
-    /** Callback to remove a toast from the state. */
     onRemove: (id: string) => void;
-    /** The gap in pixels between toasts when expanded. */
     expandedGap?: number;
+    position?: ToastPosition;
+    visibleToasts?: number;
+    expand?: boolean;
+    duration?: number;
+    closeButton?: boolean;
+    pauseOnHover?: boolean;
+    offset?: number | string;
+    dir?: 'ltr' | 'rtl' | 'auto';
 };
 declare const VarselManager: import("svelte").Component<$$ComponentProps, {}, "">;
 type VarselManager = ReturnType<typeof VarselManager>;

package/dist/VarselManager.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VarselManager.svelte.d.ts","sourceRoot":"","sources":["../src/lib/VarselManager.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAGN,KAAK,SAAS,EAEd,MAAM,aAAa,CAAC;AAEpB,KAAK,gBAAgB,GAAI;IACzB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,iDAAiD;IACjD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA8XF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VarselManager.svelte.d.ts","sourceRoot":"","sources":["../src/lib/VarselManager.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAGN,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,MAAM,aAAa,CAAC;AAEpB,KAAK,gBAAgB,GAAI;IACzB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7B,CAAC;AAuYF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/VarselToaster.svelte

@@ -25,14 +25,41 @@ export {
 		toastState,
 		toasterInstanceManager,
 		type ToastData,
+		type ToastPosition,
 	} from './internals';
 
-	let { expandedGap = undefined }: { 
+	let { 
+		expandedGap = undefined,
+		position = 'bottom-center',
+		visibleToasts = 3,
+		expand = true,
+		duration = 5000,
+		closeButton = true,
+		pauseOnHover = true,
+		offset = undefined,
+		dir = 'auto'
+	}: { 
 		/**
 		 * The gap (in pixels) between expanded toasts when hovering over the stack.
 		 * If undefined, uses the default value from animation config.
 		 */
-		expandedGap?: number 
+		expandedGap?: number;
+		/** Default position for toasts. */
+		position?: ToastPosition;
+		/** Maximum number of visible toasts in the stack. */
+		visibleToasts?: number;
+		/** Whether to expand the stack on hover. */
+		expand?: boolean;
+		/** Default duration in milliseconds. */
+		duration?: number;
+		/** Whether to show the close button by default. */
+		closeButton?: boolean;
+		/** Whether to pause the timer on hover. */
+		pauseOnHover?: boolean;
+		/** Offset from the edge of the screen. */
+		offset?: number | string;
+		/** Directionality of the text. */
+		dir?: 'ltr' | 'rtl' | 'auto';
 	} = $props();
 
 	let toasts = $state<ToastData[]>([]);
@@ -55,9 +82,17 @@ export {
 </script>
 
 {#if toasterInstanceManager.isActiveInstance(instanceId)}
-	{#if expandedGap === undefined}
-		<VarselManager {toasts} onRemove={handleRemove} />
-	{:else}
-		<VarselManager {toasts} onRemove={handleRemove} {expandedGap} />
-	{/if}
+	<VarselManager 
+		{toasts} 
+		onRemove={handleRemove} 
+		{expandedGap}
+		{position}
+		{visibleToasts}
+		{expand}
+		{duration}
+		{closeButton}
+		{pauseOnHover}
+		{offset}
+		{dir}
+	/>
 {/if}

package/dist/VarselToaster.svelte.d.ts

@@ -2,12 +2,29 @@
  * Main module exports for the Varsel library.
  */
 export { toast, type ToastData, type ToastInvoker, type ToastPosition, } from "./internals";
+import { type ToastPosition } from './internals';
 type $$ComponentProps = {
     /**
      * The gap (in pixels) between expanded toasts when hovering over the stack.
      * If undefined, uses the default value from animation config.
      */
     expandedGap?: number;
+    /** Default position for toasts. */
+    position?: ToastPosition;
+    /** Maximum number of visible toasts in the stack. */
+    visibleToasts?: number;
+    /** Whether to expand the stack on hover. */
+    expand?: boolean;
+    /** Default duration in milliseconds. */
+    duration?: number;
+    /** Whether to show the close button by default. */
+    closeButton?: boolean;
+    /** Whether to pause the timer on hover. */
+    pauseOnHover?: boolean;
+    /** Offset from the edge of the screen. */
+    offset?: number | string;
+    /** Directionality of the text. */
+    dir?: 'ltr' | 'rtl' | 'auto';
 };
 declare const VarselToaster: import("svelte").Component<$$ComponentProps, {}, "">;
 type VarselToaster = ReturnType<typeof VarselToaster>;

package/dist/VarselToaster.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VarselToaster.svelte.d.ts","sourceRoot":"","sources":["../src/lib/VarselToaster.svelte.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,OAAO,EACN,KAAK,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,aAAa,GAClB,MAAM,aAAa,CAAC;AAmBpB,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB,CAAC;AAuCH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VarselToaster.svelte.d.ts","sourceRoot":"","sources":["../src/lib/VarselToaster.svelte.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,OAAO,EACN,KAAK,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,aAAa,GAClB,MAAM,aAAa,CAAC;AAarB,OAAO,EAIL,KAAK,aAAa,EAClB,MAAM,aAAa,CAAC;AAErB,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,kCAAkC;IAClC,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7B,CAAC;AA6CH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/core/toast-factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-factory.d.ts","sourceRoot":"","sources":["../../src/lib/core/toast-factory.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAoIjB,eAAO,MAAM,KAAK,cAAc,CAAC"}
+{"version":3,"file":"toast-factory.d.ts","sourceRoot":"","sources":["../../src/lib/core/toast-factory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAoJjB,eAAO,MAAM,KAAK,cAAc,CAAC"}

package/dist/core/toast-factory.js

@@ -1,7 +1,3 @@
-/**
- * Factory module for creating and managing toast notifications.
- * Provides the main `toast` function and its variants (success, error, promise).
- */
 import { toastState } from "./toast-state";
 /**
  * Helper to normalize string input into a ToastData object.
@@ -16,8 +12,8 @@ const normalizeToastData = (data) => {
  * Resolves the state of a promise-based toast (success or error) into actual toast data.
  */
 const resolvePromiseState = async (value, state) => {
-    const resolved = typeof state === "function" ? await state(value) : await state;
-    return normalizeToastData(resolved);
+    const resolvedValue = typeof state === "function" ? await state(value) : await state;
+    return normalizeToastData(resolvedValue);
 };
 /**
  * The main entry point for creating toasts.
@@ -54,6 +50,19 @@ createToast.error = (data) => {
     }
     return toastState.add({ ...data, variant: "destructive" });
 };
+/**
+ * Creates a custom component toast.
+ * @param component - The Svelte component to render.
+ * @param options - Additional options and props for the component.
+ */
+createToast.custom = (component, // Type inferred from ToastInvoker
+options) => {
+    return toastState.add({
+        ...(options ?? {}),
+        component: component,
+        variant: "custom",
+    });
+};
 /**
  * Creates a toast that tracks a promise's lifecycle.
  * Updates automatically from loading -> success/error.

package/dist/core/types.d.ts

@@ -1,4 +1,5 @@
 import type { VariantProps } from "class-variance-authority";
+import type { Component } from "svelte";
 import type { toastContainerVariants } from "./variants";
 import type { ToastPosition } from "./positions";
 import type { SwipeAxis, SwipeDirection } from "./swipe";
@@ -38,6 +39,10 @@ export interface ToastData extends VariantProps<typeof toastContainerVariants> {
     isLeaving?: boolean;
     /** The position on the screen where this toast should appear. */
     position?: ToastPosition;
+    /** Custom Svelte component to render instead of the default toast layout. */
+    component?: Component<any>;
+    /** Props to pass to the custom component. */
+    componentProps?: Record<string, any>;
 }
 /**
  * Represents the possible states for a promise-based toast.
@@ -77,6 +82,14 @@ export type ToastInvoker = {
      * Creates an error toast notification.
      */
     error: (data: Omit<ToastData, "id" | "variant"> | string) => string;
+    /**
+     * Creates a custom component toast.
+     * @param component - The Svelte component to render.
+     * @param options - Additional options and props for the component.
+     */
+    custom: <Props extends Record<string, any> = Record<string, any>>(component: Component<Props>, options?: Omit<ToastData, "id" | "component" | "variant" | "componentProps"> & {
+        componentProps?: Omit<Props, "id" | "toast">;
+    }) => string;
     /**
      * Creates a toast that updates based on the state of a Promise.
      * @param promise - The promise to track.

package/dist/core/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/core/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/core/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,YAAY,CAAC,OAAO,sBAAsB,CAAC;IAC7E,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,MAAM,CAAC,EAAE;QACR,mCAAmC;QACnC,KAAK,EAAE,MAAM,CAAC;QACd,oEAAoE;QACpE,OAAO,EAAE,MAAM,IAAI,CAAC;KACpB,CAAC;IACF,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC3B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACrC;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,CAAC,KAAK,IAChC,MAAM,GACN,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,CAAC,CACD,KAAK,EAAE,KAAK,KACR,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;AAErF;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAC9B,YAAY,GAAG,OAAO,EACtB,UAAU,GAAG,OAAO,IACjB;IACH,gEAAgE;IAChE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,MAAM,CAAC;IACxC,0EAA0E;IAC1E,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACzC,4DAA4D;IAC5D,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B;;;;OAIG;IACH,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/C;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,KAAK,MAAM,CAAC;IACtE;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,KAAK,MAAM,CAAC;IACtE;;OAEG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,KAAK,MAAM,CAAC;IACpE;;;;OAIG;IACH,MAAM,EAAE,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC/D,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,EAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,WAAW,GAAG,SAAS,GAAG,gBAAgB,CAAC,GAAG;QAC9E,cAAc,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC,CAAC;KAC7C,KACG,MAAM,CAAC;IACZ;;;;;OAKG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,EACvB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EACvB,OAAO,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,KAC9B,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACzC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,sDAAsD;AACtD,MAAM,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;AAE5D,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC"}

package/dist/core/variants.d.ts

@@ -5,7 +5,7 @@
  */
 export declare const toastContainerVariants: (props?: ({
     position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
-    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "success" | "warning" | "destructive" | "custom" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * CVA definition for the inner content wrapper of the toast.
@@ -13,6 +13,6 @@ export declare const toastContainerVariants: (props?: ({
  * separate from the structural container.
  */
 export declare const toastContentVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "default" | "success" | "warning" | "destructive" | "custom" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/core/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/lib/core/variants.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;8EAgClC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;8EAY/B,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/lib/core/variants.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;8EAqClC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;8EAa/B,CAAC"}

package/dist/core/variants.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
  * Handles positioning logic (absolute/fixed positioning coordinates)
  * and base theming (colors based on variant).
  */
-export const toastContainerVariants = cva("pointer-events-auto fixed rounded-vs-lg border shadow-vs-toast will-change-transform border-vs-border bg-vs-popover", {
+export const toastContainerVariants = cva("pointer-events-auto fixed will-change-transform", {
     variants: {
         /**
          * Determines where the toast is anchored on the screen.
@@ -21,10 +21,11 @@ export const toastContainerVariants = cva("pointer-events-auto fixed rounded-vs-
          * Semantic variant of the toast affecting text colors.
          */
         variant: {
-            default: "text-vs-foreground",
-            success: "text-vs-success/90",
-            warning: "text-vs-warning/90",
-            destructive: "text-vs-destructive/90",
+            default: "rounded-vs-lg border shadow-vs-toast border-vs-border bg-vs-popover text-vs-foreground",
+            success: "rounded-vs-lg border shadow-vs-toast border-vs-border bg-vs-popover text-vs-success/90",
+            warning: "rounded-vs-lg border shadow-vs-toast border-vs-border bg-vs-popover text-vs-warning/90",
+            destructive: "rounded-vs-lg border shadow-vs-toast border-vs-border bg-vs-popover text-vs-destructive/90",
+            custom: "",
         },
     },
     defaultVariants: {
@@ -44,6 +45,7 @@ export const toastContentVariants = cva("relative overflow-hidden rounded-vs-lg"
             success: "",
             warning: "",
             destructive: "",
+            custom: "",
         },
     },
     defaultVariants: {

package/dist/styles.css

@@ -1,2 +1,192 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-sm:24rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--leading-snug:1.375;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-vs-popover:var(--vs-popover);--color-vs-popover-muted:var(--vs-popover-muted);--color-vs-foreground:var(--vs-foreground);--color-vs-border:var(--vs-border);--color-vs-ring:var(--vs-ring);--color-vs-ring-offset:var(--vs-ring-offset);--color-vs-destructive:var(--vs-destructive);--color-vs-warning:var(--vs-warning);--color-vs-success:var(--vs-success);--shadow-vs-button:var(--shadow-vs-button);--shadow-vs-toast:var(--shadow-vs-toast);--radius-vs-sm:calc(var(--radius-base)*2);--radius-vs-md:calc(var(--radius-base)*3);--radius-vs-lg:calc(var(--radius-base)*4);--ease-vs-button:var(--ease-vs-button);--ease-vs-toast:var(--ease-vs-toast)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.bottom-4{bottom:calc(var(--spacing)*4)}.left-1\/2{left:50%}.left-4{left:calc(var(--spacing)*4)}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-3{margin-top:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.flex{display:flex}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.w-4{width:calc(var(--spacing)*4)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing)*3)}.overflow-hidden{overflow:hidden}.rounded-vs-lg{border-radius:var(--radius-vs-lg)}.rounded-vs-md{border-radius:var(--radius-vs-md)}.rounded-vs-sm{border-radius:var(--radius-vs-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-vs-border{border-color:var(--color-vs-border)}.bg-vs-foreground{background-color:var(--color-vs-foreground)}.bg-vs-popover{background-color:var(--color-vs-popover)}.p-1{padding:calc(var(--spacing)*1)}.p-4{padding:calc(var(--spacing)*4)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.pr-8{padding-right:calc(var(--spacing)*8)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.leading-none{--tw-leading:1;line-height:1}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-balance{text-wrap:balance}.text-vs-destructive\/90{color:var(--color-vs-destructive)}@supports (color:color-mix(in lab, red, red)){.text-vs-destructive\/90{color:color-mix(in oklab,var(--color-vs-destructive)90%,transparent)}}.text-vs-foreground,.text-vs-foreground\/45{color:var(--color-vs-foreground)}@supports (color:color-mix(in lab, red, red)){.text-vs-foreground\/45{color:color-mix(in oklab,var(--color-vs-foreground)45%,transparent)}}.text-vs-foreground\/70{color:var(--color-vs-foreground)}@supports (color:color-mix(in lab, red, red)){.text-vs-foreground\/70{color:color-mix(in oklab,var(--color-vs-foreground)70%,transparent)}}.text-vs-popover{color:var(--color-vs-popover)}.text-vs-success\/90{color:var(--color-vs-success)}@supports (color:color-mix(in lab, red, red)){.text-vs-success\/90{color:color-mix(in oklab,var(--color-vs-success)90%,transparent)}}.text-vs-warning\/90{color:var(--color-vs-warning)}@supports (color:color-mix(in lab, red, red)){.text-vs-warning\/90{color:color-mix(in oklab,var(--color-vs-warning)90%,transparent)}}.shadow-vs-button{--tw-shadow:var(--shadow-vs-button);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-vs-toast{--tw-shadow:var(--shadow-vs-toast);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-\[background-color\,color\,box-shadow\]{transition-property:background-color,color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.ease-vs-button{--tw-ease:var(--ease-vs-button);transition-timing-function:var(--ease-vs-button)}.will-change-transform{will-change:transform}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-vs-popover-muted:hover{background-color:var(--color-vs-popover-muted)}.hover\:text-vs-foreground\/70:hover{color:var(--color-vs-foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:text-vs-foreground\/70:hover{color:color-mix(in oklab,var(--color-vs-foreground)70%,transparent)}}}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-vs-ring\/50:focus-visible{--tw-ring-color:var(--color-vs-ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-vs-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--color-vs-ring)50%,transparent)}}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-vs-ring-offset\/50:focus-visible{--tw-ring-offset-color:var(--color-vs-ring-offset)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-offset-vs-ring-offset\/50:focus-visible{--tw-ring-offset-color:color-mix(in oklab,var(--color-vs-ring-offset)50%,transparent)}}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}}:root{--base-hue:265;--color-vs-popover:oklch(100% 0 0);--color-vs-popover-muted:oklch(.96 .002 var(--base-hue));--color-vs-foreground:oklch(.1408 .0044 var(--base-hue));--color-vs-border:oklch(.8925 .0014 var(--base-hue));--color-vs-ring:oklch(.55 .012 var(--base-hue));--color-vs-ring-offset:oklch(.96 .002 var(--base-hue));--color-vs-destructive:oklch(62% .21 25);--color-vs-warning:oklch(80% .2 75);--color-vs-success:oklch(70% .18 155);--shadow-vs-button:0px 1px 1px -.5px #00000026,0px 3px 3px -1.5px #0000000d;--shadow-vs-toast:0px 1px 1px -.5px #00000026,0px 3px 3px -1.5px #0000000d,0px 6px 6px -3px #0000000d,0px 12px 12px -6px #0000000d,0px 24px 24px -12px #0000000d,0px 48px 48px -24px #0000000d;--radius-base:.125rem;--ease-vs-button:cubic-bezier(.25,.46,.45,.94);--ease-vs-toast:cubic-bezier(.32,.72,0,1)}.dark{--color-vs-popover:oklch(.2139 .0101 var(--base-hue));--color-vs-popover-muted:oklch(.2502 .016 var(--base-hue));--color-vs-foreground:oklch(.9824 .0013 var(--base-hue));--color-vs-border:oklch(.278 .015 var(--base-hue));--color-vs-ring:oklch(.58 .012 var(--base-hue));--color-vs-ring-offset:oklch(.15 .005 var(--base-hue));--color-vs-destructive:oklch(72% .27 25);--color-vs-warning:oklch(82% .24 85);--color-vs-success:oklch(78% .25 155)}.vs-spinner{transform-origin:50%;flex-shrink:0;justify-content:center;align-items:center;width:1rem;height:1rem;display:inline-flex;position:absolute;inset:0}.vs-spinner--active{opacity:1}.vs-spinner--finish{animation:.42s cubic-bezier(.32,.72,0,1) forwards vs-spinner-finish}.vs-spinner svg{width:100%;height:100%;animation:1s linear infinite vs-spin}.vs-icon{flex-shrink:0;justify-content:center;align-items:center;width:1rem;height:1rem;display:inline-flex;position:absolute;inset:0}.vs-icon--static{opacity:1;transform:scale(1)}.vs-icon--waiting{opacity:0;transform:scale(.75)rotate(-6deg)}.vs-icon--pop{animation:.36s cubic-bezier(.18,.89,.32,1.28) forwards vs-icon-pop}.vs-icon svg{width:100%;height:100%}@keyframes vs-spin{to{transform:rotate(360deg)}}@keyframes vs-spinner-finish{0%{opacity:1;filter:blur();transform:scale(1)rotate(0)}60%{opacity:.65;filter:blur(.3px);transform:scale(.55)rotate(140deg)}to{opacity:0;filter:blur(.8px);transform:scale(0)rotate(220deg)}}@keyframes vs-icon-pop{0%{opacity:0;filter:blur(2px);transform:scale(.5)rotate(-10deg)}60%{opacity:1;filter:blur();transform:scale(1.18)rotate(2deg)}to{opacity:1;filter:blur();transform:scale(1)rotate(0)}}@media (prefers-reduced-motion:reduce){.vs-spinner svg{animation-duration:2s}.vs-spinner--finish{animation-duration:0s}.vs-icon--pop{opacity:1;animation:none;transform:scale(1)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
+/*
+ * 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).
+ */
+
+@import "tailwindcss";
+@source "./**/*.{svelte,js,ts}";
+
+:root {
+	/* Base hue used for generating the color palette (oklch) */
+	--base-hue: 265;
+
+	/* 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);
+
+	/* 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);
+	--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);
+
+	/* Radius & Easing */
+	--radius-base: 0.125rem;
+	--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);
+}
+
+@theme {
+	--color-vs-popover: var(--vs-popover);
+	--color-vs-popover-muted: var(--vs-popover-muted);
+	--color-vs-foreground: var(--vs-foreground);
+	--color-vs-border: var(--vs-border);
+	--color-vs-ring: var(--vs-ring);
+	--color-vs-ring-offset: var(--vs-ring-offset);
+	--color-vs-destructive: var(--vs-destructive);
+	--color-vs-warning: var(--vs-warning);
+	--color-vs-success: var(--vs-success);
+	--shadow-vs-button: var(--shadow-vs-button);
+	--shadow-vs-toast: var(--shadow-vs-toast);
+	--radius-vs-sm: calc(var(--radius-base) * 2);
+	--radius-vs-md: calc(var(--radius-base) * 3);
+	--radius-vs-lg: calc(var(--radius-base) * 4);
+	--ease-vs-button: var(--ease-vs-button);
+	--ease-vs-toast: var(--ease-vs-toast);
+	--ease-vs-pop: var(--ease-vs-pop);
+}
+
+/* Spinner Styles */
+.vs-spinner {
+	display: inline-flex;
+	width: 1rem;
+	height: 1rem;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	position: absolute;
+	inset: 0;
+	transform-origin: center;
+}
+
+.vs-spinner--active {
+	opacity: 1;
+}
+
+.vs-spinner--finish {
+	animation: vs-spinner-finish 0.42s var(--ease-vs-toast) forwards;
+}
+
+.vs-spinner svg {
+	width: 100%;
+	height: 100%;
+	animation: vs-spin 1s linear infinite;
+}
+
+/* Icon Styles */
+.vs-icon {
+	display: inline-flex;
+	width: 1rem;
+	height: 1rem;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	position: absolute;
+	inset: 0;
+}
+
+.vs-icon--static {
+	opacity: 1;
+	transform: scale(1);
+}
+
+.vs-icon--waiting {
+	opacity: 0;
+	transform: scale(0.75) rotate(-6deg);
+}
+
+.vs-icon--pop {
+	animation: vs-icon-pop 0.36s var(--ease-vs-pop) forwards;
+}
+
+.vs-icon svg {
+	width: 100%;
+	height: 100%;
+}
+
+@keyframes vs-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes vs-spinner-finish {
+	0% {
+		opacity: 1;
+		transform: scale(1) rotate(0deg);
+		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);
+	}
+}
+
+@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);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1) rotate(0deg);
+		filter: blur(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.vs-spinner svg {
+		animation-duration: 2s;
+	}
+
+	.vs-spinner--finish {
+		animation-duration: 0s;
+	}
+
+	.vs-icon--pop {
+		animation: none;
+		opacity: 1;
+		transform: scale(1);
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "varsel",
-	"version": "0.2.1",
+	"version": "0.4.0",
 	"description": "Headless yet opinionated toast notifications for Svelte apps.",
 	"type": "module",
 	"license": "MIT",