better-toast 0.0.4 → 0.2.0

package/fesm2022/better-toast.mjs

@@ -1,6 +1,6 @@
 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 { signal, Injectable, inject, ElementRef, input, output, computed, afterNextRender, ChangeDetectionStrategy, Component, effect } from '@angular/core';
 
 /** Fallback when `<app-toaster [duration]>` is absent and a helper omits `durationMs`. */
 const DEFAULT_TOAST_DURATION_MS = 4000;
@@ -27,7 +27,8 @@ function shouldScheduleAutoDismiss(durationMs) {
     return Number.isFinite(durationMs) && durationMs > 0;
 }
 class ToasterService {
-    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
+    _toasts = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
     autoDismissByToastId = new Map();
     /** Updated by `<better-toaster [duration]>`; initial value is {@link DEFAULT_TOAST_DURATION_MS}. */
     defaultDurationMs = DEFAULT_TOAST_DURATION_MS;
@@ -395,10 +396,10 @@ class ToasterService {
             toast.onDismiss?.();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToasterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ToasterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToasterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ToasterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -426,9 +427,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;
@@ -456,48 +479,82 @@ 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);
     /** Host element ref used to read `offsetHeight` after the first render. */
     host = inject(ElementRef);
     /** Toast payload (message, id, variant from the service). */
-    toast = input(...(ngDevMode ? [undefined, { debugName: "toast" }] : /* istanbul ignore next */ []));
+    toast = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "toast" }] : /* istanbul ignore next */ []));
     /**
      * Styles from `<app-toaster [toastOptions]>`; merged with {@link ToasterItem.style} so per-toast keys win.
      */
-    toasterStyle = input(...(ngDevMode ? [undefined, { debugName: "toasterStyle" }] : /* istanbul ignore next */ []));
+    toasterStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "toasterStyle" }] : /* istanbul ignore next */ []));
     /**
      * Classes from `<app-toaster [toastOptions]>` — same shape as {@link ToasterToastOptions.classNames}.
      * Merged with {@link ToasterItem.classNames}; per-toast keys replace the same keys from the toaster.
      * Styles for those classes usually need **`!important`** to override the library’s encapsulated CSS; see {@link ToastChromeClassNames}.
      */
-    toasterClassNames = input(...(ngDevMode ? [undefined, { debugName: "toasterClassNames" }] : /* istanbul ignore next */ []));
+    toasterClassNames = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "toasterClassNames" }] : /* istanbul ignore next */ []));
     /** Which icon and color treatment to show for this row. */
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Vertical stack offset in px; bound to `--offset` on the host for layout. */
-    offset = input.required(...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* 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, ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
+    closeButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
     /**
      * Per-variant icon overrides from `<app-toaster [icons]>`.
      * Each override must be a standalone component whose template includes the SVG artwork.
      */
-    customIcons = input(...(ngDevMode ? [undefined, { debugName: "customIcons" }] : /* istanbul ignore next */ []));
+    customIcons = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "customIcons" }] : /* istanbul ignore next */ []));
     /**
      * `aria-label` for the dismiss control; set from `<better-toaster [accessibilityLabels]>`.
      * Default {@link DEFAULT_TOASTER_ARIA_DISMISS_BUTTON}.
      */
-    dismissButtonAriaLabel = input(DEFAULT_TOASTER_ARIA_DISMISS_BUTTON, ...(ngDevMode ? [{ debugName: "dismissButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    dismissButtonAriaLabel = input(DEFAULT_TOASTER_ARIA_DISMISS_BUTTON, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissButtonAriaLabel" }] : /* istanbul ignore next */ []));
     /** Stack anchor from `<better-toaster [position]>` — drives swipe axis and `data-swipe-direction`. */
