@skyux/modals 9.0.0-alpha.8 → 9.0.0-beta.0

package/fesm2022/skyux-modals.mjs

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, inject, Inject, EnvironmentInjector, createEnvironmentInjector, ViewContainerRef, Optional, ViewChild, InjectionToken, Directive, Output, HostListener, ChangeDetectorRef, ElementRef, Host, HostBinding, Input } from '@angular/core';
-import * as i4 from '@angular/common';
+import { EventEmitter, NgModule, InjectionToken, Component, ViewEncapsulation, Injectable, inject, ElementRef, NgZone, Directive, Output, HostListener, ChangeDetectorRef, HostBinding, Input, ViewChild, Inject, EnvironmentInjector, ViewContainerRef } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$2 from '@skyux/core';
-import { SkyResizeObserverMediaQueryService, SkyMediaQueryService, SKY_STACKING_CONTEXT, SkyLiveAnnouncerService, SkyDockLocation, SkyDockService, SkyIdModule, SkyTrimModule } from '@skyux/core';
-import * as i2$1 from '@skyux/theme';
-import { SkyTheme, SkyThemeModule } from '@skyux/theme';
-import * as i3 from '@angular/router';
-import { NavigationStart, RouterModule } from '@angular/router';
+import * as i1 from '@skyux/core';
+import { SkyMutationObserverService, SkyCoreAdapterService, SkyDockService, SkyLiveAnnouncerService, SkyResizeObserverMediaQueryService, SkyAppWindowRef, SkyDockLocation, SkyIdModule, SkyDynamicComponentService, SkyMediaQueryService, SKY_STACKING_CONTEXT, SkyTrimModule } from '@skyux/core';
+import * as i5 from '@skyux/theme';
+import { SkyThemeService, SkyTheme, SkyThemeModule } from '@skyux/theme';
+import { BehaviorSubject, Subject, ReplaySubject } from 'rxjs';
+import { takeUntil, take, takeWhile } from 'rxjs/operators';
 import * as i2 from '@skyux/indicators';
 import { SkyIconModule, SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i2$3 from '@skyux/i18n';
-import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService } from '@skyux/i18n';
-import { BehaviorSubject, Subject, ReplaySubject } from 'rxjs';
-import { takeUntil, takeWhile, take } from 'rxjs/operators';
+import * as i2$1 from '@skyux/i18n';
+import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { Router, NavigationStart, RouterModule } from '@angular/router';
 
 class SkyConfirmInstance {
     constructor() {
@@ -50,6 +49,37 @@ var SkyConfirmType;
     SkyConfirmType[SkyConfirmType["YesNoCancel"] = 3] = "YesNoCancel";
 })(SkyConfirmType || (SkyConfirmType = {}));
 
+/**
+ * @deprecated The `SkyConfirmModule` is no longer needed and can be removed from your application.
+ */
+class SkyConfirmModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+/**
+ * @internal
+ */
+const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
+
+/**
+ * Specifies content to display in the modal's body.
+ */
+class SkyModalContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalContentComponent, isStandalone: true, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalContentComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sky-modal-content', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"] }]
+        }] });
+
+/* istanbul ignore file */
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
@@ -75,6 +105,7 @@ const RESOURCES = {
         skyux_modal_dirty_default_keep_working_text: { message: 'Keep working' },
     },
 };
+SkyLibResourcesService.addResources(RESOURCES);
 class SkyModalsResourcesProvider {
     getString(localeInfo, name) {
         return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
@@ -108,158 +139,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 }]
         }] });
 
-/**
- * Specifies content to display in the modal's body.
- */
-class SkyModalContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalContentComponent, selector: "sky-modal-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-modal-content', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["sky-modal-content{display:block;min-height:100%}.sky-theme-modern sky-modal-content{padding:10px 30px 30px}\n"] }]
-        }] });
-
-/**
- * @internal
- */
-class SkyModalErrorsService {
-    #formErrors = new BehaviorSubject(undefined);
-    constructor() {
-        this.formErrors = this.#formErrors.asObservable();
-    }
-    updateErrors(value) {
-        this.#formErrors.next(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalErrorsService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalErrorsService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-/**
- * Specifies content to display in the modal's footer.
- */
-class SkyModalFooterComponent {
-    constructor() {
-        this.errorsSvc = inject(SkyModalErrorsService);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <div aria-live=\"polite\">\n    <div\n      *ngIf=\"errorsSvc.formErrors | async as formErrors\"\n      class=\"sky-modal-footer-errors sky-margin-stacked-lg\"\n    >\n      <sky-status-indicator\n        *ngFor=\"let formError of formErrors\"\n        [ngClass]=\"{\n          'sky-margin-stacked-lg':\n            formErrors.indexOf(formError) < formErrors.length - 1,\n          'footer-error': true\n        }\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      >\n        {{ formError.message }}\n      </sky-status-indicator>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-modal-footer', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <div aria-live=\"polite\">\n    <div\n      *ngIf=\"errorsSvc.formErrors | async as formErrors\"\n      class=\"sky-modal-footer-errors sky-margin-stacked-lg\"\n    >\n      <sky-status-indicator\n        *ngFor=\"let formError of formErrors\"\n        [ngClass]=\"{\n          'sky-margin-stacked-lg':\n            formErrors.indexOf(formError) < formErrors.length - 1,\n          'footer-error': true\n        }\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      >\n        {{ formError.message }}\n      </sky-status-indicator>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
-        }] });
-
-/**
- * Specifies a header for the modal.
- */
-class SkyModalHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i2$2.λ4, selector: "[skyTrim]" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-modal-header', template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"] }]
-        }] });
-
 /**
  * @internal
  */
