@breadstone/mosaik-elements-angular 0.0.258 → 0.0.260

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.0.260 (2026-05-07)
+
+### 🚀 Features
+
+- **overlays:** implement OverlayStackManager for better overlay handling ([2a9e5e31bf](https://github.com/RueDeRennes/mosaik/commit/2a9e5e31bf))
+
+### 🩹 Fixes
+
+- **api:** update line numbers in documentation for various services and components ([7ac1fab82d](https://github.com/RueDeRennes/mosaik/commit/7ac1fab82d))
+- **overlays:** disable close on escape and outside click for overlay components ([87cb6c7b6d](https://github.com/RueDeRennes/mosaik/commit/87cb6c7b6d))
+
+## 0.0.259 (2026-05-06)
+
+This was a version bump only for mosaik-elements-angular to align it with other projects, there were no code changes.
+
 ## 0.0.258 (2026-05-06)
 
 This was a version bump only for mosaik-elements-angular to align it with other projects, there were no code changes.

package/fesm2022/mosaik-elements-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ChangeDetectorRef, ElementRef, DestroyRef, input, effect, output, ChangeDetectionStrategy, Component, makeEnvironmentProviders, Injectable, Renderer2, Input, Directive, ViewContainerRef, TemplateRef, isDevMode, EnvironmentInjector, runInInjectionContext, signal, booleanAttribute, forwardRef, ContentChildren, computed, HostListener, untracked, Injector, afterNextRender, ContentChild, DOCUMENT, provideEnvironmentInitializer, Pipe, ViewChild, ViewEncapsulation, Optional, Inject, SkipSelf, provideAppInitializer } from '@angular/core';
-import * as i1 from '@breadstone/mosaik-elements-foundation';
-import { AbsoluteItemElement, AbsoluteElement, ActionbarGroupElement, ActionbarItemElement, ActionbarSeparatorElement, ActionbarElement, AnchorElement, AppHeaderElement, AppElement, AttachmentChatToolElement, AudioElement, AnimationPlayer, Animation, BREAKPOINTS, PerspectiveElement, RippleElement, ScaleElement, ProgressRingElement, ExpandableElement, FlipElement, TooltipElement, dataListElementValueAccessor, DataListElement, dataTableElementValueAccessor, DataTableElement, StepperElement, WizardElement, Size, Spacing, TextFormatters, DIALOG_STACK_BEHAVIOR_DEFAULT_CONFIG, DialogHeaderElement, DialogHeaderTextElement, DialogHeaderSubTextElement, DialogActionsElement, ButtonElement, DialogElement, DialogFooterElement, EID, Key, DRAWER_STACK_BEHAVIOR_DEFAULT_CONFIG, DrawerElement, DrawerHeaderElement, DrawerHeaderTextElement, DrawerHeaderSubTextElement, DrawerContentElement, DrawerActionsElement, DrawerFooterElement, DismissElement, MessageBoxElement, MessageBoxResult, SheetElement, SheetContentElement, SheetFooterElement, SheetHeaderElement, SheetHeaderSubTextElement, SheetHeaderTextElement, ToastElement, DateAgoIntl, TimeAgoIntl, ThemeService as ThemeService$1, TranslatorService, Translator, TranslatorServiceLocator, autoCompleteBoxElementValueAccessor, AutoCompleteBoxElement, AvatarGroupElement, avatarElementValueAccessor, AvatarElement, BackdropElement, BadgeElement, BannerGroupElement, BannerHeaderElement, BannerSubHeaderElement, BannerElement, BoxElement, BreadcrumbItemElement, BreadcrumbElement, BusyStateElement, ButtonGroupElement, CalendarHeaderElement, CalendarItemElement, CalendarSubHeaderElement, calendarElementValueAccessor, CalendarElement, CameraElement, CardActionsElement, CardContentElement, CardFooterElement, CardHeaderElement, CardSubTitleElement, CardTitleElement, CardElement, Carousel2Element, CarouselItem2Element, CarouselItemElement, CarouselElement, CellGroupElement, CellElement, ChartElement, ChatHeaderElement, ChatInputAttachmentListElement, ChatInputElement, ChatMarkerElement, ChatMessageAvatarElement, ChatMessageDividerElement, ChatMessageReactionElement, ChatMessageElement, ChatElement, checkBoxGroupElementValueAccessor, CheckBoxGroupElement, checkboxElementValueAccessor, CheckboxElement, CheckmarkElement, chipGroupElementValueAccessor, ChipGroupElement, ChipElement, chipBoxElementValueAccessor, ChipBoxElement, ChoiceGroupHeaderElement, choiceGroupElementValueAccessor, ChoiceGroupElement, choiceElementValueAccessor, ChoiceElement, CodeElement, ColorAreaElement, colorEditorAlphaSliderElementValueAccessor, ColorEditorAlphaSliderElement, colorEditorAreaElementValueAccessor, ColorEditorAreaElement, colorEditorHueSliderElementValueAccessor, ColorEditorHueSliderElement, colorEditorInputsElementValueAccessor, ColorEditorInputsElement, colorEditorPaletteElementValueAccessor, ColorEditorPaletteElement, colorEditorShadeSliderElementValueAccessor, ColorEditorShadeSliderElement, colorEditorSwatchElementValueAccessor, ColorEditorSwatchElement, colorEditorElementValueAccessor, ColorEditorElement, ColorPickerElement, ColorSliderElement, ColorSwatchGroupElement, ColorSwatchElement, ColorThumbElement, colorBoxElementValueAccessor, ColorBoxElement, ComboItemElement, comboElementValueAccessor, ComboElement, CommentElement, CompoundButtonElement, CookiesConsentElement, dateBoxElementValueAccessor, DateBoxElement, dateTimeBoxElementValueAccessor, DateTimeBoxElement, DesignerCanvasElement, DesignerContentElement, DesignerFrameElement, DesignerElement, DialogContentElement, DisclosureElement, DividerElement, DockPanelElement, DotGroupElement, DotElement, DrawerContainerElement, DropZoneElement, DropDownButtonElement, DurationBoxElement, ElevationElement, EmojiElement, EmptyStateElement, EpgChannelElement, EpgProgramElement, EpgElement, ErrorStateElement, ErrorElement, ExpanderGroupElement, ExpanderHeaderElement, ExpanderSubHeaderElement, ExpanderElement, FloatingActionButtonGroupElement, FloatingActionButtonElement, FilePickerElement, FileUploadItemElement, fileUploadElementValueAccessor, FileUploadElement, FloatingTriggerElement, FloatingElement, FlowBoardColumnComposerElement, FlowBoardColumnItemComposerElement, FlowBoardColumnItemElement, FlowBoardColumnElement, FlowBoardElement, FocusRingElement, FontEditorElement, FooterItemGroupElement, FooterItemElement, FooterElement, FormFieldElement, FormElement, GhostElement, GridItemElement, GridElement, HelmetElement, HintElement, IconElement, ImageElement, IndicatorElement, JumbotronHeaderElement, JumbotronSubHeaderElement, JumbotronElement, KbdShortcutElement, KbdElement, LightChainElement, ListItemGroupElement, ListItemElement, listElementValueAccessor, ListElement, ListingItemMarkerElement, ListingItemElement, ListingElement, MapElement, MarqueeElement, MasonryElement, MenuItemGroupElement, MenuItemElement, MenuElement, MessageContentElement, MessageElement, MeterBarElement, MeterRingElement, NumberCounterElement, NumberElement, numberBoxElementValueAccessor, NumberBoxElement, PageContentElement, PageHeaderElement, PagePreContentElement, PagePreHeaderElement, PageElement, PageMenuElement, PaginatorElement, passwordBoxElementValueAccessor, PasswordBoxElement, PatternElement, PersonaElement, pinBoxElementValueAccessor, PinBoxElement, PipElement, PlaceholderElement, PopupElement, PortalHostElement, PortalProjectionElement, PortalElement, PressButtonElement, ProgressBarElement, QRCodeElement, radioGroupElementValueAccessor, RadioGroupElement, radioElementValueAccessor, RadioElement, RatingElement, ReactionChatToolElement, RegionViewElement, RegionElement, RepeatButtonElement, ResizeAdornerElement, ResizeThumbElement, ResizeElement, RibbonElement, richTextBoxElementValueAccessor, RichTextBoxElement, SchedulerEventElement, SchedulerElement, ScrollElement, scrubSliderElementValueAccessor, ScrubSliderElement, searchBoxElementValueAccessor, SearchBoxElement, SegmentItemElement, SegmentElement, SelectItemGroupElement, SelectItemElement, selectElementValueAccessor, SelectElement, signaturePadElementValueAccessor, SignaturePadElement, SkeletonElement, sliderElementValueAccessor, SliderElement, Slider2ThumbElement, Slider2Element, SpacerElement, SplitButtonElement, SplitElement, StackElement, StepperItemElement, StickyElement, SuccessStateElement, SummaryElement, SwipeElement, TabItemElement, TabPanelElement, TabStripItemElement, TabStripElement, TabElement, TableBodyCellElement, TableBodyRowElement, TableBodyElement, TableColumnEditorElement, TableFooterCellElement, TableFooterRowElement, TableFooterElement, TableHeaderCellElement, TableHeaderRowElement, TableHeaderElement, TableElement, TextFormatElement, TextElement, textBoxElementValueAccessor, TextBoxElement, Theme2Element, ThumbElement, ThumbnailElement, TickBarElement, TileListItemElement, TileListElement, TileManagerTileElement, TileManagerElement, TileElement, timeBoxElementValueAccessor, TimeBoxElement, TimelineContentElement, TimelineItemElement, TimelineMarkerElement, TimelineOppositeElement, TimelineElement, toggleButtonGroupElementValueAccessor, ToggleButtonGroupElement, toggleButtonElementValueAccessor, ToggleButtonElement, toggleSwitchElementValueAccessor, ToggleSwitchElement, ToggleTipElement, ToolbarElement, TourAnchorElement, TourStepElement, TourElement, TreeItemElement, treeElementValueAccessor, TreeElement, UpDownSpinnerElement, VideoElement, VirtualizeElement, VoiceRecorderChatToolElement, WizardStepElement, WrapElement } from '@breadstone/mosaik-elements-foundation';
+import * as i2 from '@breadstone/mosaik-elements-foundation';
+import { AbsoluteItemElement, AbsoluteElement, ActionbarGroupElement, ActionbarItemElement, ActionbarSeparatorElement, ActionbarElement, AnchorElement, AppHeaderElement, AppElement, AttachmentChatToolElement, AudioElement, AnimationPlayer, Animation, BREAKPOINTS, PerspectiveElement, RippleElement, ScaleElement, ProgressRingElement, ExpandableElement, FlipElement, TooltipElement, dataListElementValueAccessor, DataListElement, dataTableElementValueAccessor, DataTableElement, StepperElement, WizardElement, Size, Spacing, TextFormatters, DIALOG_STACK_BEHAVIOR_DEFAULT_CONFIG, DialogHeaderElement, DialogHeaderTextElement, DialogHeaderSubTextElement, DialogActionsElement, ButtonElement, DialogElement, DialogFooterElement, Key, EID, DRAWER_STACK_BEHAVIOR_DEFAULT_CONFIG, DrawerElement, DrawerHeaderElement, DrawerHeaderTextElement, DrawerHeaderSubTextElement, DrawerContentElement, DrawerActionsElement, DrawerFooterElement, DismissElement, MessageBoxElement, MessageBoxResult, SheetElement, SheetContentElement, SheetFooterElement, SheetHeaderElement, SheetHeaderSubTextElement, SheetHeaderTextElement, ToastElement, DateAgoIntl, TimeAgoIntl, ThemeService as ThemeService$1, TranslatorService, Translator, TranslatorServiceLocator, autoCompleteBoxElementValueAccessor, AutoCompleteBoxElement, AvatarGroupElement, avatarElementValueAccessor, AvatarElement, BackdropElement, BadgeElement, BannerGroupElement, BannerHeaderElement, BannerSubHeaderElement, BannerElement, BoxElement, BreadcrumbItemElement, BreadcrumbElement, BusyStateElement, ButtonGroupElement, CalendarHeaderElement, CalendarItemElement, CalendarSubHeaderElement, calendarElementValueAccessor, CalendarElement, CameraElement, CardActionsElement, CardContentElement, CardFooterElement, CardHeaderElement, CardSubTitleElement, CardTitleElement, CardElement, Carousel2Element, CarouselItem2Element, CarouselItemElement, CarouselElement, CellGroupElement, CellElement, ChartElement, ChatHeaderElement, ChatInputAttachmentListElement, ChatInputElement, ChatMarkerElement, ChatMessageAvatarElement, ChatMessageDividerElement, ChatMessageReactionElement, ChatMessageElement, ChatElement, checkBoxGroupElementValueAccessor, CheckBoxGroupElement, checkboxElementValueAccessor, CheckboxElement, CheckmarkElement, chipGroupElementValueAccessor, ChipGroupElement, ChipElement, chipBoxElementValueAccessor, ChipBoxElement, ChoiceGroupHeaderElement, choiceGroupElementValueAccessor, ChoiceGroupElement, choiceElementValueAccessor, ChoiceElement, CodeElement, ColorAreaElement, colorEditorAlphaSliderElementValueAccessor, ColorEditorAlphaSliderElement, colorEditorAreaElementValueAccessor, ColorEditorAreaElement, colorEditorHueSliderElementValueAccessor, ColorEditorHueSliderElement, colorEditorInputsElementValueAccessor, ColorEditorInputsElement, colorEditorPaletteElementValueAccessor, ColorEditorPaletteElement, colorEditorShadeSliderElementValueAccessor, ColorEditorShadeSliderElement, colorEditorSwatchElementValueAccessor, ColorEditorSwatchElement, colorEditorElementValueAccessor, ColorEditorElement, ColorPickerElement, ColorSliderElement, ColorSwatchGroupElement, ColorSwatchElement, ColorThumbElement, colorBoxElementValueAccessor, ColorBoxElement, ComboItemElement, comboElementValueAccessor, ComboElement, CommentElement, CompoundButtonElement, CookiesConsentElement, dateBoxElementValueAccessor, DateBoxElement, dateTimeBoxElementValueAccessor, DateTimeBoxElement, DesignerCanvasElement, DesignerContentElement, DesignerFrameElement, DesignerElement, DialogContentElement, DisclosureElement, DividerElement, DockPanelElement, DotGroupElement, DotElement, DrawerContainerElement, DropZoneElement, DropDownButtonElement, DurationBoxElement, ElevationElement, EmojiElement, EmptyStateElement, EpgChannelElement, EpgProgramElement, EpgElement, ErrorStateElement, ErrorElement, ExpanderGroupElement, ExpanderHeaderElement, ExpanderSubHeaderElement, ExpanderElement, FloatingActionButtonGroupElement, FloatingActionButtonElement, FilePickerElement, FileUploadItemElement, fileUploadElementValueAccessor, FileUploadElement, FloatingTriggerElement, FloatingElement, FlowBoardColumnComposerElement, FlowBoardColumnItemComposerElement, FlowBoardColumnItemElement, FlowBoardColumnElement, FlowBoardElement, FocusRingElement, FontEditorElement, FooterItemGroupElement, FooterItemElement, FooterElement, FormFieldElement, FormElement, GhostElement, GridItemElement, GridElement, HelmetElement, HintElement, IconElement, ImageElement, IndicatorElement, JumbotronHeaderElement, JumbotronSubHeaderElement, JumbotronElement, KbdShortcutElement, KbdElement, LightChainElement, ListItemGroupElement, ListItemElement, listElementValueAccessor, ListElement, ListingItemMarkerElement, ListingItemElement, ListingElement, MapElement, MarqueeElement, MasonryElement, MenuItemGroupElement, MenuItemElement, MenuElement, MessageContentElement, MessageElement, MeterBarElement, MeterRingElement, NumberCounterElement, NumberElement, numberBoxElementValueAccessor, NumberBoxElement, PageContentElement, PageHeaderElement, PagePreContentElement, PagePreHeaderElement, PageElement, PageMenuElement, PaginatorElement, passwordBoxElementValueAccessor, PasswordBoxElement, PatternElement, PersonaElement, pinBoxElementValueAccessor, PinBoxElement, PipElement, PlaceholderElement, PopupElement, PortalHostElement, PortalProjectionElement, PortalElement, PressButtonElement, ProgressBarElement, QRCodeElement, radioGroupElementValueAccessor, RadioGroupElement, radioElementValueAccessor, RadioElement, RatingElement, ReactionChatToolElement, RegionViewElement, RegionElement, RepeatButtonElement, ResizeAdornerElement, ResizeThumbElement, ResizeElement, RibbonElement, richTextBoxElementValueAccessor, RichTextBoxElement, SchedulerEventElement, SchedulerElement, ScrollElement, scrubSliderElementValueAccessor, ScrubSliderElement, searchBoxElementValueAccessor, SearchBoxElement, SegmentItemElement, SegmentElement, SelectItemGroupElement, SelectItemElement, selectElementValueAccessor, SelectElement, signaturePadElementValueAccessor, SignaturePadElement, SkeletonElement, sliderElementValueAccessor, SliderElement, Slider2ThumbElement, Slider2Element, SpacerElement, SplitButtonElement, SplitElement, StackElement, StepperItemElement, StickyElement, SuccessStateElement, SummaryElement, SwipeElement, TabItemElement, TabPanelElement, TabStripItemElement, TabStripElement, TabElement, TableBodyCellElement, TableBodyRowElement, TableBodyElement, TableColumnEditorElement, TableFooterCellElement, TableFooterRowElement, TableFooterElement, TableHeaderCellElement, TableHeaderRowElement, TableHeaderElement, TableElement, TextFormatElement, TextElement, textBoxElementValueAccessor, TextBoxElement, Theme2Element, ThumbElement, ThumbnailElement, TickBarElement, TileListItemElement, TileListElement, TileManagerTileElement, TileManagerElement, TileElement, timeBoxElementValueAccessor, TimeBoxElement, TimelineContentElement, TimelineItemElement, TimelineMarkerElement, TimelineOppositeElement, TimelineElement, toggleButtonGroupElementValueAccessor, ToggleButtonGroupElement, toggleButtonElementValueAccessor, ToggleButtonElement, toggleSwitchElementValueAccessor, ToggleSwitchElement, ToggleTipElement, ToolbarElement, TourAnchorElement, TourStepElement, TourElement, TreeItemElement, treeElementValueAccessor, TreeElement, UpDownSpinnerElement, VideoElement, VirtualizeElement, VoiceRecorderChatToolElement, WizardStepElement, WrapElement } from '@breadstone/mosaik-elements-foundation';
 import { AbstractControl, FormGroupDirective, NgControl, TouchedChangeEvent, NG_VALUE_ACCESSOR, FormControl, FormArray, FormGroup } from '@angular/forms';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CssLength, ThemeObserver, ThemeGeneratorServiceLocator, ThemeGenerator, ThemeObserverServiceLocator } from '@breadstone/mosaik-themes';
@@ -2619,40 +2619,16 @@ class AnimateDirective {
      *
      * @public
      */
-    constructor() {
-        this._animationRegistry = inject(AnimationRegistry);
-        this._element = inject(ElementRef);
-        this._animationPlayer = inject(AnimationPlayer);
-        this._renderer = inject(Renderer2);
+    constructor(animationRegistry = inject(AnimationRegistry), element = inject((ElementRef)), animationPlayer = inject(AnimationPlayer), renderer = inject(Renderer2)) {
+        this._animationRegistry = animationRegistry;
+        this._element = element;
+        this._animationPlayer = animationPlayer;
+        this._renderer = renderer;
         this._wasTriggered = false;
         this._animate = undefined;
         this._options = undefined;
     }
     // #endregion
-    // #region Properties
-    /**
-     * Gets or sets the `animate` property.
-     *
-     * @public
-     */
-    get animate() {
-        return this._animate;
-    }
-    set animate(value) {
-        this._animate = value;
-    }
-    /**
-     * Gets or sets the `options` property.
-     *
-     * @public
-     */
-    get options() {
-        return this._options;
-    }
-    set options(value) {
-        this._options = value;
-    }
-    // #endregion
     // #region Methods
     /**
      * @public
@@ -2667,75 +2643,134 @@ class AnimateDirective {
         if (this._wasTriggered) {
             return;
         }
-        let resolvedAnimation;
-        // Resolve animation by name from registry
+        const resolvedAnimation = this.resolveAnimation();
+        if (!resolvedAnimation) {
+            console.warn('[AnimateDirective]: No valid animation steps provided.');
+            return;
+        }
+        this._wasTriggered = true;
+        this.applyInitialStyles(resolvedAnimation);
+        if (resolvedAnimation.steps.length === 0) {
+            return;
+        }
+        if (resolvedAnimation.trigger) {
+            resolvedAnimation.trigger(() => this.play(resolvedAnimation));
+            return;
+        }
+        this.play(resolvedAnimation);
+    }
+    /**
+     * @private
+     */
+    resolveAnimation() {
+        if (!this._animate) {
+            return undefined;
+        }
         if (typeof this._animate === 'string') {
-            const registered = this._animationRegistry.animations[this._animate];
-            if (!registered) {
-                console.warn(`[AnimateDirective]: The animation with name "${this._animate}" was not found in the registry.`);
-                return;
-            }
-            resolvedAnimation = { ...registered };
+            return this.resolveRegisteredAnimation(this._animate);
         }
-        else if (this._animate && 'name' in this._animate && this._animate.name) {
-            const registered = this._animationRegistry.animations[this._animate.name];
-            if (!registered) {
-                console.warn(`[AnimateDirective]: The animation with name "${this._animate.name}" was not found in the registry.`);
-                return;
+        if (this._animate.name) {
+            const registeredAnimation = this.resolveRegisteredAnimation(this._animate.name);
+            if (!registeredAnimation) {
+                return undefined;
             }
-            resolvedAnimation = {
-                ...registered,
+            return {
+                initial: this._animate.initial ?? registeredAnimation.initial,
+                steps: this._animate.steps ?? registeredAnimation.steps,
+                options: this.mergeOptions(registeredAnimation.options, this._animate.options),
                 trigger: this._animate.trigger,
                 onFinished: this._animate.onFinished
             };
         }
-        else if (this._animate && 'steps' in this._animate) {
-            resolvedAnimation = this._animate;
+        if (!this._animate.steps) {
+            return undefined;
         }
-        if (!resolvedAnimation || !resolvedAnimation.steps || resolvedAnimation.steps.length === 0) {
-            console.warn('[AnimateDirective]: No valid animation steps provided.');
+        return {
+            initial: this._animate.initial,
+            steps: this._animate.steps,
+            options: this._animate.options,
+            trigger: this._animate.trigger,
+            onFinished: this._animate.onFinished
+        };
+    }
+    /**
+     * @private
+     */
+    resolveRegisteredAnimation(name) {
+        const registeredAnimation = this._animationRegistry.animations[name];
+        if (!registeredAnimation) {
+            console.warn(`[AnimateDirective]: The animation with name "${name}" was not found in the registry.`);
+            return undefined;
+        }
+        return { ...registeredAnimation };
+    }
+    /**
+     * @private
+     */
+    mergeOptions(baseOptions, overrideOptions) {
+        if (!baseOptions && !overrideOptions) {
+            return undefined;
+        }
+        return {
+            ...baseOptions,
+            ...overrideOptions
+        };
+    }
+    /**
+     * @private
+     */
+    applyInitialStyles(animation) {
+        if (!animation.initial) {
             return;
         }
-        this._wasTriggered = true;
-        // Apply initial styles from the first keyframe
-        const initialKeyframe = resolvedAnimation.steps[0];
-        for (const [key, value] of Object.entries(initialKeyframe)) {
-            if (key === 'offset' || key === 'easing' || key === 'composite') {
+        for (const [key, value] of Object.entries(animation.initial)) {
+            if (this.isKeyframeMetadataProperty(key)) {
                 continue;
             }
             if (key in this._element.nativeElement.style) {
-                this._renderer.setStyle(this._element.nativeElement, key, value);
+                this._renderer.setStyle(this._element.nativeElement, key, value?.toString() ?? '');
             }
         }
-        if (resolvedAnimation.trigger) {
-            resolvedAnimation.trigger(() => this.play(resolvedAnimation));
-        }
-        else {
-            this.play(resolvedAnimation);
-        }
     }
     /**
      * @private
      */
     play(animation) {
-        const overrideOptions = {
-            ...this._options
-        };
-        void this._animationPlayer.play(this._element.nativeElement, animation, overrideOptions).then(() => {
-            // Commit the final keyframe styles
-            if (animation.steps && animation.steps.length > 0) {
-                const finalKeyframe = animation.steps[animation.steps.length - 1];
-                for (const [key, value] of Object.entries(finalKeyframe)) {
-                    if (key === 'offset' || key === 'easing' || key === 'composite') {
-                        continue;
-                    }
-                    this._renderer.setStyle(this._element.nativeElement, key, value);
-                }
-            }
+        void this._animationPlayer.playToFinal(this._element.nativeElement, animation, this._options).then(() => {
             animation.onFinished?.();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /**
+     * @private
+     */
+    isKeyframeMetadataProperty(key) {
+        return key === 'offset' || key === 'easing' || key === 'composite';
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Gets or sets the `animate` property.
+     *
+     * @public
+     */
+    get animate() {
+        return this._animate;
+    }
+    set animate(value) {
+        this._animate = value;
+    }
+    /**
+     * Gets or sets the `options` property.
+     *
+     * @public
+     */
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnimateDirective, deps: [{ token: AnimationRegistry }, { token: i0.ElementRef }, { token: i2.AnimationPlayer }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AnimateDirective, isStandalone: true, selector: "[mosaikAnimate]", inputs: { animate: ["mosaikAnimate", "animate"], options: ["mosaikAnimateOptions", "options"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AnimateDirective, decorators: [{
@@ -2743,7 +2778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             args: [{
                     selector: '[mosaikAnimate]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { animate: [{
+        }], ctorParameters: () => [{ type: AnimationRegistry }, { type: i0.ElementRef }, { type: i2.AnimationPlayer }, { type: i0.Renderer2 }], propDecorators: { animate: [{
                 type: Input,
                 args: [{
                         alias: 'mosaikAnimate',
@@ -11747,6 +11782,80 @@ class StatelessInjector {
     }
 }
 
+// #region Imports
+const OVERLAY_INTERACTION_STATE = getOverlayInteractionState();
+/**
+ * Coordinates close interactions across stacked CDK overlays.
+ *
+ * @internal
+ */
+class OverlayInteractionCoordinator {
+    // #region Methods
+    /**
+     * Registers an overlay as active for global close interaction arbitration.
+     *
+     * @internal
+     */
+    static register(overlayRef) {
+        OverlayInteractionCoordinator.unregister(overlayRef);
+        OVERLAY_INTERACTION_STATE.entries.push({
+            overlayRef: overlayRef,
+            order: ++OVERLAY_INTERACTION_STATE.order
+        });
+    }
+    /**
+     * Removes an overlay from global close interaction arbitration.
+     *
+     * @internal
+     */
+    static unregister(overlayRef) {
+        const index = OVERLAY_INTERACTION_STATE.entries.findIndex((entry) => entry.overlayRef === overlayRef);
+        if (index >= 0) {
+            OVERLAY_INTERACTION_STATE.entries.splice(index, 1);
+        }
+    }
+    /**
+     * Returns whether the overlay is the uppermost currently attached overlay.
+     *
+     * @internal
+     */
+    static isTopMost(overlayRef) {
+        return OverlayInteractionCoordinator.getTopMostOverlayRef() === overlayRef;
+    }
+    /**
+     * Returns whether the overlay owned the uppermost position when the interaction event started.
+     *
+     * @internal
+     */
+    static isTopMostForInteraction(overlayRef, event) {
+        return OverlayInteractionCoordinator.getOrCreateInteractionOwner(event) === overlayRef;
+    }
+    static getOrCreateInteractionOwner(event) {
+        if (!OVERLAY_INTERACTION_STATE.eventOwners.has(event)) {
+            OVERLAY_INTERACTION_STATE.eventOwners.set(event, OverlayInteractionCoordinator.getTopMostOverlayRef());
+        }
+        return OVERLAY_INTERACTION_STATE.eventOwners.get(event) ?? null;
+    }
+    static getTopMostOverlayRef() {
+        let topMostEntry = null;
+        for (const entry of OVERLAY_INTERACTION_STATE.entries) {
+            if (entry.overlayRef.hasAttached() && (!topMostEntry || entry.order > topMostEntry.order)) {
+                topMostEntry = entry;
+            }
+        }
+        return topMostEntry?.overlayRef ?? null;
+    }
+}
+function getOverlayInteractionState() {
+    const root = globalThis;
+    root.__mosaikOverlayInteractionState__ ??= {
+        entries: new Array(),
+        eventOwners: new WeakMap(),
+        order: 0
+    };
+    return root.__mosaikOverlayInteractionState__;
+}
+
 // #region Imports
 /**
  * @public
@@ -11862,6 +11971,7 @@ class PortalProvider {
             overlay: overlayRef,
             portal: portal
         });
+        OverlayInteractionCoordinator.register(overlayRef);
         this._cacheCountSubject.next(this._cache.length);
     }
     /**
@@ -11871,12 +11981,17 @@ class PortalProvider {
         if (overlayRef.hasAttached()) {
             overlayRef.detach();
         }
-        this._cache.splice(this._cache.findIndex((x) => x.overlay === overlayRef), 1);
+        OverlayInteractionCoordinator.unregister(overlayRef);
+        const index = this._cache.findIndex((x) => x.overlay === overlayRef);
+        if (index >= 0) {
+            this._cache.splice(index, 1);
+        }
         this._cacheCountSubject.next(this._cache.length);
     }
 }
 
 // #region Imports
+// #endregion
 // #region Methods
 /**
  * Subscribes to CDK outside interactions while preserving Mosaik portal ownership.
@@ -11884,11 +11999,40 @@ class PortalProvider {
  * @internal
  */
 function connectOverlayOutsideClose(overlayRef, closed, close) {
-    overlayRef.backdropClick().pipe(take(1), takeUntil(closed))
+    overlayRef.backdropClick().pipe(filter((event) => OverlayInteractionCoordinator.isTopMostForInteraction(overlayRef, event)), take(1), takeUntil(closed))
         .subscribe(() => close());
-    overlayRef.outsidePointerEvents().pipe(filter((event) => !isOwnedMosaikPortalProjectionEvent(overlayRef, event)), take(1), takeUntil(closed))
+    overlayRef.outsidePointerEvents().pipe(filter((event) => OverlayInteractionCoordinator.isTopMostForInteraction(overlayRef, event)), filter((event) => !isOwnedMosaikPortalProjectionEvent(overlayRef, event)), take(1), takeUntil(closed))
         .subscribe(() => close());
 }
+/**
+ * Subscribes to escape key interactions while only closing the topmost overlay.
+ *
+ * @internal
+ */
+function connectOverlayEscapeClose(overlayRef, closed, close) {
+    const escapeEvents = fromEvent(overlayRef.overlayElement.ownerDocument, 'keydown', { capture: true }).pipe(filter(isEscapeKeyEvent), filter((event) => OverlayInteractionCoordinator.isTopMostForInteraction(overlayRef, event)), takeUntil(closed));
+    escapeEvents.pipe(take(1))
+        .subscribe((event) => {
+        consumeEscapeKeyEvent(event);
+        close();
+    });
+}
+/**
+ * Subscribes to escape key interactions and blocks them while this overlay is topmost.
+ *
+ * @internal
+ */
+function connectOverlayEscapeBlock(overlayRef, closed) {
+    fromEvent(overlayRef.overlayElement.ownerDocument, 'keydown', { capture: true }).pipe(filter(isEscapeKeyEvent), filter((event) => OverlayInteractionCoordinator.isTopMostForInteraction(overlayRef, event)), takeUntil(closed))
+        .subscribe((event) => consumeEscapeKeyEvent(event));
+}
+function isEscapeKeyEvent(event) {
+    return event.key === 'Escape' || event.code === 'Escape' || event.keyCode === Key.Escape;
+}
+function consumeEscapeKeyEvent(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+}
 function isOwnedMosaikPortalProjectionEvent(overlayRef, event) {
     return event.composedPath()
         .some((target) => isMosaikPortalProjectionElement(target) && isProjectionOwnedByOverlay(overlayRef, target));
@@ -11942,7 +12086,6 @@ function isShadowRoot(node) {
  */
 class DialogService extends PortalProvider {
     // #region Fields
-    _document;
     _behaviors;
     _portalInjector;
     // #endregion
@@ -11954,7 +12097,6 @@ class DialogService extends PortalProvider {
      */
     constructor() {
         super();
-        this._document = inject(DOCUMENT);
         this._behaviors = new Array();
         for (const behavior of inject(DIALOG_BEHAVIORS, { optional: true }) ?? []) {
             this.withBehavior(behavior);
@@ -12097,16 +12239,17 @@ class DialogService extends PortalProvider {
                     component.setInput(p, config[p]);
                 }
             });
+            component.setInput('pressEscapeToClose', false);
+            component.setInput('clickOutsideToClose', false);
             if (config.clickOutsideToClose) {
                 connectOverlayOutsideClose(overlayRef, dialogRef.closed, () => dialogRef.close(Cancel.negative()));
             }
-            if (config.pressEscapeToClose) {
-                const documentKeyupSubscription = fromEvent(this._document, 'keyup').pipe(filter((event) => event.keyCode === Key.Escape), takeUntil(dialogRef.closed))
-                    .subscribe(() => {
-                    documentKeyupSubscription.unsubscribe();
-                    dialogRef.close(Cancel.negative());
-                });
-            }
+        }
+        if (config?.pressEscapeToClose) {
+            connectOverlayEscapeClose(overlayRef, dialogRef.closed, () => dialogRef.close(Cancel.negative()));
+        }
+        else {
+            connectOverlayEscapeBlock(overlayRef, dialogRef.closed);
         }
         const closedSubscription = component.closed.subscribe(() => {
             closedSubscription.unsubscribe();
@@ -14794,7 +14937,6 @@ class DrawerRef extends PortalRef {
  */
 class DrawerService extends PortalProvider {
     // #region Fields
-    _document;
     _behaviors;
     _portalInjector;
     // #endregion
@@ -14806,7 +14948,6 @@ class DrawerService extends PortalProvider {
      */
     constructor() {
         super();
-        this._document = inject(DOCUMENT);
         this._behaviors = new Array();
         for (const behavior of inject(DRAWER_BEHAVIORS, { optional: true }) ?? []) {
             this.withBehavior(behavior);
@@ -14950,16 +15091,17 @@ class DrawerService extends PortalProvider {
                     component.setInput(p, config[p]);
                 }
             });
+            component.setInput('pressEscapeToClose', false);
+            component.setInput('clickOutsideToClose', false);
             if (config.clickOutsideToClose) {
                 connectOverlayOutsideClose(overlayRef, drawerRef.closed, () => drawerRef.close(Cancel.negative()));
             }
-            if (config.pressEscapeToClose) {
-                const documentKeyupSubscription = fromEvent(this._document, 'keyup').pipe(filter((event) => event.keyCode === Key.Escape), takeUntil(drawerRef.closed))
-                    .subscribe(() => {
-                    documentKeyupSubscription.unsubscribe();
-                    drawerRef.close(Cancel.negative());
-                });
-            }
+        }
+        if (config?.pressEscapeToClose) {
+            connectOverlayEscapeClose(overlayRef, drawerRef.closed, () => drawerRef.close(Cancel.negative()));
+        }
+        else {
+            connectOverlayEscapeBlock(overlayRef, drawerRef.closed);
         }
         const closedSubscription = component.closed.subscribe(() => {
             closedSubscription.unsubscribe();
@@ -15758,7 +15900,6 @@ class MessageBoxRef extends PortalRef {
  */
 class MessageBoxService extends PortalProvider {
     // #region Fields
-    _document;
     _messageBoxBehaviors;
     // #endregion
     // #region Ctor
@@ -15769,7 +15910,6 @@ class MessageBoxService extends PortalProvider {
      */
     constructor(config = null, behaviors = null) {
         super();
-        this._document = inject(DOCUMENT);
         this._messageBoxBehaviors = new Array();
         for (const behavior of behaviors ?? []) {
             this.withBehavior(behavior);
@@ -15886,6 +16026,8 @@ class MessageBoxService extends PortalProvider {
                     component.setInput(p, config[p]);
                 }
             });
+            component.setInput('pressEscapeToClose', false);
+            component.setInput('clickOutsideToClose', false);
             // Apply intl overrides directly on the native element's intl object
             if (config.intl) {
                 Object.assign(messageBoxRef.element.intl, config.intl);
@@ -15893,13 +16035,12 @@ class MessageBoxService extends PortalProvider {
             if (config.clickOutsideToClose) {
                 connectOverlayOutsideClose(overlayRef, messageBoxRef.closed, () => messageBoxRef.close(Cancel.negative()));
             }
-            if (config.pressEscapeToClose) {
-                const documentKeyupSubscription = fromEvent(this._document, 'keyup').pipe(filter((event) => event.keyCode === Key.Escape), takeUntil(messageBoxRef.closed))
-                    .subscribe(() => {
-                    documentKeyupSubscription.unsubscribe();
-                    messageBoxRef.close(Cancel.negative());
-                });
-            }
+        }
+        if (config?.pressEscapeToClose) {
+            connectOverlayEscapeClose(overlayRef, messageBoxRef.closed, () => messageBoxRef.close(Cancel.negative()));
+        }
+        else {
+            connectOverlayEscapeBlock(overlayRef, messageBoxRef.closed);
         }
         // Bridge dialogResult (button clicks) to the ref's closed Observable
         const dialogResultSubscription = component.dialogResult.subscribe((result) => {
@@ -17414,7 +17555,6 @@ class SheetRef extends PortalRef {
  */
 class SheetService extends PortalProvider {
     // #region Fields
-    _document;
     _sheetBehaviors;
     _portalInjector;
     // #endregion
@@ -17426,7 +17566,6 @@ class SheetService extends PortalProvider {
      */
     constructor(config = null, behaviors = null) {
         super();
-        this._document = inject(DOCUMENT);
         this._sheetBehaviors = new Array();
         for (const behavior of behaviors ?? []) {
             this.withBehavior(behavior);
@@ -17543,16 +17682,17 @@ class SheetService extends PortalProvider {
                     component.setInput(p, config[p]);
                 }
             });
+            component.setInput('pressEscapeToClose', false);
+            component.setInput('clickOutsideToClose', false);
             if (config.clickOutsideToClose) {
                 connectOverlayOutsideClose(overlayRef, sheetRef.closed, () => sheetRef.close(Cancel.negative()));
             }
-            if (config.pressEscapeToClose) {
-                const documentKeyupSubscription = fromEvent(this._document, 'keyup').pipe(filter((event) => event.keyCode === Key.Escape), takeUntil(sheetRef.closed))
-                    .subscribe(() => {
-                    documentKeyupSubscription.unsubscribe();
-                    sheetRef.close(Cancel.negative());
-                });
-            }
+        }
+        if (config?.pressEscapeToClose) {
+            connectOverlayEscapeClose(overlayRef, sheetRef.closed, () => sheetRef.close(Cancel.negative()));
+        }
+        else {
+            connectOverlayEscapeBlock(overlayRef, sheetRef.closed);
         }
         const closedSubscription = component.closed.subscribe(() => {
             closedSubscription.unsubscribe();
@@ -18172,7 +18312,6 @@ class ToastRef extends PortalRef {
  */
 class ToastService extends PortalProvider {
     // #region Fields
-    _document;
     _toastBehaviors;
     // #endregion
     // #region Ctor
@@ -18183,7 +18322,6 @@ class ToastService extends PortalProvider {
      */
     constructor(config = null, behaviors = null) {
         super();
-        this._document = inject(DOCUMENT);
         this._toastBehaviors = new Array();
         for (const behavior of behaviors ?? []) {
             this.withBehavior(behavior);
@@ -18303,16 +18441,17 @@ class ToastService extends PortalProvider {
                     component.setInput(p, config[p]);
                 }
             });
+            component.setInput('pressEscapeToClose', false);
+            component.setInput('clickOutsideToClose', false);
             if (config.clickOutsideToClose) {
                 connectOverlayOutsideClose(overlayRef, toastRef.closed, () => toastRef.close(Cancel.negative()));
             }
-            if (config.pressEscapeToClose) {
-                const documentKeyupSubscription = fromEvent(this._document, 'keyup').pipe(filter((event) => event.keyCode === Key.Escape), takeUntil(toastRef.closed))
-                    .subscribe(() => {
-                    documentKeyupSubscription.unsubscribe();
-                    toastRef.close(Cancel.negative());
-                });
-            }
+        }
+        if (config?.pressEscapeToClose) {
+            connectOverlayEscapeClose(overlayRef, toastRef.closed, () => toastRef.close(Cancel.negative()));
+        }
+        else {
+            connectOverlayEscapeBlock(overlayRef, toastRef.closed);
         }
         const closedSubscription = component.closed.subscribe(() => {
             closedSubscription.unsubscribe();
@@ -19192,12 +19331,12 @@ class TranslateService {
     translate(key, ...args) {
         return this._translator.translate(key, ...args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TranslateService, deps: [{ token: i1.TranslatorService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TranslateService, deps: [{ token: i2.TranslatorService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TranslateService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TranslateService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.TranslatorService }] });
+        }], ctorParameters: () => [{ type: i2.TranslatorService }] });
 
 // #region Imports
 // #endregion
@@ -81051,6 +81190,7 @@ const THEME2_DEFAULT_PROPS = new InjectionToken('MOSAIK_THEME2_DEFAULT_PROPS');
 /**
  * @public
  *
+ * @slot  - The content that receives the scoped theme variables.
  * @slot style - Custom styles injection slot for shadow DOM styling escape hatch
  */
 let Theme2Component = class Theme2Component {