-    stackPosition = input('bottom-right', ...(ngDevMode ? [{ debugName: "stackPosition" }] : /* istanbul ignore next */ []));
+    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()`.
      */
-    theme = input('system', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    theme = input('system', /* @ts-ignore */
+    ...(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.).
@@ -509,11 +566,14 @@ class BetterToastItem {
         if (toast.variant === 'description')
             return true;
         return !!toast.description?.trim();
-    }, ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
     /** Merged inline styles for the toast (`[toastOptions].style` then per-toast `style`). */
-    hostStyle = computed(() => mergeToastHostStyles(this.toasterStyle(), this.toast()?.style), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    hostStyle = computed(() => mergeToastHostStyles(this.toasterStyle(), this.toast()?.style), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
     /** Merged `[class]` strings (`[toastOptions].classNames` then per-toast `classNames`). */
-    resolvedClassNames = computed(() => mergeToastClassNames(this.toasterClassNames(), this.toast()?.classNames), ...(ngDevMode ? [{ debugName: "resolvedClassNames" }] : /* istanbul ignore next */ []));
+    resolvedClassNames = computed(() => mergeToastClassNames(this.toasterClassNames(), this.toast()?.classNames), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedClassNames" }] : /* istanbul ignore next */ []));
     /** Resolved standalone SVG icon component from `[icons]`, if any (not `null`). */
     iconComponent = computed(() => {
         const customIcon = this.customIcons()?.[this.variant()];
@@ -521,7 +581,8 @@ class BetterToastItem {
             return undefined;
         }
         return customIcon;
-    }, ...(ngDevMode ? [{ debugName: "iconComponent" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconComponent" }] : /* istanbul ignore next */ []));
     /**
      * Renders the icon column unless the toast or `[icons]` opts out with `icon: null` / a `null` entry for that variant.
      * The `default` variant has no built-in icon: the column appears only with a per-toast `icon` or `[icons].default`.
@@ -552,26 +613,45 @@ class BetterToastItem {
             return false;
         }
         return true;
-    }, ...(ngDevMode ? [{ debugName: "shouldShowIconColumn" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldShowIconColumn" }] : /* istanbul ignore next */ []));
     /** Bound to {@link ToasterItem.componentInputs} for headless (`NgComponentOutlet`) toasts. */
-    componentOutletInputs = computed(() => this.toast()?.componentInputs ?? {}, ...(ngDevMode ? [{ debugName: "componentOutletInputs" }] : /* istanbul ignore next */ []));
+    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 ?? {}, ...(ngDevMode ? [{ debugName: "contentComponentOutletInputs" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "isHeadless" }] : /* istanbul ignore next */ []));
+    isHeadless = computed(() => this.toast()?.component != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHeadless" }] : /* istanbul ignore next */ []));
+    /**
+     * Dismiss control stays on the front toast. Stacked toasts mount it only while the stack is
+     * expanded so `animate.enter` / `animate.leave` can run without moving the front control.
+     */
+    showCloseButton = computed(() => this.closeButton() && !this.isHeadless() && (this.stackFront() || this.stackExpanded()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    /** Enter class for stacked close buttons; the front control does not animate in. */
+    closeButtonEnterClass = computed(() => this.stackFront() ? null : 'close-enter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeButtonEnterClass" }] : /* istanbul ignore next */ []));
+    /** Leave class for stacked close buttons; the front control does not animate out. */
+    closeButtonLeaveClass = computed(() => this.stackFront() ? null : 'close-leave', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeButtonLeaveClass" }] : /* istanbul ignore next */ []));
     /** `down` when anchored to the bottom (dismiss by swiping down), `up` when anchored to the top. */
-    swipeDirection = computed(() => swipeDirectionForPosition(this.stackPosition()), ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
+    swipeDirection = computed(() => swipeDirectionForPosition(this.stackPosition()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
     /**
      * Emits the measured host height in px once after the first render so the parent can stack siblings.
      */
     constructor() {
         afterNextRender(() => {
             const height = this.host.nativeElement.offsetHeight;
+            this.initialHeight.set(height);
             this.heightChange.emit(height);
         });
     }
     /** True once the user has passed the drag threshold and is actively swiping. */
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
     tracking = false;
     startY = 0;
     pointerId = -1;
@@ -586,7 +666,8 @@ class BetterToastItem {
             return `translateX(-50%) translateY(${y})`;
         }
         return `translateY(${y})`;
-    }, ...(ngDevMode ? [{ debugName: "swipeDismissTransform" }] : /* istanbul ignore next */ []));
+    }, /* @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();
@@ -606,15 +687,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);
@@ -710,189 +802,191 @@ class BetterToastItem {
             /* pointer already released */
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToastItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
-    @if (toast()?.component) {
-      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
-    } @else {
-      @if (shouldShowIconColumn()) {
-        <span class="toast-icon" aria-hidden="true">
-          @if (toast()?.icon) {
-            <ng-container *ngComponentOutlet="toast()!.icon!" />
-          } @else if (iconComponent(); as IconCmp) {
-            <ng-container *ngComponentOutlet="IconCmp" />
-          } @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"
-                >
-                  <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"
-                >
-                  <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"
-                >
-                  <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') {}
-            }
-          }
-        </span>
-      }
-
-      @if (hasDescription()) {
-        <div class="stack">
-          @if (toast()?.contentComponent) {
-            <div class="msg" [class]="resolvedClassNames()?.message">
-              <ng-container
-                *ngComponentOutlet="
-                  toast()!.contentComponent!;
-                  inputs: contentComponentOutletInputs()
-                "
-              />
-            </div>
-          } @else {
-            <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
-          }
-          @if (toast()?.description) {
-            <p class="description" [class]="resolvedClassNames()?.description">
-              {{ toast()!.description }}
-            </p>
-          }
-        </div>
-      } @else {
-        @if (toast()?.contentComponent) {
-          <div class="msg" [class]="resolvedClassNames()?.message">
-            <ng-container
-              *ngComponentOutlet="
-                toast()!.contentComponent!;
-                inputs: contentComponentOutletInputs()
-              "
-            />
-          </div>
-        } @else {
-          <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
-        }
-      }
-
-      @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>
-          }
-        }
-      }
-    }
-
-    @if (closeButton() && !isHeadless()) {
-      <button
-        type="button"
-        class="close-btn"
-        [class]="resolvedClassNames()?.closeButton"
-        (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>
-      </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 });
+    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 }, 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()" />
+    } @else {
+      @if (shouldShowIconColumn()) {
+        <span class="toast-icon" aria-hidden="true">
+          @if (toast()?.icon) {
+            <ng-container *ngComponentOutlet="toast()!.icon!" />
+          } @else if (iconComponent(); as IconCmp) {
+            <ng-container *ngComponentOutlet="IconCmp" />
+          } @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"
+                >
+                  <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"
+                >
+                  <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"
+                >
+                  <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') {}
+            }
+          }
+        </span>
+      }
+
+      @if (hasDescription()) {
+        <div class="stack">
+          @if (toast()?.contentComponent) {
+            <div class="msg" [class]="resolvedClassNames()?.message">
+              <ng-container
+                *ngComponentOutlet="
+                  toast()!.contentComponent!;
+                  inputs: contentComponentOutletInputs()
+                "
+              />
+            </div>
+          } @else {
+            <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+          }
+          @if (toast()?.description) {
+            <p class="description" [class]="resolvedClassNames()?.description">
+              {{ toast()!.description }}
+            </p>
+          }
+        </div>
+      } @else {
+        @if (toast()?.contentComponent) {
+          <div class="msg" [class]="resolvedClassNames()?.message">
+            <ng-container
+              *ngComponentOutlet="
+                toast()!.contentComponent!;
+                inputs: contentComponentOutletInputs()
+              "
+            />
+          </div>
+        } @else {
+          <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+        }
+      }
+
+      @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>
+          }
+        }
+      }
+    }
+
+    @if (showCloseButton()) {
+      <button
+        type="button"
+        class="close-btn"
+        [class]="resolvedClassNames()?.closeButton"
+        [animate.enter]="closeButtonEnterClass()"
+        [animate.leave]="closeButtonLeaveClass()"
+        (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>
+      </button>
+    }
+  `, 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)}.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(--_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: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToastItem, decorators: [{
+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: {
                         role: 'listitem',
@@ -904,7 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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)',
@@ -912,190 +1006,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         '(pointerup)': 'onPointerUp()',
                         '(pointercancel)': 'onPointerCancel()',
                         '(pointerenter)': 'onPointerEnter()',
-                        '(pointerleave)': 'onPointerLeave()',
-                    }, template: `
-    @if (toast()?.component) {
-      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
-    } @else {
-      @if (shouldShowIconColumn()) {
-        <span class="toast-icon" aria-hidden="true">
-          @if (toast()?.icon) {
-            <ng-container *ngComponentOutlet="toast()!.icon!" />
-          } @else if (iconComponent(); as IconCmp) {
-            <ng-container *ngComponentOutlet="IconCmp" />
-          } @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"
-                >
-                  <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"
-                >
-                  <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"
-                >
-                  <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') {}
-            }
-          }
-        </span>
-      }
-
-      @if (hasDescription()) {
-        <div class="stack">
-          @if (toast()?.contentComponent) {
-            <div class="msg" [class]="resolvedClassNames()?.message">
-              <ng-container
-                *ngComponentOutlet="
-                  toast()!.contentComponent!;
-                  inputs: contentComponentOutletInputs()
-                "
-              />
-            </div>
-          } @else {
-            <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
-          }
-          @if (toast()?.description) {
-            <p class="description" [class]="resolvedClassNames()?.description">
-              {{ toast()!.description }}
-            </p>
-          }
-        </div>
-      } @else {
-        @if (toast()?.contentComponent) {
-          <div class="msg" [class]="resolvedClassNames()?.message">
-            <ng-container
-              *ngComponentOutlet="
-                toast()!.contentComponent!;
-                inputs: contentComponentOutletInputs()
-              "
-            />
-          </div>
-        } @else {
-          <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
-        }
-      }
-
-      @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>
-          }
-        }
-      }
-    }
-
-    @if (closeButton() && !isHeadless()) {
-      <button
-        type="button"
-        class="close-btn"
-        [class]="resolvedClassNames()?.closeButton"
-        (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>
-      </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"] }] } });
+                        '(pointerleave)': 'onPointerLeave($event)',
+                    }, template: `
+    @if (toast()?.component) {
+      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
+    } @else {
+      @if (shouldShowIconColumn()) {
+        <span class="toast-icon" aria-hidden="true">
+          @if (toast()?.icon) {
+            <ng-container *ngComponentOutlet="toast()!.icon!" />
+          } @else if (iconComponent(); as IconCmp) {
+            <ng-container *ngComponentOutlet="IconCmp" />
+          } @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"
+                >
+                  <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"
+                >
+                  <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"
+                >
+                  <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') {}
+            }
+          }
+        </span>
+      }
+
+      @if (hasDescription()) {
+        <div class="stack">
+          @if (toast()?.contentComponent) {
+            <div class="msg" [class]="resolvedClassNames()?.message">
+              <ng-container
+                *ngComponentOutlet="
+                  toast()!.contentComponent!;
+                  inputs: contentComponentOutletInputs()
+                "
+              />
+            </div>
+          } @else {
+            <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+          }
+          @if (toast()?.description) {
+            <p class="description" [class]="resolvedClassNames()?.description">
+              {{ toast()!.description }}
+            </p>
+          }
+        </div>
+      } @else {
+        @if (toast()?.contentComponent) {
+          <div class="msg" [class]="resolvedClassNames()?.message">
+            <ng-container
+              *ngComponentOutlet="
+                toast()!.contentComponent!;
+                inputs: contentComponentOutletInputs()
+              "
+            />
+          </div>
+        } @else {
+          <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+        }
+      }
+
+      @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>
+          }
+        }
+      }
+    }
+
+    @if (showCloseButton()) {
+      <button
+        type="button"
+        class="close-btn"
+        [class]="resolvedClassNames()?.closeButton"
+        [animate.enter]="closeButtonEnterClass()"
+        [animate.leave]="closeButtonLeaveClass()"
+        (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>
+      </button>
+    }
+  `, 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)}.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(--_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.
@@ -1122,26 +1220,37 @@ class BetterToaster {
             return durationMs;
         } });
     /** Where the stack is anchored on the viewport. */
-    position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    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`.
      */
-    offset = input(undefined, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    offset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
     /**
      * Viewport inset for narrow layouts: binds `--toast-offset-mobile-top` / `right` / `bottom` / `left` on `.toast-container`.
      * Same shape as {@link offset}.
      */
-    mobileOffset = input(undefined, ...(ngDevMode ? [{ debugName: "mobileOffset" }] : /* istanbul ignore next */ []));
+    mobileOffset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileOffset" }] : /* istanbul ignore next */ []));
     /**
      * When true, success/error/info/warning use semantic background and border colors.
      */
-    richColors = input(false, ...(ngDevMode ? [{ debugName: "richColors" }] : /* istanbul ignore next */ []));
+    richColors = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "richColors" }] : /* istanbul ignore next */ []));
     /**
      * Color palette for the stack. `system` (default) follows `prefers-color-scheme`; `light` / `dark` pin the palette regardless of OS.
      * Reflected as `data-theme` on the toast container (`<ol class="toast-container">`).
      */
