@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-toast.mjs

@@ -1,29 +1,19 @@
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Overlay, OverlayContainer, CdkScrollable, OverlayKeyboardDispatcher, FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, inject, ElementRef, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, NgZone, Injectable, ChangeDetectorRef, viewChild, ViewContainerRef, NgModule } from '@angular/core';
+import { InjectionToken, Directive, inject, ElementRef, Injector, signal, DestroyRef, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, untracked, Injectable, viewChild, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { BehaviorSubject, merge, timer, filter as filter$1, shareReplay } from 'rxjs';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@koobiq/components/core';
-import { KbqReadStateDirective, ThemePalette } from '@koobiq/components/core';
+import { KbqReadStateDirective, kbqInjectA11yLocaleConfiguration, kbqAnimationsDisabled, kbqAfterAnimations } from '@koobiq/components/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { BehaviorSubject, Observable, timer, map, distinctUntilChanged, switchMap, EMPTY, filter as filter$1, share } from 'rxjs';
 import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import * as i3 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
-import { filter } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-
-const kbqToastAnimations = {
-    toastState: trigger('state', [
-        state('void', style({ transform: 'translateX(100%)', opacity: 0 })),
-        transition('* => visible', animate('150ms ease-out', style({ transform: 'translateX(0%)', opacity: 1 }))),
-        transition('* => void', animate('300ms ease-in', style({ transform: 'translateX(50%)', opacity: 0, height: 0 })))
-    ])
-};
-const toastState = kbqToastAnimations.toastState;
+import { filter, take } from 'rxjs/operators';
 
 var KbqToastStyle;
 (function (KbqToastStyle) {
@@ -44,30 +34,39 @@ var KbqToastPosition;
 })(KbqToastPosition || (KbqToastPosition = {}));
 class KbqToastData {
 }
-const defaultToastConfig = {
+/** Stack a toast belongs to. Provided by `KbqToastService` for every toast it creates. */
+const KBQ_TOAST_STACK = new InjectionToken('KBQ_TOAST_STACK');
+/** Frozen so that the fallback every application shares cannot be reconfigured from a single consumer. */
+const defaultToastConfig = Object.freeze({
     position: KbqToastPosition.TOP_RIGHT,
     duration: 5000,
     delay: 2000,
     onTop: false,
-    indent: {
+    indent: Object.freeze({
         vertical: 0,
         horizontal: 0
-    }
-};
+    })
+});
 const KBQ_TOAST_CONFIG = new InjectionToken('kbq-toast-config', {
     factory: () => defaultToastConfig
 });
 /** Utility provider for `KBQ_TOAST_CONFIG`. */
 const kbqToastConfigurationProvider = (configuration) => ({
     provide: KBQ_TOAST_CONFIG,
-    useValue: { ...defaultToastConfig, ...configuration }
+    useValue: {
+        ...defaultToastConfig,
+        ...configuration,
+        // `indent` is merged on its own: a shallow spread would alias the default object into every
+        // configuration that omits it, so writing to one provider's indent would move the global default.
+        indent: { ...defaultToastConfig.indent, ...configuration.indent }
+    }
 });
 
 class KbqToastCloseButton {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqToastCloseButton, isStandalone: true, selector: "[kbq-toast-close-button]", host: { classAttribute: "kbq-toast__close-button" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqToastCloseButton, isStandalone: true, selector: "[kbq-toast-close-button]", host: { classAttribute: "kbq-toast__close-button" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastCloseButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastCloseButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-toast-close-button]',
@@ -77,74 +76,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 }]
         }] });
 let id = 0;