-class SkyModalAdapterService {
-    static { this.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page'; }
-    static { this.MODAL_BODY_CLASS = 'sky-modal-body-open'; }
-    #docRef;
-    #bodyEl;
-    #windowRef;
-    #hostSiblingAriaHiddenCache = new Map();
-    constructor(windowRef) {
-        this.#windowRef = windowRef;
-        this.#docRef = this.#windowRef.nativeWindow.document;
-        this.#bodyEl = this.#windowRef.nativeWindow.document.body;
-    }
-    toggleFullPageModalClass(isAddFull) {
-        if (isAddFull) {
-            this.#addClassToBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
-        }
-        else {
-            this.#removeClassFromBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
-        }
+class SkyModalComponentAdapterService {
+    #coreAdapter;
+    constructor(coreAdapter) {
+        this.#coreAdapter = coreAdapter;
     }
-    setPageScroll(isAdd) {
-        if (isAdd) {
-            this.#addClassToBody(SkyModalAdapterService.MODAL_BODY_CLASS);
+    handleWindowChange(modalEl) {
+        const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
+        const fullPageModalEl = modalEl.nativeElement.querySelector('.sky-modal-full-page');
+        /*
+          Set modal height equal to max height of window (accounting for padding above and below modal)
+        */
+        const newHeight = window.innerHeight - 40;
+        boundedHeightEl.style.maxHeight = newHeight.toString() + 'px';
+        if (fullPageModalEl) {
+            this.#setFullPageHeight(fullPageModalEl);
         }
         else {
-            this.#removeClassFromBody(SkyModalAdapterService.MODAL_BODY_CLASS);
+            /*
+              IE11 doesn't handle flex and max-height correctly so we have to explicitly add
+              max-height to the content that accounts for standard header and footer height.
+            */
+            const modalContentEl = modalEl.nativeElement.querySelector('.sky-modal-content');
+            const contentHeight = newHeight - 114;
+            modalContentEl.style.maxHeight = contentHeight.toString() + 'px';
         }
     }
-    getModalOpener() {
-        return this.#docRef.activeElement;
+    isFocusInFirstItem(event, list) {
+        /* istanbul ignore next */
+        /* sanity check */
+        const eventTarget = event.target || event.srcElement;
+        return list.length > 0 && eventTarget === list[0];
     }
-    #addClassToBody(className) {
-        this.#bodyEl.classList.add(className);
+    isFocusInLastItem(event, list) {
+        /* istanbul ignore next */
+        /* sanity check */
+        const eventTarget = event.target || event.srcElement;
+        return list.length > 0 && eventTarget === list[list.length - 1];
     }
-    #removeClassFromBody(className) {
-        this.#bodyEl.classList.remove(className);
+    isModalFocused(event, modalEl) {
+        /* istanbul ignore next */
+        /* sanity check */
+        const eventTarget = event.target || event.srcElement;
+        return (modalEl &&
+            eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog'));
     }
-    scrollContentToTop(element) {
-        element.nativeElement.querySelector('.sky-modal-content').scrollTop = 0;
+    focusLastElement(list) {
+        if (list.length > 0) {
+            list[list.length - 1].focus();
+            return true;
+        }
+        return false;
     }
-    /**
-     * Hides siblings of modal-host from screen readers
-     * @param hostElRef reference to modal-host element
-     */
-    hideHostSiblingsFromScreenReaders(hostElRef) {
-        const hostElement = hostElRef.nativeElement;
-        const hostSiblings = hostElement.parentElement.children;
-        for (let i = 0; i < hostSiblings.length; i++) {
-            const element = hostSiblings[i];
-            if (element !== hostElement &&
-                !element.hasAttribute('aria-live') &&
-                element.nodeName.toLowerCase() !== 'script' &&
-                element.nodeName.toLowerCase() !== 'style') {
-                // preserve previous aria-hidden status of elements outside of modal host
-                this.#hostSiblingAriaHiddenCache.set(element, element.getAttribute('aria-hidden'));
-                element.setAttribute('aria-hidden', 'true');
-            }
+    focusFirstElement(list) {
+        if (list.length > 0) {
+            list[0].focus();
+            return true;
         }
+        return false;
     }
-    /**
-     * Restores modal-host siblings to screen reader status prior to modals being opened
-     */
-    unhideOrRestoreHostSiblingsFromScreenReaders() {
-        this.#hostSiblingAriaHiddenCache.forEach((previousValue, element) => {
-            // if element had aria-hidden status prior, restore status
-            if (element.parentElement) {
-                if (previousValue) {
-                    element.setAttribute('aria-hidden', previousValue);
-                }
-                else {
-                    element.removeAttribute('aria-hidden');
-                }
-            }
-        });
-        this.#hostSiblingAriaHiddenCache.clear();
+    modalContentHasDirectChildViewkeeper(modalContentEl) {
+        return !!modalContentEl.nativeElement.querySelector('sky-modal-content > .sky-viewkeeper-fixed');
     }
-    hidePreviousModalFromScreenReaders(topModal) {
-        if (topModal && topModal.nativeElement.previousElementSibling) {
-            topModal.nativeElement.previousElementSibling.setAttribute('aria-hidden', 'true');
+    modalOpened(modalEl) {
+        /* istanbul ignore else */
+        /* handle the case where somehow there is a focused element already in the modal */
+        if (!(document.activeElement &&
+            modalEl.nativeElement.contains(document.activeElement))) {
+            const currentScrollX = window.pageXOffset;
+            const currentScrollY = window.pageYOffset;
+            const inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
+            if (inputWithAutofocus) {
+                inputWithAutofocus.focus();
+            }
+            else {
+                this.#coreAdapter.getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
+            }
+            window.scrollTo(currentScrollX, currentScrollY);
         }
     }
-    unhidePreviousModalFromScreenReaders(topModal) {
-        if (topModal && topModal.nativeElement.previousElementSibling) {
-            topModal.nativeElement.previousElementSibling.removeAttribute('aria-hidden');
-        }
+    #setFullPageHeight(fullPageModalEl) {
+        const windowHeight = window.innerHeight;
+        const fullPageModalStyle = getComputedStyle(fullPageModalEl);
+        const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
+            parseInt(fullPageModalStyle.marginBottom, 10);
+        const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
+        fullPageModalEl.style.height = fullPageModalHeight;
+        fullPageModalEl.style.maxHeight = fullPageModalHeight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i2$2.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalAdapterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponentAdapterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2$2.SkyAppWindowRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
 
 /**
  * @internal
@@ -275,6 +251,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
+/**
+ * @internal
+ */
+class SkyModalErrorsService {
+    #formErrors = new BehaviorSubject(undefined);
+    constructor() {
+        this.formErrors = this.#formErrors.asObservable();
+    }
+    updateErrors(value) {
+        this.#formErrors.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalErrorsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalErrorsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
 const BASE_Z_INDEX = 1040;
 const modalHosts = [];
 /**
@@ -335,215 +329,401 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
         }], ctorParameters: function () { return []; } });
 
 /**
- * Provided by the modal service to give the modal host
- * component additional context and features.
+ * Raises an event when the box shadow for the modal header or footer should be adjusted
+ * based on the scroll position of the host element.
  * @internal
  */
-class SkyModalHostContext {
-    constructor(args) {
-        this.args = args;
+class SkyModalScrollShadowDirective {
+    constructor() {
+        this.skyModalScrollShadow = new EventEmitter();
+        this.#ngUnsubscribe = new Subject();
+        this.#elRef = inject(ElementRef);
+        this.#mutationObserverSvc = inject(SkyMutationObserverService);
+        this.#ngZone = inject(NgZone);
+        this.#themeSvc = inject(SkyThemeService, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostContext }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostContext, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['SkyModalHostContextArgs']
-                }] }]; } });
-
-/**
- * @internal
- */
-class SkyModalHostComponent {
-    get modalOpen() {
-        return SkyModalHostService.openModalCount > 0;
+    #currentShadow;
+    #currentTheme;
+    #mutationObserver;
+    #ngUnsubscribe;
+    #elRef;
+    #mutationObserverSvc;
+    #ngZone;
+    #themeSvc;
+    windowResize() {
+        this.#checkForShadow();
     }
-    get backdropZIndex() {
-        return SkyModalHostService.backdropZIndex;
+    scroll() {
+        this.#checkForShadow();
     }
-    #adapter;
-    #environmentInjector = inject(EnvironmentInjector);
-    #router;
-    #changeDetector;
-    #modalHostContext;
-    #elRef;
-    #modalInstances = [];
-    constructor(adapter, changeDetector, modalHostContext, elRef, router) {
-        this.#adapter = adapter;
-        this.#router = router;
-        this.#changeDetector = changeDetector;
-        this.#modalHostContext = modalHostContext;
-        this.#elRef = elRef;
+    ngOnInit() {
+        if (this.#themeSvc) {
+            this.#themeSvc.settingsChange
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe((themeSettings) => {
+                this.#currentTheme = themeSettings.currentSettings.theme;
+                if (this.#currentTheme === SkyTheme.presets.modern) {
+                    this.#initMutationObserver();
+                }
+                else {
+                    this.#emitShadow({
+                        bottomShadow: 'none',
+                        topShadow: 'none',
+                    });
+                    this.#destroyMutationObserver();
+                }
+            });
+        }
     }
     ngOnDestroy() {
-        // Close all modal instances before disposing of the host container.
-        this.#closeAllModalInstances();
-        this.#modalHostContext.args.teardownCallback();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#destroyMutationObserver();
     }
-    open(modalInstance, component, config) {
-        /* Ignore coverage as we specify the target element and so the view child should never be undefined unless
-         * we were to call the `open` method in an early lifecycle hook. */
-        /* istanbul ignore next */
-        if (!this.target) {
-            return;
+    #initMutationObserver() {
+        if (!this.#mutationObserver) {
+            const el = this.#elRef.nativeElement;
+            // MutationObserver is patched by Zone.js and therefore becomes part of the
+            // Angular change detection cycle, but this can lead to infinite loops in some
+            // scenarios. This will keep MutationObserver from triggering change detection.
+            this.#ngZone.runOutsideAngular(() => {
+                this.#mutationObserver = this.#mutationObserverSvc.create(() => {
+                    this.#checkForShadow();
+                });
+                this.#mutationObserver.observe(el, {
+                    attributes: true,
+                    characterData: true,
+                    childList: true,
+                    subtree: true,
+                });
+            });
         }
-        const params = Object.assign({}, config);
-        const hostService = new SkyModalHostService();
-        hostService.fullPage = !!params.fullPage;
-        const adapter = this.#adapter;
-        const modalOpener = adapter.getModalOpener();
-        let isOpen = true;
-        params.providers ||= [];
-        params.providers.push({ provide: SkyResizeObserverMediaQueryService }, {
-            provide: SkyModalHostService,
-            useValue: hostService,
-        }, {
-            provide: SkyModalConfiguration,
-            useValue: params,
-        }, {
-            provide: SkyMediaQueryService,
-            useExisting: SkyResizeObserverMediaQueryService,
-        }, {
-            provide: SKY_STACKING_CONTEXT,
-            useValue: {
-                zIndex: new BehaviorSubject(hostService.getModalZIndex())
-                    .asObservable()
-                    .pipe(takeUntil(modalInstance.closed)),
-            },
-        });
-        adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
-        adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
-        const providers = params.providers || /* istanbul ignore next */ [];
-        const environmentInjector = createEnvironmentInjector(providers, this.#environmentInjector);
-        const modalComponentRef = this.target.createComponent(component, {
-            environmentInjector,
-        });
-        // modal element that was just opened
-        const modalElement = modalComponentRef.location;
-        modalInstance.adapter = this.#adapter;
-        modalInstance.componentRef = modalComponentRef;
-        this.#registerModalInstance(modalInstance);
-        // hiding all elements at the modal-host level from screen readers when the a modal is opened
-        this.#adapter.hideHostSiblingsFromScreenReaders(this.#elRef);
-        if (SkyModalHostService.openModalCount > 1 &&
-            SkyModalHostService.topModal === hostService) {
-            // hiding the lower modals when more than one modal is opened
-            this.#adapter.hidePreviousModalFromScreenReaders(modalElement);
+    }
+    #destroyMutationObserver() {
+        if (this.#mutationObserver) {
+            this.#mutationObserver.disconnect();
+            this.#mutationObserver = undefined;
         }
-        const closeModal = () => {
-            // unhide siblings if last modal is closing
-            if (SkyModalHostService.openModalCount === 1) {
-                this.#adapter.unhideOrRestoreHostSiblingsFromScreenReaders();
-            }
-            else if (SkyModalHostService.topModal === hostService) {
-                // if there are more than 1 modal then unhide the one behind this one before closing it
-                this.#adapter.unhidePreviousModalFromScreenReaders(modalElement);
-            }
-            hostService.destroy();
-            adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
-            adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
-            /* istanbul ignore else */
-            /* sanity check */
-            if (modalOpener && modalOpener.focus) {
-                modalOpener.focus();
-            }
-            modalComponentRef.destroy();
-        };
-        hostService.openHelp.subscribe((helpKey) => {
-            modalInstance.openHelp(helpKey);
-        });
-        hostService.close.subscribe(() => {
-            modalInstance.close();
-        });
-        this.#router?.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
-            /* istanbul ignore else */
-            if (event instanceof NavigationStart) {
-                modalInstance.close();
-            }
-        });
-        modalInstance.closed.subscribe(() => {
-            isOpen = false;
-            this.#unregisterModalInstance(modalInstance);
-            closeModal();
-        });
-        // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit
-        this.#changeDetector.detectChanges();
     }
-    #registerModalInstance(instance) {
-        this.#modalInstances.push(instance);
+    #checkForShadow() {
+        if (this.#currentTheme === SkyTheme.presets.modern) {
+            const el = this.#elRef.nativeElement;
+            const topShadow = this.#buildShadowStyle(el.scrollTop);
+            const bottomShadow = this.#buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
+            this.#emitShadow({
+                bottomShadow,
+                topShadow,
+            });
+        }
     }
-    #unregisterModalInstance(instance) {
-        this.#modalInstances.slice(this.#modalInstances.indexOf(instance), 1);
+    #buildShadowStyle(pixelsFromEnd) {
+        // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
+        // of the scrollable element, with a max opacity of 0.3.
+        const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;
+        return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';
     }
-    #closeAllModalInstances() {
-        for (const instance of this.#modalInstances) {
-            instance.close();
+    #emitShadow(shadow) {
+        if (!this.#currentShadow ||
+            this.#currentShadow.bottomShadow !== shadow.bottomShadow ||
+            this.#currentShadow.topShadow !== shadow.topShadow) {
+            this.skyModalScrollShadow.emit(shadow);
+            this.#currentShadow = shadow;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostComponent, deps: [{ token: SkyModalAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyModalHostContext }, { token: i0.ElementRef }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalHostComponent, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], viewProviders: [SkyModalAdapterService] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalScrollShadowDirective, isStandalone: true, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], template: "<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkyModalAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyModalHostContext }, { type: i0.ElementRef }, { type: i3.Router, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { target: [{
-                type: ViewChild,
-                args: ['target', {
-                        read: ViewContainerRef,
-                        static: true,
-                    }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[skyModalScrollShadow]',
+                }]
+        }], propDecorators: { skyModalScrollShadow: [{
+                type: Output
+            }], windowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], scroll: [{
+                type: HostListener,
+                args: ['scroll']
             }] } });
 
