better-toast 0.1.0 → 0.2.1

package/fesm2022/better-toast.mjs

@@ -1,6 +1,50 @@
-import { NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, input, output, computed, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, input, effect, untracked, Directive, signal, Injectable, ElementRef, output, computed, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Tiny dynamic-component host used for headless toasts, custom bodies, and icon overrides.
+ * Uses signal inputs and recreates the guest only when the component type changes.
+ */
+class BetterToastOutlet {
+    viewContainer = inject(ViewContainerRef);
+    betterToastOutlet = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "betterToastOutlet" }] : /* istanbul ignore next */ []));
+    betterToastOutletInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "betterToastOutletInputs" }] : /* istanbul ignore next */ []));
+    ref;
+    currentType;
+    constructor() {
+        effect(() => {
+            const component = this.betterToastOutlet();
+            const inputs = this.betterToastOutletInputs();
+            untracked(() => this.sync(component, inputs));
+        });
+    }
+    sync(component, inputs) {
+        if (this.currentType !== component) {
+            this.viewContainer.clear();
+            this.ref = undefined;
+            this.currentType = component;
+            if (component) {
+                this.ref = this.viewContainer.createComponent(component);
+            }
+        }
+        if (!this.ref || !inputs) {
+            return;
+        }
+        for (const name of Object.keys(inputs)) {
+            this.ref.setInput(name, inputs[name]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: BetterToastOutlet, isStandalone: true, selector: "[betterToastOutlet]", inputs: { betterToastOutlet: { classPropertyName: "betterToastOutlet", publicName: "betterToastOutlet", isSignal: true, isRequired: true, transformFunction: null }, betterToastOutletInputs: { classPropertyName: "betterToastOutletInputs", publicName: "betterToastOutletInputs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[betterToastOutlet]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { betterToastOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "betterToastOutlet", required: true }] }], betterToastOutletInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "betterToastOutletInputs", required: false }] }] } });
 
 /** Fallback when `<app-toaster [duration]>` is absent and a helper omits `durationMs`. */
 const DEFAULT_TOAST_DURATION_MS = 4000;
@@ -23,6 +67,23 @@ function parseToasterDurationMs(value) {
     }
     return value;
 }
+function newToastId() {
+    return globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+}
+function chromeFromOptions(options) {
+    if (!options) {
+        return {};
+    }
+    const { icon, style, classNames, description, onDismiss, onAutoClose } = options;
+    return {
+        ...(icon !== undefined ? { icon } : {}),
+        ...(style !== undefined ? { style } : {}),
+        ...(classNames !== undefined ? { classNames } : {}),
+        ...(description !== undefined ? { description } : {}),
+        ...(onDismiss !== undefined ? { onDismiss } : {}),
+        ...(onAutoClose !== undefined ? { onAutoClose } : {}),
+    };
+}
 function shouldScheduleAutoDismiss(durationMs) {
     return Number.isFinite(durationMs) && durationMs > 0;
 }
@@ -174,10 +235,10 @@ class ToasterService {
      * Show a toast whose **message area** is a standalone Angular component while keeping normal toast chrome
      * (surface, icon column when applicable, close button, stack motion).
      *
-     * Pass {@link CustomToastOptions.inputs} for `input()` / `@Input()` on that component.
+     * Pass {@link CustomToastOptions.inputs} for `input()` on that component.
      * The component also receives **`toastId`** (matches the returned id) for programmatic dismiss.
      *
-     * @param component The component class (must be usable with `NgComponentOutlet`).
+     * @param component The component class (must work with `ViewContainerRef.createComponent`).
      * @param options Optional configuration object {@link CustomToastOptions}.
      * @returns The toast ID, useful for programmatic dismissal.
      */
@@ -191,7 +252,7 @@ class ToasterService {
      * Pass {@link HeadlessToastOptions.inputs} to feed `input()` on that component.
      * The component also automatically receives **`toastId`** (matches the returned id) for programmatic dismiss inside the component.
      *
-     * @param component The component class (must be usable with `NgComponentOutlet`).
+     * @param component The component class (must work with `ViewContainerRef.createComponent`).
      * @param options Optional configuration object {@link HeadlessToastOptions}.
      * @returns The toast ID, useful for programmatic dismissal.
      */
@@ -293,81 +354,48 @@ class ToasterService {
             toast.onDismiss?.();
         }
     }
+    pushToast(item, durationMs) {
+        this._toasts.update((list) => [...list, item]);
+        this.scheduleAutoDismiss(item.id, durationMs);
+        return item.id;
+    }
     add(message, variant, durationMs, options, toastAction) {
-        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
-        const icon = options?.icon;
-        const style = options?.style;
-        const classNames = options?.classNames;
-        const onDismiss = options?.onDismiss;
-        const onAutoClose = options?.onAutoClose;
-        const description = options?.description;
-        const item = {
+        const id = newToastId();
+        return this.pushToast({
             id,
             message,
             variant,
-            ...(icon !== undefined ? { icon } : {}),
-            ...(style !== undefined ? { style } : {}),
-            ...(classNames !== undefined ? { classNames } : {}),
-            ...(description !== undefined ? { description } : {}),
-            ...(onDismiss !== undefined ? { onDismiss } : {}),
-            ...(onAutoClose !== undefined ? { onAutoClose } : {}),
+            ...chromeFromOptions(options),
             ...(toastAction !== undefined ? { toastAction } : {}),
-        };
-        this._toasts.update((list) => [...list, item]);
-        this.scheduleAutoDismiss(id, durationMs);
-        return id;
+        }, durationMs);
     }
     addContentComponent(component, variant, durationMs, options) {
-        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
-        const componentInputs = {
-            ...(options?.inputs ?? {}),
-            toastId: id,
-        };
-        const icon = options?.icon;
-        const style = options?.style;
-        const classNames = options?.classNames;
-        const onDismiss = options?.onDismiss;
-        const onAutoClose = options?.onAutoClose;
-        const description = options?.description;
-        const item = {
+        const id = newToastId();
+        return this.pushToast({
             id,
             message: '',
             variant,
             contentComponent: component,
-            contentComponentInputs: componentInputs,
-            ...(icon !== undefined ? { icon } : {}),
-            ...(style !== undefined ? { style } : {}),
-            ...(classNames !== undefined ? { classNames } : {}),
-            ...(description !== undefined ? { description } : {}),
-            ...(onDismiss !== undefined ? { onDismiss } : {}),
-            ...(onAutoClose !== undefined ? { onAutoClose } : {}),
-        };
-        this._toasts.update((list) => [...list, item]);
-        this.scheduleAutoDismiss(id, durationMs);
-        return id;
+            contentComponentInputs: { ...(options?.inputs ?? {}), toastId: id },
+            ...chromeFromOptions(options),
+        }, durationMs);
     }
     addComponent(component, durationMs, options) {
-        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
-        const componentInputs = {
-            ...(options?.inputs ?? {}),
-            toastId: id,
-        };
-        const classNames = options?.classNames;
-        const onDismiss = options?.onDismiss;
-        const onAutoClose = options?.onAutoClose;
-        const item = {
+        const id = newToastId();
+        return this.pushToast({
             id,
             message: '',
             variant: 'default',
             component,
-            componentInputs,
-            ...(classNames !== undefined ? { classNames } : {}),
-            ...(onDismiss !== undefined ? { onDismiss } : {}),
-            ...(onAutoClose !== undefined ? { onAutoClose } : {}),
-        };
-        this._toasts.update((list) => [...list, item]);
-        this.scheduleAutoDismiss(id, durationMs);
-        return id;
+            componentInputs: { ...(options?.inputs ?? {}), toastId: id },
+            ...chromeFromOptions(options
+                ? {
+                    classNames: options.classNames,
+                    onDismiss: options.onDismiss,
+                    onAutoClose: options.onAutoClose,
+                }
+                : undefined),
+        }, durationMs);
     }
     updateToast(id, message, variant, durationMs) {
         let found = false;
@@ -427,9 +455,31 @@ const TOAST_VARIANTS = [
 ];
 
 const GAP = 16;
+/**
+ * Visible layers in the collapsed stack. Older toasts stay in the list and appear on hover.
+ * CSS hides the rest with `:nth-last-child(n + 4)` — keep that selector in sync.
+ */
+const VISIBLE_TOASTS = 3;
 function swipeDirectionForPosition(position) {
     return position.startsWith('bottom') ? 'down' : 'up';
 }
+/** True when the event target is a toast row (not the list itself, which can steal focus on dismiss). */
+function isInsideToastItem(target) {
+    if (target instanceof Element) {
+        return target.closest('.toast') != null;
+    }
+    if (target instanceof Node && target.parentElement) {
+        return target.parentElement.closest('.toast') != null;
+    }
+    return false;
+}
+/**
+ * Touch and pen pointers do not hover. `pointerleave` fires on lift, which would collapse
+ * the stack before a second tap can reach a toast behind the front card.
+ */
+function isNonHoverPointer(event) {
+    return event.pointerType === 'touch' || event.pointerType === 'pen';
+}
 function resolveToasterOffsetSide(offset, side) {
     if (offset == null) {
         return undefined;
@@ -457,6 +507,16 @@ function mergeToastClassNames(base, override) {
         return base;
     return { ...base, ...override };
 }
+/** Newest measured height in the stack. Skips the front toast until it has been measured. */
+function resolveFrontToastHeightPx(toasts, heights) {
+    for (let i = toasts.length - 1; i >= 0; i--) {
+        const height = heights[toasts[i].id];
+        if (height) {
+            return height;
+        }
+    }
+    return undefined;
+}
 class BetterToastItem {
     /** Shared toaster service (e.g. dismiss from the close button). */
     toaster = inject(ToasterService);
@@ -480,9 +540,6 @@ class BetterToastItem {
     /** Which icon and color treatment to show for this row. */
     variant = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Vertical stack offset in px; bound to `--offset` on the host for layout. */
-    offset = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
     /** When false, the dismiss control is not rendered (toasts may still auto-dismiss or be cleared via the service). */
     closeButton = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
@@ -501,6 +558,14 @@ class BetterToastItem {
     /** Stack anchor from `<better-toaster [position]>` — drives swipe axis and `data-swipe-direction`. */
     stackPosition = input('bottom-right', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stackPosition" }] : /* istanbul ignore next */ []));
+    /** True while the stack is hovered or focus is inside it (expanded layout). */
+    stackExpanded = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackExpanded" }] : /* istanbul ignore next */ []));
+    /** True when this toast is the newest (front) layer in the stack. */
+    stackFront = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackFront" }] : /* istanbul ignore next */ []));
+    /** Tells the parent whether the pointer is still over the toast stack. */
+    stackHover = output();
     /**
      * Color palette from `<better-toaster [theme]>`; mirrored on the host as `data-theme`
      * so item-scoped CSS can react to the chosen mode without `:host-context()`.
@@ -509,6 +574,15 @@ class BetterToastItem {
     ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
     /** Emits the measured host height in px once after the first render so the parent can stack siblings. */
     heightChange = output();
+    /** Natural host height in px, captured once after first paint (used to restore height on expand). */
+    initialHeight = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialHeight" }] : /* istanbul ignore next */ []));
+    /** Bound as `--initial-height` so collapsed layers can return to their own size. */
+    initialHeightCss = computed(() => {
+        const height = this.initialHeight();
+        return height ? `${height}px` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialHeightCss" }] : /* istanbul ignore next */ []));
     /**
      * Stacked title + optional secondary line: {@link ToastVariant} **`description`**, or any variant with
      * non-empty {@link ToasterItem.description} ({@link ToastOptions.description} on `show` / `success` / etc.).
@@ -569,12 +643,6 @@ class BetterToastItem {
         return true;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldShowIconColumn" }] : /* istanbul ignore next */ []));
-    /** Bound to {@link ToasterItem.componentInputs} for headless (`NgComponentOutlet`) toasts. */
-    componentOutletInputs = computed(() => this.toast()?.componentInputs ?? {}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "componentOutletInputs" }] : /* istanbul ignore next */ []));
-    /** Bound to {@link ToasterItem.contentComponentInputs} for {@link ToasterService.custom} body components. */
-    contentComponentOutletInputs = computed(() => this.toast()?.contentComponentInputs ?? {}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentComponentOutletInputs" }] : /* istanbul ignore next */ []));
     /** When true, host uses no default toast chrome (border, padding, surface) — only stack + motion. */
     isHeadless = computed(() => this.toast()?.component != null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isHeadless" }] : /* istanbul ignore next */ []));
@@ -587,6 +655,7 @@ class BetterToastItem {
     constructor() {
         afterNextRender(() => {
             const height = this.host.nativeElement.offsetHeight;
+            this.initialHeight.set(height);
             this.heightChange.emit(height);
         });
     }
@@ -596,10 +665,9 @@ class BetterToastItem {
     tracking = false;
     startY = 0;
     pointerId = -1;
-    dragStartThreshold = 0;
     swipeCloseThreshold = 30;
     /** Transform applied when swipe-dismiss completes (matches leave direction / headless centering). */
-    swipeDismissTransform = computed(() => {
+    swipeDismissTransform() {
         const pos = this.stackPosition();
         const down = this.swipeDirection() === 'down';
         const y = down ? '130%' : '-130%';
@@ -607,8 +675,7 @@ class BetterToastItem {
             return `translateX(-50%) translateY(${y})`;
         }
         return `translateY(${y})`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "swipeDismissTransform" }] : /* istanbul ignore next */ []));
+    }
     /** Prevents swipe-to-dismiss from starting when pressing the row action / cancel control. */
     onRowButtonPointerDown(event) {
         event.stopPropagation();
@@ -628,15 +695,26 @@ class BetterToastItem {
      * Pauses auto-dismiss when the pointer enters the toast.
      */
     onPointerEnter() {
+        this.stackHover.emit(true);
         const id = this.toast()?.id;
         if (id) {
             this.toaster.pauseAutoDismiss(id);
         }
     }
     /**
-     * Resumes auto-dismiss when the pointer leaves the toast.
+     * Resumes auto-dismiss when a hover pointer leaves the toast stack.
+     * Moving onto a sibling toast keeps the stack expanded.
+     * Touch/pen leave is ignored: the stack stays expanded until a tap outside.
      */
-    onPointerLeave() {
+    onPointerLeave(event) {
+        if (isNonHoverPointer(event)) {
+            return;
+        }
+        const stillInStack = isInsideToastItem(event.relatedTarget);
+        this.stackHover.emit(stillInStack);
+        if (stillInStack || this.stackExpanded()) {
+            return;
+        }
         const id = this.toast()?.id;
         if (id) {
             this.toaster.resumeAutoDismiss(id);
@@ -666,13 +744,7 @@ class BetterToastItem {
         const down = this.swipeDirection() === 'down';
         const dragDy = down ? Math.max(0, rawDy) : Math.min(0, rawDy);
         if (!this.isDragging()) {
-            const passed = this.dragStartThreshold > 0
-                ? down
-                    ? rawDy >= this.dragStartThreshold
-                    : rawDy <= -this.dragStartThreshold
-                : down
-                    ? rawDy > 0
-                    : rawDy < 0;
+            const passed = down ? rawDy > 0 : rawDy < 0;
             if (passed) {
                 this.isDragging.set(true);
                 el.setPointerCapture(this.pointerId);
@@ -733,97 +805,52 @@ class BetterToastItem {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: BetterToastItem, isStandalone: true, selector: "li[betterToastItem]", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: false, transformFunction: null }, toasterStyle: { classPropertyName: "toasterStyle", publicName: "toasterStyle", isSignal: true, isRequired: false, transformFunction: null }, toasterClassNames: { classPropertyName: "toasterClassNames", publicName: "toasterClassNames", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: true, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, customIcons: { classPropertyName: "customIcons", publicName: "customIcons", isSignal: true, isRequired: false, transformFunction: null }, dismissButtonAriaLabel: { classPropertyName: "dismissButtonAriaLabel", publicName: "dismissButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stackPosition: { classPropertyName: "stackPosition", publicName: "stackPosition", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { heightChange: "heightChange" }, host: { attributes: { "role": "listitem", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerCancel()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class": "resolvedClassNames()?.toast", "attr.data-variant": "variant()", "attr.data-icon": "shouldShowIconColumn() ? \"true\" : \"false\"", "attr.data-headless": "isHeadless() ? \"true\" : null", "attr.data-swipe-direction": "swipeDirection()", "attr.data-theme": "theme()", "style.--offset": "offset() + \"px\"", "style": "isHeadless() ? undefined : hostStyle()", "animate.leave": "\"leave\"" }, classAttribute: "toast" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: BetterToastItem, isStandalone: true, selector: "li[betterToastItem]", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: false, transformFunction: null }, toasterStyle: { classPropertyName: "toasterStyle", publicName: "toasterStyle", isSignal: true, isRequired: false, transformFunction: null }, toasterClassNames: { classPropertyName: "toasterClassNames", publicName: "toasterClassNames", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, customIcons: { classPropertyName: "customIcons", publicName: "customIcons", isSignal: true, isRequired: false, transformFunction: null }, dismissButtonAriaLabel: { classPropertyName: "dismissButtonAriaLabel", publicName: "dismissButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stackPosition: { classPropertyName: "stackPosition", publicName: "stackPosition", isSignal: true, isRequired: false, transformFunction: null }, stackExpanded: { classPropertyName: "stackExpanded", publicName: "stackExpanded", isSignal: true, isRequired: false, transformFunction: null }, stackFront: { classPropertyName: "stackFront", publicName: "stackFront", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stackHover: "stackHover", heightChange: "heightChange" }, host: { attributes: { "role": "listitem", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerCancel()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave($event)" }, properties: { "class": "resolvedClassNames()?.toast", "attr.data-variant": "variant()", "attr.data-icon": "shouldShowIconColumn() ? \"true\" : \"false\"", "attr.data-headless": "isHeadless() ? \"true\" : null", "attr.data-swipe-direction": "swipeDirection()", "attr.data-theme": "theme()", "style.--initial-height": "initialHeightCss()", "style": "isHeadless() ? undefined : hostStyle()", "animate.leave": "\"leave\"" }, classAttribute: "toast" }, ngImport: i0, template: `
     @if (toast()?.component) {
-      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
+      <ng-container
+        [betterToastOutlet]="toast()!.component!"
+        [betterToastOutletInputs]="toast()?.componentInputs"
+      />
     } @else {
       @if (shouldShowIconColumn()) {
         <span class="toast-icon" aria-hidden="true">
           @if (toast()?.icon) {
-            <ng-container *ngComponentOutlet="toast()!.icon!" />
+            <ng-container [betterToastOutlet]="toast()!.icon!" />
           } @else if (iconComponent(); as IconCmp) {
-            <ng-container *ngComponentOutlet="IconCmp" />
+            <ng-container [betterToastOutlet]="IconCmp" />
+          } @else if (variant() === 'loading') {
+            <div class="toast-icon-loading"></div>
           } @else {
-            @switch (variant()) {
-              @case ('success') {
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="9"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                  />
-                  <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                    d="M8.48 12.22 10.9 14.64 15.74 9.14"
-                  />
-                </svg>
-              }
-              @case ('error') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+            <svg
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke-width]="variant() === 'error' ? 2 : 1.75"
+            >
+              @switch (variant()) {
+                @case ('success') {
+                  <circle cx="12" cy="12" r="9" />
+                  <path d="M8.48 12.22 10.9 14.64 15.74 9.14" />
+                }
+                @case ('error') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="9" y1="9" x2="15" y2="15" />
                   <line x1="15" y1="9" x2="9" y2="15" />
-                </svg>
-              }
-              @case ('info') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.75"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+                }
+                @case ('info') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="12" y1="16" x2="12" y2="12" />
                   <line x1="12" y1="8" x2="12.01" y2="8" />
-                </svg>
-              }
-              @case ('warning') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
+                }
+                @case ('warning') {
                   <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
                     d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
                   />
-                </svg>
-              }
-              @case ('loading') {
-                <div class="toast-icon-loading" aria-hidden="true"></div>
+                }
               }
-              @case ('description') {}
-              @case ('default') {}
-            }
+            </svg>
           }
         </span>
       }
@@ -833,10 +860,8 @@ class BetterToastItem {
           @if (toast()?.contentComponent) {
             <div class="msg" [class]="resolvedClassNames()?.message">
               <ng-container
-                *ngComponentOutlet="
-                  toast()!.contentComponent!;
-                  inputs: contentComponentOutletInputs()
-                "
+                [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
               />
             </div>
           } @else {
@@ -852,10 +877,8 @@ class BetterToastItem {
         @if (toast()?.contentComponent) {
           <div class="msg" [class]="resolvedClassNames()?.message">
             <ng-container
-              *ngComponentOutlet="
-                toast()!.contentComponent!;
-                inputs: contentComponentOutletInputs()
-              "
+              [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
             />
           </div>
         } @else {
@@ -864,59 +887,53 @@ class BetterToastItem {
       }
 
       @if (toast()?.toastAction; as rowAction) {
-        @switch (rowAction.role) {
-          @case ('action') {
-            <button
-              type="button"
-              class="toast-row-btn action-btn"
-              [class]="resolvedClassNames()?.actionButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-          @case ('cancel') {
-            <button
-              type="button"
-              class="toast-row-btn cancel-btn"
-              [class]="resolvedClassNames()?.cancelButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-        }
+        <button
+          type="button"
+          class="toast-row-btn"
+          [class.action-btn]="rowAction.role === 'action'"
+          [class.cancel-btn]="rowAction.role === 'cancel'"
+          [class]="
+            rowAction.role === 'action'
+              ? resolvedClassNames()?.actionButton
+              : resolvedClassNames()?.cancelButton
+          "
+          [attr.data-row-btn]="rowAction.role"
+          (pointerdown)="onRowButtonPointerDown($event)"
+          (click)="onToastRowClick($event)"
+        >
+          {{ rowAction.label }}
+        </button>
       }
     }
 
-    @if (closeButton() && !isHeadless()) {
+    @if (closeButton() && !isHeadless() && (stackFront() || stackExpanded())) {
       <button
         type="button"
         class="close-btn"
         [class]="resolvedClassNames()?.closeButton"
+        [animate.enter]="stackFront() ? null : 'close-enter'"
+        [animate.leave]="stackFront() ? null : 'close-leave'"
         (click)="toaster.dismiss(toast()?.id ?? '')"
         [attr.aria-label]="dismissButtonAriaLabel()"
       >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.75"
-            d="M6 18 18 6M6 6l12 12"
-          />
+        <svg
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.75"
+          aria-hidden="true"
+        >
+          <path d="M6 18 18 6M6 6l12 12" />
         </svg>
       </button>
     }
-  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--toast-border-color);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);--toast-line-height: 1.35;font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;scale:1;transition:opacity .4s ease,transform .4s ease,scale .4s ease,box-shadow .2s ease}:host([data-variant=\"loading\"]){touch-action:auto}@media(width>=40rem){:host{width:var(--toast-width)}}:host([data-position^=\"bottom\"]){bottom:0;transform:translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(100%)}}:host([data-position^=\"top\"]){top:0;transform:translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(-100%)}}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1}}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1}}:host([data-variant=\"default\"]) .toast-icon svg,:host([data-variant=\"default\"]) .toast-icon ::ng-deep svg,:host([data-variant=\"description\"]) .toast-icon svg,:host([data-variant=\"description\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){background:var(--toast-success-bg);color:var(--toast-success-text);border-color:var(--toast-success-border)}:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-success-text),var(--toast-success-bg));stroke:light-dark(var(--toast-success-bg),var(--toast-success-text));color:light-dark(var(--toast-success-bg),var(--toast-success-text))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){background:var(--toast-error-bg);color:var(--toast-error-text);border-color:var(--toast-error-border)}:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-error-text),var(--toast-error-bg));stroke:light-dark(var(--toast-error-bg),var(--toast-error-text));color:light-dark(var(--toast-error-bg),var(--toast-error-text))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){background:var(--toast-info-bg);color:var(--toast-info-text);border-color:var(--toast-info-border)}:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-info-text),var(--toast-info-bg));stroke:light-dark(var(--toast-info-bg),var(--toast-info-text));color:light-dark(var(--toast-info-bg),var(--toast-info-text))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){background:var(--toast-warning-bg);color:var(--toast-warning-text);border-color:var(--toast-warning-border)}:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-warning-text),var(--toast-warning-bg));stroke:light-dark(var(--toast-warning-bg),var(--toast-warning-text));color:light-dark(var(--toast-warning-bg),var(--toast-warning-text))}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@media(width>=40rem){:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}}@media(width>=40rem){:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(100%)}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-rich-colors=\"true\"]){background:transparent;color:inherit;border-color:transparent}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:light-dark(var(--toast-color),var(--toast-bg));stroke:light-dark(var(--toast-bg),var(--toast-color));width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}@media(prefers-reduced-motion:reduce){.toast-row-btn:active{transform:none}}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.toast-custom{flex:1;min-width:0;width:100%;font-size:.825rem;font-weight:400;line-height:calc(1.25 / .875)}.toast-custom :first-child{margin-top:0}.toast-custom :last-child{margin-bottom:0}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--toast-border-color);box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .close-btn{border-color:var(--toast-success-border);background:var(--toast-success-bg);color:var(--toast-success-text)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .close-btn{border-color:var(--toast-error-border);background:var(--toast-error-bg);color:var(--toast-error-text)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .close-btn{border-color:var(--toast-info-border);background:var(--toast-info-bg);color:var(--toast-info-text)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .close-btn{border-color:var(--toast-warning-border);background:var(--toast-warning-bg);color:var(--toast-warning-text)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95}:host([data-swipe-direction=\"down\"].leave){transform:translateY(100%)}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(100%)}:host([data-swipe-direction=\"up\"].leave){transform:translateY(-100%)}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(-100%)}@media(prefers-reduced-motion:reduce){:host{transition:none}:host(.leave){scale:1}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(calc(1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-swipe-direction=\"down\"].leave){transform:translateY(calc(-1 * var(--offset, 0px)))}:host([data-swipe-direction=\"up\"].leave){transform:translateY(calc(1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@media(width<40rem){@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}.toast-icon-loading{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--_chrome-bg: var(--toast-bg);--_chrome-fg: var(--toast-color);--_chrome-border: var(--toast-border-color);--_icon-fill: light-dark(var(--toast-color), var(--toast-bg));--_icon-stroke: light-dark(var(--toast-bg), var(--toast-color));--_icon-color: var(--_icon-stroke);--_toast-x: 0%;--_toast-y: 0px;--_toast-enter-y: 0px;--_toast-leave-y: 0px;--toast-line-height: 1.35;--index: 0;--collapsed-peek: 14px;--offset: calc(var(--index, 0) * var(--collapsed-peek));display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--_chrome-border);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;height:var(--initial-height, auto);scale:1;z-index:calc(1000 - var(--index, 0));transform:translate(var(--_toast-x)) translateY(var(--_toast-y));transition:opacity .4s ease,transform .4s ease,scale .4s ease,height .4s ease,box-shadow .2s ease}@starting-style{:host{opacity:0;transform:translate(var(--_toast-x)) translateY(var(--_toast-enter-y))}}:host>*:not(.close-btn){transition:opacity .4s ease}:host([data-expanded=\"true\"]):after{content:\"\";position:absolute;left:0;width:100%;height:calc(var(--toast-gap, 16px) + 1px);bottom:100%;pointer-events:auto}:host([data-variant=\"loading\"]){touch-action:auto}:host([data-position^=\"bottom\"]){bottom:0;transform-origin:50% 100%;--_toast-y: calc(-1 * var(--offset, 0px));--_toast-enter-y: 100%}:host([data-position^=\"top\"]){top:0;transform-origin:50% 0;--_toast-y: calc(1 * var(--offset, 0px));--_toast-enter-y: -100%}:host([data-swipe-direction=\"down\"]){--_toast-leave-y: 100%}:host([data-swipe-direction=\"up\"]){--_toast-leave-y: -100%}:host([data-expanded=\"false\"]){scale:calc(1 - var(--index, 0) * .05)}:host([data-expanded=\"false\"]:not(:last-child)){height:var(--front-toast-height);overflow:hidden}:host([data-expanded=\"false\"]:not(:last-child):not([data-headless=\"true\"]))>*:not(.close-btn){opacity:0;pointer-events:none}:host([data-expanded=\"false\"]:nth-last-child(n + 4)){opacity:0;pointer-events:none}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){--_chrome-bg: var(--toast-success-bg);--_chrome-fg: var(--toast-success-text);--_chrome-border: var(--toast-success-border)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){--_chrome-bg: var(--toast-error-bg);--_chrome-fg: var(--toast-error-text);--_chrome-border: var(--toast-error-border)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){--_chrome-bg: var(--toast-info-bg);--_chrome-fg: var(--toast-info-text);--_chrome-border: var(--toast-info-border)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){--_chrome-bg: var(--toast-warning-bg);--_chrome-fg: var(--toast-warning-text);--_chrome-border: var(--toast-warning-border)}:host([data-rich-colors=\"true\"]:is([data-variant=\"success\"],[data-variant=\"error\"],[data-variant=\"info\"],[data-variant=\"warning\"])){--_icon-fill: light-dark(var(--_chrome-fg), var(--_chrome-bg));--_icon-stroke: light-dark(var(--_chrome-bg), var(--_chrome-fg));--_icon-color: var(--_icon-stroke)}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@starting-style{:host([data-headless=\"true\"]){opacity:1}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]),:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;--_toast-x: -50%}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}@media(width>=40rem){:host{width:var(--toast-width)}:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]),:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;--_toast-x: -50%}}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:var(--_icon-fill);stroke:var(--_icon-stroke);color:var(--_icon-color);width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--_chrome-border);box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:1;scale:1;filter:blur(0)}.close-btn.close-enter{opacity:1;scale:1;filter:blur(0);transition:opacity .18s cubic-bezier(.19,1,.22,1),scale .18s cubic-bezier(.19,1,.22,1),filter .18s cubic-bezier(.19,1,.22,1)}@starting-style{.close-btn.close-enter{opacity:0;scale:.92;filter:blur(4px)}}.close-btn.close-leave{opacity:0;scale:.92;filter:blur(4px);pointer-events:none;transition:opacity .15s cubic-bezier(.19,1,.22,1),scale .15s cubic-bezier(.19,1,.22,1),filter .15s cubic-bezier(.19,1,.22,1)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95;transform:translate(var(--_toast-x)) translateY(var(--_toast-leave-y))}@media(prefers-reduced-motion:reduce){:host{transition:none}:host([data-position]){--_toast-enter-y: var(--_toast-y);--_toast-leave-y: var(--_toast-y)}:host>*{transition:none}:host(.leave){scale:1}.toast-row-btn:active{transform:none}.close-btn.close-enter{scale:1;filter:none;transition:opacity .15s ease}@starting-style{.close-btn.close-enter{opacity:0;scale:1;filter:none}}.close-btn.close-leave{scale:1;filter:none;transition:opacity .15s ease}.toast-icon-loading{animation:none}}\n"], dependencies: [{ kind: "directive", type: BetterToastOutlet, selector: "[betterToastOutlet]", inputs: ["betterToastOutlet", "betterToastOutletInputs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastItem, decorators: [{
             type: Component,
-            args: [{ selector: 'li[betterToastItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], host: {
+            args: [{ selector: 'li[betterToastItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BetterToastOutlet], host: {
                         role: 'listitem',
                         tabindex: '0',
                         class: 'toast',
@@ -926,7 +943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '[attr.data-headless]': 'isHeadless() ? "true" : null',
                         '[attr.data-swipe-direction]': 'swipeDirection()',
                         '[attr.data-theme]': 'theme()',
-                        '[style.--offset]': 'offset() + "px"',
+                        '[style.--initial-height]': 'initialHeightCss()',
                         '[style]': 'isHeadless() ? undefined : hostStyle()',
                         '[animate.leave]': '"leave"',
                         '(pointerdown)': 'onPointerDown($event)',
@@ -934,98 +951,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '(pointerup)': 'onPointerUp()',
                         '(pointercancel)': 'onPointerCancel()',
                         '(pointerenter)': 'onPointerEnter()',
-                        '(pointerleave)': 'onPointerLeave()',
+                        '(pointerleave)': 'onPointerLeave($event)',
                     }, template: `
     @if (toast()?.component) {
-      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
+      <ng-container
+        [betterToastOutlet]="toast()!.component!"
+        [betterToastOutletInputs]="toast()?.componentInputs"
+      />
     } @else {
       @if (shouldShowIconColumn()) {
         <span class="toast-icon" aria-hidden="true">
           @if (toast()?.icon) {
-            <ng-container *ngComponentOutlet="toast()!.icon!" />
+            <ng-container [betterToastOutlet]="toast()!.icon!" />
           } @else if (iconComponent(); as IconCmp) {
-            <ng-container *ngComponentOutlet="IconCmp" />
+            <ng-container [betterToastOutlet]="IconCmp" />
+          } @else if (variant() === 'loading') {
+            <div class="toast-icon-loading"></div>
           } @else {
-            @switch (variant()) {
-              @case ('success') {
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="9"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                  />
-                  <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                    d="M8.48 12.22 10.9 14.64 15.74 9.14"
-                  />
-                </svg>
-              }
-              @case ('error') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+            <svg
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke-width]="variant() === 'error' ? 2 : 1.75"
+            >
+              @switch (variant()) {
+                @case ('success') {
+                  <circle cx="12" cy="12" r="9" />
+                  <path d="M8.48 12.22 10.9 14.64 15.74 9.14" />
+                }
+                @case ('error') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="9" y1="9" x2="15" y2="15" />
                   <line x1="15" y1="9" x2="9" y2="15" />
-                </svg>
-              }
-              @case ('info') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.75"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+                }
+                @case ('info') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="12" y1="16" x2="12" y2="12" />
                   <line x1="12" y1="8" x2="12.01" y2="8" />
-                </svg>
-              }
-              @case ('warning') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
+                }
+                @case ('warning') {
                   <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
                     d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
                   />
-                </svg>
-              }
-              @case ('loading') {
-                <div class="toast-icon-loading" aria-hidden="true"></div>
+                }
               }
-              @case ('description') {}
-              @case ('default') {}
-            }
+            </svg>
           }
         </span>
       }
@@ -1035,10 +1007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
           @if (toast()?.contentComponent) {
             <div class="msg" [class]="resolvedClassNames()?.message">
               <ng-container
-                *ngComponentOutlet="
-                  toast()!.contentComponent!;
-                  inputs: contentComponentOutletInputs()
-                "
+                [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
               />
             </div>
           } @else {
@@ -1054,10 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
         @if (toast()?.contentComponent) {
           <div class="msg" [class]="resolvedClassNames()?.message">
             <ng-container
-              *ngComponentOutlet="
-                toast()!.contentComponent!;
-                inputs: contentComponentOutletInputs()
-              "
+              [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
             />
           </div>
         } @else {
@@ -1066,58 +1034,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       }
 
       @if (toast()?.toastAction; as rowAction) {
-        @switch (rowAction.role) {
-          @case ('action') {
-            <button
-              type="button"
-              class="toast-row-btn action-btn"
-              [class]="resolvedClassNames()?.actionButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-          @case ('cancel') {
-            <button
-              type="button"
-              class="toast-row-btn cancel-btn"
-              [class]="resolvedClassNames()?.cancelButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-        }
+        <button
+          type="button"
+          class="toast-row-btn"
+          [class.action-btn]="rowAction.role === 'action'"
+          [class.cancel-btn]="rowAction.role === 'cancel'"
+          [class]="
+            rowAction.role === 'action'
+              ? resolvedClassNames()?.actionButton
+              : resolvedClassNames()?.cancelButton
+          "
+          [attr.data-row-btn]="rowAction.role"
+          (pointerdown)="onRowButtonPointerDown($event)"
+          (click)="onToastRowClick($event)"
+        >
+          {{ rowAction.label }}
+        </button>
       }
     }
 
-    @if (closeButton() && !isHeadless()) {
+    @if (closeButton() && !isHeadless() && (stackFront() || stackExpanded())) {
       <button
         type="button"
         class="close-btn"
         [class]="resolvedClassNames()?.closeButton"
+        [animate.enter]="stackFront() ? null : 'close-enter'"
+        [animate.leave]="stackFront() ? null : 'close-leave'"
         (click)="toaster.dismiss(toast()?.id ?? '')"
         [attr.aria-label]="dismissButtonAriaLabel()"
       >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.75"
-            d="M6 18 18 6M6 6l12 12"
-          />
+        <svg
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.75"
+          aria-hidden="true"
+        >
+          <path d="M6 18 18 6M6 6l12 12" />
         </svg>
       </button>
     }
-  `, styles: [":host{display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--toast-border-color);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);--toast-line-height: 1.35;font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;scale:1;transition:opacity .4s ease,transform .4s ease,scale .4s ease,box-shadow .2s ease}:host([data-variant=\"loading\"]){touch-action:auto}@media(width>=40rem){:host{width:var(--toast-width)}}:host([data-position^=\"bottom\"]){bottom:0;transform:translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(100%)}}:host([data-position^=\"top\"]){top:0;transform:translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(-100%)}}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1}}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1}}:host([data-variant=\"default\"]) .toast-icon svg,:host([data-variant=\"default\"]) .toast-icon ::ng-deep svg,:host([data-variant=\"description\"]) .toast-icon svg,:host([data-variant=\"description\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){background:var(--toast-success-bg);color:var(--toast-success-text);border-color:var(--toast-success-border)}:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-success-text),var(--toast-success-bg));stroke:light-dark(var(--toast-success-bg),var(--toast-success-text));color:light-dark(var(--toast-success-bg),var(--toast-success-text))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){background:var(--toast-error-bg);color:var(--toast-error-text);border-color:var(--toast-error-border)}:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-error-text),var(--toast-error-bg));stroke:light-dark(var(--toast-error-bg),var(--toast-error-text));color:light-dark(var(--toast-error-bg),var(--toast-error-text))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){background:var(--toast-info-bg);color:var(--toast-info-text);border-color:var(--toast-info-border)}:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-info-text),var(--toast-info-bg));stroke:light-dark(var(--toast-info-bg),var(--toast-info-text));color:light-dark(var(--toast-info-bg),var(--toast-info-text))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){background:var(--toast-warning-bg);color:var(--toast-warning-text);border-color:var(--toast-warning-border)}:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-warning-text),var(--toast-warning-bg));stroke:light-dark(var(--toast-warning-bg),var(--toast-warning-text));color:light-dark(var(--toast-warning-bg),var(--toast-warning-text))}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@media(width>=40rem){:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}}@media(width>=40rem){:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(100%)}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-rich-colors=\"true\"]){background:transparent;color:inherit;border-color:transparent}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:light-dark(var(--toast-color),var(--toast-bg));stroke:light-dark(var(--toast-bg),var(--toast-color));width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}@media(prefers-reduced-motion:reduce){.toast-row-btn:active{transform:none}}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.toast-custom{flex:1;min-width:0;width:100%;font-size:.825rem;font-weight:400;line-height:calc(1.25 / .875)}.toast-custom :first-child{margin-top:0}.toast-custom :last-child{margin-bottom:0}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--toast-border-color);box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .close-btn{border-color:var(--toast-success-border);background:var(--toast-success-bg);color:var(--toast-success-text)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .close-btn{border-color:var(--toast-error-border);background:var(--toast-error-bg);color:var(--toast-error-text)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .close-btn{border-color:var(--toast-info-border);background:var(--toast-info-bg);color:var(--toast-info-text)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .close-btn{border-color:var(--toast-warning-border);background:var(--toast-warning-bg);color:var(--toast-warning-text)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95}:host([data-swipe-direction=\"down\"].leave){transform:translateY(100%)}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(100%)}:host([data-swipe-direction=\"up\"].leave){transform:translateY(-100%)}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(-100%)}@media(prefers-reduced-motion:reduce){:host{transition:none}:host(.leave){scale:1}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(calc(1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-swipe-direction=\"down\"].leave){transform:translateY(calc(-1 * var(--offset, 0px)))}:host([data-swipe-direction=\"up\"].leave){transform:translateY(calc(1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@media(width<40rem){@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}.toast-icon-loading{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: false }] }], toasterStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterStyle", required: false }] }], toasterClassNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterClassNames", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: true }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], customIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcons", required: false }] }], dismissButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissButtonAriaLabel", required: false }] }], stackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackPosition", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
+  `, styles: [":host{--_chrome-bg: var(--toast-bg);--_chrome-fg: var(--toast-color);--_chrome-border: var(--toast-border-color);--_icon-fill: light-dark(var(--toast-color), var(--toast-bg));--_icon-stroke: light-dark(var(--toast-bg), var(--toast-color));--_icon-color: var(--_icon-stroke);--_toast-x: 0%;--_toast-y: 0px;--_toast-enter-y: 0px;--_toast-leave-y: 0px;--toast-line-height: 1.35;--index: 0;--collapsed-peek: 14px;--offset: calc(var(--index, 0) * var(--collapsed-peek));display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--_chrome-border);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;height:var(--initial-height, auto);scale:1;z-index:calc(1000 - var(--index, 0));transform:translate(var(--_toast-x)) translateY(var(--_toast-y));transition:opacity .4s ease,transform .4s ease,scale .4s ease,height .4s ease,box-shadow .2s ease}@starting-style{:host{opacity:0;transform:translate(var(--_toast-x)) translateY(var(--_toast-enter-y))}}:host>*:not(.close-btn){transition:opacity .4s ease}:host([data-expanded=\"true\"]):after{content:\"\";position:absolute;left:0;width:100%;height:calc(var(--toast-gap, 16px) + 1px);bottom:100%;pointer-events:auto}:host([data-variant=\"loading\"]){touch-action:auto}:host([data-position^=\"bottom\"]){bottom:0;transform-origin:50% 100%;--_toast-y: calc(-1 * var(--offset, 0px));--_toast-enter-y: 100%}:host([data-position^=\"top\"]){top:0;transform-origin:50% 0;--_toast-y: calc(1 * var(--offset, 0px));--_toast-enter-y: -100%}:host([data-swipe-direction=\"down\"]){--_toast-leave-y: 100%}:host([data-swipe-direction=\"up\"]){--_toast-leave-y: -100%}:host([data-expanded=\"false\"]){scale:calc(1 - var(--index, 0) * .05)}:host([data-expanded=\"false\"]:not(:last-child)){height:var(--front-toast-height);overflow:hidden}:host([data-expanded=\"false\"]:not(:last-child):not([data-headless=\"true\"]))>*:not(.close-btn){opacity:0;pointer-events:none}:host([data-expanded=\"false\"]:nth-last-child(n + 4)){opacity:0;pointer-events:none}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){--_chrome-bg: var(--toast-success-bg);--_chrome-fg: var(--toast-success-text);--_chrome-border: var(--toast-success-border)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){--_chrome-bg: var(--toast-error-bg);--_chrome-fg: var(--toast-error-text);--_chrome-border: var(--toast-error-border)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){--_chrome-bg: var(--toast-info-bg);--_chrome-fg: var(--toast-info-text);--_chrome-border: var(--toast-info-border)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){--_chrome-bg: var(--toast-warning-bg);--_chrome-fg: var(--toast-warning-text);--_chrome-border: var(--toast-warning-border)}:host([data-rich-colors=\"true\"]:is([data-variant=\"success\"],[data-variant=\"error\"],[data-variant=\"info\"],[data-variant=\"warning\"])){--_icon-fill: light-dark(var(--_chrome-fg), var(--_chrome-bg));--_icon-stroke: light-dark(var(--_chrome-bg), var(--_chrome-fg));--_icon-color: var(--_icon-stroke)}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@starting-style{:host([data-headless=\"true\"]){opacity:1}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]),:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;--_toast-x: -50%}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}@media(width>=40rem){:host{width:var(--toast-width)}:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]),:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;--_toast-x: -50%}}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:var(--_icon-fill);stroke:var(--_icon-stroke);color:var(--_icon-color);width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--_chrome-border);box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:1;scale:1;filter:blur(0)}.close-btn.close-enter{opacity:1;scale:1;filter:blur(0);transition:opacity .18s cubic-bezier(.19,1,.22,1),scale .18s cubic-bezier(.19,1,.22,1),filter .18s cubic-bezier(.19,1,.22,1)}@starting-style{.close-btn.close-enter{opacity:0;scale:.92;filter:blur(4px)}}.close-btn.close-leave{opacity:0;scale:.92;filter:blur(4px);pointer-events:none;transition:opacity .15s cubic-bezier(.19,1,.22,1),scale .15s cubic-bezier(.19,1,.22,1),filter .15s cubic-bezier(.19,1,.22,1)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95;transform:translate(var(--_toast-x)) translateY(var(--_toast-leave-y))}@media(prefers-reduced-motion:reduce){:host{transition:none}:host([data-position]){--_toast-enter-y: var(--_toast-y);--_toast-leave-y: var(--_toast-y)}:host>*{transition:none}:host(.leave){scale:1}.toast-row-btn:active{transform:none}.close-btn.close-enter{scale:1;filter:none;transition:opacity .15s ease}@starting-style{.close-btn.close-enter{opacity:0;scale:1;filter:none}}.close-btn.close-leave{scale:1;filter:none;transition:opacity .15s ease}.toast-icon-loading{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: false }] }], toasterStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterStyle", required: false }] }], toasterClassNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterClassNames", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], customIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcons", required: false }] }], dismissButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissButtonAriaLabel", required: false }] }], stackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackPosition", required: false }] }], stackExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackExpanded", required: false }] }], stackFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackFront", required: false }] }], stackHover: [{ type: i0.Output, args: ["stackHover"] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
 /**
  * Renders the toaster stack. Add once near the root of your app (e.g. in `App`).
+ * With `[stacked]="true"` (default), extra toasts collapse into a 3-layer card stack (latest in front); hover, focus, or a press on touch expands the full list.
+ * Set `[stacked]="false"` to keep every toast fully visible, spaced by height plus gap.
  * Variant-colored surfaces are off by default; set `[richColors]="true"` to enable them.
  * Set `[duration]` for auto-dismiss when service helpers omit their duration argument.
  * Use **`duration="Infinity"`** (that exact literal) or `[duration]="…"` with a number / {@link TOAST_DURATION_MANUAL_DISMISS} for persist until dismissed; `0` still works.
@@ -1138,14 +1102,16 @@ class BetterToaster {
      * `0` still works. Does not apply to `loading()`. Defaults to the library default (4000ms).
      */
     durationMs = input(DEFAULT_TOAST_DURATION_MS, { ...(ngDevMode ? { debugName: "durationMs" } : /* istanbul ignore next */ {}), alias: 'duration',
-        transform: (value) => {
-            const durationMs = parseToasterDurationMs(value);
-            this.toaster.setDefaultDurationMs(durationMs);
-            return durationMs;
-        } });
+        transform: parseToasterDurationMs });
     /** Where the stack is anchored on the viewport. */
     position = input('bottom-right', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * When true (default), extra toasts collapse into a 3-layer card stack; hover, focus, or a press on touch expands the list.
+     * When false, every toast stays fully visible, spaced by measured height plus gap.
+     */
+    stacked = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
     /**
      * Viewport inset for the toast stack: a single CSS value for all sides, or an object with any of `top` / `right` / `bottom` / `left`.
      * Binds `--toast-offset-top` / `right` / `bottom` / `left` on `.toast-container`.
@@ -1198,41 +1164,58 @@ class BetterToaster {
     /** Measured height in px per toast id, updated when a toast item reports `heightChange`. */
     heights = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []));
+    /** Gap between expanded toasts; kept in sync with layout math and the CSS hit-area. */
+    stackGapPx = GAP;
+    /** Height of the newest measured toast, used so collapsed layers share one silhouette. */
+    frontToastHeightCss = computed(() => {
+        const height = resolveFrontToastHeightPx(this.toaster.toasts(), this.heights());
+        return height ? `${height}px` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frontToastHeightCss" }] : /* istanbul ignore next */ []));
+    /** Pointer is over a toast (or moving between toasts in the stack). */
+    hovering = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hovering" }] : /* istanbul ignore next */ []));
+    /** Keyboard focus is inside the toast list. */
+    focusWithin = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusWithin" }] : /* istanbul ignore next */ []));
+    /** Hover or focus: expands a stacked list and pauses auto-dismiss. */
+    expanded = computed(() => this.hovering() || this.focusWithin(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Layout uses the expanded list while stacked is off, or while the stack is hovered / focused. */
+    layoutExpanded = computed(() => !this.stacked() || this.expanded(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutExpanded" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.toaster.setDefaultDurationMs(this.durationMs());
+        });
+        effect(() => {
+            if (this.toaster.toasts().length === 0) {
+                this.hovering.set(false);
+                this.focusWithin.set(false);
+            }
+        });
+        effect(() => {
+            if (!this.expanded()) {
+                return;
+            }
+            for (const toast of this.toaster.toasts()) {
+                this.toaster.pauseAutoDismiss(toast.id);
+            }
+        });
+    }
     /** Resolved `aria-label` for the outer `<section>` live region. */
     notificationsRegionAriaLabel = computed(() => this.accessibilityLabels()?.notificationsRegion ?? DEFAULT_TOASTER_ARIA_NOTIFICATIONS_REGION, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "notificationsRegionAriaLabel" }] : /* istanbul ignore next */ []));
     /** Resolved `aria-label` for each toast’s dismiss control. */
     dismissButtonAriaLabel = computed(() => this.accessibilityLabels()?.dismissButton ?? DEFAULT_TOASTER_ARIA_DISMISS_BUTTON, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dismissButtonAriaLabel" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack. */
-    offsetTop = computed(() => resolveToasterOffsetSide(this.offset(), 'top'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetTop" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack. */
-    offsetRight = computed(() => resolveToasterOffsetSide(this.offset(), 'right'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetRight" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack. */
-    offsetBottom = computed(() => resolveToasterOffsetSide(this.offset(), 'bottom'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetBottom" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack. */
-    offsetLeft = computed(() => resolveToasterOffsetSide(this.offset(), 'left'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetLeft" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack on narrow layouts. */
-    mobileOffsetTop = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'top'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetTop" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack on narrow layouts. */
-    mobileOffsetRight = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'right'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetRight" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack on narrow layouts. */
-    mobileOffsetBottom = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'bottom'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetBottom" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack on narrow layouts. */
-    mobileOffsetLeft = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'left'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetLeft" }] : /* istanbul ignore next */ []));
+    offsetSide = resolveToasterOffsetSide;
     /**
-     * Vertical offset in px for each toast id so stacked toasts do not overlap.
-     * Walks newest-to-oldest (end of the list first): the latest toast has offset 0; each older toast sits above by the sum of heights below plus the inter-toast gap.
+     * `--index` is the stack depth: last item is 0 (front), older items count up.
+     * Collapsed peek, scale, front, and hidden layers are CSS from that index / `:last-child`.
+     * Expanded offset still needs measured heights: each toast sits at the sum of those in front plus gap.
      */
-    offsets = computed(() => {
+    expandedOffsets = computed(() => {
         const toastsList = this.toaster.toasts();
         const heights = this.heights();
         const result = {};
@@ -1244,19 +1227,89 @@ class BetterToaster {
         }
         return result;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsets" }] : /* istanbul ignore next */ []));
-    /** Merges a toast item’s reported height into `heights` so `offsets` can recompute. */
+    ...(ngDevMode ? [{ debugName: "expandedOffsets" }] : /* istanbul ignore next */ []));
+    /** Oldest toasts past the 3 visible collapsed layers. */
+    hiddenToastIds = computed(() => {
+        if (this.layoutExpanded()) {
+            return new Set();
+        }
+        const toasts = this.toaster.toasts();
+        const hidden = new Set();
+        const cutoff = toasts.length - VISIBLE_TOASTS;
+        for (let i = 0; i < cutoff; i++) {
+            hidden.add(toasts[i].id);
+        }
+        return hidden;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenToastIds" }] : /* istanbul ignore next */ []));
+    /** Expanded stack only: measured height + gap. Collapsed `--offset` comes from `--index` in CSS. */
+    toastOffsetCss(toastId) {
+        if (!this.layoutExpanded()) {
+            return null;
+        }
+        return `${this.expandedOffsets()[toastId] ?? 0}px`;
+    }
+    /** Merges a toast item’s reported height into `heights` so expanded offsets can recompute. */
     onHeightChange(toastId, height) {
         this.heights.update((h) => ({ ...h, [toastId]: height }));
     }
+    /** Expands the stack and pauses auto-dismiss while the pointer is over any toast. */
+    onItemStackHover(hovering) {
+        this.hovering.set(hovering);
+        if (hovering || this.focusWithin()) {
+            this.pauseAllAutoDismiss();
+        }
+        else {
+            this.resumeAllAutoDismiss();
+        }
+    }
     /**
-     * Initializes the toaster service with the default duration.
+     * Collapses a touch/pen sticky expand when the next press is outside the stack.
+     * Hover pointers already collapse on `pointerleave`.
      */
-    ngOnInit() {
-        this.toaster.setDefaultDurationMs(this.durationMs());
+    onDocumentPointerDown(event) {
+        if (!this.hovering() || isInsideToastItem(event.target)) {
+            return;
+        }
+        this.hovering.set(false);
+        if (!this.focusWithin()) {
+            this.resumeAllAutoDismiss();
+        }
+    }
+    /** Expands the stack when a toast (or dismiss control) receives keyboard focus. */
+    onStackFocusIn(event) {
+        if (!isInsideToastItem(event.target)) {
+            if (event.target instanceof HTMLElement) {
+                event.target.blur();
+            }
+            return;
+        }
+        this.focusWithin.set(true);
+        this.pauseAllAutoDismiss();
+    }
+    /** Collapses when focus leaves the list, unless the pointer is still over it. */
+    onStackFocusOut(event) {
+        const next = event.relatedTarget;
+        if (isInsideToastItem(next)) {
+            return;
+        }
+        this.focusWithin.set(false);
+        if (!this.hovering()) {
+            this.resumeAllAutoDismiss();
+        }
+    }
+    pauseAllAutoDismiss() {
+        for (const toast of this.toaster.toasts()) {
+            this.toaster.pauseAutoDismiss(toast.id);
+        }
+    }
+    resumeAllAutoDismiss() {
+        for (const toast of this.toaster.toasts()) {
+            this.toaster.resumeAutoDismiss(toast.id);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: BetterToaster, isStandalone: true, selector: "better-toaster", inputs: { durationMs: { classPropertyName: "durationMs", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, mobileOffset: { classPropertyName: "mobileOffset", publicName: "mobileOffset", isSignal: true, isRequired: false, transformFunction: null }, richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabels: { classPropertyName: "accessibilityLabels", publicName: "accessibilityLabels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: BetterToaster, isStandalone: true, selector: "better-toaster", inputs: { durationMs: { classPropertyName: "durationMs", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, mobileOffset: { classPropertyName: "mobileOffset", publicName: "mobileOffset", isSignal: true, isRequired: false, transformFunction: null }, richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabels: { classPropertyName: "accessibilityLabels", publicName: "accessibilityLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, ngImport: i0, template: `
     <section
       [attr.aria-label]="notificationsRegionAriaLabel()"
       tabindex="-1"
@@ -1266,18 +1319,24 @@ class BetterToaster {
     >
       <ol
         class="toast-container"
-        [style.--toast-offset-top]="offsetTop()"
-        [style.--toast-offset-right]="offsetRight()"
-        [style.--toast-offset-bottom]="offsetBottom()"
-        [style.--toast-offset-left]="offsetLeft()"
-        [style.--toast-offset-mobile-top]="mobileOffsetTop()"
-        [style.--toast-offset-mobile-right]="mobileOffsetRight()"
-        [style.--toast-offset-mobile-bottom]="mobileOffsetBottom()"
-        [style.--toast-offset-mobile-left]="mobileOffsetLeft()"
+        [style.--toast-offset-top]="offsetSide(offset(), 'top')"
+        [style.--toast-offset-right]="offsetSide(offset(), 'right')"
+        [style.--toast-offset-bottom]="offsetSide(offset(), 'bottom')"
+        [style.--toast-offset-left]="offsetSide(offset(), 'left')"
+        [style.--toast-offset-mobile-top]="offsetSide(mobileOffset(), 'top')"
+        [style.--toast-offset-mobile-right]="offsetSide(mobileOffset(), 'right')"
+        [style.--toast-offset-mobile-bottom]="offsetSide(mobileOffset(), 'bottom')"
+        [style.--toast-offset-mobile-left]="offsetSide(mobileOffset(), 'left')"
+        [style.--toast-gap]="stackGapPx + 'px'"
+        [style.--front-toast-height]="frontToastHeightCss()"
         [attr.data-position]="position()"
         [attr.data-rich-colors]="richColors()"
         [attr.data-theme]="theme()"
+        [attr.data-stacked]="stacked() ? 'true' : 'false'"
+        [attr.data-expanded]="layoutExpanded() ? 'true' : 'false'"
         tabindex="-1"
+        (focusin)="onStackFocusIn($event)"
+        (focusout)="onStackFocusOut($event)"
       >
         @for (toast of toaster.toasts(); track toast.id) {
           <li
@@ -1287,23 +1346,33 @@ class BetterToaster {
             [toasterClassNames]="toastOptions()?.classNames"
             [variant]="toast.variant"
             [customIcons]="icons()"
-            [offset]="offsets()[toast.id]"
             [closeButton]="closeButton()"
             [dismissButtonAriaLabel]="dismissButtonAriaLabel()"
             [stackPosition]="position()"
+            [stackExpanded]="layoutExpanded()"
+            [stackFront]="$last"
             [theme]="theme()"
             (heightChange)="onHeightChange(toast.id, $event)"
+            (stackHover)="onItemStackHover($event)"
+            [style.--index]="$count - 1 - $index"
+            [style.--offset]="toastOffsetCss(toast.id)"
             [attr.data-position]="position()"
             [attr.data-rich-colors]="richColors()"
+            [attr.data-expanded]="layoutExpanded() ? 'true' : 'false'"
+            [attr.data-front]="$last ? 'true' : null"
+            [attr.aria-hidden]="hiddenToastIds().has(toast.id) ? 'true' : null"
+            [attr.inert]="hiddenToastIds().has(toast.id) ? true : null"
           ></li>
         }
       </ol>
     </section>
-  `, isInline: true, styles: [":host{--toast-width: 356px;--toast-gap: 1rem;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(hsl(0, 0%, 93%), hsl(0, 0%, 20%));--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toast-success-bg: light-dark(oklch(97.9% .021 166.113), oklch(26.2% .051 172.552));--toast-success-text: light-dark(oklch(59.6% .145 163.225), oklch(92.5% .084 155.995));--toast-success-border: light-dark( oklch(69.6% .17 162.48 / .1), oklch(92.5% .084 155.995 / .1) );--toast-error-bg: light-dark(oklch(97.5% .012 25), oklch(25.8% .092 26.042));--toast-error-text: light-dark(oklch(57.7% .245 27.325), oklch(88.5% .062 18.334));--toast-error-border: light-dark( oklch(80.8% .114 19.571 / .1), oklch(88.5% .062 18.334 / .125) );--toast-info-bg: light-dark(oklch(97.7% .013 236.62), oklch(29.3% .066 243.157));--toast-info-text: light-dark(oklch(68.5% .169 237.323), oklch(90.1% .058 230.902));--toast-info-border: light-dark( oklch(82.8% .111 230.318 / .15), oklch(90.1% .058 230.902 / .125) );--toast-warning-bg: light-dark(oklch(98.7% .022 95.277), oklch(28.6% .066 53.813));--toast-warning-text: light-dark(oklch(66.6% .179 58.318), oklch(92.4% .12 95.746));--toast-warning-border: light-dark( oklch(76.9% .188 70.08 / .15), oklch(92.4% .12 95.746 / .125) );--toast-action-bg: light-dark(var(--color-black), var(--color-white));--toast-action-text: light-dark(var(--color-white), var(--color-black));--toast-action-border: light-dark(var(--color-black), var(--color-white));--toast-cancel-bg: light-dark(oklch(86.9% .005 56.366 / .3), oklch(26.8% .007 34.298 / .85));--toast-cancel-text: var(--toast-color);--toast-cancel-border: light-dark( oklch(86.9% .005 56.366 / .1), oklch(26.8% .007 34.298 / .5) );position:fixed;z-index:var(--toast-z-index);width:auto;pointer-events:none;overflow:visible;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toast-container[data-theme=dark]{--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){.toast-container[data-theme=system]{--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1)}}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"], dependencies: [{ kind: "component", type: BetterToastItem, selector: "li[betterToastItem]", inputs: ["toast", "toasterStyle", "toasterClassNames", "variant", "offset", "closeButton", "customIcons", "dismissButtonAriaLabel", "stackPosition", "theme"], outputs: ["heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--toast-width: 356px;--toast-gap: 16px;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(hsl(0, 0%, 93%), hsl(0, 0%, 20%));--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toast-success-bg: light-dark(oklch(97.9% .021 166.113), oklch(26.2% .051 172.552));--toast-success-text: light-dark(oklch(59.6% .145 163.225), oklch(92.5% .084 155.995));--toast-success-border: light-dark( oklch(69.6% .17 162.48 / .1), oklch(92.5% .084 155.995 / .1) );--toast-error-bg: light-dark(oklch(97.5% .012 25), oklch(25.8% .092 26.042));--toast-error-text: light-dark(oklch(57.7% .245 27.325), oklch(88.5% .062 18.334));--toast-error-border: light-dark( oklch(80.8% .114 19.571 / .1), oklch(88.5% .062 18.334 / .125) );--toast-info-bg: light-dark(oklch(97.7% .013 236.62), oklch(29.3% .066 243.157));--toast-info-text: light-dark(oklch(68.5% .169 237.323), oklch(90.1% .058 230.902));--toast-info-border: light-dark( oklch(82.8% .111 230.318 / .15), oklch(90.1% .058 230.902 / .125) );--toast-warning-bg: light-dark(oklch(98.7% .022 95.277), oklch(28.6% .066 53.813));--toast-warning-text: light-dark(oklch(66.6% .179 58.318), oklch(92.4% .12 95.746));--toast-warning-border: light-dark( oklch(76.9% .188 70.08 / .15), oklch(92.4% .12 95.746 / .125) );--toast-action-bg: light-dark(var(--color-black), var(--color-white));--toast-action-text: light-dark(var(--color-white), var(--color-black));--toast-action-border: light-dark(var(--color-black), var(--color-white));--toast-cancel-bg: light-dark(oklch(86.9% .005 56.366 / .3), oklch(26.8% .007 34.298 / .85));--toast-cancel-border: light-dark( oklch(86.9% .005 56.366 / .1), oklch(26.8% .007 34.298 / .5) );position:fixed;z-index:var(--toast-z-index);width:auto;pointer-events:none;overflow:visible;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"], dependencies: [{ kind: "component", type: BetterToastItem, selector: "li[betterToastItem]", inputs: ["toast", "toasterStyle", "toasterClassNames", "variant", "closeButton", "customIcons", "dismissButtonAriaLabel", "stackPosition", "stackExpanded", "stackFront", "theme"], outputs: ["stackHover", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToaster, decorators: [{
             type: Component,
-            args: [{ selector: 'better-toaster', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BetterToastItem], template: `
+            args: [{ selector: 'better-toaster', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BetterToastItem], host: {
+                        '(document:pointerdown)': 'onDocumentPointerDown($event)',
+                    }, template: `
     <section
       [attr.aria-label]="notificationsRegionAriaLabel()"
       tabindex="-1"
@@ -1313,18 +1382,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     >
       <ol
         class="toast-container"
-        [style.--toast-offset-top]="offsetTop()"
-        [style.--toast-offset-right]="offsetRight()"
-        [style.--toast-offset-bottom]="offsetBottom()"
-        [style.--toast-offset-left]="offsetLeft()"
-        [style.--toast-offset-mobile-top]="mobileOffsetTop()"
-        [style.--toast-offset-mobile-right]="mobileOffsetRight()"
-        [style.--toast-offset-mobile-bottom]="mobileOffsetBottom()"
-        [style.--toast-offset-mobile-left]="mobileOffsetLeft()"
+        [style.--toast-offset-top]="offsetSide(offset(), 'top')"
+        [style.--toast-offset-right]="offsetSide(offset(), 'right')"
+        [style.--toast-offset-bottom]="offsetSide(offset(), 'bottom')"
+        [style.--toast-offset-left]="offsetSide(offset(), 'left')"
+        [style.--toast-offset-mobile-top]="offsetSide(mobileOffset(), 'top')"
+        [style.--toast-offset-mobile-right]="offsetSide(mobileOffset(), 'right')"
+        [style.--toast-offset-mobile-bottom]="offsetSide(mobileOffset(), 'bottom')"
+        [style.--toast-offset-mobile-left]="offsetSide(mobileOffset(), 'left')"
+        [style.--toast-gap]="stackGapPx + 'px'"
+        [style.--front-toast-height]="frontToastHeightCss()"
         [attr.data-position]="position()"
         [attr.data-rich-colors]="richColors()"
         [attr.data-theme]="theme()"
+        [attr.data-stacked]="stacked() ? 'true' : 'false'"
+        [attr.data-expanded]="layoutExpanded() ? 'true' : 'false'"
         tabindex="-1"
+        (focusin)="onStackFocusIn($event)"
+        (focusout)="onStackFocusOut($event)"
       >
         @for (toast of toaster.toasts(); track toast.id) {
           <li
@@ -1334,20 +1409,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
             [toasterClassNames]="toastOptions()?.classNames"
             [variant]="toast.variant"
             [customIcons]="icons()"
-            [offset]="offsets()[toast.id]"
             [closeButton]="closeButton()"
             [dismissButtonAriaLabel]="dismissButtonAriaLabel()"
             [stackPosition]="position()"
+            [stackExpanded]="layoutExpanded()"
+            [stackFront]="$last"
             [theme]="theme()"
             (heightChange)="onHeightChange(toast.id, $event)"
+            (stackHover)="onItemStackHover($event)"
+            [style.--index]="$count - 1 - $index"
+            [style.--offset]="toastOffsetCss(toast.id)"
             [attr.data-position]="position()"
             [attr.data-rich-colors]="richColors()"
+            [attr.data-expanded]="layoutExpanded() ? 'true' : 'false'"
+            [attr.data-front]="$last ? 'true' : null"
+            [attr.aria-hidden]="hiddenToastIds().has(toast.id) ? 'true' : null"
+            [attr.inert]="hiddenToastIds().has(toast.id) ? true : null"
           ></li>
         }
       </ol>
     </section>
-  `, styles: [":host{--toast-width: 356px;--toast-gap: 1rem;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(hsl(0, 0%, 93%), hsl(0, 0%, 20%));--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toast-success-bg: light-dark(oklch(97.9% .021 166.113), oklch(26.2% .051 172.552));--toast-success-text: light-dark(oklch(59.6% .145 163.225), oklch(92.5% .084 155.995));--toast-success-border: light-dark( oklch(69.6% .17 162.48 / .1), oklch(92.5% .084 155.995 / .1) );--toast-error-bg: light-dark(oklch(97.5% .012 25), oklch(25.8% .092 26.042));--toast-error-text: light-dark(oklch(57.7% .245 27.325), oklch(88.5% .062 18.334));--toast-error-border: light-dark( oklch(80.8% .114 19.571 / .1), oklch(88.5% .062 18.334 / .125) );--toast-info-bg: light-dark(oklch(97.7% .013 236.62), oklch(29.3% .066 243.157));--toast-info-text: light-dark(oklch(68.5% .169 237.323), oklch(90.1% .058 230.902));--toast-info-border: light-dark( oklch(82.8% .111 230.318 / .15), oklch(90.1% .058 230.902 / .125) );--toast-warning-bg: light-dark(oklch(98.7% .022 95.277), oklch(28.6% .066 53.813));--toast-warning-text: light-dark(oklch(66.6% .179 58.318), oklch(92.4% .12 95.746));--toast-warning-border: light-dark( oklch(76.9% .188 70.08 / .15), oklch(92.4% .12 95.746 / .125) );--toast-action-bg: light-dark(var(--color-black), var(--color-white));--toast-action-text: light-dark(var(--color-white), var(--color-black));--toast-action-border: light-dark(var(--color-black), var(--color-white));--toast-cancel-bg: light-dark(oklch(86.9% .005 56.366 / .3), oklch(26.8% .007 34.298 / .85));--toast-cancel-text: var(--toast-color);--toast-cancel-border: light-dark( oklch(86.9% .005 56.366 / .1), oklch(26.8% .007 34.298 / .5) );position:fixed;z-index:var(--toast-z-index);width:auto;pointer-events:none;overflow:visible;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toast-container[data-theme=dark]{--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){.toast-container[data-theme=system]{--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1)}}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"] }]
-        }], propDecorators: { durationMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], mobileOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOffset", required: false }] }], richColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "richColors", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], toastOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastOptions", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], accessibilityLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabels", required: false }] }] } });
+  `, styles: [":host{--toast-width: 356px;--toast-gap: 16px;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(hsl(0, 0%, 93%), hsl(0, 0%, 20%));--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toast-success-bg: light-dark(oklch(97.9% .021 166.113), oklch(26.2% .051 172.552));--toast-success-text: light-dark(oklch(59.6% .145 163.225), oklch(92.5% .084 155.995));--toast-success-border: light-dark( oklch(69.6% .17 162.48 / .1), oklch(92.5% .084 155.995 / .1) );--toast-error-bg: light-dark(oklch(97.5% .012 25), oklch(25.8% .092 26.042));--toast-error-text: light-dark(oklch(57.7% .245 27.325), oklch(88.5% .062 18.334));--toast-error-border: light-dark( oklch(80.8% .114 19.571 / .1), oklch(88.5% .062 18.334 / .125) );--toast-info-bg: light-dark(oklch(97.7% .013 236.62), oklch(29.3% .066 243.157));--toast-info-text: light-dark(oklch(68.5% .169 237.323), oklch(90.1% .058 230.902));--toast-info-border: light-dark( oklch(82.8% .111 230.318 / .15), oklch(90.1% .058 230.902 / .125) );--toast-warning-bg: light-dark(oklch(98.7% .022 95.277), oklch(28.6% .066 53.813));--toast-warning-text: light-dark(oklch(66.6% .179 58.318), oklch(92.4% .12 95.746));--toast-warning-border: light-dark( oklch(76.9% .188 70.08 / .15), oklch(92.4% .12 95.746 / .125) );--toast-action-bg: light-dark(var(--color-black), var(--color-white));--toast-action-text: light-dark(var(--color-white), var(--color-black));--toast-action-border: light-dark(var(--color-black), var(--color-white));--toast-cancel-bg: light-dark(oklch(86.9% .005 56.366 / .3), oklch(26.8% .007 34.298 / .85));--toast-cancel-border: light-dark( oklch(86.9% .005 56.366 / .1), oklch(26.8% .007 34.298 / .5) );position:fixed;z-index:var(--toast-z-index);width:auto;pointer-events:none;overflow:visible;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { durationMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], mobileOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOffset", required: false }] }], richColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "richColors", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], toastOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastOptions", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], accessibilityLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabels", required: false }] }] } });
 
 /*
  * Public API Surface of better-toast