@almoamendev/ngx-md3 0.0.16 → 0.2.0

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -10,6 +10,8 @@ import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { FormControlName } from '@angular/forms';
+import { CdkDialogContainer, Dialog as Dialog$1 } from '@angular/cdk/dialog';
+import { hasModifierKey } from '@angular/cdk/keycodes';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 
 class TypeDisplay {
@@ -557,7 +559,7 @@ class SideSheet {
         return this.portalOutlet.attachComponentPortal(portal);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SideSheet, deps: [{ token: LayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: SideSheet, isStandalone: true, selector: "md3-side-sheet", host: { properties: { "class.md3-active": "isActive()", "class.md3-hidden": "isHidden()", "class.md3-start": "side() === \"start\"", "class.md3-end": "side() === \"end\"", "class.md3-inset": "isInset()", "class.md3-show-divider": "showDivider()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:25em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: SideSheet, isStandalone: true, selector: "md3-side-sheet", host: { properties: { "class.md3-active": "isActive()", "class.md3-hidden": "isHidden()", "class.md3-start": "side() === \"start\"", "class.md3-end": "side() === \"end\"", "class.md3-inset": "isInset()", "class.md3-show-divider": "showDivider()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:16em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-container{max-width:25em}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SideSheet, decorators: [{
             type: Component,
@@ -570,7 +572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.md3-end]': 'side() === "end"',
                         '[class.md3-inset]': 'isInset()',
                         '[class.md3-show-divider]': 'showDivider()',
-                    }, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:25em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\n"] }]
+                    }, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:16em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-container{max-width:25em}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ElementRef }], propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
@@ -603,37 +605,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class SheetsService {
     injector = inject(Injector);
+    /**
+     * Outlets registered per side, from the page scaffold up to whatever took
+     * them over last. Sheets always open in the outlet on top, so a full screen
+     * dialog can host them while it is up and hand them back when it closes.
+     */
     states = new Map();
     registerSideSheetOutlet(side, outlet) {
-        const currentState = this.states.get(side);
-        if (currentState?.outlet === outlet) {
+        const stack = this.getOutletStack(side);
+        if (stack.some((state) => state.outlet === outlet)) {
             return;
         }
-        if (currentState) {
-            this.disposeOutletState(currentState);
-        }
         if (outlet.hasAttached()) {
             outlet.detach();
         }
         const stackPortal = new ComponentPortal(SideSheetStack, null, this.injector);
         const stackComponentRef = outlet.attachComponentPortal(stackPortal);
-        this.states.set(side, {
+        stack.push({
             outlet,
             stackComponentRef,
             refs: [],
         });
     }
     unregisterSideSheetOutlet(side, outlet) {
-        const state = this.states.get(side);
-        if (!state || state.outlet !== outlet) {
+        const stack = this.states.get(side);
+        const index = stack?.findIndex((state) => state.outlet === outlet) ?? -1;
+        if (!stack || index === -1) {
             return;
         }
-        this.disposeOutletState(state);
-        this.states.delete(side);
+        // Sheets opened in this outlet go with it, and the outlet underneath
+        // becomes the one new sheets open in.
+        this.disposeOutletState(stack[index]);
+        stack.splice(index, 1);
+        if (stack.length === 0) {
+            this.states.delete(side);
+        }
     }
     openSideSheet(component, config = {}) {
         const sheetConfig = this.mergeConfig(config);
-        const state = this.states.get(sheetConfig.side);
+        const state = this.activeState(sheetConfig.side);
         if (!state) {
             throw new Error(`No ${sheetConfig.side} side sheet outlet is registered.`);
         }
@@ -653,7 +663,19 @@ class SheetsService {
         return sheetRef;
     }
     closeSideSheet(side = 'end', result) {
-        this.getVisibleRef(this.states.get(side))?.close(result);
+        this.getVisibleRef(this.activeState(side))?.close(result);
+    }
+    /** Outlet that sheets currently open in: the last one that registered. */
+    activeState(side) {
+        const stack = this.states.get(side);
+        return stack?.[stack.length - 1];
+    }
+    getOutletStack(side) {
+        const stack = this.states.get(side) ?? [];
+        if (!this.states.has(side)) {
+            this.states.set(side, stack);
+        }
+        return stack;
     }
     mergeConfig(config) {
         return {
@@ -3087,42 +3109,144 @@ const DIALOG_DATA = new InjectionToken('MD3_DIALOG_DATA');
 const DIALOG_CONFIG = new InjectionToken('MD3_DIALOG_CONFIG');
 const DIALOG_COMPONENT = new InjectionToken('MD3_DIALOG_COMPONENT');
 const DIALOG_EXIT_ANIMATION_FALLBACK_MS = 300;
+const HIDDEN_CLASS = 'md3-dialog-hidden';
 class DialogRef {
-    overlayRef;
-    previouslyFocusedElement;
+    cdkRef;
+    isFullScreen;
     closed = new Subject();
-    isClosed = false;
+    closing = new Subject();
+    closePromise = null;
+    closeStarted = false;
+    closeSettled = false;
+    hidden = false;
+    /** Shell hosting the dialog: the regular dialog or the full screen one. */
     dialogInstance;
     /**
      * Filled by DialogService after the user component is attached. Keeping the
      * instance here lets callers imperatively update inputs when that is useful.
      */
     componentInstance;
-    constructor(overlayRef, previouslyFocusedElement) {
-        this.overlayRef = overlayRef;
-        this.previouslyFocusedElement = previouslyFocusedElement;
-    }
+    /** Overlay hosting the dialog, useful to reach the panel and the scrim. */
+    get overlayRef() {
+        return this.cdkRef.overlayRef;
+    }
+    /** Whether the dialog started closing. Such a dialog cannot be hidden or shown anymore. */
+    get isClosing() {
+        return this.closeStarted;
+    }
+    /** Whether the dialog is currently hidden behind another dialog. */
+    get isHidden() {
+        return this.hidden;
+    }
+    constructor(cdkRef, disableCloseEvents, 
+    /** Whether this reference belongs to a full screen dialog. */
+    isFullScreen = false) {
+        this.cdkRef = cdkRef;
+        this.isFullScreen = isFullScreen;
+        // Closing always goes through this reference so the exit animation can
+        // run before the CDK disposes the overlay. Detachments triggered from
+        // the outside (navigation, scroll strategy) still settle this ref.
+        this.cdkRef.closed.pipe(take(1)).subscribe((result) => this.settle(result));
+        if (!disableCloseEvents) {
+            this.connectCloseEvents();
+        }
+    }
+    /** Closes the dialog. The promise resolves once the exit animation is done. */
     close(result) {
-        if (this.isClosed) {
+        if (this.closePromise) {
+            return this.closePromise;
+        }
+        this.startClosing();
+        this.closePromise = this.startCloseAnimation().then(() => this.cdkRef.close(result));
+        return this.closePromise;
+    }
+    /**
+     * Hides the dialog with the closing animation while keeping it alive, so
+     * its content, form state and subscriptions survive until show() is called.
+     * The promise resolves once the dialog is out of sight.
+     */
+    hide() {
+        if (this.hidden || this.closeStarted) {
+            return Promise.resolve();
+        }
+        this.hidden = true;
+        this.toggleHiddenState(true);
+        this.dialogInstance?.setActive(false);
+        return this.waitForSurfaceAnimation();
+    }
+    /**
+     * Brings a hidden dialog back with the opening animation. Focus moves back
+     * into the dialog even when it was never hidden, which is what makes it
+     * usable again once the dialog above it closes.
+     */
+    show() {
+        if (this.closeStarted) {
             return;
         }
-        this.isClosed = true;
-        this.startCloseAnimation().then(() => {
-            // Disposing the overlay removes the wrapper, the backdrop, and the
-            // dynamically attached content component in one operation.
-            this.overlayRef.dispose();
-            this.previouslyFocusedElement?.focus();
-            this.closed.next(result);
-            this.closed.complete();
+        if (this.hidden) {
+            this.hidden = false;
+            this.toggleHiddenState(false);
+            this.dialogInstance?.setActive(true);
+        }
+        this.dialogInstance?.recaptureFocus();
+    }
+    /** Emits when the dialog starts closing, before the exit animation runs. */
+    beforeClosed() {
+        return this.closing.asObservable();
+    }
+    afterClosed() {
+        return this.closed.asObservable();
+    }
+    connectCloseEvents() {
+        // The CDK config keeps `disableClose` on, so the scrim and Escape key
+        // are handled here instead and the dialog can animate out.
+        this.cdkRef.backdropClick.pipe(take(1)).subscribe(() => {
+            this.cdkRef.containerInstance._closeInteractionType = 'mouse';
+            this.close();
+        });
+        this.cdkRef.keydownEvents.pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
+            event.preventDefault();
+            this.cdkRef.containerInstance._closeInteractionType = 'keyboard';
+            this.close();
         });
     }
+    toggleHiddenState(isHidden) {
+        const overlayRef = this.cdkRef.overlayRef;
+        const panel = overlayRef.overlayElement;
+        const backdrop = overlayRef.backdropElement;
+        panel.classList.toggle(HIDDEN_CLASS, isHidden);
+        backdrop?.classList.toggle(HIDDEN_CLASS, isHidden);
+        // `inert` keeps a hidden dialog out of the tab order and away from
+        // assistive technology without removing it from the DOM.
+        if (isHidden) {
+            panel.setAttribute('inert', '');
+        }
+        else {
+            panel.removeAttribute('inert');
+        }
+    }
+    startClosing() {
+        if (this.closeStarted) {
+            return;
+        }
+        this.closeStarted = true;
+        this.closing.next();
+        this.closing.complete();
+    }
     startCloseAnimation() {
-        let panel = this.overlayRef.overlayElement;
-        let backdrop = this.overlayRef.backdropElement;
-        let animatedElement = panel.querySelector('.md3-dialog-container') ?? panel;
-        panel.classList.add('md3-dialog-closing');
-        backdrop?.classList.add('md3-dialog-closing');
-        this.dialogInstance?.isActive.set(false);
+        const overlayRef = this.cdkRef.overlayRef;
+        const wasVisible = !this.hidden;
+        overlayRef.overlayElement.classList.add('md3-dialog-closing');
+        overlayRef.backdropElement?.classList.add('md3-dialog-closing');
+        this.dialogInstance?.setActive(false);
+        // A hidden dialog already played the exit animation, so there is
+        // nothing left to transition and it can be disposed right away.
+        return wasVisible ? this.waitForSurfaceAnimation() : Promise.resolve();
+    }
+    /** Resolves when the surface finished animating, with a timeout as a safety net. */
+    waitForSurfaceAnimation() {
+        const panel = this.cdkRef.overlayRef.overlayElement;
+        const surface = this.dialogInstance?.surfaceElement ?? panel;
         return new Promise((resolve) => {
             let isResolved = false;
             let timeoutId = setTimeout(done, DIALOG_EXIT_ANIMATION_FALLBACK_MS);
@@ -3132,82 +3256,327 @@ class DialogRef {
                 }
                 isResolved = true;
                 clearTimeout(timeoutId);
-                animatedElement.removeEventListener('transitionend', onTransitionEnd);
+                surface.removeEventListener('transitionend', onTransitionEnd);
                 resolve();
             }
             function onTransitionEnd(event) {
-                if (event.target === animatedElement) {
+                if (event.target === surface) {
                     done();
                 }
             }
-            animatedElement.addEventListener('transitionend', onTransitionEnd);
+            surface.addEventListener('transitionend', onTransitionEnd);
         });
     }
-    afterClosed() {
-        return this.closed.asObservable();
+    /** Emits the result once the CDK reference is closed. Focus is restored by the container. */
+    settle(result) {
+        if (this.closeSettled) {
+            return;
+        }
+        // Covers detachments that did not go through close(), so anything
+        // waiting on beforeClosed() is still notified.
+        this.startClosing();
+        this.closeSettled = true;
+        this.closed.next(result);
+        this.closed.complete();
     }
 }
 
-class Dialog {
-    portalOutlet = viewChild(CdkPortalOutlet, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "portalOutlet" }] : /* istanbul ignore next */ []));
+/**
+ * Material 3 dialog shell. It extends the CDK dialog container, so focus
+ * trapping, focus restoration and the ARIA attributes are handled by the CDK
+ * while this component only owns the MD3 surface and its animation.
+ */
+class Dialog extends CdkDialogContainer {
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
     isActive = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
-    get role() {
-        return this.config.role ?? 'dialog';
+    get surfaceElement() {
+        return this.surface()?.nativeElement ?? null;
     }
-    ngAfterContentInit() {
+    /**
+     * Started by DialogService, either right after the dialog is created or
+     * once the dialog it replaces has had its head start. The animation runs on
+     * the next frame so the surface has a real from/to state.
+     */
+    startEnterAnimation() {
         requestAnimationFrame(() => {
             this.isActive.set(true);
         });
     }
-    /**
-     * The service creates this wrapper first, then calls this method to mount
-     * the user supplied component into the dialog container.
-     */
-    attachContent(component, injector) {
-        const portal = new ComponentPortal(component, null, injector);
-        return this.portalOutlet().attachComponentPortal(portal);
+    setActive(value) {
+        this.isActive.set(value);
+    }
+    recaptureFocus() {
+        this._recaptureFocus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dialog, isStandalone: true, selector: "md3-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\"\n    tabindex=\"-1\"\n    [attr.role]=\"role\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"config.ariaLabel ?? null\"\n    [attr.aria-labelledby]=\"config.ariaLabelledBy ?? null\"\n    [attr.aria-describedby]=\"config.ariaDescribedBy ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dialog, isStandalone: true, selector: "md3-dialog", viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{ selector: 'md3-dialog', imports: [
                         CdkPortalOutlet,
-                    ], template: "<section\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\"\n    tabindex=\"-1\"\n    [attr.role]=\"role\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"config.ariaLabel ?? null\"\n    [attr.aria-labelledby]=\"config.ariaLabelledBy ?? null\"\n    [attr.aria-describedby]=\"config.ariaDescribedBy ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"] }]
-        }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"] }]
+        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }] } });
+
+/**
+ * Material 3 full screen dialog shell. It covers the viewport and lays its
+ * content out like the scaffold does, with a main pane and a side sheet outlet
+ * on each side, so side sheets opened while it is up land inside the dialog
+ * instead of behind it.
+ */
+class FullScreenDialog extends CdkDialogContainer {
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    startOutlet = viewChild('startOutlet', { ...(ngDevMode ? { debugName: "startOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
+    endOutlet = viewChild('endOutlet', { ...(ngDevMode ? { debugName: "endOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
+    sheets = inject(SheetsService);
+    isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
+    get surfaceElement() {
+        return this.surface()?.nativeElement ?? null;
+    }
+    ngAfterViewInit() {
+        const startOutlet = this.startOutlet();
+        const endOutlet = this.endOutlet();
+        // Taking the outlets over is what sends the next side sheet inside the
+        // dialog. The scaffold gets them back when this dialog is destroyed.
+        if (startOutlet) {
+            this.sheets.registerSideSheetOutlet('start', startOutlet);
+        }
+        if (endOutlet) {
+            this.sheets.registerSideSheetOutlet('end', endOutlet);
+        }
+    }
+    ngOnDestroy() {
+        const startOutlet = this.startOutlet();
+        const endOutlet = this.endOutlet();
+        if (startOutlet) {
+            this.sheets.unregisterSideSheetOutlet('start', startOutlet);
+        }
+        if (endOutlet) {
+            this.sheets.unregisterSideSheetOutlet('end', endOutlet);
+        }
+        super.ngOnDestroy();
+    }
+    startEnterAnimation() {
+        requestAnimationFrame(() => {
+            this.isActive.set(true);
+        });
+    }
+    setActive(value) {
+        this.isActive.set(value);
+    }
+    recaptureFocus() {
+        this._recaptureFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: FullScreenDialog, isStandalone: true, selector: "md3-fullscreen-dialog", viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "startOutlet", first: true, predicate: ["startOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "endOutlet", first: true, predicate: ["endOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-fullscreen-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <div class=\"md3-panes-container md3-scrollable\">\n        <!--\n            The CDK attaches the dialog content to the first portal outlet of\n            this template, so the main pane has to come first. The panes are\n            placed by grid area, which makes the DOM order irrelevant visually.\n        -->\n        <div class=\"md3-pane md3-pane-main\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-start\">\n            <ng-template #startOutlet cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-end\">\n            <ng-template #endOutlet cdkPortalOutlet></ng-template>\n        </div>\n    </div>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper:has(>.md3-fullscreen-dialog-panel){padding:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel{width:100%;height:100%;max-width:none;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;height:100%;width:100%;outline:0}:host .md3-fullscreen-dialog-container{display:grid;grid-template-rows:minmax(0,1fr);height:100%;min-height:0;overflow:hidden;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface));transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:translateY(1.5em)}:host .md3-fullscreen-dialog-container.md3-active{opacity:1;transform:none}:host .md3-panes-container{display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0;min-height:0;height:100%;overflow:hidden}:host .md3-panes-container .md3-pane.md3-pane-start{grid-area:start}:host .md3-panes-container .md3-pane.md3-pane-main{position:relative;grid-area:main;z-index:1;display:grid;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\";grid-template-rows:auto minmax(0,1fr) auto;min-height:0;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;overflow-y:visible;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-fullscreen-dialog', imports: [
+                        CdkPortalOutlet,
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-fullscreen-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <div class=\"md3-panes-container md3-scrollable\">\n        <!--\n            The CDK attaches the dialog content to the first portal outlet of\n            this template, so the main pane has to come first. The panes are\n            placed by grid area, which makes the DOM order irrelevant visually.\n        -->\n        <div class=\"md3-pane md3-pane-main\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-start\">\n            <ng-template #startOutlet cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-end\">\n            <ng-template #endOutlet cdkPortalOutlet></ng-template>\n        </div>\n    </div>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper:has(>.md3-fullscreen-dialog-panel){padding:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel{width:100%;height:100%;max-width:none;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;height:100%;width:100%;outline:0}:host .md3-fullscreen-dialog-container{display:grid;grid-template-rows:minmax(0,1fr);height:100%;min-height:0;overflow:hidden;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface));transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:translateY(1.5em)}:host .md3-fullscreen-dialog-container.md3-active{opacity:1;transform:none}:host .md3-panes-container{display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0;min-height:0;height:100%;overflow:hidden}:host .md3-panes-container .md3-pane.md3-pane-start{grid-area:start}:host .md3-panes-container .md3-pane.md3-pane-main{position:relative;grid-area:main;z-index:1;display:grid;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\";grid-template-rows:auto minmax(0,1fr) auto;min-height:0;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;overflow-y:visible;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], startOutlet: [{ type: i0.ViewChild, args: ['startOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], endOutlet: [{ type: i0.ViewChild, args: ['endOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }] } });
 
+const PANEL_CLASS = 'md3-dialog-panel';
+const FULL_SCREEN_PANEL_CLASS = 'md3-fullscreen-dialog-panel';
+const OPENING_CLASS = 'md3-dialog-opening';
+const SCRIM_KEPT_CLASS = 'md3-dialog-scrim-kept';
+const SCRIM_INSTANT_CLASS = 'md3-dialog-scrim-instant';
+/**
+ * Head start given to a dialog that leaves the screen before the dialog taking
+ * its place animates in. Long enough to read as one dialog replacing another,
+ * short enough to still feel like a single gesture.
+ */
+const DIALOG_HANDOVER_DELAY_MS = 160;
 class DialogService {
+    cdkDialog = inject(Dialog$1);
     overlay = inject(Overlay);
     injector = inject(Injector);
     document = inject(DOCUMENT);
+    /** Open dialogs, from the first one opened to the one currently on top. */
+    refs = [];
+    /**
+     * Page scrolling is blocked here instead of per overlay, so stacked dialogs
+     * cannot unblock the page while another dialog is still open.
+     */
+    scrollBlock = this.overlay.scrollStrategies.block();
+    /** Element that was focused before the first dialog of the stack opened. */
+    rootTrigger = null;
+    get openDialogs() {
+        return this.refs;
+    }
+    /** The full screen dialog that is open, if there is one. */
+    get fullScreenDialog() {
+        return this.refs.find((ref) => ref.isFullScreen && !ref.isClosing);
+    }
     open(component, config = {}) {
         const dialogConfig = this.mergeConfig(config);
-        const previouslyFocusedElement = this.getFocusedElement();
-        const overlayRef = this.createOverlay();
-        const dialogRef = new DialogRef(overlayRef, previouslyFocusedElement);
-        const injector = this.createInjector(component, dialogConfig, dialogRef);
-        // The overlay hosts the MD3 dialog shell. The shell is responsible for
-        // the surface markup and receives the dynamic content through a portal.
-        const dialogPortal = new ComponentPortal(Dialog, dialogConfig.viewContainerRef ?? null, injector);
-        const dialogComponentRef = overlayRef.attach(dialogPortal);
-        const contentComponentRef = dialogComponentRef.instance.attachContent(component, injector);
-        this.bindDataToInputs(contentComponentRef, dialogConfig);
-        dialogRef.componentInstance = contentComponentRef.instance;
-        dialogRef.dialogInstance = dialogComponentRef.instance;
-        this.startOpenAnimation(overlayRef);
-        this.connectCloseEvents(overlayRef, dialogRef, dialogConfig);
-        this.focusDialog(overlayRef);
+        if (this.refs.length === 0) {
+            this.rootTrigger = this.getFocusedElement();
+        }
+        // The dialog that is on screen starts leaving first, so the two dialogs
+        // never animate on top of each other. A full screen dialog is not part
+        // of this: regular dialogs open on top of it and leave it alone.
+        const previousRef = this.topRegularRef();
+        if (previousRef) {
+            this.dismissPrevious(previousRef, dialogConfig.previousDialog);
+        }
+        let dialogRef;
+        const cdkRef = this.cdkDialog.open(component, {
+            // The MD3 shell replaces the default CDK container, so the overlay,
+            // focus trap and focus restoration come from the CDK while the shell
+            // only renders the surface.
+            container: {
+                type: Dialog,
+                providers: () => [
+                    { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                ],
+            },
+            // These tokens make the dialog controllable from the dynamic
+            // component without coupling that component to the service.
+            providers: (cdkDialogRef) => {
+                dialogRef = new DialogRef(cdkDialogRef, dialogConfig.disableCloseEvents);
+                return [
+                    { provide: DialogRef, useValue: dialogRef },
+                    { provide: DIALOG_DATA, useValue: dialogConfig.data },
+                    { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                    { provide: DIALOG_COMPONENT, useValue: component },
+                ];
+            },
+            data: dialogConfig.data,
+            role: dialogConfig.role,
+            ariaModal: true,
+            ariaLabel: dialogConfig.ariaLabel || null,
+            ariaLabelledBy: dialogConfig.ariaLabelledBy || null,
+            ariaDescribedBy: dialogConfig.ariaDescribedBy || null,
+            direction: dialogConfig.direction ?? undefined,
+            viewContainerRef: dialogConfig.viewContainerRef,
+            injector: dialogConfig.injector,
+            hasBackdrop: true,
+            backdropClass: ['md3-dialog-scrim', OPENING_CLASS],
+            panelClass: [PANEL_CLASS, OPENING_CLASS],
+            positionStrategy: this.overlay.position()
+                .global()
+                .centerHorizontally()
+                .centerVertically(),
+            // Scrolling is blocked by the service for the whole stack.
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            // Focus goes back to whatever opened the stack, even when the dialog
+            // that was open underneath has been closed in the meantime.
+            restoreFocus: this.rootTrigger ?? true,
+            // Scrim and Escape handling lives in DialogRef so the dialog can
+            // play its exit animation before the overlay is disposed.
+            disableClose: true,
+        });
+        this.registerDialog(dialogRef, cdkRef, dialogConfig, previousRef);
+        return dialogRef;
+    }
+    /**
+     * Opens a dialog that covers the whole screen. Only one can be open at a
+     * time, so it replaces whatever is open, and while it is up the side sheet
+     * outlets belong to it: side sheets open inside the dialog, not behind it.
+     */
+    openFullScreen(component, config = {}) {
+        const dialogConfig = this.mergeConfig(config);
+        if (this.refs.length === 0) {
+            this.rootTrigger = this.getFocusedElement();
+        }
+        // A full screen dialog is a context of its own: the dialog it replaces
+        // and anything stacked on that dialog goes with it.
+        const previousRef = this.topRef();
+        if (previousRef) {
+            // Everything open belongs to the context being replaced, including
+            // a full screen dialog that is already up.
+            this.closeAll();
+        }
+        let dialogRef;
+        const cdkRef = this.cdkDialog.open(component, {
+            container: {
+                type: FullScreenDialog,
+                providers: () => [
+                    { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                ],
+            },
+            providers: (cdkDialogRef) => {
+                dialogRef = new DialogRef(cdkDialogRef, dialogConfig.disableCloseEvents, true);
+                return [
+                    { provide: DialogRef, useValue: dialogRef },
+                    { provide: DIALOG_DATA, useValue: dialogConfig.data },
+                    { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                    { provide: DIALOG_COMPONENT, useValue: component },
+                ];
+            },
+            data: dialogConfig.data,
+            role: dialogConfig.role,
+            ariaModal: true,
+            ariaLabel: dialogConfig.ariaLabel || null,
+            ariaLabelledBy: dialogConfig.ariaLabelledBy || null,
+            ariaDescribedBy: dialogConfig.ariaDescribedBy || null,
+            direction: dialogConfig.direction ?? undefined,
+            viewContainerRef: dialogConfig.viewContainerRef,
+            injector: dialogConfig.injector,
+            // The dialog covers the page on its own, so there is nothing left
+            // for a scrim to dim.
+            hasBackdrop: false,
+            panelClass: [FULL_SCREEN_PANEL_CLASS, OPENING_CLASS],
+            // The CDK writes the size on the panel and the global strategy then
+            // drops its centering margins, which is how the panel ends up
+            // covering the whole wrapper.
+            width: '100%',
+            height: '100%',
+            positionStrategy: this.overlay.position().global(),
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            restoreFocus: this.rootTrigger ?? true,
+            disableClose: true,
+        });
+        this.registerDialog(dialogRef, cdkRef, dialogConfig, previousRef);
         return dialogRef;
     }
+    /** Wires a freshly created dialog into the stack and starts its animation. */
+    registerDialog(dialogRef, cdkRef, dialogConfig, previousRef) {
+        dialogRef.dialogInstance = cdkRef.containerInstance;
+        dialogRef.componentInstance = cdkRef.componentInstance ?? undefined;
+        if (cdkRef.componentRef) {
+            this.bindDataToInputs(cdkRef.componentRef, dialogConfig);
+        }
+        this.refs.push(dialogRef);
+        this.updateScrollBlock();
+        if (previousRef) {
+            setTimeout(() => this.startReplacingAnimation(dialogRef, previousRef), DIALOG_HANDOVER_DELAY_MS);
+        }
+        else {
+            this.startOpenAnimation(dialogRef);
+        }
+        // Restoring starts with the exit animation, so the dialog underneath is
+        // already coming back while this one is fading out.
+        dialogRef.beforeClosed().subscribe(() => this.restorePreviousDialog(dialogRef));
+        dialogRef.afterClosed().subscribe(() => this.removeRef(dialogRef));
+    }
+    /** Closes every open dialog, including the hidden and the full screen ones. */
+    closeAll() {
+        // Closed from the bottom up so a closing dialog never brings back a
+        // hidden dialog that is about to close as well.
+        return Promise.all([...this.refs].map((ref) => ref.close())).then(() => undefined);
+    }
+    /** Closes the regular dialogs and leaves a full screen dialog alone. */
+    closeRegularDialogs() {
+        const closing = this.refs
+            .filter((ref) => !ref.isFullScreen)
+            .map((ref) => ref.close());
+        return Promise.all(closing).then(() => undefined);
+    }
     mergeConfig(config) {
         return {
             data: config.data,
             bindDataToInputs: config.bindDataToInputs ?? false,
             disableCloseEvents: config.disableCloseEvents ?? false,
+            previousDialog: config.previousDialog ?? 'close',
             role: config.role ?? 'dialog',
             ariaLabel: config.ariaLabel ?? '',
             ariaLabelledBy: config.ariaLabelledBy ?? '',
@@ -3218,20 +3587,17 @@ class DialogService {
             injector: config.injector ?? this.injector,
         };
     }
-    createOverlay() {
-        const overlayConfig = new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: ['md3-dialog-scrim', 'md3-dialog-opening'],
-            panelClass: ['md3-dialog-panel', 'md3-dialog-opening'],
-            positionStrategy: this.overlay.position()
-                .global()
-                .centerHorizontally()
-                .centerVertically(),
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-        });
-        return this.overlay.create(overlayConfig);
+    /**
+     * Hides or closes the dialog that is on screen. Its scrim stays up until
+     * the dialog taking over is ready for it, so the page behind never
+     * brightens between the two dialogs.
+     */
+    dismissPrevious(previousRef, behavior) {
+        previousRef.overlayRef.backdropElement?.classList.add(SCRIM_KEPT_CLASS);
+        return behavior === 'hide' ? previousRef.hide() : this.closeRegularDialogs();
     }
-    startOpenAnimation(overlayRef) {
+    startOpenAnimation(dialogRef) {
+        const overlayRef = dialogRef.overlayRef;
         const panel = overlayRef.overlayElement;
         const backdrop = overlayRef.backdropElement;
         // The overlay is inserted already rendered. Keep an initial class for
@@ -3240,22 +3606,58 @@ class DialogService {
         requestAnimationFrame(() => {
             setTimeout(() => {
                 panel.getBoundingClientRect();
-                panel.classList.remove('md3-dialog-opening');
-                backdrop?.classList.remove('md3-dialog-opening');
+                panel.classList.remove(OPENING_CLASS);
+                backdrop?.classList.remove(OPENING_CLASS);
             }, 100);
         });
+        dialogRef.dialogInstance?.startEnterAnimation();
     }
-    createInjector(component, config, dialogRef) {
-        return Injector.create({
-            parent: config.injector,
-            providers: [
-                // These tokens make the dialog controllable from the dynamic
-                // component without coupling that component to the service.
-                { provide: DialogRef, useValue: dialogRef },
-                { provide: DIALOG_DATA, useValue: config.data },
-                { provide: DIALOG_CONFIG, useValue: config },
-                { provide: DIALOG_COMPONENT, useValue: component },
-            ],
+    /** Opening animation for a dialog that took the place of another one. */
+    startReplacingAnimation(dialogRef, previousRef) {
+        if (dialogRef.isClosing) {
+            return;
+        }
+        const panel = dialogRef.overlayRef.overlayElement;
+        const backdrop = dialogRef.overlayRef.backdropElement;
+        this.beginScrimHandover(previousRef, dialogRef);
+        panel.getBoundingClientRect();
+        panel.classList.remove(OPENING_CLASS);
+        backdrop?.classList.remove(OPENING_CLASS);
+        this.endScrimHandover(previousRef, dialogRef);
+        dialogRef.dialogInstance?.startEnterAnimation();
+    }
+    /** Opening animation for a dialog coming back from behind a closing one. */
+    startRestoringAnimation(closingRef, previousRef) {
+        if (previousRef.isClosing) {
+            return;
+        }
+        this.beginScrimHandover(closingRef, previousRef);
+        previousRef.show();
+        this.endScrimHandover(closingRef, previousRef);
+    }
+    /**
+     * Moves both scrims to their new value in a single frame, without a
+     * transition on either side, so the dim behind the dialogs never changes.
+     */
+    beginScrimHandover(fromRef, toRef) {
+        const from = fromRef.overlayRef.backdropElement;
+        const to = toRef.overlayRef.backdropElement;
+        // Nothing to hand the scrim over to, e.g. a full screen dialog: the
+        // outgoing scrim fades out on its own instead.
+        if (!to) {
+            return;
+        }
+        from?.classList.add(SCRIM_INSTANT_CLASS);
+        from?.classList.remove(SCRIM_KEPT_CLASS);
+        to?.classList.add(SCRIM_INSTANT_CLASS);
+    }
+    /** Gives the scrims their transitions back once the handover is painted. */
+    endScrimHandover(fromRef, toRef) {
+        const from = fromRef.overlayRef.backdropElement;
+        const to = toRef.overlayRef.backdropElement;
+        requestAnimationFrame(() => {
+            from?.classList.remove(SCRIM_INSTANT_CLASS);
+            to?.classList.remove(SCRIM_INSTANT_CLASS);
         });
     }
     bindDataToInputs(componentRef, config) {
@@ -3268,34 +3670,69 @@ class DialogService {
             componentRef.setInput(inputName, inputValue);
         });
     }
-    connectCloseEvents(overlayRef, dialogRef, config) {
-        if (config.disableCloseEvents) {
+    canBindDataToInputs(data) {
+        return typeof data === 'object' && data !== null && !Array.isArray(data);
+    }
+    /** Last dialog of the stack that is not closing yet. */
+    topRef() {
+        for (let index = this.refs.length - 1; index >= 0; index--) {
+            if (!this.refs[index].isClosing) {
+                return this.refs[index];
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Same, without the full screen dialog: it hosts the dialogs opened on top
+     * of it, so it is never the one that gets hidden or closed to make room.
+     */
+    topRegularRef() {
+        const ref = this.topRef();
+        return ref?.isFullScreen ? undefined : ref;
+    }
+    restorePreviousDialog(ref) {
+        const index = this.refs.indexOf(ref);
+        if (index < 1) {
             return;
         }
-        overlayRef.backdropClick().pipe(take(1)).subscribe(() => dialogRef.close());
-        overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape'), take(1)).subscribe(() => dialogRef.close());
-    }
-    focusDialog(overlayRef) {
-        queueMicrotask(() => {
-            const surface = overlayRef.overlayElement.querySelector('.md3-dialog-container');
-            const focusTarget = surface?.querySelector([
-                'button:not([disabled])',
-                '[href]',
-                'input:not([disabled])',
-                'select:not([disabled])',
-                'textarea:not([disabled])',
-                '[tabindex]:not([tabindex="-1"])',
-            ].join(', '));
-            (focusTarget ?? surface)?.focus();
-        });
+        for (let previousIndex = index - 1; previousIndex >= 0; previousIndex--) {
+            const previousRef = this.refs[previousIndex];
+            if (previousRef.isClosing) {
+                continue;
+            }
+            // The closing dialog gets the same head start it was given when it
+            // took the screen, and keeps the scrim until then. Nothing to keep
+            // when the dialog underneath has no scrim of its own.
+            if (previousRef.overlayRef.backdropElement) {
+                ref.overlayRef.backdropElement?.classList.add(SCRIM_KEPT_CLASS);
+            }
+            setTimeout(() => this.startRestoringAnimation(ref, previousRef), DIALOG_HANDOVER_DELAY_MS);
+            return;
+        }
+    }
+    removeRef(ref) {
+        const index = this.refs.indexOf(ref);
+        if (index === -1) {
+            return;
+        }
+        this.refs.splice(index, 1);
+        if (this.refs.length === 0) {
+            this.rootTrigger = null;
+        }
+        this.updateScrollBlock();
+    }
+    updateScrollBlock() {
+        if (this.refs.length > 0) {
+            this.scrollBlock.enable();
+        }
+        else {
+            this.scrollBlock.disable();
+        }
     }
     getFocusedElement() {
         const activeElement = this.document.activeElement;
         return activeElement instanceof HTMLElement ? activeElement : null;
     }
-    canBindDataToInputs(data) {
-        return typeof data === 'object' && data !== null && !Array.isArray(data);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
@@ -3319,13 +3756,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class DialogBody {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogBody, isStandalone: true, selector: "md3-dialog-body", ngImport: i0, template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"], dependencies: [{ kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogBody, isStandalone: true, selector: "md3-dialog-body", host: { classAttribute: "md3-scrollable" }, ngImport: i0, template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"], dependencies: [{ kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogBody, decorators: [{
             type: Component,
             args: [{ selector: 'md3-dialog-body', imports: [
                         TypeBody
-                    ], template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"] }]
+                    ], host: {
+                        'class': 'md3-scrollable',
+                    }, template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"] }]
         }] });
 
 class DialogActions {
@@ -3337,6 +3776,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'md3-dialog-actions', imports: [], template: "<div class=\"md3-actions\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;margin:1.5em}:host .md3-actions{display:flex;gap:1em;flex-direction:row-reverse}\n"] }]
         }] });
 
+/**
+ * Header of a full screen dialog: a leading icon button to leave the dialog,
+ * the headline, and a trailing action. It sticks to the top of the dialog while
+ * the content scrolls underneath.
+ */
+class FullScreenDialogHeader {
+    title = input('', { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), alias: 'title' });
+    // context values
+    buttonContextSize = signal('small', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonContextSize" }] : /* istanbul ignore next */ []));
+    buttonContextWidth = signal('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonContextWidth" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: FullScreenDialogHeader, isStandalone: true, selector: "md3-fullscreen-dialog-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: MD3_BUTTON_CONTEXT,
+                useExisting: FullScreenDialogHeader,
+            },
+        ], ngImport: i0, template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n    <md3-type-title size=\"large\">{{ title() }}</md3-type-title>\n</div>\n<div class=\"md3-actions-container\">\n    <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"], dependencies: [{ kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialogHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-fullscreen-dialog-header', imports: [
+                        TypeTitle,
+                    ], providers: [
+                        {
+                            provide: MD3_BUTTON_CONTEXT,
+                            useExisting: FullScreenDialogHeader,
+                        },
+                    ], template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n    <md3-type-title size=\"large\">{{ title() }}</md3-type-title>\n</div>\n<div class=\"md3-actions-container\">\n    <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
+
 const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
 const MENU_CONFIG = new InjectionToken('MD3_MENU_CONFIG');
 const MENU_COMPONENT = new InjectionToken('MD3_MENU_COMPONENT');
@@ -4367,5 +4838,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle };
+export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map