+const ARIA_ROLE_DEFAULT = 'dialog';
 /**
- * @internal
- */
-const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
-
-/**
- * Properties about the modal close action and a method to close the modal.
- */
-class SkyModalBeforeCloseHandler {
-    constructor(closeModal, closeArgs) {
-        this.closeArgs = closeArgs;
-        this.closeModal = closeModal;
-    }
-}
-
-/**
- * Contains an object with the data passed from users when
- * a modal is closed and the reason that the modal was closed.
+ * Provides a common look-and-feel for modal content with options to display
+ * a common modal header, specify body content, and display a common modal footer
+ * and buttons.
  */
-class SkyModalCloseArgs {
-}
-
-class SkyModalInstance {
+class SkyModalComponent {
     /**
-     * An event that the modal instance emits when it is about to close.
-     * It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method
-     * that closes the modal. If a subscription exists for this event,
-     * the modal does not close until the subscriber calls the `closeModal` method.
+     * A list of form-level errors to display to the user.
      */
-    get beforeClose() {
-        return this.#_beforeClose;
+    set formErrors(value) {
+        this.#errorsSvc.updateErrors(value);
     }
     /**
-     * An event that the modal instance emits when it closes.
-     * It emits a `SkyModalCloseArgs` object with a `data` property that includes
-     * data passed from users on close or save and a `reason` property that indicates
-     * whether the modal was saved or closed without saving.
-     * The `reason` property accepts any string value.
-     * Common examples include `"cancel"`, `"close"`, and `"save"`.
+     * @internal
      */
-    get closed() {
-        return this.#_closed;
+    set ariaRole(value) {
+        this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
     }
     /**
-     * An event that the modal instance emits when users click
-     * the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
+     * @internal
+     */
+    set ariaDescribedBy(id) {
+        this.#_ariaDescribedBy = id;
+    }
+    get ariaDescribedBy() {
+        return this.#_ariaDescribedBy;
+    }
+    /**
+     * @internal
+     */
+    set ariaLabelledBy(id) {
+        this.#_ariaLabelledBy = id;
+    }
+    get ariaLabelledBy() {
+        return this.#_ariaLabelledBy;
+    }
+    #ngUnsubscribe;
+    #_ariaDescribedBy;
+    #_ariaLabelledBy;
+    #changeDetector;
+    #componentAdapter;
+    #coreAdapter;
+    #dockService;
+    #elRef;
+    #errorsSvc;
+    #hostService;
+    #liveAnnouncerSvc;
+    #mediaQueryService;
+    #windowRef;
+    /**
+     * This provider is optional to account for situations where a modal component
+     * is implemented without the modal service. For example, when a consumer tests
+     * a component that uses the modal component but doesn't launch the modal from
+     * the modal service before executing assertions.
+     */
+    #config;
+    constructor() {
+        this.ariaRoleOrDefault = ARIA_ROLE_DEFAULT;
+        this.ariaOwns = null;
+        this.modalState = 'in';
+        this.#ngUnsubscribe = new Subject();
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#componentAdapter = inject(SkyModalComponentAdapterService);
+        this.#coreAdapter = inject(SkyCoreAdapterService);
+        this.#dockService = inject(SkyDockService, { host: true });
+        this.#elRef = inject(ElementRef);
+        this.#errorsSvc = inject(SkyModalErrorsService);
+        this.#hostService = inject(SkyModalHostService);
+        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
+        this.#mediaQueryService = inject(SkyResizeObserverMediaQueryService, {
+            optional: true,
+        });
+        this.#windowRef = inject(SkyAppWindowRef);
+        /**
+         * This provider is optional to account for situations where a modal component
+         * is implemented without the modal service. For example, when a consumer tests
+         * a component that uses the modal component but doesn't launch the modal from
+         * the modal service before executing assertions.
+         */
+        this.#config = inject(SkyModalConfiguration, { optional: true }) ??
+            new SkyModalConfiguration();
+        this.ariaDescribedBy = this.#config.ariaDescribedBy;
+        this.ariaLabelledBy = this.#config.ariaLabelledBy;
+        this.ariaRole = this.#config.ariaRole;
+        this.helpKey = this.#config.helpKey;
+        this.tiledBody = this.#config.tiledBody;
+        this.wrapperClass = this.#config.wrapperClass;
+        this.size = this.#config.fullPage
+            ? 'full-page'
+            : this.#config.size?.toLowerCase() || 'medium';
+        this.modalZIndex = this.#hostService.zIndex;
+    }
+    onDocumentKeyUp(event) {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (SkyModalHostService.openModalCount > 0) {
+            const topModal = SkyModalHostService.topModal;
+            if (topModal && topModal === this.#hostService) {
+                if (event.which === 27) {
+                    // Escape key up
+                    event.preventDefault();
+                    this.closeButtonClick();
+                }
+            }
+        }
+    }
+    onDocumentKeyDown(event) {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (SkyModalHostService.openModalCount > 0) {
+            const topModal = SkyModalHostService.topModal;
+            if (topModal && topModal === this.#hostService) {
+                if (event.which === 9) {
+                    // Tab pressed
+                    let focusChanged = false;
+                    const focusElementList = this.#coreAdapter.getFocusableChildren(this.#elRef.nativeElement);
+                    if (event.shiftKey &&
+                        (this.#componentAdapter.isFocusInFirstItem(event, focusElementList) ||
+                            this.#componentAdapter.isModalFocused(event, this.#elRef))) {
+                        focusChanged =
+                            this.#componentAdapter.focusLastElement(focusElementList);
+                    }
+                    else if (!event.shiftKey &&
+                        this.#componentAdapter.isFocusInLastItem(event, focusElementList)) {
+                        focusChanged =
+                            this.#componentAdapter.focusFirstElement(focusElementList);
+                    }
+                    if (focusChanged) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                }
+            }
+        }
+    }
+    ngOnInit() {
+        this.#liveAnnouncerSvc.announcerElementChanged
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((element) => {
+            if (element?.id) {
+                this.ariaOwns = element.id;
+                this.#changeDetector.markForCheck();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.#componentAdapter.handleWindowChange(this.#elRef);
+        // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
+        // https://stackoverflow.com/questions/40562845
+        this.#windowRef.nativeWindow.setTimeout(() => {
+            this.#componentAdapter.modalOpened(this.#elRef);
+        });
+        this.#dockService.setDockOptions({
+            location: SkyDockLocation.ElementBottom,
+            referenceEl: this.modalContentWrapperElement.nativeElement,
+            zIndex: 5,
+        });
+        /* istanbul ignore next */
+        if (this.#mediaQueryService) {
+            this.#mediaQueryService.observe(this.modalContentWrapperElement, {
+                updateResponsiveClasses: true,
+            });
+        }
+    }
+    ngOnDestroy() {
+        /* istanbul ignore next */
+        if (this.#mediaQueryService) {
+            this.#mediaQueryService.unobserve();
+        }
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    helpButtonClick() {
+        if (this.helpKey) {
+            this.#hostService.onOpenHelp(this.helpKey);
+        }
+    }
+    closeButtonClick() {
+        this.#hostService.onClose();
+    }
+    windowResize() {
+        this.#componentAdapter.handleWindowChange(this.#elRef);
+    }
+    scrollShadowChange(args) {
+        this.scrollShadow = args;
+    }
+    viewkeeperEnabled() {
+        return this.#componentAdapter.modalContentHasDirectChildViewkeeper(this.#elRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalComponent, isStandalone: true, selector: "sky-modal", inputs: { formErrors: "formErrors", ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
+            SkyModalComponentAdapterService,
+            SkyModalErrorsService,
+            SkyDockService,
+        ], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-font-heading-2': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern) :host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-10px -30px -30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern :host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-10px -30px -30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "ngmodule", type: SkyModalsResourcesModule }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sky-modal', providers: [
+                        SkyModalComponentAdapterService,
+                        SkyModalErrorsService,
+                        SkyDockService,
+                    ], imports: [
+                        CommonModule,
+                        SkyIconModule,
+                        SkyIdModule,
+                        SkyModalScrollShadowDirective,
+                        SkyModalsResourcesModule,
+                    ], template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-font-heading-2': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern) :host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-10px -30px -30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern :host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-10px -30px -30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { wrapperClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], formErrors: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }], tiledBody: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], modalContentWrapperElement: [{
+                type: ViewChild,
+                args: ['modalContentWrapper', { read: ElementRef }]
+            }], onDocumentKeyUp: [{
+                type: HostListener,
+                args: ['document:keyup', ['$event']]
+            }], onDocumentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Properties about the modal close action and a method to close the modal.
+ */
+class SkyModalBeforeCloseHandler {
+    constructor(closeModal, closeArgs) {
+        this.closeArgs = closeArgs;
+        this.closeModal = closeModal;
+    }
+}
+
+/**
+ * Contains an object with the data passed from users when
+ * a modal is closed and the reason that the modal was closed.
+ */
+class SkyModalCloseArgs {
+}
+
+class SkyModalInstance {
+    /**
+     * An event that the modal instance emits when it is about to close.
+     * It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method
+     * that closes the modal. If a subscription exists for this event,
+     * the modal does not close until the subscriber calls the `closeModal` method.
+     */
+    get beforeClose() {
+        return this.#_beforeClose;
+    }
+    /**
+     * An event that the modal instance emits when it closes.
+     * It emits a `SkyModalCloseArgs` object with a `data` property that includes
+     * data passed from users on close or save and a `reason` property that indicates
+     * whether the modal was saved or closed without saving.
+     * The `reason` property accepts any string value.
+     * Common examples include `"cancel"`, `"close"`, and `"save"`.
+     */
+    get closed() {
+        return this.#_closed;
+    }
+    /**
+     * An event that the modal instance emits when users click
+     * the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
      * If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.
      */
     get helpOpened() {
@@ -640,559 +820,370 @@ class SkyModalInstance {
     }
 }
 
-/**
- * @internal
- */
-class SkyModalComponentAdapterService {
-    #coreAdapter;
-    constructor(coreAdapter) {
-        this.#coreAdapter = coreAdapter;
-    }
-    handleWindowChange(modalEl) {
-        const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
-        const fullPageModalEl = modalEl.nativeElement.querySelector('.sky-modal-full-page');
-        /*
-          Set modal height equal to max height of window (accounting for padding above and below modal)
-        */
-        const newHeight = window.innerHeight - 40;
-        boundedHeightEl.style.maxHeight = newHeight.toString() + 'px';
-        if (fullPageModalEl) {
-            this.#setFullPageHeight(fullPageModalEl);
+class SkyConfirmComponent {
+    #config;
+    #modal;
+    #resourcesService;
+    constructor(config, modal, resourcesService, idService) {
+        this.preserveWhiteSpace = false;
+        this.isOkType = false;
+        this.#config = config;
+        this.#modal = modal;
+        this.#resourcesService = resourcesService;
+        if (config.type === SkyConfirmType.Custom &&
+            config.buttons &&
+            config.buttons.length > 0) {
+            this.buttons = this.#getCustomButtons(config.buttons);
         }
         else {
-            /*
-              IE11 doesn't handle flex and max-height correctly so we have to explicitly add
-              max-height to the content that accounts for standard header and footer height.
-            */
-            const modalContentEl = modalEl.nativeElement.querySelector('.sky-modal-content');
-            const contentHeight = newHeight - 114;
-            modalContentEl.style.maxHeight = contentHeight.toString() + 'px';
+            this.#getPresetButtons()
+                .pipe(take(1))
+                .subscribe((buttons) => {
+                this.buttons = buttons;
+            });
         }
+        this.message = config.message;
+        this.body = config.body;
+        // Using the service here instead of the directive due to the confirm component's "body" container being conditional and thus a template variable being unavailable at an outer scope
+        this.bodyId = idService.generateId();
+        this.preserveWhiteSpace = !!config.preserveWhiteSpace;
+        this.isOkType = config.type === SkyConfirmType.OK;
     }
-    isFocusInFirstItem(event, list) {
-        /* istanbul ignore next */
-        /* sanity check */
-        const eventTarget = event.target || event.srcElement;
-        return list.length > 0 && eventTarget === list[0];
+    close(button) {
+        const result = {
+            action: button.action,
+        };
+        this.#modal.close(result);
     }
-    isFocusInLastItem(event, list) {
-        /* istanbul ignore next */
-        /* sanity check */
-        const eventTarget = event.target || event.srcElement;
-        return list.length > 0 && eventTarget === list[list.length - 1];
+    #getPresetButtons() {
+        const emitter = new ReplaySubject(1);
+        this.#resourcesService
+            .getStrings({
+            cancel: 'skyux_confirm_dialog_default_cancel_text',
+            no: 'skyux_confirm_dialog_default_no_text',
+            ok: 'skyux_confirm_dialog_default_ok_text',
+            yes: 'skyux_confirm_dialog_default_yes_text',
+        })
+            .subscribe((values) => {
+            const confirmButtons = [];
+            switch (this.#config.type) {
+                case SkyConfirmType.YesNoCancel:
+                case SkyConfirmType.YesCancel:
+                    confirmButtons.push({
+                        text: values.yes,
+                        autofocus: true,
+                        styleType: 'primary',
+                        action: 'yes',
+                    });
+                    if (this.#config.type === SkyConfirmType.YesNoCancel) {
+                        confirmButtons.push({
+                            text: values.no,
+                            styleType: 'default',
+                            action: 'no',
+                        });
+                    }
+                    confirmButtons.push({
+                        text: values.cancel,
+                        styleType: 'link',
+                        action: 'cancel',
+                    });
+                    break;
+                default:
+                    confirmButtons.push({
+                        text: values.ok,
+                        autofocus: true,
+                        styleType: 'primary',
+                        action: 'ok',
+                    });
+            }
+            emitter.next(confirmButtons);
+        });
+        return emitter.asObservable();
     }
-    isModalFocused(event, modalEl) {
-        /* istanbul ignore next */
-        /* sanity check */
-        const eventTarget = event.target || event.srcElement;
-        return (modalEl &&
-            eventTarget === modalEl.nativeElement.querySelector('.sky-modal-dialog'));
+    #getCustomButtons(buttonConfig) {
+        return buttonConfig.map((config) => ({
+            text: config.text,
+            action: config.action,
+            styleType: config.styleType || 'default',
+            autofocus: config.autofocus || false,
+        }));
     }
-    focusLastElement(list) {
-        if (list.length > 0) {
-            list[list.length - 1].focus();
-            return true;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$1.SkyLibResourcesService }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyConfirmComponent, isStandalone: true, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "ngmodule", type: SkyModalsResourcesModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sky-confirm', imports: [
+                        CommonModule,
+                        SkyIdModule,
+                        SkyModalComponent,
+                        SkyModalContentComponent,
+                        SkyModalsResourcesModule,
+                        SkyThemeModule,
+                    ], template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SKY_CONFIRM_CONFIG]
+                }] }, { type: SkyModalInstance }, { type: i2$1.SkyLibResourcesService }, { type: i1.SkyIdService }]; } });
+
+/**
+ * Provided by the modal service to give the modal host
+ * component additional context and features.
+ * @internal
+ */
+class SkyModalHostContext {
+    constructor(args) {
+        this.args = args;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostContext, deps: [{ token: 'SkyModalHostContextArgs' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostContext }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostContext, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['SkyModalHostContextArgs']
+                }] }]; } });
+
+/**
+ * @internal
+ */
+class SkyModalAdapterService {
+    static { this.MODAL_BODY_FULL_CLASS = 'sky-modal-body-full-page'; }
+    static { this.MODAL_BODY_CLASS = 'sky-modal-body-open'; }
+    #docRef;
+    #bodyEl;
+    #windowRef;
+    #hostSiblingAriaHiddenCache = new Map();
+    constructor(windowRef) {
+        this.#windowRef = windowRef;
+        this.#docRef = this.#windowRef.nativeWindow.document;
+        this.#bodyEl = this.#windowRef.nativeWindow.document.body;
+    }
+    toggleFullPageModalClass(isAddFull) {
+        if (isAddFull) {
+            this.#addClassToBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
+        }
+        else {
+            this.#removeClassFromBody(SkyModalAdapterService.MODAL_BODY_FULL_CLASS);
         }
-        return false;
     }
-    focusFirstElement(list) {
-        if (list.length > 0) {
-            list[0].focus();
-            return true;
+    setPageScroll(isAdd) {
+        if (isAdd) {
+            this.#addClassToBody(SkyModalAdapterService.MODAL_BODY_CLASS);
+        }
+        else {
+            this.#removeClassFromBody(SkyModalAdapterService.MODAL_BODY_CLASS);
         }
-        return false;
     }
-    modalContentHasDirectChildViewkeeper(modalContentEl) {
-        return !!modalContentEl.nativeElement.querySelector('sky-modal-content > .sky-viewkeeper-fixed');
+    getModalOpener() {
+        return this.#docRef.activeElement;
     }
-    modalOpened(modalEl) {
-        /* istanbul ignore else */
-        /* handle the case where somehow there is a focused element already in the modal */
-        if (!(document.activeElement &&
-            modalEl.nativeElement.contains(document.activeElement))) {
-            const currentScrollX = window.pageXOffset;
-            const currentScrollY = window.pageYOffset;
-            const inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
-            if (inputWithAutofocus) {
-                inputWithAutofocus.focus();
+    #addClassToBody(className) {
+        this.#bodyEl.classList.add(className);
+    }
+    #removeClassFromBody(className) {
+        this.#bodyEl.classList.remove(className);
+    }
+    scrollContentToTop(element) {
+        element.nativeElement.querySelector('.sky-modal-content').scrollTop = 0;
+    }
+    /**
+     * Hides siblings of modal-host from screen readers
+     * @param hostElRef reference to modal-host element
+     */
+    hideHostSiblingsFromScreenReaders(hostElRef) {
+        const hostElement = hostElRef.nativeElement;
+        const hostSiblings = hostElement.parentElement.children;
+        for (let i = 0; i < hostSiblings.length; i++) {
+            const element = hostSiblings[i];
+            if (element !== hostElement &&
+                !element.hasAttribute('aria-live') &&
+                element.nodeName.toLowerCase() !== 'script' &&
+                element.nodeName.toLowerCase() !== 'style') {
+                // preserve previous aria-hidden status of elements outside of modal host
+                this.#hostSiblingAriaHiddenCache.set(element, element.getAttribute('aria-hidden'));
+                element.setAttribute('aria-hidden', 'true');
             }
-            else {
-                this.#coreAdapter.getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
+        }
+    }
+    /**
+     * Restores modal-host siblings to screen reader status prior to modals being opened
+     */
+    unhideOrRestoreHostSiblingsFromScreenReaders() {
+        this.#hostSiblingAriaHiddenCache.forEach((previousValue, element) => {
+            // if element had aria-hidden status prior, restore status
+            if (element.parentElement) {
+                if (previousValue) {
+                    element.setAttribute('aria-hidden', previousValue);
+                }
+                else {
+                    element.removeAttribute('aria-hidden');
+                }
             }
-            window.scrollTo(currentScrollX, currentScrollY);
+        });
+        this.#hostSiblingAriaHiddenCache.clear();
+    }
+    hidePreviousModalFromScreenReaders(topModal) {
+        if (topModal && topModal.nativeElement.previousElementSibling) {
+            topModal.nativeElement.previousElementSibling.setAttribute('aria-hidden', 'true');
         }
     }
-    #setFullPageHeight(fullPageModalEl) {
-        const windowHeight = window.innerHeight;
-        const fullPageModalStyle = getComputedStyle(fullPageModalEl);
-        const marginTopBottom = parseInt(fullPageModalStyle.marginTop, 10) +
-            parseInt(fullPageModalStyle.marginBottom, 10);
-        const fullPageModalHeight = windowHeight - marginTopBottom + 'px';
-        fullPageModalEl.style.height = fullPageModalHeight;
-        fullPageModalEl.style.maxHeight = fullPageModalHeight;
+    unhidePreviousModalFromScreenReaders(topModal) {
+        if (topModal && topModal.nativeElement.previousElementSibling) {
+            topModal.nativeElement.previousElementSibling.removeAttribute('aria-hidden');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i2$2.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponentAdapterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalAdapterService, deps: [{ token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalAdapterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2$2.SkyCoreAdapterService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.SkyAppWindowRef }]; } });
 
 /**
- * Raises an event when the box shadow for the modal header or footer should be adjusted
- * based on the scroll position of the host element.
  * @internal
  */
-class SkyModalScrollShadowDirective {
-    #currentShadow;
-    #currentTheme;
-    #mutationObserver;
-    #ngUnsubscribe;
-    #elRef;
-    #mutationObserverSvc;
-    #ngZone;
-    #themeSvc;
-    constructor(elRef, mutationObserverSvc, ngZone, themeSvc) {
-        this.skyModalScrollShadow = new EventEmitter();
-        this.#ngUnsubscribe = new Subject();
-        this.#elRef = elRef;
-        this.#mutationObserverSvc = mutationObserverSvc;
-        this.#ngZone = ngZone;
-        this.#themeSvc = themeSvc;
-    }
-    windowResize() {
-        this.#checkForShadow();
-    }
-    scroll() {
-        this.#checkForShadow();
+class SkyModalHostComponent {
+    get modalOpen() {
+        return SkyModalHostService.openModalCount > 0;
     }
-    ngOnInit() {
-        if (this.#themeSvc) {
-            this.#themeSvc.settingsChange
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((themeSettings) => {
-                this.#currentTheme = themeSettings.currentSettings.theme;
-                if (this.#currentTheme === SkyTheme.presets.modern) {
-                    this.#initMutationObserver();
-                }
-                else {
-                    this.#emitShadow({
-                        bottomShadow: 'none',
-                        topShadow: 'none',
-                    });
-                    this.#destroyMutationObserver();
-                }
-            });
-        }
+    get backdropZIndex() {
+        return SkyModalHostService.backdropZIndex;
     }
+    #modalInstances = [];
+    #adapter = inject(SkyModalAdapterService);
+    #changeDetector = inject(ChangeDetectorRef);
+    #dynamicComponentSvc = inject(SkyDynamicComponentService);
+    #elRef = inject(ElementRef);
+    #environmentInjector = inject(EnvironmentInjector);
+    #modalHostContext = inject(SkyModalHostContext);
+    #router = inject(Router, { optional: true });
     ngOnDestroy() {
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
-        this.#destroyMutationObserver();
-    }
-    #initMutationObserver() {
-        if (!this.#mutationObserver) {
-            const el = this.#elRef.nativeElement;
-            // MutationObserver is patched by Zone.js and therefore becomes part of the
-            // Angular change detection cycle, but this can lead to infinite loops in some
-            // scenarios. This will keep MutationObserver from triggering change detection.
-            this.#ngZone.runOutsideAngular(() => {
-                this.#mutationObserver = this.#mutationObserverSvc.create(() => {
-                    this.#checkForShadow();
-                });
-                this.#mutationObserver.observe(el, {
-                    attributes: true,
-                    characterData: true,
-                    childList: true,
-                    subtree: true,
-                });
-            });
-        }
-    }
-    #destroyMutationObserver() {
-        if (this.#mutationObserver) {
-            this.#mutationObserver.disconnect();
-            this.#mutationObserver = undefined;
-        }
+        // Close all modal instances before disposing of the host container.
+        this.#closeAllModalInstances();
+        this.#modalHostContext.args.teardownCallback();
     }
-    #checkForShadow() {
-        if (this.#currentTheme === SkyTheme.presets.modern) {
-            const el = this.#elRef.nativeElement;
-            const topShadow = this.#buildShadowStyle(el.scrollTop);
-            const bottomShadow = this.#buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
-            this.#emitShadow({
-                bottomShadow,
-                topShadow,
-            });
+    open(modalInstance, component, config) {
+        /* Ignore coverage as we specify the target element and so the view child should never be undefined unless
+         * we were to call the `open` method in an early lifecycle hook. */
+        /* istanbul ignore next */
+        if (!this.target) {
+            return;
         }
-    }
-    #buildShadowStyle(pixelsFromEnd) {
-        // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
-        // of the scrollable element, with a max opacity of 0.3.
-        const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;
-        return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';
-    }
-    #emitShadow(shadow) {
-        if (!this.#currentShadow ||
-            this.#currentShadow.bottomShadow !== shadow.bottomShadow ||
-            this.#currentShadow.topShadow !== shadow.topShadow) {
-            this.skyModalScrollShadow.emit(shadow);
-            this.#currentShadow = shadow;
+        const params = Object.assign({}, config);
+        const hostService = new SkyModalHostService();
+        hostService.fullPage = !!params.fullPage;
+        const adapter = this.#adapter;
+        const modalOpener = adapter.getModalOpener();
+        let isOpen = true;
+        params.providers ||= [];
+        params.providers.push({ provide: SkyResizeObserverMediaQueryService }, {
+            provide: SkyModalHostService,
+            useValue: hostService,
+        }, {
+            provide: SkyModalConfiguration,
+            useValue: params,
+        }, {
+            provide: SkyMediaQueryService,
+            useExisting: SkyResizeObserverMediaQueryService,
+        }, {
+            provide: SKY_STACKING_CONTEXT,
+            useValue: {
+                zIndex: new BehaviorSubject(hostService.getModalZIndex())
+                    .asObservable()
+                    .pipe(takeUntil(modalInstance.closed)),
+            },
+        });
+        adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
+        adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
+        const modalComponentRef = this.#dynamicComponentSvc.createComponent(component, {
+            environmentInjector: this.#environmentInjector,
+            providers: params.providers,
+            viewContainerRef: this.target,
+        });
+        // modal element that was just opened
+        const modalElement = modalComponentRef.location;
+        modalInstance.adapter = this.#adapter;
+        modalInstance.componentRef = modalComponentRef;
+        this.#registerModalInstance(modalInstance);
+        // hiding all elements at the modal-host level from screen readers when the a modal is opened
+        this.#adapter.hideHostSiblingsFromScreenReaders(this.#elRef);
+        if (SkyModalHostService.openModalCount > 1 &&
+            SkyModalHostService.topModal === hostService) {
+            // hiding the lower modals when more than one modal is opened
+            this.#adapter.hidePreviousModalFromScreenReaders(modalElement);
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalScrollShadowDirective, deps: [{ token: i0.ElementRef }, { token: i2$2.SkyMutationObserverService }, { token: i0.NgZone }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: { skyModalScrollShadow: "skyModalScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalScrollShadowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[skyModalScrollShadow]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$2.SkyMutationObserverService }, { type: i0.NgZone }, { type: i2$1.SkyThemeService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { skyModalScrollShadow: [{
-                type: Output
-            }], windowResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }], scroll: [{
-                type: HostListener,
-                args: ['scroll']
-            }] } });
-
-const ARIA_ROLE_DEFAULT = 'dialog';
-/**
- * Provides a common look-and-feel for modal content with options to display
- * a common modal header, specify body content, and display a common modal footer
- * and buttons.
- */
-class SkyModalComponent {
-    /**
-     * A list of form-level errors to display to the user.
-     */
-    set formErrors(value) {
-        this.#errorsSvc.updateErrors(value);
-    }
-    /**
-     * @internal
-     */
-    set ariaRole(value) {
-        this.ariaRoleOrDefault = value || ARIA_ROLE_DEFAULT;
-    }
-    /**
-     * @internal
-     */
-    set ariaDescribedBy(id) {
-        this.#_ariaDescribedBy = id;
-    }
-    get ariaDescribedBy() {
-        return this.#_ariaDescribedBy;
-    }
-    /**
-     * @internal
-     */
-    set ariaLabelledBy(id) {
-        this.#_ariaLabelledBy = id;
-    }
-    get ariaLabelledBy() {
-        return this.#_ariaLabelledBy;
-    }
-    #hostService;
-    #elRef;
-    #windowRef;
-    #componentAdapter;
-    #coreAdapter;
-    #dockService;
-    #mediaQueryService;
-    #ngUnsubscribe;
-    #_ariaDescribedBy;
-    #_ariaLabelledBy;
-    #changeDetector;
-    #errorsSvc;
-    #liveAnnouncerSvc;
-    /**
-     * This provider is optional to account for situations where a modal component
-     * is implemented without the modal service. For example, when a consumer tests
-     * a component that uses the modal component but doesn't launch the modal from
-     * the modal service before executing assertions.
-     */
-    #config;
-    constructor(hostService, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
-        this.ariaRoleOrDefault = ARIA_ROLE_DEFAULT;
-        this.ariaOwns = null;
-        this.modalState = 'in';
-        this.#ngUnsubscribe = new Subject();
-        this.#changeDetector = inject(ChangeDetectorRef);
-        this.#errorsSvc = inject(SkyModalErrorsService);
-        this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
-        /**
-         * This provider is optional to account for situations where a modal component
-         * is implemented without the modal service. For example, when a consumer tests
-         * a component that uses the modal component but doesn't launch the modal from
-         * the modal service before executing assertions.
-         */
-        this.#config = inject(SkyModalConfiguration, { optional: true }) ??
-            new SkyModalConfiguration();
-        this.#hostService = hostService;
-        this.#elRef = elRef;
-        this.#windowRef = windowRef;
-        this.#componentAdapter = componentAdapter;
-        this.#coreAdapter = coreAdapter;
-        this.#dockService = dockService;
-        this.#mediaQueryService = mediaQueryService;
-        this.ariaDescribedBy = this.#config.ariaDescribedBy;
-        this.ariaLabelledBy = this.#config.ariaLabelledBy;
-        this.ariaRole = this.#config.ariaRole;
-        this.helpKey = this.#config.helpKey;
-        this.tiledBody = this.#config.tiledBody;
-        this.wrapperClass = this.#config.wrapperClass;
-        this.size = this.#config.fullPage
-            ? 'full-page'
-            : this.#config.size?.toLowerCase() || 'medium';
-        this.modalZIndex = this.#hostService.zIndex;
-    }
-    onDocumentKeyUp(event) {
-        /* istanbul ignore else */
-        /* sanity check */
-        if (SkyModalHostService.openModalCount > 0) {
-            const topModal = SkyModalHostService.topModal;
-            if (topModal && topModal === this.#hostService) {
-                if (event.which === 27) {
-                    // Escape key up
-                    event.preventDefault();
-                    this.closeButtonClick();
-                }
+        const closeModal = () => {
+            // unhide siblings if last modal is closing
+            if (SkyModalHostService.openModalCount === 1) {
+                this.#adapter.unhideOrRestoreHostSiblingsFromScreenReaders();
             }
-        }
-    }
-    onDocumentKeyDown(event) {
-        /* istanbul ignore else */
-        /* sanity check */
-        if (SkyModalHostService.openModalCount > 0) {
-            const topModal = SkyModalHostService.topModal;
-            if (topModal && topModal === this.#hostService) {
-                if (event.which === 9) {
-                    // Tab pressed
-                    let focusChanged = false;
-                    const focusElementList = this.#coreAdapter.getFocusableChildren(this.#elRef.nativeElement);
-                    if (event.shiftKey &&
-                        (this.#componentAdapter.isFocusInFirstItem(event, focusElementList) ||
-                            this.#componentAdapter.isModalFocused(event, this.#elRef))) {
-                        focusChanged =
-                            this.#componentAdapter.focusLastElement(focusElementList);
-                    }
-                    else if (!event.shiftKey &&
-                        this.#componentAdapter.isFocusInLastItem(event, focusElementList)) {
-                        focusChanged =
-                            this.#componentAdapter.focusFirstElement(focusElementList);
-                    }
-                    if (focusChanged) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                    }
-                }
+            else if (SkyModalHostService.topModal === hostService) {
+                // if there are more than 1 modal then unhide the one behind this one before closing it
+                this.#adapter.unhidePreviousModalFromScreenReaders(modalElement);
             }
-        }
-    }
-    ngOnInit() {
-        this.#liveAnnouncerSvc.announcerElementChanged
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe((element) => {
-            if (element?.id) {
-                this.ariaOwns = element.id;
-                this.#changeDetector.markForCheck();
+            hostService.destroy();
+            adapter.setPageScroll(SkyModalHostService.openModalCount > 0);
+            adapter.toggleFullPageModalClass(SkyModalHostService.fullPageModalCount > 0);
+            /* istanbul ignore else */
+            /* sanity check */
+            if (modalOpener && modalOpener.focus) {
+                modalOpener.focus();
+            }
+            modalComponentRef.destroy();
+        };
+        hostService.openHelp.subscribe((helpKey) => {
+            modalInstance.openHelp(helpKey);
+        });
+        hostService.close.subscribe(() => {
+            modalInstance.close();
+        });
+        this.#router?.events.pipe(takeWhile(() => isOpen)).subscribe((event) => {
+            /* istanbul ignore else */
+            if (event instanceof NavigationStart) {
+                modalInstance.close();
             }
         });
-    }
-    ngAfterViewInit() {
-        this.#componentAdapter.handleWindowChange(this.#elRef);
-        // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
-        // https://stackoverflow.com/questions/40562845
-        this.#windowRef.nativeWindow.setTimeout(() => {
-            this.#componentAdapter.modalOpened(this.#elRef);
-        });
-        this.#dockService.setDockOptions({
-            location: SkyDockLocation.ElementBottom,
-            referenceEl: this.modalContentWrapperElement.nativeElement,
-            zIndex: 5,
+        modalInstance.closed.subscribe(() => {
+            isOpen = false;
+            this.#unregisterModalInstance(modalInstance);
+            closeModal();
         });
-        /* istanbul ignore next */
-        if (this.#mediaQueryService) {
-            this.#mediaQueryService.observe(this.modalContentWrapperElement);
-        }
-    }
-    ngOnDestroy() {
-        /* istanbul ignore next */
-        if (this.#mediaQueryService) {
-            this.#mediaQueryService.unobserve();
-        }
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
-    }
-    helpButtonClick() {
-        if (this.helpKey) {
-            this.#hostService.onOpenHelp(this.helpKey);
-        }
-    }
-    closeButtonClick() {
-        this.#hostService.onClose();
+        // Necessary if the host was created via a consumer's lifecycle hook such as ngOnInit
+        this.#changeDetector.detectChanges();
     }
-    windowResize() {
-        this.#componentAdapter.handleWindowChange(this.#elRef);
+    #registerModalInstance(instance) {
+        this.#modalInstances.push(instance);
     }
-    scrollShadowChange(args) {
-        this.scrollShadow = args;
+    #unregisterModalInstance(instance) {
+        this.#modalInstances.slice(this.#modalInstances.indexOf(instance), 1);
     }
-    viewkeeperEnabled() {
-        return this.#componentAdapter.modalContentHasDirectChildViewkeeper(this.#elRef);
+    #closeAllModalInstances() {
+        for (const instance of this.#modalInstances) {
+            instance.close();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: i0.ElementRef }, { token: i2$2.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i2$2.SkyCoreAdapterService }, { token: i2$2.SkyDockService, host: true }, { token: i2$2.SkyResizeObserverMediaQueryService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalComponent, selector: "sky-modal", inputs: { formErrors: "formErrors", ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [
-            SkyModalComponentAdapterService,
-            SkyModalErrorsService,
-            SkyDockService,
-        ], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-font-heading-2': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalHostComponent, isStandalone: true, selector: "sky-modal-host", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: SkyModalsResourcesModule }], viewProviders: [SkyModalAdapterService] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-modal', providers: [
-                        SkyModalComponentAdapterService,
-                        SkyModalErrorsService,
-                        SkyDockService,
-                    ], template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-font-heading-2': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: i0.ElementRef }, { type: i2$2.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i2$2.SkyCoreAdapterService }, { type: i2$2.SkyDockService, decorators: [{
-                    type: Host
-                }] }, { type: i2$2.SkyResizeObserverMediaQueryService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { wrapperClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], formErrors: [{
-                type: Input
-            }], ariaRole: [{
-                type: Input
-            }], tiledBody: [{
-                type: Input
-            }], ariaDescribedBy: [{
-                type: Input
-            }], ariaLabelledBy: [{
-                type: Input
-            }], modalContentWrapperElement: [{
+            args: [{ standalone: true, selector: 'sky-modal-host', viewProviders: [SkyModalAdapterService], imports: [CommonModule, RouterModule, SkyModalsResourcesModule], template: "<div\n  class=\"sky-modal-host-backdrop\"\n  [hidden]=\"!modalOpen\"\n  [ngStyle]=\"{\n    zIndex: backdropZIndex\n  }\"\n></div>\n<div #target></div>\n", styles: [".sky-modal-host-backdrop{background-color:#00000080;position:fixed;inset:0}\n"] }]
+        }], propDecorators: { target: [{
                 type: ViewChild,
-                args: ['modalContentWrapper', { read: ElementRef }]
-            }], onDocumentKeyUp: [{
-                type: HostListener,
-                args: ['document:keyup', ['$event']]
-            }], onDocumentKeyDown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
             }] } });
 
