better-toast 0.0.1

package/fesm2022/better-toast.mjs

@@ -0,0 +1,1318 @@
+import { NgComponentOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, ElementRef, input, output, computed, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/** Fallback when `<app-toaster [duration]>` is absent and a helper omits `durationMs`. */
+const DEFAULT_TOAST_DURATION_MS = 4000;
+/** Default label for {@link ToasterService.action} when {@link ToastMethodButtonConfig.label} is omitted. */
+const DEFAULT_TOAST_ACTION_LABEL = 'Action';
+/** Default label for {@link ToasterService.cancel} when {@link ToastMethodButtonConfig.label} is omitted. */
+const DEFAULT_TOAST_CANCEL_LABEL = 'Cancel';
+/**
+ * Use with `[duration]` or `options.durationMs` so a toast stays until manually dismissed.
+ * (`0` is still treated as non-auto-dismiss for backward compatibility.)
+ */
+const TOAST_DURATION_MANUAL_DISMISS = Number.POSITIVE_INFINITY;
+/** Coerces {@link ToasterDuration} to ms (only the literal string `"Infinity"` for manual dismiss). */
+function parseToasterDurationMs(value) {
+    if (value === 'Infinity') {
+        return TOAST_DURATION_MANUAL_DISMISS;
+    }
+    if (Number.isNaN(value)) {
+        return DEFAULT_TOAST_DURATION_MS;
+    }
+    return value;
+}
+function shouldScheduleAutoDismiss(durationMs) {
+    return Number.isFinite(durationMs) && durationMs > 0;
+}
+class ToasterService {
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
+    autoDismissByToastId = new Map();
+    /** Updated by `<better-toaster [duration]>`; initial value is {@link DEFAULT_TOAST_DURATION_MS}. */
+    defaultDurationMs = DEFAULT_TOAST_DURATION_MS;
+    /** Active messages, oldest first. */
+    toasts = this._toasts.asReadonly();
+    /**
+     * Synced from `<better-toaster [duration]>`; used when a service call omits `durationMs`.
+     * Does not change timers on toasts already shown.
+     */
+    setDefaultDurationMs(ms) {
+        const normalizedMs = Number.isNaN(ms) ? DEFAULT_TOAST_DURATION_MS : Math.max(0, ms);
+        this.defaultDurationMs = normalizedMs;
+    }
+    resolveDuration(durationMs) {
+        if (durationMs !== undefined) {
+            return parseToasterDurationMs(durationMs);
+        }
+        return this.defaultDurationMs;
+    }
+    /**
+     * Stops any auto-dismiss for this toast: clears a running timeout if present and drops timer state.
+     */
+    cancelAutoDismiss(id) {
+        const state = this.autoDismissByToastId.get(id);
+        if (!state) {
+            return;
+        }
+        if (state.kind === 'scheduled') {
+            globalThis.clearTimeout(state.timer);
+        }
+        this.autoDismissByToastId.delete(id);
+    }
+    /**
+     * (Re)starts auto-dismiss from a concrete duration in milliseconds.
+     * Idempotent per toast: always cancels any existing timer first.
+     * Manual dismiss (`Infinity`) and non-positive values do not schedule a timer.
+     */
+    scheduleAutoDismiss(id, durationMs) {
+        this.cancelAutoDismiss(id);
+        if (!shouldScheduleAutoDismiss(durationMs)) {
+            return;
+        }
+        const deadline = Date.now() + durationMs;
+        const timer = globalThis.setTimeout(() => {
+            this.removeToast(id, 'auto');
+        }, durationMs);
+        this.autoDismissByToastId.set(id, { kind: 'scheduled', timer, deadline });
+    }
+    /**
+     * Pauses the auto-dismiss timer while the pointer is over the toast (e.g. hover).
+     * No-op if the toast has no active auto-dismiss.
+     *
+     * @param id The toast ID.
+     */
+    pauseAutoDismiss(id) {
+        const state = this.autoDismissByToastId.get(id);
+        if (!state || state.kind !== 'scheduled') {
+            return;
+        }
+        globalThis.clearTimeout(state.timer);
+        const remainingMs = Math.max(0, state.deadline - Date.now());
+        this.autoDismissByToastId.set(id, { kind: 'paused', remainingMs });
+    }
+    /**
+     * Resumes a paused auto-dismiss with the remaining time from {@link pauseAutoDismiss}.
+     *
+     * @param id The toast ID.
+     */
+    resumeAutoDismiss(id) {
+        const state = this.autoDismissByToastId.get(id);
+        if (!state || state.kind !== 'paused') {
+            return;
+        }
+        const { remainingMs } = state;
+        this.autoDismissByToastId.delete(id);
+        if (remainingMs <= 0) {
+            this.removeToast(id, 'auto');
+            return;
+        }
+        this.scheduleAutoDismiss(id, remainingMs);
+    }
+    /**
+     * Display a neutral (default) toast notification.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    show(message, options) {
+        return this.add(message, 'default', this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * Display a toast using the **`description`** variant: same neutral chrome as **`default`**.
+     *
+     * @param message Title line.
+     * @param options Optional configuration object {@link ToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    description(message, options) {
+        return this.add(message, 'description', this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * Display a success toast notification.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    success(message, options) {
+        return this.add(message, 'success', this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * Display an error toast notification.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    error(message, options) {
+        return this.add(message, 'error', this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * Display an info toast notification.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    info(message, options) {
+        return this.add(message, 'info', this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * Display a warning toast notification.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    warning(message, options) {
+        return this.add(message, 'warning', this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * 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.
+     * The component also receives **`toastId`** (matches the returned id) for programmatic dismiss.
+     *
+     * @param component The component class (must be usable with `NgComponentOutlet`).
+     * @param options Optional configuration object {@link CustomToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    custom(component, options) {
+        return this.addContentComponent(component, 'default', this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * Show a toast whose body is a **standalone** Angular component on a headless host: no default border,
+     * padding, shadow, or surface color — only stack position and enter/leave animations; the component supplies all visuals.
+     *
+     * 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 options Optional configuration object {@link HeadlessToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    headless(component, options) {
+        return this.addComponent(component, this.resolveDuration(options?.durationMs), options);
+    }
+    /**
+     * Display a loading toast notification.
+     *
+     * If `options.durationMs` is omitted, the toast stays until you dismiss or replace it (same as {@link TOAST_DURATION_MANUAL_DISMISS}).
+     * Passing a finite positive `durationMs` schedules auto-dismiss for loading toasts like other variants.
+     * The literal **`"Infinity"`** (or {@link TOAST_DURATION_MANUAL_DISMISS} / `0`) keeps the toast until dismissed.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    loading(message, options) {
+        const durationMs = options?.durationMs !== undefined
+            ? parseToasterDurationMs(options.durationMs)
+            : TOAST_DURATION_MANUAL_DISMISS;
+        return this.add(message, 'loading', durationMs, options);
+    }
+    /**
+     * Toast with message and a single **action** button. Default action button label is {@link DEFAULT_TOAST_ACTION_LABEL}.
+     * Pass `action.label` and `action.onClick` in {@link ToastActionMethodOptions} to customize the action button.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastActionMethodOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    action(message, options) {
+        const { action: actionCfg, ...rest } = options;
+        const toastAction = {
+            role: 'action',
+            label: actionCfg.label ?? DEFAULT_TOAST_ACTION_LABEL,
+            onClick: actionCfg.onClick,
+        };
+        return this.add(message, 'default', this.resolveDuration(rest.durationMs), { ...rest, icon: null }, toastAction);
+    }
+    /**
+     * Toast with message and a **cancel**-style button. Default cancel button label is {@link DEFAULT_TOAST_CANCEL_LABEL}.
+     * Pass `cancel.label` and `cancel.onClick` in {@link ToastCancelMethodOptions} to customize the cancel button.
+     *
+     * @param message The toast content.
+     * @param options Optional configuration object {@link ToastCancelMethodOptions}.
+     * @returns The toast ID, useful for programmatic dismissal.
+     */
+    cancel(message, options) {
+        const { cancel: cancelCfg, ...rest } = options;
+        const toastAction = {
+            role: 'cancel',
+            label: cancelCfg.label ?? DEFAULT_TOAST_CANCEL_LABEL,
+            onClick: cancelCfg.onClick,
+        };
+        return this.add(message, 'default', this.resolveDuration(rest.durationMs), { ...rest, icon: null }, toastAction);
+    }
+    /**
+     * Shows one toast: loading until `userPromise` settles, then the same toast updates to success or error.
+     * Returns the same promise (fulfillment/rejection preserved for callers).
+     *
+     * @param userPromise The promise to display.
+     * @param labels The labels for the loading, success, and error states.
+     * @returns The promise (fulfillment/rejection preserved for callers).
+     */
+    promise(userPromise, labels) {
+        const loadingId = this.loading(labels.loading);
+        return Promise.resolve(userPromise).then((value) => {
+            const message = typeof labels.success === 'function' ? labels.success(value) : labels.success;
+            this.updateToast(loadingId, message, 'success', this.resolveDuration(undefined));
+            return value;
+        }, (reason) => {
+            const message = typeof labels.error === 'function' ? labels.error(reason) : labels.error;
+            this.updateToast(loadingId, message, 'error', this.resolveDuration(undefined));
+            throw reason;
+        });
+    }
+    /**
+     * Dismiss a toast notification.
+     *
+     * @param id The toast ID.
+     */
+    dismiss(id) {
+        this.removeToast(id, 'manual');
+    }
+    /**
+     * Clear all toast notifications.
+     */
+    clear() {
+        const snapshot = [...this._toasts()];
+        for (const state of this.autoDismissByToastId.values()) {
+            if (state.kind === 'scheduled') {
+                globalThis.clearTimeout(state.timer);
+            }
+        }
+        this.autoDismissByToastId.clear();
+        this._toasts.set([]);
+        for (const toast of snapshot) {
+            toast.onDismiss?.();
+        }
+    }
+    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 = {
+            id,
+            message,
+            variant,
+            ...(icon !== undefined ? { icon } : {}),
+            ...(style !== undefined ? { style } : {}),
+            ...(classNames !== undefined ? { classNames } : {}),
+            ...(description !== undefined ? { description } : {}),
+            ...(onDismiss !== undefined ? { onDismiss } : {}),
+            ...(onAutoClose !== undefined ? { onAutoClose } : {}),
+            ...(toastAction !== undefined ? { toastAction } : {}),
+        };
+        this._toasts.update((list) => [...list, item]);
+        this.scheduleAutoDismiss(id, durationMs);
+        return id;
+    }
+    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 = {
+            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;
+    }
+    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 = {
+            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;
+    }
+    updateToast(id, message, variant, durationMs) {
+        let found = false;
+        this._toasts.update((toasts) => toasts.map((toast) => {
+            if (toast.id !== id) {
+                return toast;
+            }
+            found = true;
+            return { ...toast, message, variant };
+        }));
+        if (found) {
+            this.scheduleAutoDismiss(id, durationMs);
+        }
+    }
+    removeToast(id, cause) {
+        const toast = this._toasts().find((t) => t.id === id);
+        if (!toast) {
+            return;
+        }
+        this.cancelAutoDismiss(id);
+        this._toasts.update((list) => list.filter((t) => t.id !== id));
+        if (cause === 'auto') {
+            toast.onAutoClose?.();
+        }
+        else {
+            toast.onDismiss?.();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToasterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToasterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const TOASTER_POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+/** Default `aria-label` for the toaster live region (`<section>`). */
+const DEFAULT_TOASTER_ARIA_NOTIFICATIONS_REGION = 'Notifications';
+/** Default `aria-label` for the per-toast dismiss (close) control. */
+const DEFAULT_TOASTER_ARIA_DISMISS_BUTTON = 'Dismiss';
+const TOAST_VARIANTS = [
+    'default',
+    'description',
+    'success',
+    'error',
+    'info',
+    'warning',
+    'loading',
+];
+
+const GAP = 16;
+function swipeDirectionForPosition(position) {
+    return position.startsWith('bottom') ? 'down' : 'up';
+}
+function resolveToasterOffsetSide(offset, side) {
+    if (offset == null) {
+        return undefined;
+    }
+    if (typeof offset === 'string') {
+        return offset;
+    }
+    return offset[side];
+}
+function mergeToastHostStyles(base, override) {
+    if (!base && !override)
+        return undefined;
+    if (!base)
+        return override;
+    if (!override)
+        return base;
+    return { ...base, ...override };
+}
+function mergeToastClassNames(base, override) {
+    if (!base && !override)
+        return undefined;
+    if (!base)
+        return override;
+    if (!override)
+        return base;
+    return { ...base, ...override };
+}
+class BetterToastItem {
+    /** Shared toaster service (e.g. dismiss from the close button). */
+    toaster = inject(ToasterService);
+    /** Host element ref used to read `offsetHeight` after the first render. */
+    host = inject(ElementRef);
+    /** Toast payload (message, id, variant from the service). */
+    toast = input(...(ngDevMode ? [undefined, { debugName: "toast" }] : /* istanbul ignore next */ []));
+    /**
+     * Styles from `<app-toaster [toastOptions]>`; merged with {@link ToasterItem.style} so per-toast keys win.
+     */
+    toasterStyle = input(...(ngDevMode ? [undefined, { debugName: "toasterStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Classes from `<app-toaster [toastOptions]>` — same shape as {@link ToasterToastOptions.classNames}.
+     * Merged with {@link ToasterItem.classNames}; per-toast keys replace the same keys from the toaster.
+     * Styles for those classes usually need **`!important`** to override the library’s encapsulated CSS; see {@link ToastChromeClassNames}.
+     */
+    toasterClassNames = input(...(ngDevMode ? [undefined, { debugName: "toasterClassNames" }] : /* istanbul ignore next */ []));
+    /** Which icon and color treatment to show for this row. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Vertical stack offset in px; bound to `--offset` on the host for layout. */
+    offset = input.required(...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** When false, the dismiss control is not rendered (toasts may still auto-dismiss or be cleared via the service). */
+    closeButton = input(true, ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-variant icon overrides from `<app-toaster [icons]>`.
+     * Each override must be a standalone component whose template includes the SVG artwork.
+     */
+    customIcons = input(...(ngDevMode ? [undefined, { debugName: "customIcons" }] : /* istanbul ignore next */ []));
+    /**
+     * `aria-label` for the dismiss control; set from `<better-toaster [accessibilityLabels]>`.
+     * Default {@link DEFAULT_TOASTER_ARIA_DISMISS_BUTTON}.
+     */
+    dismissButtonAriaLabel = input(DEFAULT_TOASTER_ARIA_DISMISS_BUTTON, ...(ngDevMode ? [{ debugName: "dismissButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Stack anchor from `<better-toaster [position]>` — drives swipe axis and `data-swipe-direction`. */
+    stackPosition = input('bottom-right', ...(ngDevMode ? [{ debugName: "stackPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Color palette from `<better-toaster [theme]>`; mirrored on the host as `data-theme`
+     * so item-scoped CSS can react to the chosen mode without `:host-context()`.
+     */
+    theme = input('system', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    /** Emits the measured host height in px once after the first render so the parent can stack siblings. */
+    heightChange = output();
+    /**
+     * Stacked title + optional secondary line: {@link ToastVariant} **`description`**, or any variant with
+     * non-empty {@link ToasterItem.description} ({@link ToastOptions.description} on `show` / `success` / etc.).
+     */
+    hasDescription = computed(() => {
+        const toast = this.toast();
+        if (!toast)
+            return false;
+        if (toast.variant === 'description')
+            return true;
+        return !!toast.description?.trim();
+    }, ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    /** Merged inline styles for the toast (`[toastOptions].style` then per-toast `style`). */
+    hostStyle = computed(() => mergeToastHostStyles(this.toasterStyle(), this.toast()?.style), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    /** Merged `[class]` strings (`[toastOptions].classNames` then per-toast `classNames`). */
+    resolvedClassNames = computed(() => mergeToastClassNames(this.toasterClassNames(), this.toast()?.classNames), ...(ngDevMode ? [{ debugName: "resolvedClassNames" }] : /* istanbul ignore next */ []));
+    /** Resolved standalone SVG icon component from `[icons]`, if any (not `null`). */
+    iconComponent = computed(() => {
+        const customIcon = this.customIcons()?.[this.variant()];
+        if (customIcon === null) {
+            return undefined;
+        }
+        return customIcon;
+    }, ...(ngDevMode ? [{ debugName: "iconComponent" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the icon column unless the toast or `[icons]` opts out with `icon: null` / a `null` entry for that variant.
+     * The `default` variant has no built-in icon: the column appears only with a per-toast `icon` or `[icons].default`.
+     */
+    shouldShowIconColumn = computed(() => {
+        const toast = this.toast();
+        if (!toast)
+            return false;
+        if (toast.icon === null)
+            return false;
+        const toastVariant = toast.variant;
+        if (toastVariant === 'default' || toastVariant === 'description') {
+            if (toast.icon != null) {
+                return true;
+            }
+            const neutralIcon = toastVariant === 'default'
+                ? this.customIcons()?.default
+                : (this.customIcons()?.description ?? this.customIcons()?.default);
+            if (neutralIcon === null) {
+                return false;
+            }
+            return neutralIcon !== undefined;
+        }
+        if (toast.icon != null) {
+            return true;
+        }
+        if (this.customIcons()?.[toastVariant] === null) {
+            return false;
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowIconColumn" }] : /* istanbul ignore next */ []));
+    /** Bound to {@link ToasterItem.componentInputs} for headless (`NgComponentOutlet`) toasts. */
+    componentOutletInputs = computed(() => this.toast()?.componentInputs ?? {}, ...(ngDevMode ? [{ debugName: "componentOutletInputs" }] : /* istanbul ignore next */ []));
+    /** Bound to {@link ToasterItem.contentComponentInputs} for {@link ToasterService.custom} body components. */
+    contentComponentOutletInputs = computed(() => this.toast()?.contentComponentInputs ?? {}, ...(ngDevMode ? [{ debugName: "contentComponentOutletInputs" }] : /* istanbul ignore next */ []));
+    /** When true, host uses no default toast chrome (border, padding, surface) — only stack + motion. */
+    isHeadless = computed(() => this.toast()?.component != null, ...(ngDevMode ? [{ debugName: "isHeadless" }] : /* istanbul ignore next */ []));
+    /** `down` when anchored to the bottom (dismiss by swiping down), `up` when anchored to the top. */
+    swipeDirection = computed(() => swipeDirectionForPosition(this.stackPosition()), ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the measured host height in px once after the first render so the parent can stack siblings.
+     */
+    constructor() {
+        afterNextRender(() => {
+            const height = this.host.nativeElement.offsetHeight;
+            this.heightChange.emit(height);
+        });
+    }
+    /** True once the user has passed the drag threshold and is actively swiping. */
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    tracking = false;
+    startY = 0;
+    pointerId = -1;
+    dragStartThreshold = 0;
+    swipeCloseThreshold = 30;
+    /** Transform applied when swipe-dismiss completes (matches leave direction / headless centering). */
+    swipeDismissTransform = computed(() => {
+        const pos = this.stackPosition();
+        const down = this.swipeDirection() === 'down';
+        const y = down ? '130%' : '-130%';
+        if (this.isHeadless() && (pos === 'bottom-center' || pos === 'top-center')) {
+            return `translateX(-50%) translateY(${y})`;
+        }
+        return `translateY(${y})`;
+    }, ...(ngDevMode ? [{ debugName: "swipeDismissTransform" }] : /* istanbul ignore next */ []));
+    /** Prevents swipe-to-dismiss from starting when pressing the row action / cancel control. */
+    onRowButtonPointerDown(event) {
+        event.stopPropagation();
+    }
+    /**
+     * Dismisses the toast when the row action / cancel control is clicked.
+     * @param event - The event object.
+     */
+    onToastRowClick(event) {
+        const toast = this.toast();
+        toast?.toastAction?.onClick(event);
+        if (event.defaultPrevented)
+            return;
+        this.toaster.dismiss(toast?.id ?? '');
+    }
+    /**
+     * Pauses auto-dismiss when the pointer enters the toast.
+     */
+    onPointerEnter() {
+        const id = this.toast()?.id;
+        if (id) {
+            this.toaster.pauseAutoDismiss(id);
+        }
+    }
+    /**
+     * Resumes auto-dismiss when the pointer leaves the toast.
+     */
+    onPointerLeave() {
+        const id = this.toast()?.id;
+        if (id) {
+            this.toaster.resumeAutoDismiss(id);
+        }
+    }
+    /**
+     * Starts tracking the pointer down event.
+     * @param event - The pointer down event object.
+     */
+    onPointerDown(event) {
+        if (this.variant() === 'loading') {
+            return;
+        }
+        this.tracking = true;
+        this.startY = event.clientY;
+        this.pointerId = event.pointerId;
+    }
+    /**
+     * Updates the toast position when the pointer moves.
+     * @param event - The pointer move event object.
+     */
+    onPointerMove(event) {
+        if (!this.tracking && !this.isDragging())
+            return;
+        const el = this.host.nativeElement;
+        const rawDy = event.clientY - this.startY;
+        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;
+            if (passed) {
+                this.isDragging.set(true);
+                el.setPointerCapture(this.pointerId);
+            }
+            return;
+        }
+        el.style.translate = `0 ${dragDy}px`;
+    }
+    /**
+     * Ends tracking the pointer up event and dismisses the toast if the pointer has moved beyond the swipe threshold.
+     */
+    onPointerUp() {
+        this.tracking = false;
+        if (!this.isDragging())
+            return;
+        this.isDragging.set(false);
+        const el = this.host.nativeElement;
+        const id = this.toast()?.id ?? '';
+        const dy = parseFloat(el.style.translate?.split(' ')[1]) || 0;
+        try {
+            el.releasePointerCapture(this.pointerId);
+        }
+        catch {
+            /* pointer already released */
+        }
+        const down = this.swipeDirection() === 'down';
+        const shouldDismiss = down ? dy >= this.swipeCloseThreshold : dy <= -this.swipeCloseThreshold;
+        if (shouldDismiss) {
+            el.style.transform = this.swipeDismissTransform();
+            this.toaster.dismiss(id);
+        }
+        else {
+            el.style.transition = 'translate 400ms ease';
+            el.style.translate = '0 0';
+            const cleanup = () => {
+                el.style.transition = '';
+                el.style.translate = '';
+            };
+            el.addEventListener('transitionend', cleanup, { once: true });
+            setTimeout(cleanup, 450);
+        }
+    }
+    /**
+     * Ends tracking the pointer cancel event and resets the toast position.
+     */
+    onPointerCancel() {
+        this.tracking = false;
+        if (!this.isDragging())
+            return;
+        this.isDragging.set(false);
+        const el = this.host.nativeElement;
+        el.style.translate = '';
+        try {
+            el.releasePointerCapture(this.pointerId);
+        }
+        catch {
+            /* pointer already released */
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToastItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BetterToastItem, isStandalone: true, selector: "li[betterToastItem]", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: false, transformFunction: null }, toasterStyle: { classPropertyName: "toasterStyle", publicName: "toasterStyle", isSignal: true, isRequired: false, transformFunction: null }, toasterClassNames: { classPropertyName: "toasterClassNames", publicName: "toasterClassNames", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: true, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, customIcons: { classPropertyName: "customIcons", publicName: "customIcons", isSignal: true, isRequired: false, transformFunction: null }, dismissButtonAriaLabel: { classPropertyName: "dismissButtonAriaLabel", publicName: "dismissButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stackPosition: { classPropertyName: "stackPosition", publicName: "stackPosition", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { heightChange: "heightChange" }, host: { attributes: { "role": "listitem", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerCancel()", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "class": "resolvedClassNames()?.toast", "attr.data-variant": "variant()", "attr.data-icon": "shouldShowIconColumn() ? \"true\" : \"false\"", "attr.data-headless": "isHeadless() ? \"true\" : null", "attr.data-swipe-direction": "swipeDirection()", "attr.data-theme": "theme()", "style.--offset": "offset() + \"px\"", "style": "isHeadless() ? undefined : hostStyle()", "animate.leave": "\"leave\"" }, classAttribute: "toast" }, ngImport: i0, template: `
+    @if (toast()?.component) {
+      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
+    } @else {
+      @if (shouldShowIconColumn()) {
+        <span class="toast-icon" aria-hidden="true">
+          @if (toast()?.icon) {
+            <ng-container *ngComponentOutlet="toast()!.icon!" />
+          } @else if (iconComponent(); as IconCmp) {
+            <ng-container *ngComponentOutlet="IconCmp" />
+          } @else {
+            @switch (variant()) {
+              @case ('success') {
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="9"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.75"
+                  />
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.75"
+                    d="M8.48 12.22 10.9 14.64 15.74 9.14"
+                  />
+                </svg>
+              }
+              @case ('error') {
+                <svg
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="9" y1="9" x2="15" y2="15" />
+                  <line x1="15" y1="9" x2="9" y2="15" />
+                </svg>
+              }
+              @case ('info') {
+                <svg
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="16" x2="12" y2="12" />
+                  <line x1="12" y1="8" x2="12.01" y2="8" />
+                </svg>
+              }
+              @case ('warning') {
+                <svg
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.75"
+                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                  />
+                </svg>
+              }
+              @case ('loading') {
+                <div class="toast-icon-loading" aria-hidden="true"></div>
+              }
+              @case ('description') {}
+              @case ('default') {}
+            }
+          }
+        </span>
+      }
+
+      @if (hasDescription()) {
+        <div class="stack">
+          @if (toast()?.contentComponent) {
+            <div class="msg" [class]="resolvedClassNames()?.message">
+              <ng-container
+                *ngComponentOutlet="
+                  toast()!.contentComponent!;
+                  inputs: contentComponentOutletInputs()
+                "
+              />
+            </div>
+          } @else {
+            <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+          }
+          @if (toast()?.description) {
+            <p class="description" [class]="resolvedClassNames()?.description">
+              {{ toast()!.description }}
+            </p>
+          }
+        </div>
+      } @else {
+        @if (toast()?.contentComponent) {
+          <div class="msg" [class]="resolvedClassNames()?.message">
+            <ng-container
+              *ngComponentOutlet="
+                toast()!.contentComponent!;
+                inputs: contentComponentOutletInputs()
+              "
+            />
+          </div>
+        } @else {
+          <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+        }
+      }
+
+      @if (toast()?.toastAction; as rowAction) {
+        @switch (rowAction.role) {
+          @case ('action') {
+            <button
+              type="button"
+              class="toast-row-btn action-btn"
+              [class]="resolvedClassNames()?.actionButton"
+              [attr.data-row-btn]="rowAction.role"
+              (pointerdown)="onRowButtonPointerDown($event)"
+              (click)="onToastRowClick($event)"
+            >
+              {{ rowAction.label }}
+            </button>
+          }
+          @case ('cancel') {
+            <button
+              type="button"
+              class="toast-row-btn cancel-btn"
+              [class]="resolvedClassNames()?.cancelButton"
+              [attr.data-row-btn]="rowAction.role"
+              (pointerdown)="onRowButtonPointerDown($event)"
+              (click)="onToastRowClick($event)"
+            >
+              {{ rowAction.label }}
+            </button>
+          }
+        }
+      }
+    }
+
+    @if (closeButton() && !isHeadless()) {
+      <button
+        type="button"
+        class="close-btn"
+        [class]="resolvedClassNames()?.closeButton"
+        (click)="toaster.dismiss(toast()?.id ?? '')"
+        [attr.aria-label]="dismissButtonAriaLabel()"
+      >
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+            d="M6 18 18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--toast-border-color);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);--toast-line-height: 1.35;font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;scale:1;transition:opacity .4s ease,transform .4s ease,scale .4s ease}:host([data-variant=\"loading\"]){touch-action:auto}@media(width>=40rem){:host{width:var(--toast-width)}}:host([data-position^=\"bottom\"]){bottom:0;transform:translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(100%)}}:host([data-position^=\"top\"]){top:0;transform:translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(-100%)}}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1}}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1}}:host([data-variant=\"default\"]) .toast-icon svg,:host([data-variant=\"default\"]) .toast-icon ::ng-deep svg,:host([data-variant=\"description\"]) .toast-icon svg,:host([data-variant=\"description\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){background:var(--toast-success-bg);color:var(--toast-success-text);border-color:var(--toast-success-border)}:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-success-text),var(--toast-success-bg));stroke:light-dark(var(--toast-success-bg),var(--toast-success-text));color:light-dark(var(--toast-success-bg),var(--toast-success-text))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){background:var(--toast-error-bg);color:var(--toast-error-text);border-color:var(--toast-error-border)}:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-error-text),var(--toast-error-bg));stroke:light-dark(var(--toast-error-bg),var(--toast-error-text));color:light-dark(var(--toast-error-bg),var(--toast-error-text))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){background:var(--toast-info-bg);color:var(--toast-info-text);border-color:var(--toast-info-border)}:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-info-text),var(--toast-info-bg));stroke:light-dark(var(--toast-info-bg),var(--toast-info-text));color:light-dark(var(--toast-info-bg),var(--toast-info-text))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){background:var(--toast-warning-bg);color:var(--toast-warning-text);border-color:var(--toast-warning-border)}:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-warning-text),var(--toast-warning-bg));stroke:light-dark(var(--toast-warning-bg),var(--toast-warning-text));color:light-dark(var(--toast-warning-bg),var(--toast-warning-text))}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@media(width>=40rem){:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}}@media(width>=40rem){:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(100%)}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-rich-colors=\"true\"]){background:transparent;color:inherit;border-color:transparent}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:light-dark(var(--toast-color),var(--toast-bg));stroke:light-dark(var(--toast-bg),var(--toast-color));width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}@media(prefers-reduced-motion:reduce){.toast-row-btn:active{transform:none}}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.toast-custom{flex:1;min-width:0;width:100%;font-size:.825rem;font-weight:400;line-height:calc(1.25 / .875)}.toast-custom :first-child{margin-top:0}.toast-custom :last-child{margin-bottom:0}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--toast-border-color);box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .close-btn{border-color:var(--toast-success-border);background:var(--toast-success-bg);color:var(--toast-success-text)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .close-btn{border-color:var(--toast-error-border);background:var(--toast-error-bg);color:var(--toast-error-text)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .close-btn{border-color:var(--toast-info-border);background:var(--toast-info-bg);color:var(--toast-info-text)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .close-btn{border-color:var(--toast-warning-border);background:var(--toast-warning-bg);color:var(--toast-warning-text)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95}:host([data-swipe-direction=\"down\"].leave){transform:translateY(100%)}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(100%)}:host([data-swipe-direction=\"up\"].leave){transform:translateY(-100%)}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(-100%)}@media(prefers-reduced-motion:reduce){:host{transition:none}:host(.leave){scale:1}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(calc(1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-swipe-direction=\"down\"].leave){transform:translateY(calc(-1 * var(--offset, 0px)))}:host([data-swipe-direction=\"up\"].leave){transform:translateY(calc(1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@media(width<40rem){@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}.toast-icon-loading{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToastItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[betterToastItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], host: {
+                        role: 'listitem',
+                        tabindex: '0',
+                        class: 'toast',
+                        '[class]': 'resolvedClassNames()?.toast',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-icon]': 'shouldShowIconColumn() ? "true" : "false"',
+                        '[attr.data-headless]': 'isHeadless() ? "true" : null',
+                        '[attr.data-swipe-direction]': 'swipeDirection()',
+                        '[attr.data-theme]': 'theme()',
+                        '[style.--offset]': 'offset() + "px"',
+                        '[style]': 'isHeadless() ? undefined : hostStyle()',
+                        '[animate.leave]': '"leave"',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerCancel()',
+                        '(pointerenter)': 'onPointerEnter()',
+                        '(pointerleave)': 'onPointerLeave()',
+                    }, template: `
+    @if (toast()?.component) {
+      <ng-container *ngComponentOutlet="toast()!.component!; inputs: componentOutletInputs()" />
+    } @else {
+      @if (shouldShowIconColumn()) {
+        <span class="toast-icon" aria-hidden="true">
+          @if (toast()?.icon) {
+            <ng-container *ngComponentOutlet="toast()!.icon!" />
+          } @else if (iconComponent(); as IconCmp) {
+            <ng-container *ngComponentOutlet="IconCmp" />
+          } @else {
+            @switch (variant()) {
+              @case ('success') {
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="9"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.75"
+                  />
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.75"
+                    d="M8.48 12.22 10.9 14.64 15.74 9.14"
+                  />
+                </svg>
+              }
+              @case ('error') {
+                <svg
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="9" y1="9" x2="15" y2="15" />
+                  <line x1="15" y1="9" x2="9" y2="15" />
+                </svg>
+              }
+              @case ('info') {
+                <svg
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="16" x2="12" y2="12" />
+                  <line x1="12" y1="8" x2="12.01" y2="8" />
+                </svg>
+              }
+              @case ('warning') {
+                <svg
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.75"
+                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                  />
+                </svg>
+              }
+              @case ('loading') {
+                <div class="toast-icon-loading" aria-hidden="true"></div>
+              }
+              @case ('description') {}
+              @case ('default') {}
+            }
+          }
+        </span>
+      }
+
+      @if (hasDescription()) {
+        <div class="stack">
+          @if (toast()?.contentComponent) {
+            <div class="msg" [class]="resolvedClassNames()?.message">
+              <ng-container
+                *ngComponentOutlet="
+                  toast()!.contentComponent!;
+                  inputs: contentComponentOutletInputs()
+                "
+              />
+            </div>
+          } @else {
+            <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+          }
+          @if (toast()?.description) {
+            <p class="description" [class]="resolvedClassNames()?.description">
+              {{ toast()!.description }}
+            </p>
+          }
+        </div>
+      } @else {
+        @if (toast()?.contentComponent) {
+          <div class="msg" [class]="resolvedClassNames()?.message">
+            <ng-container
+              *ngComponentOutlet="
+                toast()!.contentComponent!;
+                inputs: contentComponentOutletInputs()
+              "
+            />
+          </div>
+        } @else {
+          <p class="msg" [class]="resolvedClassNames()?.message">{{ toast()?.message }}</p>
+        }
+      }
+
+      @if (toast()?.toastAction; as rowAction) {
+        @switch (rowAction.role) {
+          @case ('action') {
+            <button
+              type="button"
+              class="toast-row-btn action-btn"
+              [class]="resolvedClassNames()?.actionButton"
+              [attr.data-row-btn]="rowAction.role"
+              (pointerdown)="onRowButtonPointerDown($event)"
+              (click)="onToastRowClick($event)"
+            >
+              {{ rowAction.label }}
+            </button>
+          }
+          @case ('cancel') {
+            <button
+              type="button"
+              class="toast-row-btn cancel-btn"
+              [class]="resolvedClassNames()?.cancelButton"
+              [attr.data-row-btn]="rowAction.role"
+              (pointerdown)="onRowButtonPointerDown($event)"
+              (click)="onToastRowClick($event)"
+            >
+              {{ rowAction.label }}
+            </button>
+          }
+        }
+      }
+    }
+
+    @if (closeButton() && !isHeadless()) {
+      <button
+        type="button"
+        class="close-btn"
+        [class]="resolvedClassNames()?.closeButton"
+        (click)="toaster.dismiss(toast()?.id ?? '')"
+        [attr.aria-label]="dismissButtonAriaLabel()"
+      >
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+            d="M6 18 18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    }
+  `, styles: [":host{display:flex;align-items:center;gap:.375rem;flex:1;min-width:0;width:100%;padding-inline:.75rem;padding-block:1rem;box-sizing:border-box;border:1px solid var(--toast-border-color);border-radius:.5rem;box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);--toast-line-height: 1.35;font:500 .875rem/var(--toast-line-height) system-ui,sans-serif;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;opacity:1;scale:1;transition:opacity .4s ease,transform .4s ease,scale .4s ease}:host([data-variant=\"loading\"]){touch-action:auto}@media(width>=40rem){:host{width:var(--toast-width)}}:host([data-position^=\"bottom\"]){bottom:0;transform:translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(100%)}}:host([data-position^=\"top\"]){top:0;transform:translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(-100%)}}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1}}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1}}:host([data-variant=\"default\"]) .toast-icon svg,:host([data-variant=\"default\"]) .toast-icon ::ng-deep svg,:host([data-variant=\"description\"]) .toast-icon svg,:host([data-variant=\"description\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]){background:var(--toast-success-bg);color:var(--toast-success-text);border-color:var(--toast-success-border)}:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-success-text),var(--toast-success-bg));stroke:light-dark(var(--toast-success-bg),var(--toast-success-text));color:light-dark(var(--toast-success-bg),var(--toast-success-text))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]){background:var(--toast-error-bg);color:var(--toast-error-text);border-color:var(--toast-error-border)}:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-error-text),var(--toast-error-bg));stroke:light-dark(var(--toast-error-bg),var(--toast-error-text));color:light-dark(var(--toast-error-bg),var(--toast-error-text))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]){background:var(--toast-info-bg);color:var(--toast-info-text);border-color:var(--toast-info-border)}:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-info-text),var(--toast-info-bg));stroke:light-dark(var(--toast-info-bg),var(--toast-info-text));color:light-dark(var(--toast-info-bg),var(--toast-info-text))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]){background:var(--toast-warning-bg);color:var(--toast-warning-text);border-color:var(--toast-warning-border)}:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"false\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-color),var(--toast-bg));color:light-dark(var(--toast-bg),var(--toast-color))}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon svg,:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .toast-icon ::ng-deep svg{fill:light-dark(var(--toast-warning-text),var(--toast-warning-bg));stroke:light-dark(var(--toast-warning-bg),var(--toast-warning-text));color:light-dark(var(--toast-warning-bg),var(--toast-warning-text))}:host([data-headless=\"true\"]){width:max-content;max-width:calc(100dvw - var(--toast-offset-mobile-left, 16px) - var(--toast-offset-mobile-right, 16px));padding:0;gap:0;border:none;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;line-height:normal;--toast-line-height: inherit}@media(width>=40rem){:host([data-headless=\"true\"]){max-width:calc(100dvw - var(--toast-offset-left, 24px) - var(--toast-offset-right, 24px))}}@media(width>=40rem){:host([data-headless=\"true\"][data-position$=\"-right\"]){left:auto;right:0}:host([data-headless=\"true\"][data-position$=\"-left\"]){left:0;right:auto}}:host([data-headless=\"true\"][data-position=\"bottom-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position=\"top-center\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}@media(width<40rem){:host([data-headless=\"true\"][data-position^=\"bottom\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(100%)}}:host([data-headless=\"true\"][data-position^=\"top\"]){left:50%;right:auto;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(100%)}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(-100%)}}:host([data-headless=\"true\"][data-rich-colors=\"true\"]){background:transparent;color:inherit;border-color:transparent}:host([data-headless=\"true\"][data-icon=\"false\"]){padding-left:0}:host([data-icon=\"false\"]){padding-left:.925rem}.toast-icon,.toast-icon ::ng-deep{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.425rem;height:1.425rem}.toast-icon svg,.toast-icon ::ng-deep svg{display:block;margin-inline:auto;fill:light-dark(var(--toast-color),var(--toast-bg));stroke:light-dark(var(--toast-bg),var(--toast-color));width:95%;height:95%}:host([data-theme=\"dark\"]) .toast-icon svg,:host([data-theme=\"dark\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}@media(prefers-color-scheme:dark){:host([data-theme=\"system\"]) .toast-icon svg,:host([data-theme=\"system\"]) .toast-icon ::ng-deep svg{width:87.5%;height:87.5%}}.toast-icon-loading{display:block;width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;animation:spin .45s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.msg{flex:1;min-width:0;max-width:95%;margin:0;font-size:.825rem;font-weight:500;line-height:calc(1.25 / .875);letter-spacing:.01em}@media(width<40rem){.msg{max-width:90%;font-size:.8rem}}.stack{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;min-width:0}.stack .msg{flex:0 1 auto;max-width:100%}:host([data-icon=\"false\"]) .stack .msg{max-width:90%}.description{margin:0;font-size:.825rem;font-weight:400;line-height:1.35;letter-spacing:.01em;opacity:.9;max-width:100%}@media(width<40rem){.description{font-size:.8rem}}.toast-row-btn{flex-shrink:0;margin:0;margin-inline-start:auto;padding:.35rem .65rem;border-radius:.375rem;border:1px solid transparent;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.2;cursor:pointer;white-space:nowrap;transition:transform .2s ease}.toast-row-btn:focus-visible{outline:2px solid var(--toast-color);outline-offset:2px}.toast-row-btn:active{transform:scale(.95)}@media(prefers-reduced-motion:reduce){.toast-row-btn:active{transform:none}}.action-btn{background:var(--toast-action-bg);color:var(--toast-action-text);border-color:var(--toast-action-border)}.cancel-btn{background:var(--toast-cancel-bg);color:var(--toast-color);border-color:var(--toast-cancel-border)}.toast-custom{flex:1;min-width:0;width:100%;font-size:.825rem;font-weight:400;line-height:calc(1.25 / .875)}.toast-custom :first-child{margin-top:0}.toast-custom :last-child{margin-bottom:0}.close-btn{position:absolute;top:-.3875rem;right:-.3875rem;flex-shrink:0;margin:-.15rem -.25rem -.15rem 0;border:1px solid var(--toast-border-color);box-shadow:var(--toast-shadow);background:var(--toast-bg);color:var(--toast-color);cursor:pointer;line-height:1;padding:.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}:host([data-rich-colors=\"true\"][data-variant=\"success\"]) .close-btn{border-color:var(--toast-success-border);background:var(--toast-success-bg);color:var(--toast-success-text)}:host([data-rich-colors=\"true\"][data-variant=\"error\"]) .close-btn{border-color:var(--toast-error-border);background:var(--toast-error-bg);color:var(--toast-error-text)}:host([data-rich-colors=\"true\"][data-variant=\"info\"]) .close-btn{border-color:var(--toast-info-border);background:var(--toast-info-bg);color:var(--toast-info-text)}:host([data-rich-colors=\"true\"][data-variant=\"warning\"]) .close-btn{border-color:var(--toast-warning-border);background:var(--toast-warning-bg);color:var(--toast-warning-text)}.close-btn:focus-visible{outline:2px solid currentColor}.close-btn svg{display:block;width:.825rem;height:.825rem}:host(.leave){opacity:0;scale:.95}:host([data-swipe-direction=\"down\"].leave){transform:translateY(100%)}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(100%)}:host([data-swipe-direction=\"up\"].leave){transform:translateY(-100%)}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(-100%)}@media(prefers-reduced-motion:reduce){:host{transition:none}:host(.leave){scale:1}@starting-style{:host([data-position^=\"bottom\"]){opacity:0;transform:translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-position^=\"top\"]){opacity:0;transform:translateY(calc(1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"bottom-center\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}@starting-style{:host([data-headless=\"true\"][data-position=\"top-center\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-swipe-direction=\"down\"].leave){transform:translateY(calc(-1 * var(--offset, 0px)))}:host([data-swipe-direction=\"up\"].leave){transform:translateY(calc(1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"bottom-center\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}:host([data-headless=\"true\"][data-position=\"top-center\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}@media(width<40rem){@starting-style{:host([data-headless=\"true\"][data-position^=\"bottom\"]){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"down\"].leave){transform:translate(-50%) translateY(calc(-1 * var(--offset, 0px)))}@starting-style{:host([data-headless=\"true\"][data-position^=\"top\"]){opacity:1;transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}:host([data-headless=\"true\"][data-swipe-direction=\"up\"].leave){transform:translate(-50%) translateY(calc(1 * var(--offset, 0px)))}}.toast-icon-loading{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: false }] }], toasterStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterStyle", required: false }] }], toasterClassNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasterClassNames", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: true }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], customIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcons", required: false }] }], dismissButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissButtonAriaLabel", required: false }] }], stackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackPosition", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
+/**
+ * Renders the toaster stack. Add once near the root of your app (e.g. in `App`).
+ * Variant-colored surfaces are off by default; set `[richColors]="true"` to enable them.
+ * Set `[duration]` for auto-dismiss when service helpers omit their duration argument.
+ * Use **`duration="Infinity"`** (that exact literal) or `[duration]="…"` with a number / {@link TOAST_DURATION_MANUAL_DISMISS} for persist until dismissed; `0` still works.
+ * Pass `[icons]` with optional **standalone** components for `default` / `description` / `success` / `error` / `info` / `warning` / `loading`:
+ * replace the default artwork (or add an icon for the neutral `default` variant), or use **`null`** to hide that variant’s icon.
+ * Each component should render an **SVG** (import its class where you configure `[icons]`).
+ * Set `[closeButton]="false"` to hide the per-toast dismiss button.
+ * Set `[accessibilityLabels]` to override default English `aria-label` strings (live region and dismiss control).
+ * Set `[offset]` for `--toast-offset-*` and `[mobileOffset]` for `--toast-offset-mobile-*` (string all sides, or per-side object).
+ * Set `[theme]` to `light`, `dark`, or `system` (default): semantic colors follow the chosen mode; `system` uses `prefers-color-scheme`.
+ * {@link ToasterService.action} / {@link ToasterService.cancel} render a message plus one text button (no icon column).
+ */
+class BetterToaster {
+    toaster = inject(ToasterService);
+    /**
+     * Default auto-dismiss time in ms for `show` / `success` / `error` / `info` / `warning` when the second argument omits `durationMs`.
+     * Bind **`duration="Infinity"`** (literal only) or a numeric ms value via `[duration]`; {@link TOAST_DURATION_MANUAL_DISMISS} is accepted as a number.
+     * `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;
+        } });
+    /** Where the stack is anchored on the viewport. */
+    position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Viewport inset for the toast stack: a single CSS value for all sides, or an object with any of `top` / `right` / `bottom` / `left`.
+     * Binds `--toast-offset-top` / `right` / `bottom` / `left` on `.toast-container`.
+     */
+    offset = input(undefined, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /**
+     * Viewport inset for narrow layouts: binds `--toast-offset-mobile-top` / `right` / `bottom` / `left` on `.toast-container`.
+     * Same shape as {@link offset}.
+     */
+    mobileOffset = input(undefined, ...(ngDevMode ? [{ debugName: "mobileOffset" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, success/error/info/warning use semantic background and border colors.
+     */
+    richColors = input(false, ...(ngDevMode ? [{ debugName: "richColors" }] : /* istanbul ignore next */ []));
+    /**
+     * Color palette for the stack. `system` (default) follows `prefers-color-scheme`; `light` / `dark` pin the palette regardless of OS.
+     * Reflected as `data-theme` on the toast container (`<ol class="toast-container">`).
+     */
+    theme = input('system', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional per-variant **standalone** components that replace the default SVG (or loading indicator).
+     * Import each icon component in the host and pass its class here; each one should render an SVG
+     * (e.g. root `<svg>` with `stroke="currentColor"` / `fill="currentColor"` where appropriate).
+     * Omitted keys keep the built-in icons (the `default` variant has none unless you set `default` here).
+     * **`null`** for a variant hides that variant’s icon.
+     */
+    icons = input(...(ngDevMode ? [undefined, { debugName: "icons" }] : /* istanbul ignore next */ []));
+    /**
+     * Defaults for every toast — shape is {@link ToasterToastOptions}.
+     *
+     * - **`style`** — merged onto each toast host with per-toast {@link ToastOptions.style}; identical keys from the service call win.
+     * - **`classNames`** — extra classes on host / `.msg` / `.description` / `.close-btn` / row buttons via **`[class]`**; see {@link ToasterToastOptions.classNames} (**`!important`** is usually required for overrides). Per-toast {@link ToastOptions.classNames} replaces host/message/close keys; row overrides come from {@link ToasterService.action} / {@link ToasterService.cancel}.
+     */
+    toastOptions = input(...(ngDevMode ? [undefined, { debugName: "toastOptions" }] : /* istanbul ignore next */ []));
+    /** When true, each toast shows a dismiss button. */
+    closeButton = input(true, ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Overrides for built-in English `aria-label` values (live region and per-toast dismiss).
+     * Omitted keys keep {@link DEFAULT_TOASTER_ARIA_NOTIFICATIONS_REGION} and {@link DEFAULT_TOASTER_ARIA_DISMISS_BUTTON}.
+     */
+    accessibilityLabels = input(...(ngDevMode ? [undefined, { debugName: "accessibilityLabels" }] : /* istanbul ignore next */ []));
+    /** Measured height in px per toast id, updated when a toast item reports `heightChange`. */
+    heights = signal({}, ...(ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []));
+    /** Resolved `aria-label` for the outer `<section>` live region. */
+    notificationsRegionAriaLabel = computed(() => this.accessibilityLabels()?.notificationsRegion ?? DEFAULT_TOASTER_ARIA_NOTIFICATIONS_REGION, ...(ngDevMode ? [{ debugName: "notificationsRegionAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Resolved `aria-label` for each toast’s dismiss control. */
+    dismissButtonAriaLabel = computed(() => this.accessibilityLabels()?.dismissButton ?? DEFAULT_TOASTER_ARIA_DISMISS_BUTTON, ...(ngDevMode ? [{ debugName: "dismissButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Vertical offset in px for the toast stack. */
+    offsetTop = computed(() => resolveToasterOffsetSide(this.offset(), 'top'), ...(ngDevMode ? [{ debugName: "offsetTop" }] : /* istanbul ignore next */ []));
+    /** Horizontal offset in px for the toast stack. */
+    offsetRight = computed(() => resolveToasterOffsetSide(this.offset(), 'right'), ...(ngDevMode ? [{ debugName: "offsetRight" }] : /* istanbul ignore next */ []));
+    /** Vertical offset in px for the toast stack. */
+    offsetBottom = computed(() => resolveToasterOffsetSide(this.offset(), 'bottom'), ...(ngDevMode ? [{ debugName: "offsetBottom" }] : /* istanbul ignore next */ []));
+    /** Horizontal offset in px for the toast stack. */
+    offsetLeft = computed(() => resolveToasterOffsetSide(this.offset(), 'left'), ...(ngDevMode ? [{ debugName: "offsetLeft" }] : /* istanbul ignore next */ []));
+    /** Vertical offset in px for the toast stack on narrow layouts. */
+    mobileOffsetTop = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'top'), ...(ngDevMode ? [{ debugName: "mobileOffsetTop" }] : /* istanbul ignore next */ []));
+    /** Horizontal offset in px for the toast stack on narrow layouts. */
+    mobileOffsetRight = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'right'), ...(ngDevMode ? [{ debugName: "mobileOffsetRight" }] : /* istanbul ignore next */ []));
+    /** Vertical offset in px for the toast stack on narrow layouts. */
+    mobileOffsetBottom = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'bottom'), ...(ngDevMode ? [{ debugName: "mobileOffsetBottom" }] : /* istanbul ignore next */ []));
+    /** Horizontal offset in px for the toast stack on narrow layouts. */
+    mobileOffsetLeft = computed(() => resolveToasterOffsetSide(this.mobileOffset(), 'left'), ...(ngDevMode ? [{ debugName: "mobileOffsetLeft" }] : /* istanbul ignore next */ []));
+    /**
+     * Vertical offset in px for each toast id so stacked toasts do not overlap.
+     * Walks newest-to-oldest (end of the list first): the latest toast has offset 0; each older toast sits above by the sum of heights below plus the inter-toast gap.
+     */
+    offsets = computed(() => {
+        const toastsList = this.toaster.toasts();
+        const heights = this.heights();
+        const result = {};
+        let cumulative = 0;
+        for (let i = toastsList.length - 1; i >= 0; i--) {
+            const toast = toastsList[i];
+            result[toast.id] = cumulative;
+            cumulative += (heights[toast.id] ?? 0) + GAP;
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "offsets" }] : /* istanbul ignore next */ []));
+    /** Merges a toast item’s reported height into `heights` so `offsets` can recompute. */
+    onHeightChange(toastId, height) {
+        this.heights.update((h) => ({ ...h, [toastId]: height }));
+    }
+    /**
+     * Initializes the toaster service with the default duration.
+     */
+    ngOnInit() {
+        this.toaster.setDefaultDurationMs(this.durationMs());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: BetterToaster, isStandalone: true, selector: "better-toaster", inputs: { durationMs: { classPropertyName: "durationMs", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, mobileOffset: { classPropertyName: "mobileOffset", publicName: "mobileOffset", isSignal: true, isRequired: false, transformFunction: null }, richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabels: { classPropertyName: "accessibilityLabels", publicName: "accessibilityLabels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <section
+      [attr.aria-label]="notificationsRegionAriaLabel()"
+      tabindex="-1"
+      aria-live="polite"
+      aria-relevant="additions text"
+      aria-atomic="false"
+    >
+      <ol
+        class="toast-container"
+        [style.--toast-offset-top]="offsetTop()"
+        [style.--toast-offset-right]="offsetRight()"
+        [style.--toast-offset-bottom]="offsetBottom()"
+        [style.--toast-offset-left]="offsetLeft()"
+        [style.--toast-offset-mobile-top]="mobileOffsetTop()"
+        [style.--toast-offset-mobile-right]="mobileOffsetRight()"
+        [style.--toast-offset-mobile-bottom]="mobileOffsetBottom()"
+        [style.--toast-offset-mobile-left]="mobileOffsetLeft()"
+        [attr.data-position]="position()"
+        [attr.data-rich-colors]="richColors()"
+        [attr.data-theme]="theme()"
+        tabindex="-1"
+      >
+        @for (toast of toaster.toasts(); track toast.id) {
+          <li
+            betterToastItem
+            [toast]="toast"
+            [toasterStyle]="toastOptions()?.style"
+            [toasterClassNames]="toastOptions()?.classNames"
+            [variant]="toast.variant"
+            [customIcons]="icons()"
+            [offset]="offsets()[toast.id]"
+            [closeButton]="closeButton()"
+            [dismissButtonAriaLabel]="dismissButtonAriaLabel()"
+            [stackPosition]="position()"
+            [theme]="theme()"
+            (heightChange)="onHeightChange(toast.id, $event)"
+            [attr.data-position]="position()"
+            [attr.data-rich-colors]="richColors()"
+          ></li>
+        }
+      </ol>
+    </section>
+  `, isInline: true, styles: [":host{--toast-width: 356px;--toast-gap: 1rem;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(oklch(92% .004 286.32 / .65), oklch(37% .013 285.805 / .75));--toast-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5)}@media(prefers-color-scheme:dark){.toast-container[data-theme=system]{--toast-shadow: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5)}}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"], dependencies: [{ kind: "component", type: BetterToastItem, selector: "li[betterToastItem]", inputs: ["toast", "toasterStyle", "toasterClassNames", "variant", "offset", "closeButton", "customIcons", "dismissButtonAriaLabel", "stackPosition", "theme"], outputs: ["heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: BetterToaster, decorators: [{
+            type: Component,
+            args: [{ selector: 'better-toaster', changeDetection: ChangeDetectionStrategy.OnPush, imports: [BetterToastItem], template: `
+    <section
+      [attr.aria-label]="notificationsRegionAriaLabel()"
+      tabindex="-1"
+      aria-live="polite"
+      aria-relevant="additions text"
+      aria-atomic="false"
+    >
+      <ol
+        class="toast-container"
+        [style.--toast-offset-top]="offsetTop()"
+        [style.--toast-offset-right]="offsetRight()"
+        [style.--toast-offset-bottom]="offsetBottom()"
+        [style.--toast-offset-left]="offsetLeft()"
+        [style.--toast-offset-mobile-top]="mobileOffsetTop()"
+        [style.--toast-offset-mobile-right]="mobileOffsetRight()"
+        [style.--toast-offset-mobile-bottom]="mobileOffsetBottom()"
+        [style.--toast-offset-mobile-left]="mobileOffsetLeft()"
+        [attr.data-position]="position()"
+        [attr.data-rich-colors]="richColors()"
+        [attr.data-theme]="theme()"
+        tabindex="-1"
+      >
+        @for (toast of toaster.toasts(); track toast.id) {
+          <li
+            betterToastItem
+            [toast]="toast"
+            [toasterStyle]="toastOptions()?.style"
+            [toasterClassNames]="toastOptions()?.classNames"
+            [variant]="toast.variant"
+            [customIcons]="icons()"
+            [offset]="offsets()[toast.id]"
+            [closeButton]="closeButton()"
+            [dismissButtonAriaLabel]="dismissButtonAriaLabel()"
+            [stackPosition]="position()"
+            [theme]="theme()"
+            (heightChange)="onHeightChange(toast.id, $event)"
+            [attr.data-position]="position()"
+            [attr.data-rich-colors]="richColors()"
+          ></li>
+        }
+      </ol>
+    </section>
+  `, styles: [":host{--toast-width: 356px;--toast-gap: 1rem;--toast-z-index: 99999;--toast-offset-top: 24px;--toast-offset-bottom: 24px;--toast-offset-left: 24px;--toast-offset-right: 24px;--toast-offset-mobile-top: 16px;--toast-offset-mobile-bottom: 16px;--toast-offset-mobile-left: 16px;--toast-offset-mobile-right: 16px}.toast-container[data-theme=light]{color-scheme:light}.toast-container[data-theme=dark]{color-scheme:dark}.toast-container[data-theme=system]{color-scheme:light dark}.toast-container{--toast-bg: light-dark(oklch(100% 0 0), oklch(10% 0 0));--toast-color: light-dark(oklch(30% 0 0), oklch(98% 0 0));--toast-border-color: light-dark(oklch(92% .004 286.32 / .65), oklch(37% .013 285.805 / .75));--toast-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5)}@media(prefers-color-scheme:dark){.toast-container[data-theme=system]{--toast-shadow: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5)}}.toast-container[data-position^=top]{top:var(--toast-offset-mobile-top);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}.toast-container[data-position^=bottom]{bottom:var(--toast-offset-mobile-bottom);left:var(--toast-offset-mobile-left);right:var(--toast-offset-mobile-right)}@media(width>=40rem){.toast-container{width:var(--toast-width)}.toast-container[data-position=top-left]{top:var(--toast-offset-top);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=top-center]{top:var(--toast-offset-top);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=top-right]{top:var(--toast-offset-top);right:var(--toast-offset-right);left:auto;align-items:flex-end}.toast-container[data-position=bottom-left]{bottom:var(--toast-offset-bottom);left:var(--toast-offset-left);right:auto;align-items:flex-start}.toast-container[data-position=bottom-center]{bottom:var(--toast-offset-bottom);left:50%;transform:translate(-50%);align-items:center}.toast-container[data-position=bottom-right]{bottom:var(--toast-offset-bottom);right:var(--toast-offset-right);left:auto;align-items:flex-end}}\n"] }]
+        }], propDecorators: { durationMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], mobileOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOffset", required: false }] }], richColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "richColors", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], toastOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastOptions", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], accessibilityLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabels", required: false }] }] } });
+
+/*
+ * Public API Surface of better-toast
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BetterToaster, DEFAULT_TOASTER_ARIA_DISMISS_BUTTON, DEFAULT_TOASTER_ARIA_NOTIFICATIONS_REGION, DEFAULT_TOAST_ACTION_LABEL, DEFAULT_TOAST_CANCEL_LABEL, DEFAULT_TOAST_DURATION_MS, TOASTER_POSITIONS, TOAST_DURATION_MANUAL_DISMISS, TOAST_VARIANTS, ToasterService };
+//# sourceMappingURL=better-toast.mjs.map