+/** Glyph rendered by the built-in icon of every style. A style outside the map renders no default icon. */
+const defaultIcons = {
+    [KbqToastStyle.Contrast]: 'kbq-circle-info_16',
+    [KbqToastStyle.Success]: 'kbq-circle-check_16',
+    [KbqToastStyle.Warning]: 'kbq-triangle-exclamation_16',
+    [KbqToastStyle.Error]: 'kbq-triangle-exclamation_16'
+};
+/** Styles whose message interrupts the user instead of waiting for the next graceful moment. */
+const assertiveStyles = [KbqToastStyle.Warning, KbqToastStyle.Error];
 class KbqToastComponent {
-    get toastStyle() {
-        return {
-            [`kbq-toast_${this.data.style}`]: true
-        };
-    }
+    // TODO: nothing in the library uses it; kept as public API at the DS-2196 review. Document or deprecate it.
     get isFocusedOrHovered() {
-        return this.hovered.getValue() || this.focused.getValue();
+        return this.hovered() || this.focused();
     }
     constructor() {
         this.data = inject(KbqToastData);
-        this.service = inject(KbqToastService);
+        this.stack = inject(KBQ_TOAST_STACK);
         this.elementRef = inject(ElementRef);
         this.focusMonitor = inject(FocusMonitor);
+        this.injector = inject(Injector);
         this.readStateDirective = inject(KbqReadStateDirective, { host: true });
-        this.themePalette = ThemePalette;
-        this.animationState = 'void';
-        this.hovered = new BehaviorSubject(false);
-        this.focused = new BehaviorSubject(false);
+        this.a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();
+        /** Whether the toast appears and leaves without motion. */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        /** Height the exit animation collapses from, set once the toast leaves. */
+        this.leavingHeight = signal(null, ...(ngDevMode ? [{ debugName: "leavingHeight" }] : /* istanbul ignore next */ []));
+        this._hovered = signal(false, ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
+        this._focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+        /** Whether the pointer is over the toast. */
+        this.hovered = this._hovered.asReadonly();
+        /** Whether the toast or an element inside it holds the focus. */
+        this.focused = this._focused.asReadonly();
         this.id = id++;
+        /** Context of the templates a consumer passes through `KbqToastData`. */
         this.$implicit = this;
-        this.data.style = this.data.style || KbqToastStyle.Contrast;
-        this.data.icon = this.data.icon !== undefined ? this.data.icon : true;
-        this.data.iconClass = this.data.iconClass || undefined;
-        this.data.closeButton = this.data.closeButton !== undefined ? this.data.closeButton : true;
-        this.animationState = 'visible';
-        this.runFocusMonitor();
-        this.hovered.subscribe(this.service.hovered);
-        this.focused.subscribe(this.service.focused);
-        merge(this.hovered, this.focused)
-            .pipe(filter((value) => value), takeUntilDestroyed())
-            .subscribe(() => {
-            if (this.ttl === 0) {
-                return;
-            }
-            this.ttl = this.ttl < this.delay ? this.delay : this.ttl;
-        });
+        // The injected data belongs to the caller, so every default lives here instead of being written back into it.
+        this.style = this.data.style || KbqToastStyle.Contrast;
+        this.styleClass = `kbq-toast_${this.style}`;
+        this.role = assertiveStyles.includes(this.style) ? 'alert' : 'status';
+        this.closeButton = this.data.closeButton !== undefined ? this.data.closeButton : true;
+        this.icon = this.data.icon !== undefined ? this.data.icon : true;
+        this.defaultIcon = defaultIcons[this.style] ?? null;
+        // The slot templates are fixed once the toast is created, so they are resolved once instead of on every
+        // change detection cycle.
+        this.iconTemplate = this.asTemplateRef(this.icon);
+        this.titleTemplate = this.asTemplateRef(this.data.title);
+        this.captionTemplate = this.asTemplateRef(this.data.caption);
+        this.contentTemplate = this.asTemplateRef(this.data.content);
+        this.actionsTemplate = this.asTemplateRef(this.data.actions);
+        this.closeButtonTemplate = this.asTemplateRef(this.closeButton);
+        this.alreadyRead = false;
+        this.runFocusMonitor(inject(DestroyRef));
+        // `read` is a `BehaviorSubject` re-emitted by every hover long enough to count as read, while a toast
+        // is read exactly once.
         this.readStateDirective.read
-            .pipe(filter((value) => value), takeUntilDestroyed())
-            .subscribe(() => this.service.read.next(this.data));
+            .pipe(filter(Boolean), take(1), takeUntilDestroyed())
+            .subscribe(() => this.markAsRead());
     }
     ngOnDestroy() {
         this.stopFocusMonitor();
-        this.hovered.next(false);
-        this.focused.next(false);
+        this.stack.setHovered(this.id, false);
+        this.stack.setFocused(this.id, null);
     }
     close() {
-        this.service.read.next(this.data);
-        this.service.hide(this.id);
+        this.markAsRead();
+        this.stack.hide(this.id);
     }
-    isTemplateRef(value) {
-        return value instanceof TemplateRef;
+    /**
+     * Plays the exit animation of a toast taken off the stack, then calls `done`.
+     *
+     * @docs-private
+     */
+    leave(done) {
+        const element = this.elementRef.nativeElement;
+        const destroyRef = this.injector.get(DestroyRef);
+        // `auto` does not animate, so the collapse starts from the measured height.
+        this.leavingHeight.set(element.offsetHeight);
+        // Raising the stack without `moveBefore()` takes it out of the DOM, which cancels the exit animation and
+        // starts it over: the one that runs then is waited for as well.
+        const afterExit = (awaited) => {
+            const running = (element.getAnimations?.() ?? []).filter((animation) => animation.playState === 'running' &&
+                !awaited.includes(animation) &&
+                animation.effect?.getComputedTiming().endTime !== Infinity);
+            if (!running.length)
+                return done();
+            Promise.allSettled(running.map(({ finished }) => finished)).then(() => {
+                if (!destroyRef.destroyed)
+                    afterExit(running);
+            });
+        };
+        kbqAfterAnimations(() => element, () => afterExit([]), this.injector);
+    }
+    /** @docs-private */
+    setHovered(hovered) {
+        this._hovered.set(hovered);
+        this.stack.setHovered(this.id, hovered);
+    }
+    markAsRead() {
+        if (this.alreadyRead) {
+            return;
+        }
+        this.alreadyRead = true;
+        this.stack.read.next(this.data);
     }
-    onAnimation($event) {
-        this.service.animation.next($event);
+    asTemplateRef(value) {
+        return value instanceof TemplateRef ? value : null;
     }
-    runFocusMonitor() {
+    runFocusMonitor(destroyRef) {
         this.focusMonitor
             .monitor(this.elementRef.nativeElement, true)
-            .subscribe((origin) => this.focused.next(!!origin));
+            .pipe(takeUntilDestroyed(destroyRef))
+            .subscribe((origin) => {
+            this._focused.set(!!origin);
+            this.stack.setFocused(this.id, origin);
+        });
     }
     stopFocusMonitor() {
         this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqToastComponent, isStandalone: true, selector: "kbq-toast", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)", "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)", "keydown.esc": "close()" }, properties: { "class": "toastStyle", "class.kbq-toast_dismissible": "data.closeButton", "@state": "animationState" }, classAttribute: "kbq-toast" }, hostDirectives: [{ directive: i1.KbqReadStateDirective }], ngImport: i0, template: "@if (data.icon) {\n    <div class=\"kbq-toast__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        }\n        @if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-toast__title\"\n            [class.kbq-toast__title_only-text]=\"!isTemplateRef(data.title)\"\n            [class.kbq-toast__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-toast__text]=\"data.title\"\n            [class.kbq-toast__text_only-text]=\"!isTemplateRef(data.caption)\"\n            [class.kbq-toast__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.caption }}}\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\" [class.kbq-toast__content_only-text]=\"!isTemplateRef(data.content)\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.content }}}\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (data.closeButton) {\n    <div>\n        @if (data.closeButton === true) {\n            <i kbq-icon-button=\"kbq-xmark-s_16\" kbq-toast-close-button (click)=\"close()\"></i>\n        }\n        @if (isTemplateRef(data.closeButton)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.closeButton)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n", styles: [".kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius);padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right)}.kbq-toast__icon-container{flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-container-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title.kbq-toast__title_only-text{white-space:pre-wrap}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__text.kbq-toast__text_only-text{white-space:pre-wrap}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__content.kbq-toast__content_only-text{white-space:pre-wrap}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:calc(var(--kbq-toast-size-content-padding-top) - (var(--kbq-icon-button-size-small-vertical-padding) * 2 + 16px - var(--kbq-typography-text-normal-line-height)) / 2);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast,.kbq-toast__title{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ":where(.kbq-toast-container){--kbq-toast-stack-size-margin-top: var(--kbq-size-m);--kbq-toast-stack-size-margin-right: var(--kbq-size-m);--kbq-toast-stack-size-margin-vertical: var(--kbq-size-m);--kbq-toast-stack-size-margin-horizontal: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: 50%;--kbq-toast-size-close-button-margin-top: var(--kbq-size-m);--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["size", "small", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqToastCloseButton, selector: "[kbq-toast-close-button]" }], animations: [kbqToastAnimations.toastState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqToastComponent, isStandalone: true, selector: "kbq-toast", host: { attributes: { "aria-atomic": "true" }, listeners: { "mouseenter": "setHovered(true)", "mouseleave": "setHovered(false)", "keydown.esc": "close()" }, properties: { "class": "styleClass", "class.kbq-toast_dismissible": "closeButton", "attr.role": "role", "class.kbq-toast_leaving": "leavingHeight() !== null", "style.--kbq-toast-leaving-height.px": "leavingHeight()", "class.kbq-animations-disabled": "animationsDisabled" }, classAttribute: "kbq-toast" }, hostDirectives: [{ directive: i1.KbqReadStateDirective }], ngImport: i0, template: "@if (icon) {\n    <div class=\"kbq-toast__icon-container\">\n        @if (iconTemplate) {\n            <ng-container [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        } @else if (defaultIcon) {\n            <i\n                class=\"kbq-toast__icon\"\n                aria-hidden=\"true\"\n                [kbq-icon]=\"defaultIcon\"\n                [color]=\"style\"\n                [class]=\"data.iconClass\"\n            ></i>\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-toast__title\"\n            [class.kbq-toast__title_only-text]=\"!titleTemplate\"\n            [class.kbq-toast__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"titleTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-toast__text]=\"data.title\"\n            [class.kbq-toast__text_only-text]=\"!captionTemplate\"\n            [class.kbq-toast__title]=\"!data.title\"\n        >\n            @if (captionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"captionTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.caption }}}\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\" [class.kbq-toast__content_only-text]=\"!contentTemplate\">\n            @if (contentTemplate) {\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.content }}}\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (actionsTemplate) {\n                <ng-container [ngTemplateOutlet]=\"actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (closeButton) {\n    <div>\n        @if (closeButtonTemplate) {\n            <ng-container [ngTemplateOutlet]=\"closeButtonTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        } @else {\n            <button\n                type=\"button\"\n                kbq-icon-button=\"kbq-xmark-s_16\"\n                kbq-toast-close-button\n                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\n                (click)=\"close()\"\n            ></button>\n        }\n    </div>\n}\n", styles: ["@charset \"UTF-8\";.kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-toast{corner-shape:squircle;border-radius:clamp(var(--kbq-toast-size-container-border-radius) * 1.85,var(--kbq-toast-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-toast-size-container-border-radius) * 2)}}.kbq-toast{padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right);animation:kbq-toast-enter .15s ease-out}.kbq-toast.kbq-toast_leaving{pointer-events:none;animation:kbq-toast-leave .3s ease-in forwards}.kbq-toast.kbq-toast_leaving.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-toast.kbq-toast_leaving{animation:none;transition:none}}.kbq-toast.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-toast{animation:none;transition:none}}@keyframes kbq-toast-enter{0%{transform:translate(100%);opacity:0}}@keyframes kbq-toast-leave{0%{height:var(--kbq-toast-leaving-height)}to{transform:translate(50%);opacity:0;height:0}}.kbq-toast__icon-container{display:flex;align-items:flex-start;justify-content:flex-start;flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-icon-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title.kbq-toast__title_only-text{white-space:pre-wrap}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__text.kbq-toast__text_only-text{white-space:pre-wrap}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__content.kbq-toast__content_only-text{white-space:pre-wrap}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:var(--kbq-toast-size-close-button-margin-top);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: var(--kbq-toast-size-close-button-padding);--kbq-icon-button-size-normal-vertical-padding: var(--kbq-toast-size-close-button-padding)}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ":where(.kbq-toast-container){--kbq-toast-stack-size-margin-vertical: var(--kbq-size-m);--kbq-toast-stack-size-margin-horizontal: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: var(--kbq-toast-size-container-border-radius);--kbq-toast-size-close-button-padding: var(--kbq-size-xxs);--kbq-toast-size-close-button-icon-size: 16px;--kbq-toast-size-close-button-height: calc( var(--kbq-toast-size-close-button-icon-size) + var(--kbq-toast-size-close-button-padding) * 2 );--kbq-toast-size-close-button-margin-top: calc( var(--kbq-toast-size-content-padding-top) - (var(--kbq-toast-size-close-button-height) - var(--kbq-typography-text-normal-line-height)) / 2 );--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["size", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqToastCloseButton, selector: "[kbq-toast-close-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-toast', imports: [
                         NgTemplateOutlet,
@@ -153,15 +207,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqToastCloseButton
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-toast',
-                        '[class]': 'toastStyle',
-                        '[class.kbq-toast_dismissible]': 'data.closeButton',
-                        '[@state]': 'animationState',
-                        '(@state.start)': 'onAnimation($event)',
-                        '(@state.done)': 'onAnimation($event)',
-                        '(mouseenter)': 'hovered.next(true)',
-                        '(mouseleave)': 'hovered.next(false)',
+                        '[class]': 'styleClass',
+                        '[class.kbq-toast_dismissible]': 'closeButton',
+                        // A toast is inserted into an already rendered page, so the toast itself has to be the live region:
+                        // screen readers announce a node inserted with `role="alert"`/`role="status"`, while an `aria-live`
+                        // wrapper has to be in the accessibility tree before its content changes.
+                        '[attr.role]': 'role',
+                        'aria-atomic': 'true',
+                        '[class.kbq-toast_leaving]': 'leavingHeight() !== null',
+                        '[style.--kbq-toast-leaving-height.px]': 'leavingHeight()',
+                        '[class.kbq-animations-disabled]': 'animationsDisabled',
+                        '(mouseenter)': 'setHovered(true)',
+                        '(mouseleave)': 'setHovered(false)',
                         '(keydown.esc)': 'close()'
-                    }, hostDirectives: [KbqReadStateDirective], animations: [kbqToastAnimations.toastState], template: "@if (data.icon) {\n    <div class=\"kbq-toast__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        }\n        @if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-toast__title\"\n            [class.kbq-toast__title_only-text]=\"!isTemplateRef(data.title)\"\n            [class.kbq-toast__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-toast__text]=\"data.title\"\n            [class.kbq-toast__text_only-text]=\"!isTemplateRef(data.caption)\"\n            [class.kbq-toast__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.caption }}}\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\" [class.kbq-toast__content_only-text]=\"!isTemplateRef(data.content)\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.content }}}\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (data.closeButton) {\n    <div>\n        @if (data.closeButton === true) {\n            <i kbq-icon-button=\"kbq-xmark-s_16\" kbq-toast-close-button (click)=\"close()\"></i>\n        }\n        @if (isTemplateRef(data.closeButton)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.closeButton)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n", styles: [".kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius);padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right)}.kbq-toast__icon-container{flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-container-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title.kbq-toast__title_only-text{white-space:pre-wrap}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__text.kbq-toast__text_only-text{white-space:pre-wrap}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__content.kbq-toast__content_only-text{white-space:pre-wrap}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:calc(var(--kbq-toast-size-content-padding-top) - (var(--kbq-icon-button-size-small-vertical-padding) * 2 + 16px - var(--kbq-typography-text-normal-line-height)) / 2);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast,.kbq-toast__title{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ":where(.kbq-toast-container){--kbq-toast-stack-size-margin-top: var(--kbq-size-m);--kbq-toast-stack-size-margin-right: var(--kbq-size-m);--kbq-toast-stack-size-margin-vertical: var(--kbq-size-m);--kbq-toast-stack-size-margin-horizontal: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: 50%;--kbq-toast-size-close-button-margin-top: var(--kbq-size-m);--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"] }]
+                    }, hostDirectives: [KbqReadStateDirective], template: "@if (icon) {\n    <div class=\"kbq-toast__icon-container\">\n        @if (iconTemplate) {\n            <ng-container [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        } @else if (defaultIcon) {\n            <i\n                class=\"kbq-toast__icon\"\n                aria-hidden=\"true\"\n                [kbq-icon]=\"defaultIcon\"\n                [color]=\"style\"\n                [class]=\"data.iconClass\"\n            ></i>\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-toast__title\"\n            [class.kbq-toast__title_only-text]=\"!titleTemplate\"\n            [class.kbq-toast__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (titleTemplate) {\n                <ng-container [ngTemplateOutlet]=\"titleTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-toast__text]=\"data.title\"\n            [class.kbq-toast__text_only-text]=\"!captionTemplate\"\n            [class.kbq-toast__title]=\"!data.title\"\n        >\n            @if (captionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"captionTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.caption }}}\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\" [class.kbq-toast__content_only-text]=\"!contentTemplate\">\n            @if (contentTemplate) {\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            <!-- prettier-ignore -->\n            @else {{{ data.content }}}\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (actionsTemplate) {\n                <ng-container [ngTemplateOutlet]=\"actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (closeButton) {\n    <div>\n        @if (closeButtonTemplate) {\n            <ng-container [ngTemplateOutlet]=\"closeButtonTemplate\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        } @else {\n            <button\n                type=\"button\"\n                kbq-icon-button=\"kbq-xmark-s_16\"\n                kbq-toast-close-button\n                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\n                (click)=\"close()\"\n            ></button>\n        }\n    </div>\n}\n", styles: ["@charset \"UTF-8\";.kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-toast{corner-shape:squircle;border-radius:clamp(var(--kbq-toast-size-container-border-radius) * 1.85,var(--kbq-toast-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-toast-size-container-border-radius) * 2)}}.kbq-toast{padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right);animation:kbq-toast-enter .15s ease-out}.kbq-toast.kbq-toast_leaving{pointer-events:none;animation:kbq-toast-leave .3s ease-in forwards}.kbq-toast.kbq-toast_leaving.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-toast.kbq-toast_leaving{animation:none;transition:none}}.kbq-toast.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-toast{animation:none;transition:none}}@keyframes kbq-toast-enter{0%{transform:translate(100%);opacity:0}}@keyframes kbq-toast-leave{0%{height:var(--kbq-toast-leaving-height)}to{transform:translate(50%);opacity:0;height:0}}.kbq-toast__icon-container{display:flex;align-items:flex-start;justify-content:flex-start;flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-icon-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title.kbq-toast__title_only-text{white-space:pre-wrap}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__text.kbq-toast__text_only-text{white-space:pre-wrap}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__content.kbq-toast__content_only-text{white-space:pre-wrap}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:var(--kbq-toast-size-close-button-margin-top);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: var(--kbq-toast-size-close-button-padding);--kbq-icon-button-size-normal-vertical-padding: var(--kbq-toast-size-close-button-padding)}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ":where(.kbq-toast-container){--kbq-toast-stack-size-margin-vertical: var(--kbq-size-m);--kbq-toast-stack-size-margin-horizontal: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: var(--kbq-toast-size-container-border-radius);--kbq-toast-size-close-button-padding: var(--kbq-size-xxs);--kbq-toast-size-close-button-icon-size: 16px;--kbq-toast-size-close-button-height: calc( var(--kbq-toast-size-close-button-icon-size) + var(--kbq-toast-size-close-button-padding) * 2 );--kbq-toast-size-close-button-margin-top: calc( var(--kbq-toast-size-content-padding-top) - (var(--kbq-toast-size-close-button-height) - var(--kbq-typography-text-normal-line-height)) / 2 );--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"] }]
         }], ctorParameters: () => [] });
 
 const KBQ_TOAST_FACTORY = new InjectionToken('KBQ_TOAST_FACTORY', {
@@ -169,39 +228,103 @@ const KBQ_TOAST_FACTORY = new InjectionToken('KBQ_TOAST_FACTORY', {
 });
 const CHECK_INTERVAL = 500;
 let templateId = 0;
+const cssAnimationsIn = (element) => (element.getAnimations?.({ subtree: true }) ?? []).filter((animation) => 'animationName' in animation);
+const targetOf = (animation) => animation.effect?.target ?? null;
+/**
+ * Moves `node` right after `reference` without starting the CSS animations inside it over, as taking a node out of
+ * the DOM and putting it back does: the exit animation of a leaving toast would be cancelled, and every visible toast
+ * would slide in again. `moveBefore()` keeps them running; where it is missing, each restarted animation is set back
+ * to the time it had reached, and one that had ended is ended again.
+ */
+const moveAfter = (node, reference) => {
+    const parent = reference.parentNode;
+    if (parent?.moveBefore) {
+        parent.moveBefore(node, reference.nextSibling);
+        return;
+    }
+    const progress = cssAnimationsIn(node).map((animation) => ({
+        target: targetOf(animation),
+        name: animation.animationName,
+        time: animation.currentTime
+    }));
+    reference.after(node);
+    for (const animation of cssAnimationsIn(node)) {
+        const reached = progress.find(({ target, name }) => target === targetOf(animation) && name === animation.animationName);
+        if (reached) {
+            if (reached.time !== null)
+                animation.currentTime = reached.time;
+        }
+        else if (animation.effect?.getComputedTiming().endTime !== Infinity) {
+            animation.finish();
+        }
+    }
+};
 /** Generic `T` is a type hint only; the runtime component comes from `KBQ_TOAST_FACTORY`. */
 class KbqToastService {
     get toasts() {
-        return Object.values(this.toastsDict).filter((item) => !item.hostView.destroyed);
+        return Object.values(this.toastsDict)
+            .map(({ componentRef }) => componentRef)
+            .filter((componentRef) => !componentRef.hostView.destroyed);
     }
     get templates() {
-        return Object.values(this.templatesDict);
+        return Object.values(this.templatesDict)
+            .map(({ viewRef }) => viewRef)
+            .filter((viewRef) => !viewRef.destroyed);
+    }
+    get isPaused() {
+        return this.hoveredToasts.size > 0 || this.focusedToasts.size > 0;
     }
     constructor() {
         this.overlay = inject(Overlay);
         this.injector = inject(Injector);
         this.overlayContainer = inject(OverlayContainer);
         this.ngZone = inject(NgZone);
+        this.focusMonitor = inject(FocusMonitor);
+        this.document = inject(DOCUMENT);
         this.toastFactory = inject(KBQ_TOAST_FACTORY);
-        this.toastConfig = inject(KBQ_TOAST_CONFIG, { optional: true });
+        this.toastConfig = inject(KBQ_TOAST_CONFIG);
         this.read = new BehaviorSubject(null);
-        this.hovered = new BehaviorSubject(false);
-        this.focused = new BehaviorSubject(false);
-        this.animation = new BehaviorSubject(null);
-        this.timer = timer(CHECK_INTERVAL, CHECK_INTERVAL).pipe(filter$1(() => this.toasts.length > 0 && !this.hovered.getValue() && !this.focused.getValue()), 
-        // eslint-disable-next-line rxjs-x/no-ignored-replay-buffer
-        shareReplay());
+        this._hovered = signal(false, ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
+        this._focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+        /** Whether at least one toast is hovered. */
+        this.hovered = this._hovered.asReadonly();
+        /** Whether at least one toast holds the focus. */
+        this.focused = this._focused.asReadonly();
+        this.stackSize = new BehaviorSubject(0);
+        /** Subscribed outside Angular so that a tick never runs change detection over the whole application. */
+        this.heartbeat = new Observable((subscriber) => this.ngZone.runOutsideAngular(() => timer(CHECK_INTERVAL, CHECK_INTERVAL).subscribe(subscriber)));
+        /**
+         * Countdown heartbeat: emits every 500 ms while the stack holds something and is not paused by the pointer
+         * or the keyboard focus. No interval runs while the stack is empty.
+         */
+        this.timer = this.stackSize.pipe(map((size) => size > 0), distinctUntilChanged(), switchMap((filled) => (filled ? this.heartbeat : EMPTY)), filter$1(() => !this.isPaused), share());
+        /** Toasts taken off the stack that still play their exit animation in the container. */
+        this.leaving = new Set();
         this.toastsDict = {};
         this.templatesDict = {};
+        this.hoveredToasts = new Set();
+        this.focusedToasts = new Map();
+        this.wasPaused = false;
         this.processToasts = () => {
-            for (const toast of this.toasts.filter((item) => item.instance.ttl > 0)) {
-                toast.instance.ttl -= CHECK_INTERVAL;
-                if (toast.instance.ttl <= 0) {
-                    this.ngZone.run(() => {
-                        this.hide(toast.instance.id);
-                        this.updateTTLAfterDelete();
-                    });
-                    break;
+            this.purgeDestroyed();
+            for (const [id, record] of Object.entries(this.toastsDict)) {
+                if (record.ttl <= 0) {
+                    continue;
+                }
+                record.ttl -= CHECK_INTERVAL;
+                if (record.ttl <= 0) {
+                    this.ngZone.run(() => this.hide(+id));
+                    return;
+                }
+            }
+            for (const [id, record] of Object.entries(this.templatesDict)) {
+                if (record.ttl <= 0) {
+                    continue;
+                }
+                record.ttl -= CHECK_INTERVAL;
+                if (record.ttl <= 0) {
+                    this.ngZone.run(() => this.hideTemplate(+id));
+                    return;
                 }
             }
         };
@@ -218,58 +341,218 @@ class KbqToastService {
         this.currentPosition = undefined;
         this.toastsDict = {};
         this.templatesDict = {};
+        this.hoveredToasts.clear();
+        this.focusedToasts.clear();
+        this.stackSize.next(0);
     }
     show(data, duration = this.toastConfig.duration, onTop = this.toastConfig.onTop) {
+        // Untracked, as `showTemplate()`, `hide()` and `hideTemplate()`: called from a consumer's `effect()`, the signals
+        // read on the way — the container's view query, those the focus listeners read when the focus moves on to the
+        // next toast — would become dependencies of the effect.
+        return untracked(() => this.addToast(data, duration, onTop));
+    }
+    /** Body of `show()`. */
+    addToast(data, duration, onTop) {
+        const previouslyFocused = this.document.activeElement;
         const container = this.prepareContainer();
+        // The class generic is a hint: the runtime component is whatever `KBQ_TOAST_FACTORY` resolves to.
         const componentRef = container.createToast(data, this.toastFactory, onTop);
-        this.toastsDict[componentRef.instance.id] = componentRef;
-        componentRef.instance.ttl = duration;
-        componentRef.instance.delay = this.toastConfig.delay;
-        return { ref: componentRef, id: componentRef.instance.id };
+        const id = componentRef.instance.id;
+        if (typeof id !== 'number') {
+            // The component is already rendered by now, and it never reaches the stack, so nothing else
+            // would ever tear it down: every retry would strand one more element inside the overlay.
+            // Detaching the view drops it from the container but leaves its host element connected, so
+            // the element has to be taken out by hand as well.
+            container.remove(componentRef.hostView);
+            componentRef.location.nativeElement.remove();
+            this.detachOverlay();
+            throw new Error('KBQ_TOAST_FACTORY must provide a component extending KbqToastComponent: `id` is missing.');
+        }
+        this.toastsDict[id] = { componentRef, ttl: duration, previouslyFocused };
+        this.syncStackSize();
+        return { ref: componentRef, id };
     }
     showTemplate(data, template, duration = this.toastConfig.duration, onTop = this.toastConfig.onTop) {
+        return untracked(() => this.addTemplate(data, template, duration, onTop));
+    }
+    /** Body of `showTemplate()`. */
+    addTemplate(data, template, duration, onTop) {
         const container = this.prepareContainer();
         const viewRef = container.createTemplate(data, template, onTop);
         const id = templateId++;
-        this.templatesDict[id] = viewRef;
-        this.addRemoveTimer(id, duration);
+        this.templatesDict[id] = { viewRef, ttl: duration };
+        this.syncStackSize();
         return { ref: viewRef, id };
     }
     hide(id) {
-        const componentRef = this.toastsDict[id];
-        if (!componentRef) {
+        untracked(() => this.removeToast(id));
+    }
+    /** Body of `hide()`. */
+    removeToast(id) {
+        const record = this.toastsDict[id];
+        if (!record) {
             return;
         }
-        this.containerInstance?.remove(componentRef.hostView);
+        // Removing the view destroys the toast, which releases its own pause state, so the focus origin has to
+        // be read before that happens.
+        const focusOrigin = this.focusedToasts.get(id);
+        this.removeAfterExit(record.componentRef);
         delete this.toastsDict[id];
-        this.detachOverlay();
+        this.setHovered(id, false);
+        this.setFocused(id, null);
+        // Only a keyboard or a programmatic focus is handed on. A mouse press on the close button focuses it
+        // as a side effect of the click, and moving that focus into the next toast would report the survivor
+        // as focused — pausing the whole stack until something blurs it, which a pointer leaving never does.
+        if (focusOrigin === 'keyboard' || focusOrigin === 'program') {
+            this.restoreFocus(record.previouslyFocused, focusOrigin);
+        }
+        this.renewLifetimes();
+        this.syncStackSize();
     }
     hideTemplate(id) {
-        const viewRef = this.templatesDict[id];
-        if (!viewRef) {
+        untracked(() => this.removeTemplate(id));
+    }
+    /** Body of `hideTemplate()`. */
+    removeTemplate(id) {
+        const record = this.templatesDict[id];
+        if (!record) {
             return;
         }
-        this.containerInstance?.remove(viewRef);
+        this.containerInstance?.remove(record.viewRef);
         delete this.templatesDict[id];
+        this.renewLifetimes();
+        this.syncStackSize();
         this.detachOverlay();
     }
+    /** Reports that the pointer entered or left the toast with the given id. @docs-private */
+    setHovered(id, hovered) {
+        if (hovered === this.hoveredToasts.has(id)) {
+            return;
+        }
+        if (hovered) {
+            this.hoveredToasts.add(id);
+        }
+        else {
+            this.hoveredToasts.delete(id);
+        }
+        this.updatePauseState();
+    }
+    /** Reports the origin the toast with the given id is focused with, or `null` once it is not. @docs-private */
+    setFocused(id, origin) {
+        if ((this.focusedToasts.get(id) ?? null) === origin) {
+            return;
+        }
+        if (origin) {
+            this.focusedToasts.set(id, origin);
+        }
+        else {
+            this.focusedToasts.delete(id);
+        }
+        this.updatePauseState();
+    }
+    updatePauseState() {
+        const paused = this.isPaused;
+        // Entering the paused state renews the countdown, so that nothing disappears the instant the pointer or
+        // the focus leaves the stack.
+        if (paused && !this.wasPaused) {
+            this.renewLifetimes();
+        }
+        this.wasPaused = paused;
+        this._hovered.set(this.hoveredToasts.size > 0);
+        this._focused.set(this.focusedToasts.size > 0);
+    }
+    /** Focus must not fall back to the document body when the toast holding it goes away. */
+    restoreFocus(previouslyFocused, origin) {
+        const target = this.getNextFocusTarget() || previouslyFocused;
+        if (!target?.isConnected) {
+            return;
+        }
+        // `focusVia` keeps the focus ring of a keyboard user, which a native `focus()` would drop.
+        this.focusMonitor.focusVia(target, origin || 'program');
+    }
+    getNextFocusTarget() {
+        // Stack order, not `toastsDict` order. The dictionary is keyed by id, so `toasts` always reads
+        // oldest-first, while `onTop` inserts a new toast at the top of the stack — following the dictionary
+        // there would carry the focus past every toast between the one that closed and the oldest on screen.
+        const inStackOrder = this.toasts
+            .map(({ location }) => location.nativeElement)
+            .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+        for (const host of inStackOrder) {
+            const closeButton = host.querySelector('[kbq-toast-close-button]');
+            if (closeButton) {
+                return closeButton;
+            }
+        }
+        return null;
+    }
+    /** Plays the exit animation of a toast taken off the stack, then removes it from the container. */
+    removeAfterExit(componentRef) {
+        // Destroyed by whoever held the ref: there is nothing left to animate.
+        if (componentRef.hostView.destroyed) {
+            this.detachOverlay();
+            return;
+        }
+        this.leaving.add(componentRef);
+        // Also destroyed before its exit ends, by whoever holds the ref or with the overlay, which a destroyed
+        // view never reports back from.
+        componentRef.onDestroy(() => {
+            this.leaving.delete(componentRef);
+            this.detachOverlay();
+        });
+        componentRef.instance.leave(() => this.containerInstance?.remove(componentRef.hostView));
+    }
+    /** Detaching destroys the container, so it waits for the stack to empty and the last exit to end. */
     detachOverlay() {
-        if (this.toasts.length !== 0 || this.templates.length !== 0) {
+        if (this.toasts.length !== 0 || this.templates.length !== 0 || this.leaving.size !== 0) {
             return;
         }
         this.overlayRef?.detach();
     }
-    updateTTLAfterDelete() {
-        this.toasts
-            .filter((item) => item.instance.ttl > 0)
-            .forEach((item) => (item.instance.ttl = this.toastConfig.delay));
+    syncStackSize() {
+        this.stackSize.next(this.toasts.length + this.templates.length);
+    }
+    /**
+     * Drops the records whose view was destroyed from outside the service — by a consumer holding the ref,
+     * or by whatever owns the surrounding view. Nothing else deletes them: a record with a `ttl` of `0` is
+     * skipped by the countdown forever, so the stack would keep reporting a size and the heartbeat would
+     * keep running with nothing on screen.
+     */
+    purgeDestroyed() {
+        let purged = false;
+        for (const [id, { componentRef }] of Object.entries(this.toastsDict)) {
+            if (!componentRef.hostView.destroyed) {
+                continue;
+            }
+            delete this.toastsDict[+id];
+            this.setHovered(+id, false);
+            this.setFocused(+id, null);
+            purged = true;
+        }
+        for (const [id, { viewRef }] of Object.entries(this.templatesDict)) {
+            if (!viewRef.destroyed) {
+                continue;
+            }
+            delete this.templatesDict[+id];
+            purged = true;
+        }
+        if (!purged) {
+            return;
+        }
+        this.syncStackSize();
+        this.detachOverlay();
     }
-    addRemoveTimer(id, duration) {
-        setTimeout(() => this.hideTemplate(id), duration);
+    /** Keeps every survivor on screen for at least the configured delay after a dismissal or a pause. */
+    renewLifetimes() {
+        const records = [...Object.values(this.toastsDict), ...Object.values(this.templatesDict)];
+        for (const record of records) {
+            if (record.ttl > 0) {
+                record.ttl = Math.max(record.ttl, this.toastConfig.delay);
+            }
+        }
     }
     prepareContainer() {
         const overlayRef = this.createOverlay();
-        const portal = this.portal || new ComponentPortal(KbqToastContainerComponent, null, this.injector);
+        const portal = this.portal || new ComponentPortal(KbqToastContainerComponent, null, this.createStackInjector());
         this.portal = portal;
         if (!overlayRef.hasAttached()) {
             this.containerInstance = overlayRef.attach(portal).instance;
@@ -280,11 +563,35 @@ class KbqToastService {
         this.toTop(overlayRef);
         return this.containerInstance;
     }
+    /** Every toast resolves its stack through the container, so that it never depends on this service. */
+    createStackInjector() {
+        return Injector.create({
+            providers: [{ provide: KBQ_TOAST_STACK, useValue: this }],
+            parent: this.injector
+        });
+    }
+    /** Raises the stack above the overlays opened after it. */
     toTop(overlayRef) {
+        const host = overlayRef.hostElement;
         const overlays = this.overlayContainer.getContainerElement().childNodes;
-        if (overlays.length > 1) {
-            overlays[overlays.length - 1].after(overlayRef.hostElement);
+        const last = overlays[overlays.length - 1];
+        // The identity check matters: `x.after(x)` is not a no-op. `after()` resolves no viable next
+        // sibling for a node that is already last and falls through to `insertBefore(x, null)`, whose
+        // insert steps take `x` out of its parent first — a real detach and re-attach of the wrapper
+        // holding every live toast, on every `show()`.
+        if (overlays.length < 2 || last === host) {
+            return;
         }
+        // A popover host is in the top layer, painted in the order the popovers were shown in, not in DOM
+        // order. Taking it out of the DOM hides the popover, which drops the stack beneath every overlay
+        // there, so it is shown again instead. Its place in the DOM stays, so it is raised again on every
+        // `show()` while that overlay is open.
+        if (overlayRef.getConfig().usePopover && host.matches(':popover-open')) {
+            host.hidePopover();
+            host.showPopover();
+            return;
+        }
+        moveAfter(host, last);
     }
     createOverlay() {
         const expectedPosition = this.toastConfig.position;
@@ -292,7 +599,11 @@ class KbqToastService {
             return this.overlayRef;
         }
         if (this.overlayRef) {
+            // Nothing survives the overlay it lives in, so the stack is drained through the regular paths
+            // instead of leaving both dictionaries pointing at destroyed views.
+            this.clear();
             this.overlayRef.dispose();
+            this.overlayRef = undefined;
             this.containerInstance = undefined;
             this.portal = undefined;
         }
@@ -303,6 +614,10 @@ class KbqToastService {
         this.currentPosition = expectedPosition;
         return overlayRef;
     }
+    clear() {
+        Object.keys(this.toastsDict).forEach((id) => this.hide(+id));
+        Object.keys(this.templatesDict).forEach((id) => this.hideTemplate(+id));
+    }
     getPositionStrategy(position) {
         switch (position) {
             case KbqToastPosition.CENTER:
@@ -355,10 +670,10 @@ class KbqToastService {
     getGlobalOverlayPosition() {
         return this.overlay.position().global();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -367,21 +682,10 @@ class KbqToastContainerComponent extends CdkScrollable {
     constructor() {
         super();
         this.injector = inject(Injector);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();
         this.service = inject(KbqToastService);
         this.viewContainer = viewChild.required('container', { read: ViewContainerRef });
         this.overlayKeyboardDispatcher = inject(OverlayKeyboardDispatcher);
-        /**
-         * Fakes a scroll on the container so that overlays anchored inside a toast are repositioned by their
-         * `RepositionScrollStrategy` when the stack shifts.
-         *
-         * @deprecated The container repositions the overlays anchored inside it on its own, so nothing calls this.
-         * It is kept only for callers that already hold a container reference — the instance created by
-         * `KbqToastService` is not exposed. The fake scroll also closes every close-on-scroll overlay of the app.
-         */
-        this.dispatchScrollEvent = () => {
-            this.elementRef.nativeElement.dispatchEvent(new Event('scroll'));
-        };
         // Toasts are ordinary flow children, so removing one slides the rest for as long as its height animates,
         // and an overlay opened from inside a toast is left behind its trigger: CDK re-measures the origin only on
         // a scroll or a viewport resize. The container's box tracks the reflow exactly. It is not reported as a
@@ -394,12 +698,13 @@ class KbqToastContainerComponent extends CdkScrollable {
     createToast(data, componentType, onTop) {
         const injector = this.getInjector(data);
         const index = onTop ? 0 : undefined;
-        this.changeDetectorRef.markForCheck();
         return this.viewContainer().createComponent(componentType, { injector, index });
     }
     createTemplate(data, template, onTop) {
         const index = onTop ? 0 : undefined;
-        return this.viewContainer().createEmbeddedView(template, { $implicit: data }, index);
+        const viewRef = this.viewContainer().createEmbeddedView(template, { $implicit: data }, index);
+        this.markAsLiveRegion(viewRef);
+        return viewRef;
     }
     remove(viewRef) {
         const index = this.viewContainer().indexOf(viewRef);
@@ -426,14 +731,29 @@ class KbqToastContainerComponent extends CdkScrollable {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqToastContainerComponent, isStandalone: true, selector: "kbq-toast-container", host: { classAttribute: "kbq-toast-container" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-container #container />', isInline: true, styles: [".kbq-toast-container{display:flex;flex-direction:column;align-items:flex-end;gap:var(--kbq-toast-stack-size-gap)}.kbq-toast-container.kbq-toast-container-top-right{margin-top:var(--kbq-toast-stack-size-margin-vertical);margin-right:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-left{margin-top:var(--kbq-toast-stack-size-margin-vertical);margin-left:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-center{margin-top:var(--kbq-toast-stack-size-margin-vertical)}.kbq-toast-container.kbq-toast-container-bottom-right{margin-bottom:var(--kbq-toast-stack-size-margin-vertical);margin-right:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-bottom-left{margin-bottom:var(--kbq-toast-stack-size-margin-vertical);margin-left:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-bottom-center{margin-bottom:var(--kbq-toast-stack-size-margin-vertical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /**
+     * A template toast has no component host of its own, so its first element becomes the live region — screen
+     * readers announce a node inserted with `role="status"`. A template declaring its own role is left alone,
+     * and one whose root is a bare text node cannot carry the attribute at all — it needs an element around it.
+     */
+    markAsLiveRegion(viewRef) {
+        const root = viewRef.rootNodes.find((node) => node?.nodeType === Node.ELEMENT_NODE);
+        if (!root || root.hasAttribute('role')) {
+            return;
+        }
+        root.setAttribute('role', 'status');
+        root.setAttribute('aria-atomic', 'true');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqToastContainerComponent, isStandalone: true, selector: "kbq-toast-container", host: { attributes: { "role": "region" }, properties: { "attr.aria-label": "a11yLocaleConfiguration().toastRegion" }, classAttribute: "kbq-toast-container" }, providers: [{ provide: KBQ_TOAST_STACK, useExisting: forwardRef((() => KbqToastService)) }], viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-container #container />', isInline: true, styles: [".kbq-toast-container{display:flex;flex-direction:column;align-items:flex-end;gap:var(--kbq-toast-stack-size-gap)}.kbq-toast-container.kbq-toast-container-top-right,.kbq-toast-container.kbq-toast-container-top-left,.kbq-toast-container.kbq-toast-container-top-center{margin-top:var(--kbq-toast-stack-size-margin-vertical)}.kbq-toast-container.kbq-toast-container-bottom-right,.kbq-toast-container.kbq-toast-container-bottom-left,.kbq-toast-container.kbq-toast-container-bottom-center{margin-bottom:var(--kbq-toast-stack-size-margin-vertical)}.kbq-toast-container.kbq-toast-container-top-right,.kbq-toast-container.kbq-toast-container-bottom-right{margin-right:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-left,.kbq-toast-container.kbq-toast-container-bottom-left{align-items:flex-start;margin-left:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-center,.kbq-toast-container.kbq-toast-container-bottom-center,.kbq-toast-container.kbq-toast-container-center{align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-toast-container', template: '<ng-container #container />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-toast-container'
-                    }, styles: [".kbq-toast-container{display:flex;flex-direction:column;align-items:flex-end;gap:var(--kbq-toast-stack-size-gap)}.kbq-toast-container.kbq-toast-container-top-right{margin-top:var(--kbq-toast-stack-size-margin-vertical);margin-right:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-left{margin-top:var(--kbq-toast-stack-size-margin-vertical);margin-left:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-center{margin-top:var(--kbq-toast-stack-size-margin-vertical)}.kbq-toast-container.kbq-toast-container-bottom-right{margin-bottom:var(--kbq-toast-stack-size-margin-vertical);margin-right:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-bottom-left{margin-bottom:var(--kbq-toast-stack-size-margin-vertical);margin-left:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-bottom-center{margin-bottom:var(--kbq-toast-stack-size-margin-vertical)}\n"] }]
+            args: [{ selector: 'kbq-toast-container', template: '<ng-container #container />', providers: [{ provide: KBQ_TOAST_STACK, useExisting: forwardRef((() => KbqToastService)) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-toast-container',
+                        role: 'region',
+                        '[attr.aria-label]': 'a11yLocaleConfiguration().toastRegion'
+                    }, styles: [".kbq-toast-container{display:flex;flex-direction:column;align-items:flex-end;gap:var(--kbq-toast-stack-size-gap)}.kbq-toast-container.kbq-toast-container-top-right,.kbq-toast-container.kbq-toast-container-top-left,.kbq-toast-container.kbq-toast-container-top-center{margin-top:var(--kbq-toast-stack-size-margin-vertical)}.kbq-toast-container.kbq-toast-container-bottom-right,.kbq-toast-container.kbq-toast-container-bottom-left,.kbq-toast-container.kbq-toast-container-bottom-center{margin-bottom:var(--kbq-toast-stack-size-margin-vertical)}.kbq-toast-container.kbq-toast-container-top-right,.kbq-toast-container.kbq-toast-container-bottom-right{margin-right:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-left,.kbq-toast-container.kbq-toast-container-bottom-left{align-items:flex-start;margin-left:var(--kbq-toast-stack-size-margin-horizontal)}.kbq-toast-container.kbq-toast-container-top-center,.kbq-toast-container.kbq-toast-container-bottom-center,.kbq-toast-container.kbq-toast-container-center{align-items:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 const COMPONENTS = [
@@ -442,15 +762,15 @@ const COMPONENTS = [
     KbqToastContainerComponent
 ];
 class KbqToastModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqToastModule, imports: [KbqToastComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqToastModule, imports: [KbqToastComponent,
             KbqToastCloseButton,
             KbqToastContainerComponent], exports: [KbqToastComponent,
             KbqToastCloseButton,
             KbqToastContainerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastModule, imports: [KbqToastComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastModule, imports: [KbqToastComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
@@ -462,5 +782,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_TOAST_CONFIG, KBQ_TOAST_FACTORY, KbqToastCloseButton, KbqToastComponent, KbqToastContainerComponent, KbqToastData, KbqToastModule, KbqToastPosition, KbqToastService, KbqToastStyle, defaultToastConfig, kbqToastConfigurationProvider };
+export { KBQ_TOAST_CONFIG, KBQ_TOAST_FACTORY, KBQ_TOAST_STACK, KbqToastCloseButton, KbqToastComponent, KbqToastContainerComponent, KbqToastData, KbqToastModule, KbqToastPosition, KbqToastService, KbqToastStyle, defaultToastConfig, kbqToastConfigurationProvider };
 //# sourceMappingURL=koobiq-components-toast.mjs.map