@cdevhub/ngx-tw 0.4.0 → 0.6.0

package/fesm2022/cdevhub-ngx-tw-toast.mjs

@@ -1,10 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, input, output, contentChild, computed, ChangeDetectionStrategy, Component, signal, Injector, ElementRef, TemplateRef, untracked, ViewEncapsulation, Injectable, makeEnvironmentProviders } from '@angular/core';
-import { Overlay, createGlobalPositionStrategy } from '@angular/cdk/overlay';
-import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { InjectionToken, signal, inject, Injector, Injectable, makeEnvironmentProviders, Directive, input, output, contentChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ReplaySubject, Subject, defer, startWith } from 'rxjs';
-import { NgTemplateOutlet } from '@angular/common';
-import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { tv } from 'tailwind-variants';
 
 /**
@@ -19,7 +15,16 @@ class ToastConfig {
     severity = 'info';
     /** Screen position of the toast stack. Defaults to `'bottom-right'`. */
     position = 'bottom-right';
-    /** Auto-dismiss duration in ms. `0` disables auto-dismiss. Defaults to `5000`. */
+    /**
+     * Auto-dismiss duration in ms. `0` disables auto-dismiss. Defaults to `5000`.
+     *
+     * The duration alone would fail SC 2.2.1 (Timing Adjustable) — a time limit the
+     * user cannot influence. What makes 5s conformant is `pauseOnInteraction`
+     * (default `true`): the clock stops while the pointer is over the toast or
+     * focus is anywhere inside it, and resumes on leave / blur. Setting
+     * `pauseOnInteraction: false` alongside a non-zero duration re-introduces the
+     * failure, so pair it with `duration: 0`.
+     */
     duration = 5000;
     // Default true: toasts must offer an escape hatch — sticky / long-duration toasts
     // otherwise trap users; opt-out only for ephemeral progress markers paired with `duration`.
@@ -46,9 +51,11 @@ class ToastConfig {
      * primitives for the string-content path.
      */
     icon;
-    // Default true: matches Material/Radix/Sonner conventions — prevents a toast from
-    // disappearing mid-read; opt-out only for fully ambient progress indicators.
-    /** When true, pause the auto-dismiss timer while the toast is hovered or holds focus. Defaults to `true`. */
+    // Default true: this is what keeps a non-zero `duration` conformant with
+    // SC 2.2.1 (Timing Adjustable) — it is the user's control over the time limit,
+    // not a nicety. Also matches Material/Radix/Sonner. Opt out only together with
+    // `duration: 0`, for fully ambient progress indicators.
+    /** When true, pause the auto-dismiss timer while the toast is hovered or holds focus anywhere inside it, resuming on leave / blur. Defaults to `true`. */
     pauseOnInteraction = true;
     // Default true: matches mobile-platform expectations and gives non-precise pointers
     // (touch) an easy dismiss gesture; opt-out only if the gesture conflicts with content.
@@ -73,886 +80,194 @@ const TW_TOAST_REF = new InjectionToken('TW_TOAST_REF');
 /** Injection token carrying application-wide toast defaults. Set via `provideToast(defaults)`. */
 const TW_TOAST_DEFAULT_OPTIONS = new InjectionToken('TW_TOAST_DEFAULT_OPTIONS');
 
-const toastVariants = tv({
-    slots: {
-        root: 'pointer-events-auto relative flex items-start gap-3 w-full max-w-sm p-4 rounded-lg border shadow-md text-sm will-change-transform transition-colors duration-normal motion-reduce:transition-none',
-        icon: 'size-5 shrink-0 mt-0.5',
-        title: 'text-sm font-semibold',
-        description: 'text-sm',
-        content: 'flex-1 min-w-0',
-        action: 'inline-flex items-center justify-center px-3 py-1.5 rounded-md text-sm font-medium cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
-        // Dismiss container is `size-6` (24px — xs square-interactive-target
-        // scale per CLAUDE.md icon sub-scale). The inner SVG is `size-4` (16px
-        // glyph scale), centred via flex; the larger container gives the
-        // touch/click affordance without enlarging the visual glyph.
-        dismiss: 'absolute top-3 right-3 inline-flex items-center justify-center size-6 rounded-md cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
-    },
-    variants: {
-        severity: {
-            info: {},
-            success: {},
-            warning: {},
-            error: {},
-            neutral: {},
-        },
-    },
-    // Color slot tokens (`{role}-soft`, `-soft-fg`, `-icon`, …) own light/dark
-    // contrast — components consume the slot only. See `_semantic.css`.
-    // Slot-token safelist: see `projects/ngx-tw/theme/index.css` `@source inline(...)`
-    // — Tailwind v4's JIT cannot scan template-literal class names, so every
-    // `bg-${severity}-soft` / `text-${severity}-icon` permutation below must be
-    // enumerated there.
-    compoundVariants: ['info', 'success', 'warning', 'error', 'neutral'].map((severity) => ({
-        severity,
-        class: {
-            root: `bg-${severity}-soft text-${severity}-soft-fg-muted border-${severity}-border`,
-            icon: `text-${severity}-icon`,
-            title: `text-${severity}-soft-fg`,
-            description: `text-${severity}-soft-fg-muted`,
-            action: `text-${severity}-soft-fg hover:bg-${severity}-soft-hover`,
-            dismiss: `text-${severity}-icon hover:bg-${severity}-soft-hover`,
-        },
-    })),
-    defaultVariants: {
-        severity: 'info',
-    },
-}, { twMerge: true });
-/** Slot directive for the icon. When projected, overrides the severity-default icon. */
-class ToastIconDirective {
-    toast = inject(ToastComponent);
-    /** @internal */
-    classes = this.toast.iconClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastIconDirective, isStandalone: true, selector: "[twToastIcon]", host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastIconDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[twToastIcon]',
-                    host: {
-                        '[class]': 'classes()',
-                        'aria-hidden': 'true',
-                    },
-                }]
-        }] });
-/** Slot directive for the bold title line inside a toast. */
-class ToastTitleDirective {
-    toast = inject(ToastComponent);
-    /** @internal */
-    classes = this.toast.titleClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastTitleDirective, isStandalone: true, selector: "[twToastTitle]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[twToastTitle]',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                }]
-        }] });
-/** Slot directive for a secondary description line inside a toast. */
-class ToastDescriptionDirective {
-    toast = inject(ToastComponent);
-    /** @internal */
-    classes = this.toast.descriptionClasses;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastDescriptionDirective, isStandalone: true, selector: "[twToastDescription]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastDescriptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[twToastDescription]',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                }]
-        }] });
-/** Slot directive for the action button. Apply to a native `<button>` to inherit the severity-aware styling. */
-class ToastActionDirective {
-    toast = inject(ToastComponent);
-    /** @internal */
-    classes = this.toast.actionClasses;
-    /** @internal */
-    onClick() {
-        this.toast.actionClicked.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastActionDirective, isStandalone: true, selector: "[twToastAction]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastActionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[twToastAction]',
-                    host: {
-                        type: 'button',
-                        '[class]': 'classes()',
-                        '(click)': 'onClick()',
-                    },
-                }]
-        }] });
+/** Duration (ms) of the toast enter / leave animation. Must match `_base.css` toast-slide keyframes. */
+const TOAST_ANIMATION_DURATION = 150;
+/** Padding added to animation fallback timers to guarantee cleanup if the CSS event is swallowed. */
+const TOAST_ANIMATION_FALLBACK_PADDING = 50;
 /**
- * Visual toast / snackbar panel. Rendered internally by {@link ToastService} for
- * string content, and exported for consumers who want to compose the same
- * visual inside a custom `TemplateRef` or component class passed to `show()`.
+ * Reference to a toast opened via {@link ToastService}. Use to dismiss the
+ * toast, pause / resume its auto-dismiss timer, or observe its lifecycle.
+ *
+ * The service returns a ref synchronously from every open method; the toast
+ * itself is attached asynchronously inside the CDK overlay.
  */