-    theme = input('system', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    theme = input('system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
     /**
      * Optional per-variant **standalone** components that replace the default SVG (or loading indicator).
      * Import each icon component in the host and pass its class here; each one should render an SVG
@@ -1149,48 +1258,100 @@ class BetterToaster {
      * Omitted keys keep the built-in icons (the `default` variant has none unless you set `default` here).
      * **`null`** for a variant hides that variant’s icon.
      */
-    icons = input(...(ngDevMode ? [undefined, { debugName: "icons" }] : /* istanbul ignore next */ []));
+    icons = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icons" }] : /* istanbul ignore next */ []));
     /**
      * Defaults for every toast — shape is {@link ToasterToastOptions}.
      *
      * - **`style`** — merged onto each toast host with per-toast {@link ToastOptions.style}; identical keys from the service call win.
      * - **`classNames`** — extra classes on host / `.msg` / `.description` / `.close-btn` / row buttons via **`[class]`**; see {@link ToasterToastOptions.classNames} (**`!important`** is usually required for overrides). Per-toast {@link ToastOptions.classNames} replaces host/message/close keys; row overrides come from {@link ToasterService.action} / {@link ToasterService.cancel}.
      */
-    toastOptions = input(...(ngDevMode ? [undefined, { debugName: "toastOptions" }] : /* istanbul ignore next */ []));
+    toastOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "toastOptions" }] : /* istanbul ignore next */ []));
     /** When true, each toast shows a dismiss button. */