-class SkyConfirmComponent {
-    #config;
-    #modal;
-    #resourcesService;
-    constructor(config, modal, resourcesService, idService) {
-        this.preserveWhiteSpace = false;
-        this.isOkType = false;
-        this.#config = config;
-        this.#modal = modal;
-        this.#resourcesService = resourcesService;
-        if (config.type === SkyConfirmType.Custom &&
-            config.buttons &&
-            config.buttons.length > 0) {
-            this.buttons = this.#getCustomButtons(config.buttons);
-        }
-        else {
-            this.#getPresetButtons()
-                .pipe(take(1))
-                .subscribe((buttons) => {
-                this.buttons = buttons;
-            });
-        }
-        this.message = config.message;
-        this.body = config.body;
-        // Using the service here instead of the directive due to the confirm component's "body" container being conditional and thus a template variable being unavailable at an outer scope
-        this.bodyId = idService.generateId();
-        this.preserveWhiteSpace = !!config.preserveWhiteSpace;
-        this.isOkType = config.type === SkyConfirmType.OK;
-    }
-    close(button) {
-        const result = {
-            action: button.action,
-        };
-        this.#modal.close(result);
-    }
-    #getPresetButtons() {
-        const emitter = new ReplaySubject(1);
-        this.#resourcesService
-            .getStrings({
-            cancel: 'skyux_confirm_dialog_default_cancel_text',
-            no: 'skyux_confirm_dialog_default_no_text',
-            ok: 'skyux_confirm_dialog_default_ok_text',
-            yes: 'skyux_confirm_dialog_default_yes_text',
-        })
-            .subscribe((values) => {
-            const confirmButtons = [];
-            switch (this.#config.type) {
-                case SkyConfirmType.YesNoCancel:
-                case SkyConfirmType.YesCancel:
-                    confirmButtons.push({
-                        text: values.yes,
-                        autofocus: true,
-                        styleType: 'primary',
-                        action: 'yes',
-                    });
-                    if (this.#config.type === SkyConfirmType.YesNoCancel) {
-                        confirmButtons.push({
-                            text: values.no,
-                            styleType: 'default',
-                            action: 'no',
-                        });
-                    }
-                    confirmButtons.push({
-                        text: values.cancel,
-                        styleType: 'link',
-                        action: 'cancel',
-                    });
-                    break;
-                default:
-                    confirmButtons.push({
-                        text: values.ok,
-                        autofocus: true,
-                        styleType: 'primary',
-                        action: 'ok',
-                    });
-            }
-            emitter.next(confirmButtons);
-        });
-        return emitter.asObservable();
-    }
-    #getCustomButtons(buttonConfig) {
-        return buttonConfig.map((config) => ({
-            text: config.text,
-            action: config.action,
-            styleType: config.styleType || 'default',
-            autofocus: config.autofocus || false,
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$3.SkyLibResourcesService }, { token: i2$2.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SKY_CONFIRM_CONFIG]
-                }] }, { type: SkyModalInstance }, { type: i2$3.SkyLibResourcesService }, { type: i2$2.SkyIdService }]; } });
-
 /**
  * A service that launches modals.
- * @dynamic
  */
 class SkyModalService {
     #dynamicComponentService;
+    #environmentInjector = inject(EnvironmentInjector);
     constructor(dynamicComponentService) {
         this.#dynamicComponentService = dynamicComponentService;
     }
@@ -1213,7 +1204,9 @@ class SkyModalService {
      */
     open(component, config) {
         const modalInstance = new SkyModalInstance();
-        this.#createHostComponent();
+        if (!SkyModalService.host) {
+            SkyModalService.host = this.#createHostComponent();
+        }
         const params = this.#getConfigFromParameter(config);
         params.providers ||= [];
         params.providers.push({
@@ -1250,25 +1243,44 @@ class SkyModalService {
         return params;
     }
     #createHostComponent() {
-        if (!SkyModalService.host) {
-            SkyModalService.host = this.#dynamicComponentService.createComponent(SkyModalHostComponent, {
-                providers: [
-                    {
-                        provide: SkyModalHostContext,
-                        useValue: new SkyModalHostContext({
-                            teardownCallback: () => {
-                                this.dispose();
-                            },
-                        }),
-                    },
-                ],
-            });
-        }
+        const componentRef = this.#dynamicComponentService.createComponent(SkyModalHostComponent, {
+            environmentInjector: this.#environmentInjector,
+            providers: [
+                {
+                    provide: SkyModalHostContext,
+                    useValue: new SkyModalHostContext({
+                        teardownCallback: () => {
+                            this.dispose();
+                        },
+                    }),
+                },
+            ],
+        });
+        return componentRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalService, deps: [{ token: i2$2.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalService, providedIn: 'any' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalService, deps: [{ token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyDynamicComponentService }]; } });
+/**
+ * A service that launches modals.
+ * @internal
+ * @deprecated Use `SkyModalService` to open a standalone component instead.
+ */
+class SkyModalLegacyService extends SkyModalService {
+    /* istanbul ignore next */
+    constructor(dynamicComponentSvc) {
+        super(dynamicComponentSvc);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalLegacyService, deps: [{ token: i1.SkyDynamicComponentLegacyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalLegacyService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalLegacyService, decorators: [{
             type: Injectable,
             args: [{
                     // Must be 'any' so that the modal component is created in the context of its module's injector.
@@ -1276,7 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                     // injector and may lose context if the modal was opened from within a lazy-loaded module.
                     providedIn: 'any',
                 }]
-        }], ctorParameters: function () { return [{ type: i2$2.SkyDynamicComponentService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.SkyDynamicComponentLegacyService }]; } });
 
 /**
  * Launches a dialog.
@@ -1314,18 +1326,42 @@ class SkyConfirmService {
         return confirmInstance;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmService, deps: [{ token: SkyModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmService, decorators: [{
             type: Injectable,
             args: [{
-                    // Must be 'any' so that the modal component is created in the context of its module's injector.
-                    // If set to 'root', the component's dependency injections would only be derived from the root
-                    // injector and may loose context if the modal was opened from within a lazy-loaded module.
-                    providedIn: 'any',
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: SkyModalService }]; } });
 
+/**
+ * Specifies content to display in the modal's footer.
+ */
+class SkyModalFooterComponent {
+    constructor() {
+        this.errorsSvc = inject(SkyModalErrorsService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalFooterComponent, isStandalone: true, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <div aria-live=\"polite\">\n    <div\n      *ngIf=\"errorsSvc.formErrors | async as formErrors\"\n      class=\"sky-modal-footer-errors sky-margin-stacked-lg\"\n    >\n      <sky-status-indicator\n        *ngFor=\"let formError of formErrors\"\n        [ngClass]=\"{\n          'sky-margin-stacked-lg':\n            formErrors.indexOf(formError) < formErrors.length - 1,\n          'footer-error': true\n        }\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      >\n        {{ formError.message }}\n      </sky-status-indicator>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sky-modal-footer', encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyStatusIndicatorModule], template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <div aria-live=\"polite\">\n    <div\n      *ngIf=\"errorsSvc.formErrors | async as formErrors\"\n      class=\"sky-modal-footer-errors sky-margin-stacked-lg\"\n    >\n      <sky-status-indicator\n        *ngFor=\"let formError of formErrors\"\n        [ngClass]=\"{\n          'sky-margin-stacked-lg':\n            formErrors.indexOf(formError) < formErrors.length - 1,\n          'footer-error': true\n        }\"\n        descriptionType=\"error\"\n        indicatorType=\"danger\"\n      >\n        {{ formError.message }}\n      </sky-status-indicator>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-footer-container .sky-modal-footer-errors{max-height:100px;overflow-y:auto}.sky-modal-footer-container .sky-modal-footer-errors .footer-error{display:block}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
+        }] });
+
+/**
+ * Specifies a header for the modal.
+ */
+class SkyModalHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalHeaderComponent, isStandalone: true, selector: "sky-modal-header", ngImport: i0, template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"], dependencies: [{ kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i1.λ4, selector: "[skyTrim]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sky-modal-header', imports: [SkyThemeModule, SkyTrimModule], template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"] }]
+        }] });
+
 /**
  * Provides a way to mark a modal as "dirty" and displays a confirmation
  * message when a user closes the modal without saving.
@@ -1395,11 +1431,12 @@ class SkyModalIsDirtyDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalIsDirtyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalIsDirtyDirective, selector: "sky-modal[isDirty]", inputs: { isDirty: "isDirty" }, host: { properties: { "attr.data-sky-modal-is-dirty": "this.isDirty" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: SkyModalIsDirtyDirective, isStandalone: true, selector: "sky-modal[isDirty]", inputs: { isDirty: "isDirty" }, host: { properties: { "attr.data-sky-modal-is-dirty": "this.isDirty" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalIsDirtyDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     // Since this is limited to sky-modal, it should be safe to
                     // leave off the sky prefix.
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1414,54 +1451,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
 
 class SkyModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyModalModule, declarations: [SkyModalComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyModalModule, imports: [SkyModalComponent,
             SkyModalContentComponent,
             SkyModalFooterComponent,
             SkyModalHeaderComponent,
-            SkyModalHostComponent,
-            SkyModalIsDirtyDirective,
-            SkyModalScrollShadowDirective], imports: [CommonModule,
-            RouterModule,
-            SkyIconModule,
-            SkyIdModule,
-            SkyModalsResourcesModule,
-            SkyStatusIndicatorModule,
-            SkyThemeModule,
-            SkyTrimModule], exports: [SkyModalComponent,
+            SkyModalIsDirtyDirective], exports: [SkyModalComponent,
             SkyModalContentComponent,
             SkyModalFooterComponent,
             SkyModalHeaderComponent,
             SkyModalIsDirtyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalModule, imports: [CommonModule,
-            RouterModule,
-            SkyIconModule,
-            SkyIdModule,
-            SkyModalsResourcesModule,
-            SkyStatusIndicatorModule,
-            SkyThemeModule,
-            SkyTrimModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalModule, imports: [SkyModalComponent,
+            SkyModalFooterComponent,
+            SkyModalHeaderComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         SkyModalComponent,
                         SkyModalContentComponent,
                         SkyModalFooterComponent,
                         SkyModalHeaderComponent,
-                        SkyModalHostComponent,
                         SkyModalIsDirtyDirective,
-                        SkyModalScrollShadowDirective,
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        SkyIconModule,
-                        SkyIdModule,
-                        SkyModalsResourcesModule,
-                        SkyStatusIndicatorModule,
-                        SkyThemeModule,
-                        SkyTrimModule,
                     ],
                     exports: [
                         SkyModalComponent,
@@ -1473,37 +1484,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 }]
         }] });
 
-class SkyConfirmModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule, declarations: [SkyConfirmComponent], imports: [CommonModule,
-            SkyIdModule,
-            SkyModalModule,
-            SkyModalsResourcesModule,
-            SkyThemeModule], exports: [SkyConfirmComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule, imports: [CommonModule,
-            SkyIdModule,
-            SkyModalModule,
-            SkyModalsResourcesModule,
-            SkyThemeModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyConfirmModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyConfirmComponent],
-                    imports: [
-                        CommonModule,
-                        SkyIdModule,
-                        SkyModalModule,
-                        SkyModalsResourcesModule,
-                        SkyThemeModule,
-                    ],
-                    exports: [SkyConfirmComponent],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkyConfirmInstance, SkyConfirmModule, SkyConfirmService, SkyConfirmType, SkyModalBeforeCloseHandler, SkyModalCloseArgs, SkyModalConfiguration, SkyModalErrorsService, SkyModalHostService, SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5, SkyModalIsDirtyDirective as λ6 };
+export { SkyConfirmInstance, SkyConfirmModule, SkyConfirmService, SkyConfirmType, SkyModalBeforeCloseHandler, SkyModalCloseArgs, SkyModalConfiguration, SkyModalErrorsService, SkyModalHostService, SkyModalInstance, SkyModalLegacyService, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5, SkyModalIsDirtyDirective as λ6 };
 //# sourceMappingURL=skyux-modals.mjs.map