-class ToastComponent {
-    /** Severity variant. Drives color palette, default icon, and ARIA role / live politeness. Defaults to `'info'`. */
-    severity = input('info', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
-    // Default true: mirrors `ToastConfig.dismissible` — toasts must offer an escape
-    // hatch by default; opt-out only for ephemeral progress markers paired with `duration`.
-    /** Whether to render the close button. Defaults to `true`. */
-    dismissible = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+class ToastRef {
+    dismissCallback;
+    /** Unique id. Generated if `config.id` was not provided. */
+    id;
+    /** Instance of the component rendered inside the toast (only for component-class content). */
+    componentInstance = null;
+    /** Resolved static config for this toast (defaults merged, severity shorthand applied). */
+    config;
+    /** Reactive lifecycle state. */
+    state;
+    /** Reactive severity — may change after `update()` (used by the `promise()` helper). */
+    severity;
+    /** Reactive dismissibility. */
+    dismissible;
+    /** Reactive icon override. */
+    icon;
+    /** Reactive content (the source of truth for what gets rendered). */
+    content;
+    /** Reactive action button configuration. */
+    action;
+    /** Reactive accessible label. */
+    ariaLabel;
+    /** Reactive data payload — re-read by the container to update `TW_TOAST_DATA`. */
+    data;
+    /** @internal Reactive "transient" class applied by swipe gestures (e.g. `translate3d(...)`). */
+    swipeTransform = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeTransform" }] : /* istanbul ignore next */ []));
+    /** @internal Reactive opacity applied during swipe gestures. */
+    swipeOpacity = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeOpacity" }] : /* istanbul ignore next */ []));
+    /** @internal Leave-animation class override. When non-null, container uses this instead of the position default. */
+    leaveAnimationOverride = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaveAnimationOverride" }] : /* istanbul ignore next */ []));
+    /** @internal Portal for component-class content. Set by the service; null for string / template content. */
+    _portal = null;
+    /** @internal True while the pointer hovers this toast. */
+    _hovered = false;
+    /** @internal True while focus is within this toast. */
+    _focused = false;
+    /** @internal Set by the service so the ref can reach the CDK-owned OverlayRef if it needs to. */
+    _overlayPanelElement = null;
+    stateSignal = signal('entering', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
+    severitySignal;
+    dismissibleSignal;
+    iconSignal;
+    contentSignal;
+    actionSignal;
+    ariaLabelSignal;
+    dataSignal;
+    afterOpenedSubject = new ReplaySubject(1);
+    beforeDismissedSubject = new ReplaySubject(1);
+    afterDismissedSubject = new ReplaySubject(1);
+    updatedSubject = new Subject();
+    dismissReason = 'programmatic';
+    dismissResult;
+    autoDismissTimer = null;
+    autoDismissStartedAt = 0;
+    autoDismissRemaining = 0;
+    paused = false;
+    enterTimer = null;
+    leaveTimer = null;
+    constructor(id, content, config, dismissCallback) {
+        this.dismissCallback = dismissCallback;
+        this.id = id;
+        this.config = config;
+        this.severitySignal = signal(config.severity ?? 'info', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "severitySignal" }] : /* istanbul ignore next */ []));
+        this.dismissibleSignal = signal(config.dismissible ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dismissibleSignal" }] : /* istanbul ignore next */ []));
+        this.iconSignal = signal(typeof config.icon === 'string' || config.icon === false ? config.icon : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
+        this.contentSignal = signal(content, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentSignal" }] : /* istanbul ignore next */ []));
+        this.actionSignal = signal(config.action, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionSignal" }] : /* istanbul ignore next */ []));
+        this.ariaLabelSignal = signal(config.ariaLabel, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabelSignal" }] : /* istanbul ignore next */ []));
+        this.dataSignal = signal(config.data ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSignal" }] : /* istanbul ignore next */ []));
+        this.state = this.stateSignal.asReadonly();
+        this.severity = this.severitySignal.asReadonly();
+        this.dismissible = this.dismissibleSignal.asReadonly();
+        this.icon = this.iconSignal.asReadonly();
+        this.content = this.contentSignal.asReadonly();
+        this.action = this.actionSignal.asReadonly();
+        this.ariaLabel = this.ariaLabelSignal.asReadonly();
+        this.data = this.dataSignal.asReadonly();
+        this.autoDismissRemaining = config.duration ?? 0;
+    }
     /**
-     * Icon override. Pass a string to render as text inside the icon slot, or
-     * `false` to hide the built-in severity icon. Ignored when a `[twToastIcon]`
-     * child is projected. When omitted, the severity-default icon renders.
+     * @internal Start the enter animation clock. Called by the service once the
+     * toast has actually been attached to its container.
      *
-     * For arbitrary icon markup, project a `[twToastIcon]` child instead.
+     * This deliberately does NOT run from the constructor. The renderer is loaded
+     * through a dynamic `import()`, so a ref can exist for an arbitrary stretch
+     * before anything is on screen — starting the clock at construction would let
+     * a toast burn part (or all) of its auto-dismiss duration while still
+     * invisible on a slow connection. Idempotent and safe to call after dismissal.
      */
-    icon = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Explicit aria-label for the toast wrapper. When omitted, text content is used by assistive tech. */
-    ariaLabel = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** Fires when the close button is clicked. */
-    dismissed = output();
-    /** Fires when a `[twToastAction]` button is clicked. */
-    actionClicked = output();
-    /** @internal */
-    projectedIcon = contentChild(ToastIconDirective, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "projectedIcon" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    hasProjectedIcon = computed(() => !!this.projectedIcon(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasProjectedIcon" }] : /* istanbul ignore next */ []));
-    variantResult = computed(() => toastVariants({ severity: this.severity() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    rootClasses = computed(() => {
-        const base = this.variantResult().root();
-        return this.dismissible() ? `${base} pr-10` : base;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    iconClasses = computed(() => this.variantResult().icon(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    titleClasses = computed(() => this.variantResult().title(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    descriptionClasses = computed(() => this.variantResult().description(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    contentClasses = computed(() => this.variantResult().content(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    actionClasses = computed(() => this.variantResult().action(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "actionClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    dismissClasses = computed(() => this.variantResult().dismiss(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dismissClasses" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    roleAttr = computed(() => this.severity() === 'error' ? 'alert' : 'status', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "roleAttr" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    ariaLiveAttr = computed(() => this.severity() === 'error' ? 'assertive' : 'polite', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLiveAttr" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ToastComponent, isStandalone: true, selector: "tw-toast", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", actionClicked: "actionClicked" }, host: { attributes: { "aria-atomic": "true" }, properties: { "class": "rootClasses()", "attr.role": "roleAttr()", "attr.aria-live": "ariaLiveAttr()", "attr.aria-label": "ariaLabel() || null", "attr.data-severity": "severity()" } }, queries: [{ propertyName: "projectedIcon", first: true, predicate: ToastIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (hasProjectedIcon()) {
-      <ng-content select="[twToastIcon]" />
-    } @else if (icon() !== false) {
-      <span [class]="iconClasses()" aria-hidden="true">
-        @switch (severity()) {
-          @case ('info') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-.75 2.5a.75.75 0 0 0 0 1.5h.25v3h-.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5h-.25v-3.75a.75.75 0 0 0-.75-.75h-1Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @case ('success') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @case ('warning') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @case ('error') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @default {
-            @if (icon() && icon() !== false) {
-              {{ icon() }}
-            }
-          }
-        }
-      </span>
-    }
-    <div [class]="contentClasses()">
-      <ng-content select="[twToastTitle]" />
-      <ng-content select="[twToastDescription]" />
-      <ng-content />
-      <ng-content select="[twToastAction]" />
-    </div>
-    @if (dismissible()) {
-      <button
-        type="button"
-        aria-label="Dismiss"
-        [class]="dismissClasses()"
-        (click)="dismissed.emit()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
-          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
-        </svg>
-      </button>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tw-toast',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'rootClasses()',
-                        '[attr.role]': 'roleAttr()',
-                        '[attr.aria-live]': 'ariaLiveAttr()',
-                        'aria-atomic': 'true',
-                        '[attr.aria-label]': 'ariaLabel() || null',
-                        '[attr.data-severity]': 'severity()',
-                    },
-                    template: `
-    @if (hasProjectedIcon()) {
-      <ng-content select="[twToastIcon]" />
-    } @else if (icon() !== false) {
-      <span [class]="iconClasses()" aria-hidden="true">
-        @switch (severity()) {
-          @case ('info') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-.75 2.5a.75.75 0 0 0 0 1.5h.25v3h-.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5h-.25v-3.75a.75.75 0 0 0-.75-.75h-1Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @case ('success') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @case ('warning') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @case ('error') {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
-              <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
-            </svg>
-          }
-          @default {
-            @if (icon() && icon() !== false) {
-              {{ icon() }}
-            }
-          }
-        }
-      </span>
-    }
-    <div [class]="contentClasses()">
-      <ng-content select="[twToastTitle]" />
-      <ng-content select="[twToastDescription]" />
-      <ng-content />
-      <ng-content select="[twToastAction]" />
-    </div>
-    @if (dismissible()) {
-      <button
-        type="button"
-        aria-label="Dismiss"
-        [class]="dismissClasses()"
-        (click)="dismissed.emit()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
-          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
-        </svg>
-      </button>
+    _startEnterSequence() {
+        if (this.enterTimer !== null)
+            return;
+        if (this.stateSignal() !== 'entering')
+            return;
+        this.enterTimer = setTimeout(() => this._markVisible(), TOAST_ANIMATION_DURATION + TOAST_ANIMATION_FALLBACK_PADDING);
     }
-  `,
-                }]
-        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], projectedIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ToastIconDirective), { isSignal: true }] }] } });
-
-const POSITION_AXIS = {
-    'top-right': 'right',
-    'bottom-right': 'right',
-    'top-left': 'left',
-    'bottom-left': 'left',
-    'top-center': 'top',
-    'bottom-center': 'bottom',
-};
-const POSITION_HOST_CLASSES = {
-    'top-right': 'items-end',
-    'bottom-right': 'items-end',
-    'top-left': 'items-start',
-    'bottom-left': 'items-start',
-    'top-center': 'items-center',
-    'bottom-center': 'items-center',
-};
-const POSITION_ORDER_REVERSED = {
-    'top-right': false,
-    'top-left': false,
-    'top-center': false,
-    'bottom-right': true,
-    'bottom-left': true,
-    'bottom-center': true,
-};
-const SWIPE_DISMISS_FRACTION = 0.4;
-const SWIPE_MAX_OPACITY_FADE = 0.6;
-/**
- * Internal flex-column host rendered inside each per-position CDK overlay.
- * Stacks visible toasts via `@for`, wires pause-on-interaction, Escape
- * dismissal, swipe gestures, and `LiveAnnouncer` announcements.
- *
- * @docs-private
- */
-class ToastContainerComponent {
-    /** Per-position stacking anchor. Mutated from {@link ToastService} via `.instance.position.set(...)`. */
-    position = signal('bottom-right', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /** Accessible label applied to the `role="region"` host. Mutated from the service on init. */
-    regionLabel = signal('Notifications', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "regionLabel" }] : /* istanbul ignore next */ []));
     /**
-     * Toasts currently assigned to this container. The service pushes toasts
-     * into this signal; the container filters by state to drive `animate.leave`.
+     * Dismiss the toast programmatically. The leave animation plays before the
+     * element is removed and subscribers are notified. Safe to call multiple times.
      */
-    visibleRefs = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleRefs" }] : /* istanbul ignore next */ []));
-    injector = inject(Injector);
-    liveAnnouncer = inject(LiveAnnouncer);
-    host = inject((ElementRef));
-    swipeSessions = new WeakMap();
-    entries = computed(() => {
-        const pos = this.position();
-        const axis = POSITION_AXIS[pos];
-        const enter = `toast-enter-${axis}`;
-        const leave = `toast-leave-${axis}`;
-        const refs = this.visibleRefs().filter((ref) => {
-            const s = ref.state();
-            return s === 'entering' || s === 'visible' || s === 'paused';
-        });
-        return refs.map((ref) => ({
-            ref,
-            kind: resolveKind(ref.content()),
-            enterClass: enter,
-            leaveClass: leave,
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
-    orderedEntries = computed(() => {
-        const list = this.entries();
-        return POSITION_ORDER_REVERSED[this.position()] ? [...list].reverse() : list;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orderedEntries" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => {
-        const base = 'flex flex-col gap-2 w-full max-w-sm';
-        const align = POSITION_HOST_CLASSES[this.position()];
-        return `${base} ${align}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    /** @internal Called by the service right after attaching a new toast. Runs `LiveAnnouncer`. */
-    _announceOpen(ref) {
-        const politeness = this.resolvePoliteness(ref);
-        if (politeness === 'off')
-            return;
-        const msg = this.resolveAnnouncementText(ref);
-        if (msg)
-            this.liveAnnouncer.announce(msg, politeness);
-    }
-    /** @internal Called by the service when `ref.update()` fires — re-announces with the new severity / content. */
-    _announceUpdate(ref) {
-        this._announceOpen(ref);
+    dismiss(result) {
+        this._dismissWith('programmatic', result);
     }
-    /** @internal Captures the component instance after `cdkPortalOutlet` attaches. */
-    onPortalAttached(ref, attached) {
-        if (attached && 'instance' in attached) {
-            ref.componentInstance = attached.instance;
+    /** Pause the auto-dismiss timer (if any). Called automatically on hover / focus when `pauseOnInteraction` is true. */
+    pause() {
+        if (this.paused)
+            return;
+        this.paused = true;
+        if (this.autoDismissTimer !== null) {
+            const elapsed = Date.now() - this.autoDismissStartedAt;
+            this.autoDismissRemaining = Math.max(0, this.autoDismissRemaining - elapsed);
+            clearTimeout(this.autoDismissTimer);
+            this.autoDismissTimer = null;
         }
+        const current = this.stateSignal();
+        if (current === 'visible')
+            this.stateSignal.set('paused');
     }
-    /** @internal Injector factory for component-class content. Provides `TW_TOAST_DATA` + `TW_TOAST_REF`. */
-    _createContentInjector(ref) {
-        return Injector.create({
-            parent: this.injector,
-            providers: [
-                { provide: TW_TOAST_REF, useValue: ref },
-                { provide: TW_TOAST_DATA, useValue: ref.data() },
-            ],
-        });
-    }
-    // ── Template helpers ──
-    asString(content) {
-        return typeof content === 'string' ? content : '';
-    }
-    asTemplate(content) {
-        return content instanceof TemplateRef ? content : null;
-    }
-    templateContext(ref) {
-        return { $implicit: ref.data(), ref };
-    }
-    panelClassFor(ref) {
-        const raw = ref.config.panelClass;
-        if (!raw)
-            return '';
-        return Array.isArray(raw) ? raw.join(' ') : raw;
-    }
-    // ── Interaction handlers ──
-    onPointerEnter(ref) {
-        ref._setHovered(true);
-    }
-    onPointerLeave(ref) {
-        ref._setHovered(false);
-    }
-    onFocusIn(ref) {
-        ref._setFocused(true);
-    }
-    onFocusOut(ref, event) {
-        const related = event.relatedTarget;
-        const target = event.currentTarget;
-        if (related && target && target.contains(related))
+    /** Resume the auto-dismiss timer with the remaining time. */
+    resume() {
+        if (!this.paused)
             return;
-        ref._setFocused(false);
-    }
-    onEscape(ref, event) {
-        event.stopPropagation();
-        event.preventDefault();
-        ref._dismissWith('manual');
+        this.paused = false;
+        if (this.stateSignal() === 'paused')
+            this.stateSignal.set('visible');
+        if (this.config.duration && this.config.duration > 0) {
+            if (this.autoDismissRemaining <= 0) {
+                this._dismissWith('timeout');
+                return;
+            }
+            this._startAutoDismissTimer();
+        }
     }
-    onSwipeStart(ref, event, el) {
-        if (!ref.config.swipeToDismiss)
-            return;
-        if (event.button !== 0)
-            return;
-        const target = event.target;
-        if (target?.closest('button, a, input, select, textarea, [role="button"]'))
-            return;
-        const width = el.getBoundingClientRect().width;
-        this.swipeSessions.set(ref, {
-            pointerId: event.pointerId,
-            startX: event.clientX,
-            width,
-            active: false,
-        });
-        el.setPointerCapture(event.pointerId);
-        const onMove = (e) => this.onSwipeMove(ref, e, el);
-        const onUp = (e) => this.onSwipeEnd(ref, e, el, onMove, onUp);
-        el.addEventListener('pointermove', onMove);
-        el.addEventListener('pointerup', onUp);
-        el.addEventListener('pointercancel', onUp);
+    /**
+     * @internal Update the hover state. When `pauseOnInteraction` is set and
+     * either hover or focus is active, the auto-dismiss timer is paused.
+     */
+    _setHovered(hovered) {
+        this._hovered = hovered;
+        this._syncInteractionPause();
     }
-    onSwipeMove(ref, event, _el) {
-        const session = this.swipeSessions.get(ref);
-        if (!session || event.pointerId !== session.pointerId)
-            return;
-        const dx = event.clientX - session.startX;
-        if (!session.active && Math.abs(dx) < 6)
-            return;
-        session.active = true;
-        ref.swipeTransform.set(`translate3d(${dx}px, 0, 0)`);
-        const fade = 1 - Math.min(Math.abs(dx) / session.width, 1) * SWIPE_MAX_OPACITY_FADE;
-        ref.swipeOpacity.set(fade);
+    /** @internal Update the focus-within state. See `_setHovered`. */
+    _setFocused(focused) {
+        this._focused = focused;
+        this._syncInteractionPause();
     }
-    onSwipeEnd(ref, event, el, onMove, onUp) {
-        const session = this.swipeSessions.get(ref);
-        el.removeEventListener('pointermove', onMove);
-        el.removeEventListener('pointerup', onUp);
-        el.removeEventListener('pointercancel', onUp);
-        if (!session || event.pointerId !== session.pointerId)
-            return;
-        try {
-            el.releasePointerCapture(session.pointerId);
-        }
-        catch {
-            /* no-op */
-        }
-        this.swipeSessions.delete(ref);
-        if (!session.active)
+    _syncInteractionPause() {
+        if (!this.config.pauseOnInteraction)
             return;
-        const dx = event.clientX - session.startX;
-        const threshold = session.width * SWIPE_DISMISS_FRACTION;
-        const allowed = this.swipeDirectionAllowed(dx);
-        if (Math.abs(dx) >= threshold && allowed) {
-            untracked(() => {
-                ref.swipeTransform.set(`translate3d(${Math.sign(dx) * session.width * 1.2}px, 0, 0)`);
-                ref.swipeOpacity.set(0);
-                ref.leaveAnimationOverride.set('fade-out');
-            });
-            ref._dismissWith('swipe');
+        if (this._hovered || this._focused) {
+            this.pause();
         }
         else {
-            ref.swipeTransform.set(null);
-            ref.swipeOpacity.set(null);
+            this.resume();
         }
     }
-    swipeDirectionAllowed(dx) {
-        const pos = this.position();
-        if (pos === 'top-right' || pos === 'bottom-right')
-            return dx > 0;
-        if (pos === 'top-left' || pos === 'bottom-left')
-            return dx < 0;
-        return true;
-    }
-    resolvePoliteness(ref) {
-        if (ref.config.politeness)
-            return ref.config.politeness;
-        return ref.severity() === 'error' ? 'assertive' : 'polite';
-    }
-    resolveAnnouncementText(ref) {
-        const explicit = ref.ariaLabel();
-        if (explicit)
-            return explicit;
-        const content = ref.content();
-        if (typeof content === 'string')
-            return content;
-        const host = this.host.nativeElement.querySelector(`[data-toast-id="${ref.id}"]`);
-        if (host)
-            return host.textContent?.trim() ?? '';
-        return this.host.nativeElement.textContent?.trim() ?? '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ToastContainerComponent, isStandalone: true, selector: "tw-toast-container", host: { attributes: { "role": "region" }, properties: { "class": "hostClasses()", "attr.aria-label": "regionLabel()", "attr.data-position": "position()" } }, ngImport: i0, template: `
-    @for (entry of orderedEntries(); track entry.ref.id) {
-      <!-- Toast entry wrapper; the projected <tw-toast> is the focusable affordance.
-           This element only forwards pointer/focus events so the container can
-           pause auto-dismiss while the user is interacting. -->
-      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
-      <div
-        class="pointer-events-auto w-full max-w-sm"
-        [attr.data-toast-id]="entry.ref.id"
-        [style.transform]="entry.ref.swipeTransform() || null"
-        [style.opacity]="entry.ref.swipeOpacity() ?? null"
-        [style.touch-action]="'pan-y'"
-        [animate.enter]="entry.enterClass"
-        [animate.leave]="entry.ref.leaveAnimationOverride() ?? entry.leaveClass"
-        (pointerenter)="onPointerEnter(entry.ref)"
-        (pointerleave)="onPointerLeave(entry.ref)"
-        (focusin)="onFocusIn(entry.ref)"
-        (focusout)="onFocusOut(entry.ref, $event)"
-        (keydown.escape)="onEscape(entry.ref, $event)"
-        (pointerdown)="onSwipeStart(entry.ref, $event, swipeEl)"
-        #swipeEl
-      >
-        @switch (entry.kind) {
-          @case ('string') {
-            <tw-toast
-              [severity]="entry.ref.severity()"
-              [dismissible]="entry.ref.dismissible()"
-              [icon]="entry.ref.icon()"
-              [ariaLabel]="entry.ref.ariaLabel()"
-              [class]="panelClassFor(entry.ref)"
-              (dismissed)="entry.ref._dismissWith('manual')"
-              (actionClicked)="entry.ref.triggerAction()"
-            >
-              {{ asString(entry.ref.content()) }}
-              @if (entry.ref.action(); as action) {
-                <button twToastAction>{{ action.label }}</button>
-              }
-            </tw-toast>
-          }
-          @case ('template') {
-            <tw-toast
-              [severity]="entry.ref.severity()"
-              [dismissible]="entry.ref.dismissible()"
-              [icon]="entry.ref.icon()"
-              [ariaLabel]="entry.ref.ariaLabel()"
-              [class]="panelClassFor(entry.ref)"
-              (dismissed)="entry.ref._dismissWith('manual')"
-              (actionClicked)="entry.ref.triggerAction()"
-            >
-              <ng-container
-                [ngTemplateOutlet]="asTemplate(entry.ref.content())"
-                [ngTemplateOutletContext]="templateContext(entry.ref)"
-              />
-              @if (entry.ref.action(); as action) {
-                <button twToastAction>{{ action.label }}</button>
-              }
-            </tw-toast>
-          }
-          @case ('component') {
-            <ng-template
-              [cdkPortalOutlet]="entry.ref._portal"
-              (attached)="onPortalAttached(entry.ref, $event)"
-            />
-          }
+    /** Invoke the configured action handler (or dismiss with reason `'action'` if none is set). */
+    triggerAction() {
+        const action = this.actionSignal();
+        if (!action)
+            return;
+        if (action.handler) {
+            action.handler(this);
         }
-      </div>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ToastComponent, selector: "tw-toast", inputs: ["severity", "dismissible", "icon", "ariaLabel"], outputs: ["dismissed", "actionClicked"] }, { kind: "directive", type: ToastActionDirective, selector: "[twToastAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tw-toast-container',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    imports: [NgTemplateOutlet, CdkPortalOutlet, ToastComponent, ToastActionDirective],
-                    host: {
-                        role: 'region',
-                        '[class]': 'hostClasses()',
-                        '[attr.aria-label]': 'regionLabel()',
-                        '[attr.data-position]': 'position()',
-                    },
-                    template: `
-    @for (entry of orderedEntries(); track entry.ref.id) {
-      <!-- Toast entry wrapper; the projected <tw-toast> is the focusable affordance.
-           This element only forwards pointer/focus events so the container can
-           pause auto-dismiss while the user is interacting. -->
-      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
-      <div
-        class="pointer-events-auto w-full max-w-sm"
-        [attr.data-toast-id]="entry.ref.id"
-        [style.transform]="entry.ref.swipeTransform() || null"
-        [style.opacity]="entry.ref.swipeOpacity() ?? null"
-        [style.touch-action]="'pan-y'"
-        [animate.enter]="entry.enterClass"
-        [animate.leave]="entry.ref.leaveAnimationOverride() ?? entry.leaveClass"
-        (pointerenter)="onPointerEnter(entry.ref)"
-        (pointerleave)="onPointerLeave(entry.ref)"
-        (focusin)="onFocusIn(entry.ref)"
-        (focusout)="onFocusOut(entry.ref, $event)"
-        (keydown.escape)="onEscape(entry.ref, $event)"
-        (pointerdown)="onSwipeStart(entry.ref, $event, swipeEl)"
-        #swipeEl
-      >
-        @switch (entry.kind) {
-          @case ('string') {
-            <tw-toast
-              [severity]="entry.ref.severity()"
-              [dismissible]="entry.ref.dismissible()"
-              [icon]="entry.ref.icon()"
-              [ariaLabel]="entry.ref.ariaLabel()"
-              [class]="panelClassFor(entry.ref)"
-              (dismissed)="entry.ref._dismissWith('manual')"
-              (actionClicked)="entry.ref.triggerAction()"
-            >
-              {{ asString(entry.ref.content()) }}
-              @if (entry.ref.action(); as action) {
-                <button twToastAction>{{ action.label }}</button>
-              }
-            </tw-toast>
-          }
-          @case ('template') {
-            <tw-toast
-              [severity]="entry.ref.severity()"
-              [dismissible]="entry.ref.dismissible()"
-              [icon]="entry.ref.icon()"
-              [ariaLabel]="entry.ref.ariaLabel()"
-              [class]="panelClassFor(entry.ref)"
-              (dismissed)="entry.ref._dismissWith('manual')"
-              (actionClicked)="entry.ref.triggerAction()"
-            >
-              <ng-container
-                [ngTemplateOutlet]="asTemplate(entry.ref.content())"
-                [ngTemplateOutletContext]="templateContext(entry.ref)"
-              />
-              @if (entry.ref.action(); as action) {
-                <button twToastAction>{{ action.label }}</button>
-              }
-            </tw-toast>
-          }
-          @case ('component') {
-            <ng-template
-              [cdkPortalOutlet]="entry.ref._portal"
-              (attached)="onPortalAttached(entry.ref, $event)"
-            />
-          }
-        }
-      </div>
-    }
-  `,
-                }]
-        }] });
-function resolveKind(content) {
-    if (typeof content === 'string')
-        return 'string';
-    if (content instanceof TemplateRef)
-        return 'template';
-    return 'component';
-}
-
-/** Duration (ms) of the toast enter / leave animation. Must match `_base.css` toast-slide keyframes. */
-const TOAST_ANIMATION_DURATION = 150;
-/** Padding added to animation fallback timers to guarantee cleanup if the CSS event is swallowed. */
-const TOAST_ANIMATION_FALLBACK_PADDING = 50;
-/**
- * Reference to a toast opened via {@link ToastService}. Use to dismiss the
- * toast, pause / resume its auto-dismiss timer, or observe its lifecycle.
- *
- * The service returns a ref synchronously from every open method; the toast
- * itself is attached asynchronously inside the CDK overlay.
- */
-class ToastRef {
-    dismissCallback;
-    /** Unique id. Generated if `config.id` was not provided. */
-    id;
-    /** Instance of the component rendered inside the toast (only for component-class content). */
-    componentInstance = null;
-    /** Resolved static config for this toast (defaults merged, severity shorthand applied). */
-    config;
-    /** Reactive lifecycle state. */
-    state;
-    /** Reactive severity — may change after `update()` (used by the `promise()` helper). */
-    severity;
-    /** Reactive dismissibility. */
-    dismissible;
-    /** Reactive icon override. */
-    icon;
-    /** Reactive content (the source of truth for what gets rendered). */
-    content;
-    /** Reactive action button configuration. */
-    action;
-    /** Reactive accessible label. */
-    ariaLabel;
-    /** Reactive data payload — re-read by the container to update `TW_TOAST_DATA`. */
-    data;
-    /** @internal Reactive "transient" class applied by swipe gestures (e.g. `translate3d(...)`). */
-    swipeTransform = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "swipeTransform" }] : /* istanbul ignore next */ []));
-    /** @internal Reactive opacity applied during swipe gestures. */
-    swipeOpacity = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "swipeOpacity" }] : /* istanbul ignore next */ []));
-    /** @internal Leave-animation class override. When non-null, container uses this instead of the position default. */
-    leaveAnimationOverride = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "leaveAnimationOverride" }] : /* istanbul ignore next */ []));
-    /** @internal Portal for component-class content. Set by the service; null for string / template content. */
-    _portal = null;
-    /** @internal True while the pointer hovers this toast. */
-    _hovered = false;
-    /** @internal True while focus is within this toast. */
-    _focused = false;
-    /** @internal Set by the service so the ref can reach the CDK-owned OverlayRef if it needs to. */
-    _overlayPanelElement = null;
-    stateSignal = signal('entering', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
-    severitySignal;
-    dismissibleSignal;
-    iconSignal;
-    contentSignal;
-    actionSignal;
-    ariaLabelSignal;
-    dataSignal;
-    afterOpenedSubject = new ReplaySubject(1);
-    beforeDismissedSubject = new ReplaySubject(1);
-    afterDismissedSubject = new ReplaySubject(1);
-    updatedSubject = new Subject();
-    dismissReason = 'programmatic';
-    dismissResult;
-    autoDismissTimer = null;
-    autoDismissStartedAt = 0;
-    autoDismissRemaining = 0;
-    paused = false;
-    enterTimer = null;
-    leaveTimer = null;
-    constructor(id, content, config, dismissCallback) {
-        this.dismissCallback = dismissCallback;
-        this.id = id;
-        this.config = config;
-        this.severitySignal = signal(config.severity ?? 'info', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "severitySignal" }] : /* istanbul ignore next */ []));
-        this.dismissibleSignal = signal(config.dismissible ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dismissibleSignal" }] : /* istanbul ignore next */ []));
-        this.iconSignal = signal(typeof config.icon === 'string' || config.icon === false ? config.icon : undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
-        this.contentSignal = signal(content, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "contentSignal" }] : /* istanbul ignore next */ []));
-        this.actionSignal = signal(config.action, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "actionSignal" }] : /* istanbul ignore next */ []));
-        this.ariaLabelSignal = signal(config.ariaLabel, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaLabelSignal" }] : /* istanbul ignore next */ []));
-        this.dataSignal = signal(config.data ?? null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dataSignal" }] : /* istanbul ignore next */ []));
-        this.state = this.stateSignal.asReadonly();
-        this.severity = this.severitySignal.asReadonly();
-        this.dismissible = this.dismissibleSignal.asReadonly();
-        this.icon = this.iconSignal.asReadonly();
-        this.content = this.contentSignal.asReadonly();
-        this.action = this.actionSignal.asReadonly();
-        this.ariaLabel = this.ariaLabelSignal.asReadonly();
-        this.data = this.dataSignal.asReadonly();
-        this.autoDismissRemaining = config.duration ?? 0;
-        this.enterTimer = setTimeout(() => this._markVisible(), TOAST_ANIMATION_DURATION + TOAST_ANIMATION_FALLBACK_PADDING);
-    }
-    /**
-     * Dismiss the toast programmatically. The leave animation plays before the
-     * element is removed and subscribers are notified. Safe to call multiple times.
-     */
-    dismiss(result) {
-        this._dismissWith('programmatic', result);
-    }
-    /** Pause the auto-dismiss timer (if any). Called automatically on hover / focus when `pauseOnInteraction` is true. */
-    pause() {
-        if (this.paused)
-            return;
-        this.paused = true;
-        if (this.autoDismissTimer !== null) {
-            const elapsed = Date.now() - this.autoDismissStartedAt;
-            this.autoDismissRemaining = Math.max(0, this.autoDismissRemaining - elapsed);
-            clearTimeout(this.autoDismissTimer);
-            this.autoDismissTimer = null;
-        }
-        const current = this.stateSignal();
-        if (current === 'visible')
-            this.stateSignal.set('paused');
-    }
-    /** Resume the auto-dismiss timer with the remaining time. */
-    resume() {
-        if (!this.paused)
-            return;
-        this.paused = false;
-        if (this.stateSignal() === 'paused')
-            this.stateSignal.set('visible');
-        if (this.config.duration && this.config.duration > 0) {
-            if (this.autoDismissRemaining <= 0) {
-                this._dismissWith('timeout');
-                return;
-            }
-            this._startAutoDismissTimer();
-        }
-    }
-    /**
-     * @internal Update the hover state. When `pauseOnInteraction` is set and
-     * either hover or focus is active, the auto-dismiss timer is paused.
-     */
-    _setHovered(hovered) {
-        this._hovered = hovered;
-        this._syncInteractionPause();
-    }
-    /** @internal Update the focus-within state. See `_setHovered`. */
-    _setFocused(focused) {
-        this._focused = focused;
-        this._syncInteractionPause();
-    }
-    _syncInteractionPause() {
-        if (!this.config.pauseOnInteraction)
-            return;
-        if (this._hovered || this._focused) {
-            this.pause();
-        }
-        else {
-            this.resume();
-        }
-    }
-    /** Invoke the configured action handler (or dismiss with reason `'action'` if none is set). */
-    triggerAction() {
-        const action = this.actionSignal();
-        if (!action)
-            return;
-        if (action.handler) {
-            action.handler(this);
-        }
-        else {
-            this._dismissWith('action');
+        else {
+            this._dismissWith('action');
         }
     }
     /** Mutate the live toast in place. Used by the `promise()` helper to swap loading → success / error. */
@@ -1070,7 +385,6 @@ class ToastRef {
     }
 }
 
-const OVERLAY_EDGE_OFFSET = '1rem';
 let nextToastId = 0;
 function generateId() {
     return `tw-toast-${++nextToastId}`;
@@ -1080,14 +394,22 @@ function generateId() {
  * created per `ToastPosition` on first use and reused for the lifetime of the
  * service; toasts stack vertically inside their position container.
  *
+ * The rendering layer (CDK overlay + the toast components) is loaded through a
+ * dynamic `import()` on the first `show()` call, so merely registering this
+ * service costs nothing in the initial bundle. Every open method still returns
+ * its {@link ToastRef} synchronously — the toast is attached once the chunk
+ * lands, and `update()` / `dismiss()` called in the meantime are honoured.
+ *
  * Not `providedIn: 'root'` — register via {@link provideToast}.
  */
 class ToastService {
-    overlay = inject(Overlay);
     injector = inject(Injector);
     defaultOptions = inject(TW_TOAST_DEFAULT_OPTIONS, { optional: true }) ?? {};
     parent = inject(ToastService, { optional: true, skipSelf: true });
-    positionOverlays = new Map();
+    /** Cached renderer chunk. Non-null once the first `show()` has kicked off the import. */
+    rendererPromise = null;
+    renderer = null;
+    destroyed = false;
     activeRefsAtThisLevel = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeRefsAtThisLevel" }] : /* istanbul ignore next */ []));
     afterOpenedSubject = new Subject();
@@ -1186,13 +508,14 @@ class ToastService {
         return this.activeToasts().find((ref) => ref.id === id);
     }
     ngOnDestroy() {
+        // Set first: an in-flight renderer import resolves after this and must not
+        // instantiate overlays for a service that is already gone.
+        this.destroyed = true;
         const refs = [...this.activeRefsAtThisLevel()];
         for (let i = refs.length - 1; i >= 0; i--)
             refs[i]._finishDismiss();
-        for (const { overlayRef } of this.positionOverlays.values()) {
-            overlayRef.dispose();
-        }
-        this.positionOverlays.clear();
+        this.renderer?.dispose();
+        this.renderer = null;
         this.afterOpenedSubject.complete();
         this.afterAllDismissedSubject.complete();
     }
@@ -1207,16 +530,53 @@ class ToastService {
         const id = config.id ?? generateId();
         config.id = id;
         const ref = new ToastRef(id, content, config, (dismissed) => this.handleDismissed(dismissed));
-        if (isComponentConstructor(content)) {
-            const injector = this.getContainerForPosition(config.position).containerRef.instance._createContentInjector(ref);
-            ref._portal = new ComponentPortal(content, null, injector);
-        }
         this.enforceMaxVisible(config.position, config.maxVisible ?? 5);
         this.registerOpen(ref);
-        this.attachToContainer(ref, config.position);
-        this.announceOpen(ref);
+        void this.attachWhenRendererReady(ref, config.position);
         return ref;
     }
+    /**
+     * Attach a toast once the renderer chunk has loaded. The ref was already
+     * returned to the caller, so it may have been dismissed (or the service
+     * destroyed) while the import was in flight — both are checked before
+     * anything is put on screen.
+     */
+    async attachWhenRendererReady(ref, position) {
+        const renderer = await this.loadRenderer();
+        if (!renderer || this.destroyed)
+            return;
+        const state = ref.state();
+        if (state === 'dismissing' || state === 'dismissed')
+            return;
+        if (!renderer.attach(ref, position))
+            return;
+        // Only now does the enter animation — and with it the auto-dismiss
+        // countdown — begin. See `ToastRef._startEnterSequence`.
+        ref._startEnterSequence();
+        renderer.announceOpen(ref);
+    }
+    /**
+     * @internal Resolves once the renderer chunk has loaded and pending toasts
+     * have been attached. Exposed for tests, which must await the dynamic import
+     * before asserting on rendered DOM.
+     */
+    async _whenRendered() {
+        await this.loadRenderer();
+        // Let the per-toast `attachWhenRendererReady` continuations run.
+        await Promise.resolve();
+    }
+    /** Load (once) and instantiate the rendering layer. Resolves to `null` if the service was destroyed mid-import. */
+    loadRenderer() {
+        if (!this.rendererPromise) {
+            this.rendererPromise = import('./cdevhub-ngx-tw-toast-toast-renderer-BlDxemsU.mjs').then(({ ToastRenderer }) => {
+                if (this.destroyed)
+                    return null;
+                this.renderer = new ToastRenderer(this.injector, this.defaultOptions.regionAriaLabel ?? 'Notifications');
+                return this.renderer;
+            });
+        }
+        return this.rendererPromise;
+    }
     enforceMaxVisible(position, max) {
         if (max <= 0)
             return;
@@ -1239,72 +599,18 @@ class ToastService {
     handleDismissed(ref) {
         const scope = this.parent ?? this;
         scope.activeRefsAtThisLevel.update((list) => list.filter((r) => r !== ref));
-        const position = ref.config.position ?? 'bottom-right';
-        const entry = this.positionOverlays.get(position);
-        if (entry) {
-            const instance = entry.containerRef.instance;
-            instance.visibleRefs.update((list) => list.filter((r) => r !== ref));
-        }
+        this.renderer?.detach(ref);
         if (scope.activeRefsAtThisLevel().length === 0) {
             scope.afterAllDismissedSubject.next();
         }
     }
-    attachToContainer(ref, position) {
-        const entry = this.getContainerForPosition(position);
-        const instance = entry.containerRef.instance;
-        const anyRef = ref;
-        instance.visibleRefs.update((list) => [...list, anyRef]);
-        ref._overlayPanelElement = entry.overlayRef.overlayElement;
-    }
-    announceOpen(ref) {
-        const entry = this.positionOverlays.get(ref.config.position ?? 'bottom-right');
-        entry?.containerRef.instance._announceOpen(ref);
-    }
+    /**
+     * Re-announce an updated toast. If the renderer has not landed yet there is
+     * nothing on screen to announce — the announcement that fires on attach
+     * reads the ref's current (already updated) content, so nothing is lost.
+     */
     announceUpdate(ref) {
-        const entry = this.positionOverlays.get(ref.config.position ?? 'bottom-right');
-        entry?.containerRef.instance._announceUpdate(ref);
-    }
-    getContainerForPosition(position) {
-        const existing = this.positionOverlays.get(position);
-        if (existing)
-            return existing;
-        const overlayRef = this.overlay.create({
-            positionStrategy: this.buildPositionStrategy(position),
-            scrollStrategy: this.overlay.scrollStrategies.noop(),
-            hasBackdrop: false,
-            panelClass: ['tw-toast-overlay', `tw-toast-overlay-${position}`],
-        });
-        const containerPortal = new ComponentPortal(ToastContainerComponent, null, this.injector);
-        const containerRef = overlayRef.attach(containerPortal);
-        containerRef.instance.position.set(position);
-        containerRef.instance.regionLabel.set(this.defaultOptions.regionAriaLabel ?? 'Notifications');
-        const entry = { overlayRef, containerRef };
-        this.positionOverlays.set(position, entry);
-        return entry;
-    }
-    buildPositionStrategy(position) {
-        const strategy = createGlobalPositionStrategy(this.injector);
-        switch (position) {
-            case 'top-right':
-                strategy.top(OVERLAY_EDGE_OFFSET).right(OVERLAY_EDGE_OFFSET);
-                break;
-            case 'top-left':
-                strategy.top(OVERLAY_EDGE_OFFSET).left(OVERLAY_EDGE_OFFSET);
-                break;
-            case 'top-center':
-                strategy.top(OVERLAY_EDGE_OFFSET).centerHorizontally();
-                break;
-            case 'bottom-right':
-                strategy.bottom(OVERLAY_EDGE_OFFSET).right(OVERLAY_EDGE_OFFSET);
-                break;
-            case 'bottom-left':
-                strategy.bottom(OVERLAY_EDGE_OFFSET).left(OVERLAY_EDGE_OFFSET);
-                break;
-            case 'bottom-center':
-                strategy.bottom(OVERLAY_EDGE_OFFSET).centerHorizontally();
-                break;
-        }
-        return strategy;
+        this.renderer?.announceUpdate(ref);
     }
     resolveConfig(config) {
         const merged = new ToastConfig();
@@ -1320,9 +626,6 @@ class ToastService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastService, decorators: [{
             type: Injectable
         }] });
-function isComponentConstructor(value) {
-    return typeof value === 'function' && !(value instanceof TemplateRef);
-}
 /**
  * Registers {@link ToastService} for dependency injection and installs optional
  * application-wide defaults.
@@ -1348,6 +651,314 @@ const ToastInternals = {
     },
 };
 
+const toastVariants = tv({
+    slots: {
+        root: 'pointer-events-auto relative flex items-start gap-3 w-full max-w-sm p-4 rounded-lg border shadow-md text-sm will-change-transform transition-colors duration-normal motion-reduce:transition-none',
+        icon: 'size-5 shrink-0 mt-0.5',
+        title: 'text-sm font-semibold',
+        description: 'text-sm',
+        content: 'flex-1 min-w-0',
+        action: 'inline-flex items-center justify-center px-3 py-1.5 rounded-md text-sm font-medium cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        // Dismiss container is `size-6` (24px — xs square-interactive-target
+        // scale per CLAUDE.md icon sub-scale). The inner SVG is `size-4` (16px
+        // glyph scale), centred via flex; the larger container gives the
+        // touch/click affordance without enlarging the visual glyph.
+        dismiss: 'absolute top-3 right-3 inline-flex items-center justify-center size-6 rounded-md cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    },
+    variants: {
+        severity: {
+            info: {},
+            success: {},
+            warning: {},
+            error: {},
+            neutral: {},
+        },
+    },
+    // Color slot tokens (`{role}-soft`, `-soft-fg`, `-icon`, …) own light/dark
+    // contrast — components consume the slot only. See `_semantic.css`.
+    // Slot-token safelist: see `projects/ngx-tw/theme/index.css` `@source inline(...)`
+    // — Tailwind v4's JIT cannot scan template-literal class names, so every
+    // `bg-${severity}-soft` / `text-${severity}-icon` permutation below must be
+    // enumerated there.
+    compoundVariants: ['info', 'success', 'warning', 'error', 'neutral'].map((severity) => ({
+        severity,
+        class: {
+            root: `bg-${severity}-soft text-${severity}-soft-fg-muted border-${severity}-border`,
+            icon: `text-${severity}-icon`,
+            title: `text-${severity}-soft-fg`,
+            description: `text-${severity}-soft-fg-muted`,
+            action: `text-${severity}-soft-fg hover:bg-${severity}-soft-hover`,
+            dismiss: `text-${severity}-icon hover:bg-${severity}-soft-hover`,
+        },
+    })),
+    defaultVariants: {
+        severity: 'info',
+    },
+}, { twMerge: true });
+/** Slot directive for the icon. When projected, overrides the severity-default icon. */
+class ToastIconDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.iconClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastIconDirective, isStandalone: true, selector: "[twToastIcon]", host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+/** Slot directive for the bold title line inside a toast. */
+class ToastTitleDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.titleClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastTitleDirective, isStandalone: true, selector: "[twToastTitle]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastTitle]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+/** Slot directive for a secondary description line inside a toast. */
+class ToastDescriptionDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.descriptionClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastDescriptionDirective, isStandalone: true, selector: "[twToastDescription]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastDescription]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+/** Slot directive for the action button. Apply to a native `<button>` to inherit the severity-aware styling. */
+class ToastActionDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.actionClasses;
+    /** @internal */
+    onClick() {
+        this.toast.actionClicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ToastActionDirective, isStandalone: true, selector: "[twToastAction]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastAction]',
+                    host: {
+                        type: 'button',
+                        '[class]': 'classes()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+/**
+ * Visual toast / snackbar panel. Rendered internally by {@link ToastService} for
+ * string content, and exported for consumers who want to compose the same
+ * visual inside a custom `TemplateRef` or component class passed to `show()`.
+ */
+class ToastComponent {
+    /** Severity variant. Drives color palette, default icon, and ARIA role / live politeness. Defaults to `'info'`. */
+    severity = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    /** Whether to render the close button. Defaults to `true` — mirroring `ToastConfig.dismissible`, toasts must offer an escape hatch; the special case is an ephemeral progress marker paired with `duration`. */
+    dismissible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon override. Pass a string to render as text inside the icon slot, or
+     * `false` to hide the built-in severity icon. Ignored when a `[twToastIcon]`
+     * child is projected. When omitted, the severity-default icon renders.
+     *
+     * For arbitrary icon markup, project a `[twToastIcon]` child instead.
+     */
+    icon = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Explicit aria-label for the toast wrapper. Mirrored to `aria-label`. When omitted, text content is used by assistive tech. Defaults to `undefined`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Fires when the close button is clicked. */
+    dismissed = output();
+    /** Fires when a `[twToastAction]` button is clicked. */
+    actionClicked = output();
+    /** @internal */
+    projectedIcon = contentChild(ToastIconDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedIcon" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hasProjectedIcon = computed(() => !!this.projectedIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasProjectedIcon" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => toastVariants({ severity: this.severity() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => {
+        const base = this.variantResult().root();
+        return this.dismissible() ? `${base} pr-10` : base;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    iconClasses = computed(() => this.variantResult().icon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    titleClasses = computed(() => this.variantResult().title(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    descriptionClasses = computed(() => this.variantResult().description(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    contentClasses = computed(() => this.variantResult().content(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    actionClasses = computed(() => this.variantResult().action(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dismissClasses = computed(() => this.variantResult().dismiss(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    roleAttr = computed(() => this.severity() === 'error' ? 'alert' : 'status', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roleAttr" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    ariaLiveAttr = computed(() => this.severity() === 'error' ? 'assertive' : 'polite', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLiveAttr" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ToastComponent, isStandalone: true, selector: "tw-toast", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", actionClicked: "actionClicked" }, host: { attributes: { "aria-atomic": "true" }, properties: { "class": "rootClasses()", "attr.role": "roleAttr()", "attr.aria-live": "ariaLiveAttr()", "attr.aria-label": "ariaLabel() || null", "attr.data-severity": "severity()" } }, queries: [{ propertyName: "projectedIcon", first: true, predicate: ToastIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (hasProjectedIcon()) {
+      <ng-content select="[twToastIcon]" />
+    } @else if (icon() !== false) {
+      <span [class]="iconClasses()" aria-hidden="true">
+        @switch (severity()) {
+          @case ('info') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-.75 2.5a.75.75 0 0 0 0 1.5h.25v3h-.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5h-.25v-3.75a.75.75 0 0 0-.75-.75h-1Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('success') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('warning') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('error') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @default {
+            @if (icon() && icon() !== false) {
+              {{ icon() }}
+            }
+          }
+        }
+      </span>
+    }
+    <div [class]="contentClasses()">
+      <ng-content select="[twToastTitle]" />
+      <ng-content select="[twToastDescription]" />
+      <ng-content />
+      <ng-content select="[twToastAction]" />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        aria-label="Dismiss"
+        [class]="dismissClasses()"
+        (click)="dismissed.emit()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
+        </svg>
+      </button>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-toast',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'rootClasses()',
+                        '[attr.role]': 'roleAttr()',
+                        '[attr.aria-live]': 'ariaLiveAttr()',
+                        'aria-atomic': 'true',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-severity]': 'severity()',
+                    },
+                    template: `
+    @if (hasProjectedIcon()) {
+      <ng-content select="[twToastIcon]" />
+    } @else if (icon() !== false) {
+      <span [class]="iconClasses()" aria-hidden="true">
+        @switch (severity()) {
+          @case ('info') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-.75 2.5a.75.75 0 0 0 0 1.5h.25v3h-.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5h-.25v-3.75a.75.75 0 0 0-.75-.75h-1Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('success') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('warning') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('error') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @default {
+            @if (icon() && icon() !== false) {
+              {{ icon() }}
+            }
+          }
+        }
+      </span>
+    }
+    <div [class]="contentClasses()">
+      <ng-content select="[twToastTitle]" />
+      <ng-content select="[twToastDescription]" />
+      <ng-content />
+      <ng-content select="[twToastAction]" />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        aria-label="Dismiss"
+        [class]="dismissClasses()"
+        (click)="dismissed.emit()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
+        </svg>
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], projectedIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ToastIconDirective), { isSignal: true }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */