better-toast 0.2.0 → 0.2.1

package/fesm2022/better-toast.mjs

@@ -1,6 +1,50 @@
-import { NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, input, output, computed, afterNextRender, ChangeDetectionStrategy, Component, effect } from '@angular/core';
+import { inject, ViewContainerRef, input, effect, untracked, Directive, signal, Injectable, ElementRef, output, computed, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Tiny dynamic-component host used for headless toasts, custom bodies, and icon overrides.
+ * Uses signal inputs and recreates the guest only when the component type changes.
+ */
+class BetterToastOutlet {
+    viewContainer = inject(ViewContainerRef);
+    betterToastOutlet = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "betterToastOutlet" }] : /* istanbul ignore next */ []));
+    betterToastOutletInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "betterToastOutletInputs" }] : /* istanbul ignore next */ []));
+    ref;
+    currentType;
+    constructor() {
+        effect(() => {
+            const component = this.betterToastOutlet();
+            const inputs = this.betterToastOutletInputs();
+            untracked(() => this.sync(component, inputs));
+        });
+    }
+    sync(component, inputs) {
+        if (this.currentType !== component) {
+            this.viewContainer.clear();
+            this.ref = undefined;
+            this.currentType = component;
+            if (component) {
+                this.ref = this.viewContainer.createComponent(component);
+            }
+        }
+        if (!this.ref || !inputs) {
+            return;
+        }
+        for (const name of Object.keys(inputs)) {
+            this.ref.setInput(name, inputs[name]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: BetterToastOutlet, isStandalone: true, selector: "[betterToastOutlet]", inputs: { betterToastOutlet: { classPropertyName: "betterToastOutlet", publicName: "betterToastOutlet", isSignal: true, isRequired: true, transformFunction: null }, betterToastOutletInputs: { classPropertyName: "betterToastOutletInputs", publicName: "betterToastOutletInputs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[betterToastOutlet]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { betterToastOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "betterToastOutlet", required: true }] }], betterToastOutletInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "betterToastOutletInputs", required: false }] }] } });
 
 /** Fallback when `<app-toaster [duration]>` is absent and a helper omits `durationMs`. */
 const DEFAULT_TOAST_DURATION_MS = 4000;
@@ -23,6 +67,23 @@ function parseToasterDurationMs(value) {
     }
     return value;
 }
+function newToastId() {
+    return globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+}
+function chromeFromOptions(options) {
+    if (!options) {
+        return {};
+    }
+    const { icon, style, classNames, description, onDismiss, onAutoClose } = options;
+    return {
+        ...(icon !== undefined ? { icon } : {}),
+        ...(style !== undefined ? { style } : {}),
+        ...(classNames !== undefined ? { classNames } : {}),
+        ...(description !== undefined ? { description } : {}),
+        ...(onDismiss !== undefined ? { onDismiss } : {}),
+        ...(onAutoClose !== undefined ? { onAutoClose } : {}),
+    };
+}
 function shouldScheduleAutoDismiss(durationMs) {
     return Number.isFinite(durationMs) && durationMs > 0;
 }
@@ -174,10 +235,10 @@ class ToasterService {
      * Show a toast whose **message area** is a standalone Angular component while keeping normal toast chrome
      * (surface, icon column when applicable, close button, stack motion).
      *
-     * Pass {@link CustomToastOptions.inputs} for `input()` / `@Input()` on that component.
+     * Pass {@link CustomToastOptions.inputs} for `input()` on that component.
      * The component also receives **`toastId`** (matches the returned id) for programmatic dismiss.
      *
-     * @param component The component class (must be usable with `NgComponentOutlet`).
+     * @param component The component class (must work with `ViewContainerRef.createComponent`).
      * @param options Optional configuration object {@link CustomToastOptions}.
      * @returns The toast ID, useful for programmatic dismissal.
      */
@@ -191,7 +252,7 @@ class ToasterService {
      * Pass {@link HeadlessToastOptions.inputs} to feed `input()` on that component.
      * The component also automatically receives **`toastId`** (matches the returned id) for programmatic dismiss inside the component.
      *
-     * @param component The component class (must be usable with `NgComponentOutlet`).
+     * @param component The component class (must work with `ViewContainerRef.createComponent`).
      * @param options Optional configuration object {@link HeadlessToastOptions}.
      * @returns The toast ID, useful for programmatic dismissal.
      */
@@ -293,81 +354,48 @@ class ToasterService {
             toast.onDismiss?.();
         }
     }
+    pushToast(item, durationMs) {
+        this._toasts.update((list) => [...list, item]);
+        this.scheduleAutoDismiss(item.id, durationMs);
+        return item.id;
+    }
     add(message, variant, durationMs, options, toastAction) {
-        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
-        const icon = options?.icon;
-        const style = options?.style;
-        const classNames = options?.classNames;
-        const onDismiss = options?.onDismiss;
-        const onAutoClose = options?.onAutoClose;
-        const description = options?.description;
-        const item = {
+        const id = newToastId();
+        return this.pushToast({
             id,
             message,
             variant,
-            ...(icon !== undefined ? { icon } : {}),
-            ...(style !== undefined ? { style } : {}),
-            ...(classNames !== undefined ? { classNames } : {}),
-            ...(description !== undefined ? { description } : {}),
-            ...(onDismiss !== undefined ? { onDismiss } : {}),
-            ...(onAutoClose !== undefined ? { onAutoClose } : {}),
+            ...chromeFromOptions(options),
             ...(toastAction !== undefined ? { toastAction } : {}),
-        };
-        this._toasts.update((list) => [...list, item]);
-        this.scheduleAutoDismiss(id, durationMs);
-        return id;
+        }, durationMs);
     }
     addContentComponent(component, variant, durationMs, options) {
-        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
-        const componentInputs = {
-            ...(options?.inputs ?? {}),
-            toastId: id,
-        };
-        const icon = options?.icon;
-        const style = options?.style;
-        const classNames = options?.classNames;
-        const onDismiss = options?.onDismiss;
-        const onAutoClose = options?.onAutoClose;
-        const description = options?.description;
-        const item = {
+        const id = newToastId();
+        return this.pushToast({
             id,
             message: '',
             variant,
             contentComponent: component,
-            contentComponentInputs: componentInputs,
-            ...(icon !== undefined ? { icon } : {}),
-            ...(style !== undefined ? { style } : {}),
-            ...(classNames !== undefined ? { classNames } : {}),
-            ...(description !== undefined ? { description } : {}),
-            ...(onDismiss !== undefined ? { onDismiss } : {}),
-            ...(onAutoClose !== undefined ? { onAutoClose } : {}),
-        };
-        this._toasts.update((list) => [...list, item]);
-        this.scheduleAutoDismiss(id, durationMs);
-        return id;
+            contentComponentInputs: { ...(options?.inputs ?? {}), toastId: id },
+            ...chromeFromOptions(options),
+        }, durationMs);
     }
     addComponent(component, durationMs, options) {
-        const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
-        const componentInputs = {
-            ...(options?.inputs ?? {}),
-            toastId: id,
-        };
-        const classNames = options?.classNames;
-        const onDismiss = options?.onDismiss;
-        const onAutoClose = options?.onAutoClose;
-        const item = {
+        const id = newToastId();
+        return this.pushToast({
             id,
             message: '',
             variant: 'default',
             component,
-            componentInputs,
-            ...(classNames !== undefined ? { classNames } : {}),
-            ...(onDismiss !== undefined ? { onDismiss } : {}),
-            ...(onAutoClose !== undefined ? { onAutoClose } : {}),
-        };
-        this._toasts.update((list) => [...list, item]);
-        this.scheduleAutoDismiss(id, durationMs);
-        return id;
+            componentInputs: { ...(options?.inputs ?? {}), toastId: id },
+            ...chromeFromOptions(options
+                ? {
+                    classNames: options.classNames,
+                    onDismiss: options.onDismiss,
+                    onAutoClose: options.onAutoClose,
+                }
+                : undefined),
+        }, durationMs);
     }
     updateToast(id, message, variant, durationMs) {
         let found = false;
@@ -615,27 +643,9 @@ class BetterToastItem {
         return true;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldShowIconColumn" }] : /* istanbul ignore next */ []));
-    /** Bound to {@link ToasterItem.componentInputs} for headless (`NgComponentOutlet`) toasts. */
-    componentOutletInputs = computed(() => this.toast()?.componentInputs ?? {}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "componentOutletInputs" }] : /* istanbul ignore next */ []));
-    /** Bound to {@link ToasterItem.contentComponentInputs} for {@link ToasterService.custom} body components. */
-    contentComponentOutletInputs = computed(() => this.toast()?.contentComponentInputs ?? {}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentComponentOutletInputs" }] : /* istanbul ignore next */ []));
     /** When true, host uses no default toast chrome (border, padding, surface) — only stack + motion. */
     isHeadless = computed(() => this.toast()?.component != null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isHeadless" }] : /* istanbul ignore next */ []));
-    /**
-     * 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()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
@@ -655,10 +665,9 @@ class BetterToastItem {
     tracking = false;
     startY = 0;
     pointerId = -1;
-    dragStartThreshold = 0;
     swipeCloseThreshold = 30;
     /** Transform applied when swipe-dismiss completes (matches leave direction / headless centering). */
-    swipeDismissTransform = computed(() => {
+    swipeDismissTransform() {
         const pos = this.stackPosition();
         const down = this.swipeDirection() === 'down';
         const y = down ? '130%' : '-130%';
@@ -666,8 +675,7 @@ class BetterToastItem {
             return `translateX(-50%) translateY(${y})`;
         }
         return `translateY(${y})`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "swipeDismissTransform" }] : /* istanbul ignore next */ []));
+    }
     /** Prevents swipe-to-dismiss from starting when pressing the row action / cancel control. */
     onRowButtonPointerDown(event) {
         event.stopPropagation();
@@ -736,13 +744,7 @@ class BetterToastItem {
         const down = this.swipeDirection() === 'down';
         const dragDy = down ? Math.max(0, rawDy) : Math.min(0, rawDy);
         if (!this.isDragging()) {
-            const passed = this.dragStartThreshold > 0
-                ? down
-                    ? rawDy >= this.dragStartThreshold
-                    : rawDy <= -this.dragStartThreshold
-                : down
-                    ? rawDy > 0
-                    : rawDy < 0;
+            const passed = down ? rawDy > 0 : rawDy < 0;
             if (passed) {
                 this.isDragging.set(true);
                 el.setPointerCapture(this.pointerId);
@@ -805,95 +807,50 @@ class BetterToastItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: BetterToastItem, isStandalone: true, selector: "li[betterToastItem]", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: false, transformFunction: null }, toasterStyle: { classPropertyName: "toasterStyle", publicName: "toasterStyle", isSignal: true, isRequired: false, transformFunction: null }, toasterClassNames: { classPropertyName: "toasterClassNames", publicName: "toasterClassNames", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, customIcons: { classPropertyName: "customIcons", publicName: "customIcons", isSignal: true, isRequired: false, transformFunction: null }, dismissButtonAriaLabel: { classPropertyName: "dismissButtonAriaLabel", publicName: "dismissButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stackPosition: { classPropertyName: "stackPosition", publicName: "stackPosition", isSignal: true, isRequired: false, transformFunction: null }, stackExpanded: { classPropertyName: "stackExpanded", publicName: "stackExpanded", isSignal: true, isRequired: false, transformFunction: null }, stackFront: { classPropertyName: "stackFront", publicName: "stackFront", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stackHover: "stackHover", heightChange: "heightChange" }, host: { attributes: { "role": "listitem", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerCancel()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave($event)" }, properties: { "class": "resolvedClassNames()?.toast", "attr.data-variant": "variant()", "attr.data-icon": "shouldShowIconColumn() ? \"true\" : \"false\"", "attr.data-headless": "isHeadless() ? \"true\" : null", "attr.data-swipe-direction": "swipeDirection()", "attr.data-theme": "theme()", "style.--initial-height": "initialHeightCss()", "style": "isHeadless() ? undefined : hostStyle()", "animate.leave": "\"leave\"" }, classAttribute: "toast" }, ngImport: i0, template: `
     @if (toast()?.component) {
-      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
+      <ng-container
+        [betterToastOutlet]="toast()!.component!"
+        [betterToastOutletInputs]="toast()?.componentInputs"
+      />
     } @else {
       @if (shouldShowIconColumn()) {
         <span class="toast-icon" aria-hidden="true">
           @if (toast()?.icon) {
-            <ng-container *ngComponentOutlet="toast()!.icon!" />
+            <ng-container [betterToastOutlet]="toast()!.icon!" />
           } @else if (iconComponent(); as IconCmp) {
-            <ng-container *ngComponentOutlet="IconCmp" />
+            <ng-container [betterToastOutlet]="IconCmp" />
+          } @else if (variant() === 'loading') {
+            <div class="toast-icon-loading"></div>
           } @else {
-            @switch (variant()) {
-              @case ('success') {
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="9"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                  />
-                  <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                    d="M8.48 12.22 10.9 14.64 15.74 9.14"
-                  />
-                </svg>
-              }
-              @case ('error') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+            <svg
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke-width]="variant() === 'error' ? 2 : 1.75"
+            >
+              @switch (variant()) {
+                @case ('success') {
+                  <circle cx="12" cy="12" r="9" />
+                  <path d="M8.48 12.22 10.9 14.64 15.74 9.14" />
+                }
+                @case ('error') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="9" y1="9" x2="15" y2="15" />
                   <line x1="15" y1="9" x2="9" y2="15" />
-                </svg>
-              }
-              @case ('info') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.75"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+                }
+                @case ('info') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="12" y1="16" x2="12" y2="12" />
                   <line x1="12" y1="8" x2="12.01" y2="8" />
-                </svg>
-              }
-              @case ('warning') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
+                }
+                @case ('warning') {
                   <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
                     d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
                   />
-                </svg>
+                }
               }
-              @case ('loading') {
-                <div class="toast-icon-loading" aria-hidden="true"></div>
-              }
-              @case ('description') {}
-              @case ('default') {}
-            }
+            </svg>
           }
         </span>
       }
@@ -903,10 +860,8 @@ class BetterToastItem {
           @if (toast()?.contentComponent) {
             <div class="msg" [class]="resolvedClassNames()?.message">
               <ng-container
-                *ngComponentOutlet="
-                  toast()!.contentComponent!;
-                  inputs: contentComponentOutletInputs()
-                "
+                [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
               />
             </div>
           } @else {
@@ -922,10 +877,8 @@ class BetterToastItem {
         @if (toast()?.contentComponent) {
           <div class="msg" [class]="resolvedClassNames()?.message">
             <ng-container
-              *ngComponentOutlet="
-                toast()!.contentComponent!;
-                inputs: contentComponentOutletInputs()
-              "
+              [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
             />
           </div>
         } @else {
@@ -934,61 +887,53 @@ class BetterToastItem {
       }
 
       @if (toast()?.toastAction; as rowAction) {
-        @switch (rowAction.role) {
-          @case ('action') {
-            <button
-              type="button"
-              class="toast-row-btn action-btn"
-              [class]="resolvedClassNames()?.actionButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-          @case ('cancel') {
-            <button
-              type="button"
-              class="toast-row-btn cancel-btn"
-              [class]="resolvedClassNames()?.cancelButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-        }
+        <button
+          type="button"
+          class="toast-row-btn"
+          [class.action-btn]="rowAction.role === 'action'"
+          [class.cancel-btn]="rowAction.role === 'cancel'"
+          [class]="
+            rowAction.role === 'action'
+              ? resolvedClassNames()?.actionButton
+              : resolvedClassNames()?.cancelButton
+          "
+          [attr.data-row-btn]="rowAction.role"
+          (pointerdown)="onRowButtonPointerDown($event)"
+          (click)="onToastRowClick($event)"
+        >
+          {{ rowAction.label }}
+        </button>
       }
     }
 
-    @if (showCloseButton()) {
+    @if (closeButton() && !isHeadless() && (stackFront() || stackExpanded())) {
       <button
         type="button"
         class="close-btn"
         [class]="resolvedClassNames()?.closeButton"
-        [animate.enter]="closeButtonEnterClass()"
-        [animate.leave]="closeButtonLeaveClass()"
+        [animate.enter]="stackFront() ? null : 'close-enter'"
+        [animate.leave]="stackFront() ? null : 'close-leave'"
         (click)="toaster.dismiss(toast()?.id ?? '')"
         [attr.aria-label]="dismissButtonAriaLabel()"
       >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.75"
-            d="M6 18 18 6M6 6l12 12"
-          />
+        <svg
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.75"
+          aria-hidden="true"
+        >
+          <path d="M6 18 18 6M6 6l12 12" />
         </svg>
       </button>
     }
-  `, isInline: true, styles: [":host{--_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 });
+  `, isInline: true, styles: [":host{--_chrome-bg: var(--toast-bg);--_chrome-fg: var(--toast-color);--_chrome-border: var(--toast-border-color);--_icon-fill: light-dark(var(--toast-color), var(--toast-bg));--_icon-stroke: light-dark(var(--toast-bg), var(--toast-color));--_icon-color: var(--_icon-stroke);--_toast-x: 0%;--_toast-y: 0px;--_toast-enter-y: 0px;--_toast-leave-y: 0px;--toast-line-height: 1.35;--index: 0;--collapsed-peek: 14px;--offset: calc(var(--index, 0) * var(--collapsed-peek));display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--_chrome-border);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;height:var(--initial-height, auto);scale:1;z-index:calc(1000 - var(--index, 0));transform:translate(var(--_toast-x)) translateY(var(--_toast-y));transition:opacity .4s ease,transform .4s ease,scale .4s ease,height .4s ease,box-shadow .2s ease}@starting-style{:host{opacity:0;transform:translate(var(--_toast-x)) translateY(var(--_toast-enter-y))}}:host>*:not(.close-btn){transition:opacity .4s ease}:host([data-expanded=\"true\"]):after{content:\"\";position:absolute;left:0;width:100%;height:calc(var(--toast-gap, 16px) + 1px);bottom:100%;pointer-events:auto}:host([data-variant=\"loading\"]){touch-action:auto}:host([data-position^=\"bottom\"]){bottom:0;transform-origin:50% 100%;--_toast-y: calc(-1 * var(--offset, 0px));--_toast-enter-y: 100%}:host([data-position^=\"top\"]){top:0;transform-origin:50% 0;--_toast-y: calc(1 * var(--offset, 0px));--_toast-enter-y: -100%}:host([data-swipe-direction=\"down\"]){--_toast-leave-y: 100%}:host([data-swipe-direction=\"up\"]){--_toast-leave-y: -100%}:host([data-expanded=\"false\"]){scale:calc(1 - var(--index, 0) * .05)}:host([data-expanded=\"false\"]:not(:last-child)){height:var(--front-toast-height);overflow:hidden}:host([data-expanded=\"false\"]:not(:last-child):not([data-headless=\"true\"]))>*:not(.close-btn){opacity:0;pointer-events:none}:host([data-expanded=\"false\"]:nth-last-child(n + 4)){opacity:0;pointer-events:none}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){--_chrome-bg: var(--toast-success-bg);--_chrome-fg: var(--toast-success-text);--_chrome-border: var(--toast-success-border)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){--_chrome-bg: var(--toast-error-bg);--_chrome-fg: var(--toast-error-text);--_chrome-border: var(--toast-error-border)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){--_chrome-bg: var(--toast-info-bg);--_chrome-fg: var(--toast-info-text);--_chrome-border: var(--toast-info-border)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){--_chrome-bg: var(--toast-warning-bg);--_chrome-fg: var(--toast-warning-text);--_chrome-border: var(--toast-warning-border)}:host([data-rich-colors=\"true\"]:is([data-variant=\"success\"],[data-variant=\"error\"],[data-variant=\"info\"],[data-variant=\"warning\"])){--_icon-fill: light-dark(var(--_chrome-fg), var(--_chrome-bg));--_icon-stroke: light-dark(var(--_chrome-bg), var(--_chrome-fg));--_icon-color: var(--_icon-stroke)}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@starting-style{:host([data-headless=\"true\"]){opacity:1}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]),:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;--_toast-x: -50%}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}@media(width>=40rem){:host{width:var(--toast-width)}:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]),:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;--_toast-x: -50%}}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:var(--_icon-fill);stroke:var(--_icon-stroke);color:var(--_icon-color);width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--_chrome-border);box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:1;scale:1;filter:blur(0)}.close-btn.close-enter{opacity:1;scale:1;filter:blur(0);transition:opacity .18s cubic-bezier(.19,1,.22,1),scale .18s cubic-bezier(.19,1,.22,1),filter .18s cubic-bezier(.19,1,.22,1)}@starting-style{.close-btn.close-enter{opacity:0;scale:.92;filter:blur(4px)}}.close-btn.close-leave{opacity:0;scale:.92;filter:blur(4px);pointer-events:none;transition:opacity .15s cubic-bezier(.19,1,.22,1),scale .15s cubic-bezier(.19,1,.22,1),filter .15s cubic-bezier(.19,1,.22,1)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95;transform:translate(var(--_toast-x)) translateY(var(--_toast-leave-y))}@media(prefers-reduced-motion:reduce){:host{transition:none}:host([data-position]){--_toast-enter-y: var(--_toast-y);--_toast-leave-y: var(--_toast-y)}:host>*{transition:none}:host(.leave){scale:1}.toast-row-btn:active{transform:none}.close-btn.close-enter{scale:1;filter:none;transition:opacity .15s ease}@starting-style{.close-btn.close-enter{opacity:0;scale:1;filter:none}}.close-btn.close-leave{scale:1;filter:none;transition:opacity .15s ease}.toast-icon-loading{animation:none}}\n"], dependencies: [{ kind: "directive", type: BetterToastOutlet, selector: "[betterToastOutlet]", inputs: ["betterToastOutlet", "betterToastOutletInputs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToastItem, decorators: [{
             type: Component,
-            args: [{ selector: 'li[betterToastItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], host: {
+            args: [{ selector: 'li[betterToastItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BetterToastOutlet], host: {
                         role: 'listitem',
                         tabindex: '0',
                         class: 'toast',
@@ -1009,95 +954,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '(pointerleave)': 'onPointerLeave($event)',
                     }, template: `
     @if (toast()?.component) {
-      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
+      <ng-container
+        [betterToastOutlet]="toast()!.component!"
+        [betterToastOutletInputs]="toast()?.componentInputs"
+      />
     } @else {
       @if (shouldShowIconColumn()) {
         <span class="toast-icon" aria-hidden="true">
           @if (toast()?.icon) {
-            <ng-container *ngComponentOutlet="toast()!.icon!" />
+            <ng-container [betterToastOutlet]="toast()!.icon!" />
           } @else if (iconComponent(); as IconCmp) {
-            <ng-container *ngComponentOutlet="IconCmp" />
+            <ng-container [betterToastOutlet]="IconCmp" />
+          } @else if (variant() === 'loading') {
+            <div class="toast-icon-loading"></div>
           } @else {
-            @switch (variant()) {
-              @case ('success') {
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="9"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                  />
-                  <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
-                    d="M8.48 12.22 10.9 14.64 15.74 9.14"
-                  />
-                </svg>
-              }
-              @case ('error') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+            <svg
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke-width]="variant() === 'error' ? 2 : 1.75"
+            >
+              @switch (variant()) {
+                @case ('success') {
+                  <circle cx="12" cy="12" r="9" />
+                  <path d="M8.48 12.22 10.9 14.64 15.74 9.14" />
+                }
+                @case ('error') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="9" y1="9" x2="15" y2="15" />
                   <line x1="15" y1="9" x2="9" y2="15" />
-                </svg>
-              }
-              @case ('info') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.75"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
+                }
+                @case ('info') {
                   <circle cx="12" cy="12" r="10" />
                   <line x1="12" y1="16" x2="12" y2="12" />
                   <line x1="12" y1="8" x2="12.01" y2="8" />
-                </svg>
-              }
-              @case ('warning') {
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
+                }
+                @case ('warning') {
                   <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.75"
                     d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
                   />
-                </svg>
+                }
               }
-              @case ('loading') {
-                <div class="toast-icon-loading" aria-hidden="true"></div>
-              }
-              @case ('description') {}
-              @case ('default') {}
-            }
+            </svg>
           }
         </span>
       }
@@ -1107,10 +1007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
           @if (toast()?.contentComponent) {
             <div class="msg" [class]="resolvedClassNames()?.message">
               <ng-container
-                *ngComponentOutlet="
-                  toast()!.contentComponent!;
-                  inputs: contentComponentOutletInputs()
-                "
+                [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
               />
             </div>
           } @else {
@@ -1126,10 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
         @if (toast()?.contentComponent) {
           <div class="msg" [class]="resolvedClassNames()?.message">
             <ng-container
-              *ngComponentOutlet="
-                toast()!.contentComponent!;
-                inputs: contentComponentOutletInputs()
-              "
+              [betterToastOutlet]="toast()!.contentComponent!"
+                [betterToastOutletInputs]="toast()?.contentComponentInputs"
             />
           </div>
         } @else {
@@ -1138,57 +1034,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       }
 
       @if (toast()?.toastAction; as rowAction) {
-        @switch (rowAction.role) {
-          @case ('action') {
-            <button
-              type="button"
-              class="toast-row-btn action-btn"
-              [class]="resolvedClassNames()?.actionButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-          @case ('cancel') {
-            <button
-              type="button"
-              class="toast-row-btn cancel-btn"
-              [class]="resolvedClassNames()?.cancelButton"
-              [attr.data-row-btn]="rowAction.role"
-              (pointerdown)="onRowButtonPointerDown($event)"
-              (click)="onToastRowClick($event)"
-            >
-              {{ rowAction.label }}
-            </button>
-          }
-        }
+        <button
+          type="button"
+          class="toast-row-btn"
+          [class.action-btn]="rowAction.role === 'action'"
+          [class.cancel-btn]="rowAction.role === 'cancel'"
+          [class]="
+            rowAction.role === 'action'
+              ? resolvedClassNames()?.actionButton
+              : resolvedClassNames()?.cancelButton
+          "
+          [attr.data-row-btn]="rowAction.role"
+          (pointerdown)="onRowButtonPointerDown($event)"
+          (click)="onToastRowClick($event)"
+        >
+          {{ rowAction.label }}
+        </button>
       }
     }
 
-    @if (showCloseButton()) {
+    @if (closeButton() && !isHeadless() && (stackFront() || stackExpanded())) {
       <button
         type="button"
         class="close-btn"
         [class]="resolvedClassNames()?.closeButton"
-        [animate.enter]="closeButtonEnterClass()"
-        [animate.leave]="closeButtonLeaveClass()"
+        [animate.enter]="stackFront() ? null : 'close-enter'"
+        [animate.leave]="stackFront() ? null : 'close-leave'"
         (click)="toaster.dismiss(toast()?.id ?? '')"
         [attr.aria-label]="dismissButtonAriaLabel()"
       >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.75"
-            d="M6 18 18 6M6 6l12 12"
-          />
+        <svg
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.75"
+          aria-hidden="true"
+        >
+          <path d="M6 18 18 6M6 6l12 12" />
         </svg>
       </button>
     }
-  `, styles: [":host{--_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"] }]
+  `, styles: [":host{--_chrome-bg: var(--toast-bg);--_chrome-fg: var(--toast-color);--_chrome-border: var(--toast-border-color);--_icon-fill: light-dark(var(--toast-color), var(--toast-bg));--_icon-stroke: light-dark(var(--toast-bg), var(--toast-color));--_icon-color: var(--_icon-stroke);--_toast-x: 0%;--_toast-y: 0px;--_toast-enter-y: 0px;--_toast-leave-y: 0px;--toast-line-height: 1.35;--index: 0;--collapsed-peek: 14px;--offset: calc(var(--index, 0) * var(--collapsed-peek));display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--_chrome-border);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;height:var(--initial-height, auto);scale:1;z-index:calc(1000 - var(--index, 0));transform:translate(var(--_toast-x)) translateY(var(--_toast-y));transition:opacity .4s ease,transform .4s ease,scale .4s ease,height .4s ease,box-shadow .2s ease}@starting-style{:host{opacity:0;transform:translate(var(--_toast-x)) translateY(var(--_toast-enter-y))}}:host>*:not(.close-btn){transition:opacity .4s ease}:host([data-expanded=\"true\"]):after{content:\"\";position:absolute;left:0;width:100%;height:calc(var(--toast-gap, 16px) + 1px);bottom:100%;pointer-events:auto}:host([data-variant=\"loading\"]){touch-action:auto}:host([data-position^=\"bottom\"]){bottom:0;transform-origin:50% 100%;--_toast-y: calc(-1 * var(--offset, 0px));--_toast-enter-y: 100%}:host([data-position^=\"top\"]){top:0;transform-origin:50% 0;--_toast-y: calc(1 * var(--offset, 0px));--_toast-enter-y: -100%}:host([data-swipe-direction=\"down\"]){--_toast-leave-y: 100%}:host([data-swipe-direction=\"up\"]){--_toast-leave-y: -100%}:host([data-expanded=\"false\"]){scale:calc(1 - var(--index, 0) * .05)}:host([data-expanded=\"false\"]:not(:last-child)){height:var(--front-toast-height);overflow:hidden}:host([data-expanded=\"false\"]:not(:last-child):not([data-headless=\"true\"]))>*:not(.close-btn){opacity:0;pointer-events:none}:host([data-expanded=\"false\"]:nth-last-child(n + 4)){opacity:0;pointer-events:none}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){--_chrome-bg: var(--toast-success-bg);--_chrome-fg: var(--toast-success-text);--_chrome-border: var(--toast-success-border)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){--_chrome-bg: var(--toast-error-bg);--_chrome-fg: var(--toast-error-text);--_chrome-border: var(--toast-error-border)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){--_chrome-bg: var(--toast-info-bg);--_chrome-fg: var(--toast-info-text);--_chrome-border: var(--toast-info-border)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){--_chrome-bg: var(--toast-warning-bg);--_chrome-fg: var(--toast-warning-text);--_chrome-border: var(--toast-warning-border)}:host([data-rich-colors=\"true\"]:is([data-variant=\"success\"],[data-variant=\"error\"],[data-variant=\"info\"],[data-variant=\"warning\"])){--_icon-fill: light-dark(var(--_chrome-fg), var(--_chrome-bg));--_icon-stroke: light-dark(var(--_chrome-bg), var(--_chrome-fg));--_icon-color: var(--_icon-stroke)}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@starting-style{:host([data-headless=\"true\"]){opacity:1}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]),:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;--_toast-x: -50%}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}@media(width>=40rem){:host{width:var(--toast-width)}:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]),:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;--_toast-x: -50%}}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:var(--_icon-fill);stroke:var(--_icon-stroke);color:var(--_icon-color);width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--_chrome-border);box-shadow:var(--toast-shadow);background:var(--_chrome-bg);color:var(--_chrome-fg);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:1;scale:1;filter:blur(0)}.close-btn.close-enter{opacity:1;scale:1;filter:blur(0);transition:opacity .18s cubic-bezier(.19,1,.22,1),scale .18s cubic-bezier(.19,1,.22,1),filter .18s cubic-bezier(.19,1,.22,1)}@starting-style{.close-btn.close-enter{opacity:0;scale:.92;filter:blur(4px)}}.close-btn.close-leave{opacity:0;scale:.92;filter:blur(4px);pointer-events:none;transition:opacity .15s cubic-bezier(.19,1,.22,1),scale .15s cubic-bezier(.19,1,.22,1),filter .15s cubic-bezier(.19,1,.22,1)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95;transform:translate(var(--_toast-x)) translateY(var(--_toast-leave-y))}@media(prefers-reduced-motion:reduce){:host{transition:none}:host([data-position]){--_toast-enter-y: var(--_toast-y);--_toast-leave-y: var(--_toast-y)}:host>*{transition:none}:host(.leave){scale:1}.toast-row-btn:active{transform:none}.close-btn.close-enter{scale:1;filter:none;transition:opacity .15s ease}@starting-style{.close-btn.close-enter{opacity:0;scale:1;filter:none}}.close-btn.close-leave{scale:1;filter:none;transition:opacity .15s ease}.toast-icon-loading{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: false }] }], toasterStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterStyle", required: false }] }], toasterClassNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterClassNames", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], customIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcons", required: false }] }], dismissButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissButtonAriaLabel", required: false }] }], stackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackPosition", required: false }] }], stackExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackExpanded", required: false }] }], stackFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackFront", required: false }] }], stackHover: [{ type: i0.Output, args: ["stackHover"] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
 /**
  * Renders the toaster stack. Add once near the root of your app (e.g. in `App`).
@@ -1214,11 +1102,7 @@ class BetterToaster {
      * `0` still works. Does not apply to `loading()`. Defaults to the library default (4000ms).
      */
     durationMs = input(DEFAULT_TOAST_DURATION_MS, { ...(ngDevMode ? { debugName: "durationMs" } : /* istanbul ignore next */ {}), alias: 'duration',
-        transform: (value) => {
-            const durationMs = parseToasterDurationMs(value);
-            this.toaster.setDefaultDurationMs(durationMs);
-            return durationMs;
-        } });
+        transform: parseToasterDurationMs });
     /** Where the stack is anchored on the viewport. */
     position = input('bottom-right', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
@@ -1301,6 +1185,9 @@ class BetterToaster {
     layoutExpanded = computed(() => !this.stacked() || this.expanded(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "layoutExpanded" }] : /* istanbul ignore next */ []));
     constructor() {
+        effect(() => {
+            this.toaster.setDefaultDurationMs(this.durationMs());
+        });
         effect(() => {
             if (this.toaster.toasts().length === 0) {
                 this.hovering.set(false);
@@ -1322,30 +1209,7 @@ class BetterToaster {
     /** Resolved `aria-label` for each toast’s dismiss control. */
     dismissButtonAriaLabel = computed(() => this.accessibilityLabels()?.dismissButton ?? DEFAULT_TOASTER_ARIA_DISMISS_BUTTON, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dismissButtonAriaLabel" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack. */
-    offsetTop = computed(() => resolveToasterOffsetSide(this.offset(), 'top'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetTop" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack. */
-    offsetRight = computed(() => resolveToasterOffsetSide(this.offset(), 'right'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetRight" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack. */
-    offsetBottom = computed(() => resolveToasterOffsetSide(this.offset(), 'bottom'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetBottom" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack. */
-    offsetLeft = computed(() => resolveToasterOffsetSide(this.offset(), 'left'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "offsetLeft" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack on narrow layouts. */
-    mobileOffsetTop = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'top'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetTop" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack on narrow layouts. */
-    mobileOffsetRight = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'right'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetRight" }] : /* istanbul ignore next */ []));
-    /** Vertical offset in px for the toast stack on narrow layouts. */
-    mobileOffsetBottom = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'bottom'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetBottom" }] : /* istanbul ignore next */ []));
-    /** Horizontal offset in px for the toast stack on narrow layouts. */
-    mobileOffsetLeft = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'left'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileOffsetLeft" }] : /* istanbul ignore next */ []));
+    offsetSide = resolveToasterOffsetSide;
     /**
      * `--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`.
@@ -1444,12 +1308,6 @@ class BetterToaster {
             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: "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
@@ -1461,14 +1319,14 @@ class BetterToaster {
     >
       <ol
         class="toast-container"
-        [style.--toast-offset-top]="offsetTop()"
-        [style.--toast-offset-right]="offsetRight()"
-        [style.--toast-offset-bottom]="offsetBottom()"
-        [style.--toast-offset-left]="offsetLeft()"
-        [style.--toast-offset-mobile-top]="mobileOffsetTop()"
-        [style.--toast-offset-mobile-right]="mobileOffsetRight()"
-        [style.--toast-offset-mobile-bottom]="mobileOffsetBottom()"
-        [style.--toast-offset-mobile-left]="mobileOffsetLeft()"
+        [style.--toast-offset-top]="offsetSide(offset(), 'top')"
+        [style.--toast-offset-right]="offsetSide(offset(), 'right')"
+        [style.--toast-offset-bottom]="offsetSide(offset(), 'bottom')"
+        [style.--toast-offset-left]="offsetSide(offset(), 'left')"
+        [style.--toast-offset-mobile-top]="offsetSide(mobileOffset(), 'top')"
+        [style.--toast-offset-mobile-right]="offsetSide(mobileOffset(), 'right')"
+        [style.--toast-offset-mobile-bottom]="offsetSide(mobileOffset(), 'bottom')"
+        [style.--toast-offset-mobile-left]="offsetSide(mobileOffset(), 'left')"
         [style.--toast-gap]="stackGapPx + 'px'"
         [style.--front-toast-height]="frontToastHeightCss()"
         [attr.data-position]="position()"
@@ -1508,7 +1366,7 @@ class BetterToaster {
         }
       </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 });
+  `, isInline: true, styles: [":host{--toast-width: 356px;--toast-gap: 16px;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(hsl(0, 0%, 93%), hsl(0, 0%, 20%));--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toast-success-bg: light-dark(oklch(97.9% .021 166.113), oklch(26.2% .051 172.552));--toast-success-text: light-dark(oklch(59.6% .145 163.225), oklch(92.5% .084 155.995));--toast-success-border: light-dark( oklch(69.6% .17 162.48 / .1), oklch(92.5% .084 155.995 / .1) );--toast-error-bg: light-dark(oklch(97.5% .012 25), oklch(25.8% .092 26.042));--toast-error-text: light-dark(oklch(57.7% .245 27.325), oklch(88.5% .062 18.334));--toast-error-border: light-dark( oklch(80.8% .114 19.571 / .1), oklch(88.5% .062 18.334 / .125) );--toast-info-bg: light-dark(oklch(97.7% .013 236.62), oklch(29.3% .066 243.157));--toast-info-text: light-dark(oklch(68.5% .169 237.323), oklch(90.1% .058 230.902));--toast-info-border: light-dark( oklch(82.8% .111 230.318 / .15), oklch(90.1% .058 230.902 / .125) );--toast-warning-bg: light-dark(oklch(98.7% .022 95.277), oklch(28.6% .066 53.813));--toast-warning-text: light-dark(oklch(66.6% .179 58.318), oklch(92.4% .12 95.746));--toast-warning-border: light-dark( oklch(76.9% .188 70.08 / .15), oklch(92.4% .12 95.746 / .125) );--toast-action-bg: light-dark(var(--color-black), var(--color-white));--toast-action-text: light-dark(var(--color-white), var(--color-black));--toast-action-border: light-dark(var(--color-black), var(--color-white));--toast-cancel-bg: light-dark(oklch(86.9% .005 56.366 / .3), oklch(26.8% .007 34.298 / .85));--toast-cancel-border: light-dark( oklch(86.9% .005 56.366 / .1), oklch(26.8% .007 34.298 / .5) );position:fixed;z-index:var(--toast-z-index);width:auto;pointer-events:none;overflow:visible;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"], dependencies: [{ kind: "component", type: BetterToastItem, selector: "li[betterToastItem]", inputs: ["toast", "toasterStyle", "toasterClassNames", "variant", "closeButton", "customIcons", "dismissButtonAriaLabel", "stackPosition", "stackExpanded", "stackFront", "theme"], outputs: ["stackHover", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: BetterToaster, decorators: [{
             type: Component,
@@ -1524,14 +1382,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     >
       <ol
         class="toast-container"
-        [style.--toast-offset-top]="offsetTop()"
-        [style.--toast-offset-right]="offsetRight()"
-        [style.--toast-offset-bottom]="offsetBottom()"
-        [style.--toast-offset-left]="offsetLeft()"
-        [style.--toast-offset-mobile-top]="mobileOffsetTop()"
-        [style.--toast-offset-mobile-right]="mobileOffsetRight()"
-        [style.--toast-offset-mobile-bottom]="mobileOffsetBottom()"
-        [style.--toast-offset-mobile-left]="mobileOffsetLeft()"
+        [style.--toast-offset-top]="offsetSide(offset(), 'top')"
+        [style.--toast-offset-right]="offsetSide(offset(), 'right')"
+        [style.--toast-offset-bottom]="offsetSide(offset(), 'bottom')"
+        [style.--toast-offset-left]="offsetSide(offset(), 'left')"
+        [style.--toast-offset-mobile-top]="offsetSide(mobileOffset(), 'top')"
+        [style.--toast-offset-mobile-right]="offsetSide(mobileOffset(), 'right')"
+        [style.--toast-offset-mobile-bottom]="offsetSide(mobileOffset(), 'bottom')"
+        [style.--toast-offset-mobile-left]="offsetSide(mobileOffset(), 'left')"
         [style.--toast-gap]="stackGapPx + 'px'"
         [style.--front-toast-height]="frontToastHeightCss()"
         [attr.data-position]="position()"
@@ -1571,7 +1429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
         }
       </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"] }]
+  `, styles: [":host{--toast-width: 356px;--toast-gap: 16px;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(hsl(0, 0%, 93%), hsl(0, 0%, 20%));--toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toast-success-bg: light-dark(oklch(97.9% .021 166.113), oklch(26.2% .051 172.552));--toast-success-text: light-dark(oklch(59.6% .145 163.225), oklch(92.5% .084 155.995));--toast-success-border: light-dark( oklch(69.6% .17 162.48 / .1), oklch(92.5% .084 155.995 / .1) );--toast-error-bg: light-dark(oklch(97.5% .012 25), oklch(25.8% .092 26.042));--toast-error-text: light-dark(oklch(57.7% .245 27.325), oklch(88.5% .062 18.334));--toast-error-border: light-dark( oklch(80.8% .114 19.571 / .1), oklch(88.5% .062 18.334 / .125) );--toast-info-bg: light-dark(oklch(97.7% .013 236.62), oklch(29.3% .066 243.157));--toast-info-text: light-dark(oklch(68.5% .169 237.323), oklch(90.1% .058 230.902));--toast-info-border: light-dark( oklch(82.8% .111 230.318 / .15), oklch(90.1% .058 230.902 / .125) );--toast-warning-bg: light-dark(oklch(98.7% .022 95.277), oklch(28.6% .066 53.813));--toast-warning-text: light-dark(oklch(66.6% .179 58.318), oklch(92.4% .12 95.746));--toast-warning-border: light-dark( oklch(76.9% .188 70.08 / .15), oklch(92.4% .12 95.746 / .125) );--toast-action-bg: light-dark(var(--color-black), var(--color-white));--toast-action-text: light-dark(var(--color-white), var(--color-black));--toast-action-border: light-dark(var(--color-black), var(--color-white));--toast-cancel-bg: light-dark(oklch(86.9% .005 56.366 / .3), oklch(26.8% .007 34.298 / .85));--toast-cancel-border: light-dark( oklch(86.9% .005 56.366 / .1), oklch(26.8% .007 34.298 / .5) );position:fixed;z-index:var(--toast-z-index);width:auto;pointer-events:none;overflow:visible;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { durationMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], mobileOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOffset", required: false }] }], richColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "richColors", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], toastOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastOptions", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], accessibilityLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabels", required: false }] }] } });
 
 /*