-    closeButton = input(true, ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
+    closeButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
     /**
      * Overrides for built-in English `aria-label` values (live region and per-toast dismiss).
      * Omitted keys keep {@link DEFAULT_TOASTER_ARIA_NOTIFICATIONS_REGION} and {@link DEFAULT_TOASTER_ARIA_DISMISS_BUTTON}.
      */
-    accessibilityLabels = input(...(ngDevMode ? [undefined, { debugName: "accessibilityLabels" }] : /* istanbul ignore next */ []));
+    accessibilityLabels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLabels" }] : /* istanbul ignore next */ []));
     /** Measured height in px per toast id, updated when a toast item reports `heightChange`. */
-    heights = signal({}, ...(ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []));
+    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(() => {
+            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, ...(ngDevMode ? [{ debugName: "notificationsRegionAriaLabel" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "dismissButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "offsetTop" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "offsetRight" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "offsetBottom" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "offsetLeft" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "mobileOffsetTop" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "mobileOffsetRight" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "mobileOffsetBottom" }] : /* istanbul ignore next */ []));
+    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'), ...(ngDevMode ? [{ debugName: "mobileOffsetLeft" }] : /* istanbul ignore next */ []));
+    mobileOffsetLeft = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'left'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileOffsetLeft" }] : /* istanbul ignore next */ []));
     /**
-     * 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 = {};
@@ -1201,110 +1362,217 @@ class BetterToaster {
             cumulative += (heights[toast.id] ?? 0) + GAP;
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "offsets" }] : /* istanbul ignore next */ []));
-    /** Merges a toast item’s reported height into `heights` so `offsets` can recompute. */
+    }, /* @ts-ignore */
+    ...(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();
+        }
+    }
+    /**
+     * Collapses a touch/pen sticky expand when the next press is outside the stack.
+     * Hover pointers already collapse on `pointerleave`.
+     */
+    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);
+        }
+    }
     /**
      * Initializes the toaster service with the default duration.
      */
     ngOnInit() {
         this.toaster.setDefaultDurationMs(this.durationMs());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: `
-    <section
-      [attr.aria-label]="notificationsRegionAriaLabel()"
-      tabindex="-1"
-      aria-live="polite"
-      aria-relevant="additions text"
-      aria-atomic="false"
-    >
-      <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()"
-        [attr.data-position]="position()"
-        [attr.data-rich-colors]="richColors()"
-        [attr.data-theme]="theme()"
-        tabindex="-1"
-      >
-        @for (toast of toaster.toasts(); track toast.id) {
-          <li
-            betterToastItem
-            [toast]="toast"
-            [toasterStyle]="toastOptions()?.style"
-            [toasterClassNames]="toastOptions()?.classNames"
-            [variant]="toast.variant"
-            [customIcons]="icons()"
-            [offset]="offsets()[toast.id]"
-            [closeButton]="closeButton()"
-            [dismissButtonAriaLabel]="dismissButtonAriaLabel()"
-            [stackPosition]="position()"
-            [theme]="theme()"
-            (heightChange)="onHeightChange(toast.id, $event)"
-            [attr.data-position]="position()"
-            [attr.data-rich-colors]="richColors()"
-          ></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 });
+    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 }, 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"
+      aria-live="polite"
+      aria-relevant="additions text"
+      aria-atomic="false"
+    >
+      <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-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
+            betterToastItem
+            [toast]="toast"
+            [toasterStyle]="toastOptions()?.style"
+            [toasterClassNames]="toastOptions()?.classNames"
+            [variant]="toast.variant"
+            [customIcons]="icons()"
+            [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: 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-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", "closeButton", "customIcons", "dismissButtonAriaLabel", "stackPosition", "stackExpanded", "stackFront", "theme"], outputs: ["stackHover", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToaster, decorators: [{
+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: `
-    <section
-      [attr.aria-label]="notificationsRegionAriaLabel()"
-      tabindex="-1"
-      aria-live="polite"
-      aria-relevant="additions text"
-      aria-atomic="false"
-    >
-      <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()"
-        [attr.data-position]="position()"
-        [attr.data-rich-colors]="richColors()"
-        [attr.data-theme]="theme()"
-        tabindex="-1"
-      >
-        @for (toast of toaster.toasts(); track toast.id) {
-          <li
-            betterToastItem
-            [toast]="toast"
-            [toasterStyle]="toastOptions()?.style"
-            [toasterClassNames]="toastOptions()?.classNames"
-            [variant]="toast.variant"
-            [customIcons]="icons()"
-            [offset]="offsets()[toast.id]"
-            [closeButton]="closeButton()"
-            [dismissButtonAriaLabel]="dismissButtonAriaLabel()"
-            [stackPosition]="position()"
-            [theme]="theme()"
-            (heightChange)="onHeightChange(toast.id, $event)"
-            [attr.data-position]="position()"
-            [attr.data-rich-colors]="richColors()"
-          ></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 }] }] } });
+            args: [{ selector: 'better-toaster', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BetterToastItem], host: {
+                        '(document:pointerdown)': 'onDocumentPointerDown($event)',
+                    }, template: `
+    <section
+      [attr.aria-label]="notificationsRegionAriaLabel()"
+      tabindex="-1"
+      aria-live="polite"
+      aria-relevant="additions text"
+      aria-atomic="false"
+    >
+      <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-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
+            betterToastItem
+            [toast]="toast"
+            [toasterStyle]="toastOptions()?.style"
+            [toasterClassNames]="toastOptions()?.classNames"
+            [variant]="toast.variant"
+            [customIcons]="icons()"
+            [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: 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-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"] }]
+        }], 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