@almoamendev/ngx-md3 0.7.5 → 0.8.1

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -8,12 +8,12 @@ import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterLinkActive } from '@angular/router';
 import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import { CdkDialogContainer, Dialog as Dialog$1 } from '@angular/cdk/dialog';
-import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayContainer } from '@angular/cdk/overlay';
 import { hasModifierKey } from '@angular/cdk/keycodes';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { Directionality } from '@angular/cdk/bidi';
-import { FormControlName } from '@angular/forms';
+import { FormControlName, NgControl } from '@angular/forms';
 
 class TypeDisplay {
     el;
@@ -4353,7 +4353,6 @@ class Switch {
     inputDisabledState = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputDisabledState" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => {
-        console.log('Switch disabled');
         return this.inputDisabledState();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -6019,7 +6018,7 @@ class TextField {
                 provide: MD3_BUTTON_CONTEXT,
                 useExisting: TextField,
             },
-        ], queries: [{ propertyName: "input", first: true, predicate: InputElement, descendants: true, isSignal: true }, { propertyName: "iconElements", predicate: IconElement, descendants: true, isSignal: true }, { propertyName: "iconButtons", predicate: IconButton, descendants: true, isSignal: true }, { propertyName: "controlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<label #inputContainer class=\"md3-text-field-container\" [ngClass]=\"{\n    'md3-text-field-filled': fieldType() == 'filled',\n    'md3-text-field-outlined': fieldType() == 'outlined',\n}\">\n    <ng-content></ng-content>\n    <fieldset aria-hidden=\"true\" class=\"md3-text-field-outline\">\n    @if (label() && fieldType() == 'outlined') {\n        <legend class=\"md3-label-gap\">{{ label() }}</legend>\n    }\n    </fieldset>\n    @if (label()) {\n        <label class=\"md3-text-field-label\">{{ label() }}</label>\n    }\n    <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n    <ng-content select=\"[md3-icon-button], [md3-icon-element=trailing]\"></ng-content>\n    @if (fieldType() != 'outlined') {\n        <div class=\"md3-text-field-state\"></div>\n    }\n</label>\n<div class=\"md3-supporting-text-container\" [class.md3-has-error]=\"inputError()\">\n    <ng-content select=\"[md3-supporting-text]\"></ng-content>\n    @if (inputCounter()) {\n        <div class=\"md3-text-input-counter\">{{ valueLength() + (maxLength() ? \"/\" + maxLength() : \"\") }}</div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-highest));--foreground-color: rgb(var(--md-scheme-on-surface));--label-color: rgb(var(--md-scheme-on-surface-variant));--caret-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-on-surface-variant));font-size:1rem;width:100%}:host .md3-text-field-container{display:block;position:relative;border-radius:var(--md-border-radius-xsmall) var(--md-border-radius-xsmall) 0 0;overflow:hidden}:host .md3-text-field-container ::ng-deep [md3-icon-element=leading]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-start:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container ::ng-deep [md3-icon-element=trailing]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-end:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container ::ng-deep [md3-icon-button]{position:absolute;font-size:1em!important;top:.5em;inset-inline-end:.5em}:host .md3-text-field-container .md3-text-field-outline{position:absolute;inset:0;pointer-events:none;padding:0 .625em;margin:.0625em 0 0;border:none;border-bottom:.0625em solid var(--outline-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),border-width none}:host .md3-text-field-container .md3-text-field-outline .md3-label-gap{padding:0;max-width:0em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.041667em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing);interpolate-size:allow-keywords}:host .md3-text-field-container .md3-text-field-label{position:absolute;top:1em;inset-inline-start:1em;inset-inline-end:1em;padding:0;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;color:var(--label-color);transform-origin:top left;transform:scale(1);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container .md3-text-field-label:dir(rtl){transform-origin:top right}:host .md3-text-field-container .md3-text-field-state{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-color:rgba(var(--md-scheme-on-surface));opacity:0;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container ::ng-deep .md3-input-element{display:block;width:100%;border:none;outline:none;padding:1.5em 1em .5em;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;resize:none;background-color:var(--background-color);color:var(--foreground-color);caret-color:var(--caret-color)}:host .md3-text-field-container ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-state{opacity:.08}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-surface))}:host .md3-text-field-container ::ng-deep .md3-input-element:focus~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-primary));border-bottom-width:.1875em}:host .md3-text-field-container ::ng-deep .md3-input-element:focus~.md3-text-field-label{color:var(--caret-color);top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled{--background-color: rgba(var(--md-scheme-surface-container), .4);--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-state{display:none}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border-bottom:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]{caret-color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-label{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-filled{--background-color: rgb(var(--md-scheme-error));--foreground-color: rgb(var(--md-scheme-on-error));--state-color: var(--md-scheme-on-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-tonal{--background-color: rgb(var(--md-scheme-error-container));--foreground-color: rgb(var(--md-scheme-on-error-container));--state-color: var(--md-scheme-on-error-container)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error);border-color:var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-standard{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-label{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container.md3-has-leading-icon ::ng-deep .md3-input-element{padding-inline-start:3.25em}:host .md3-text-field-container.md3-has-leading-icon .md3-text-field-label{inset-inline-start:3.25em}:host .md3-text-field-container.md3-has-trailing-icon ::ng-deep .md3-input-element{padding-inline-end:3.25em}:host .md3-text-field-container.md3-has-trailing-icon .md3-text-field-label{inset-inline-end:3.25em}:host .md3-text-field-container.md3-text-field-outlined{--background-color: transparent;border-radius:var(--md-border-radius-xsmall);padding-top:.5em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-outline{border-radius:inherit;border:.0625em solid var(--outline-color)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep [md3-icon-element=leading],:host .md3-text-field-container.md3-text-field-outlined ::ng-deep [md3-icon-element=trailing],:host .md3-text-field-container.md3-text-field-outlined ::ng-deep [md3-icon-button]{top:1em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-label{top:1.5em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element{padding-block:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-outline{padding:0 .5em;border-width:.1875em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-outline .md3-label-gap,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-outline .md3-label-gap{padding:0 .375em;max-width:fit-content}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-label,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:0;inset-inline:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled{--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-supporting-text-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1.333332em;padding:0 1.333332em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.033332em;color:var(--label-color)}:host .md3-supporting-text-container.md3-has-error{color:rgb(var(--md-scheme-error))}:host .md3-supporting-text-container .md3-text-input-counter{margin-inline-start:auto}:host .md3-supporting-text-container>::ng-deep *{margin-top:.333332em}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], queries: [{ propertyName: "input", first: true, predicate: InputElement, descendants: true, isSignal: true }, { propertyName: "iconElements", predicate: IconElement, descendants: true, isSignal: true }, { propertyName: "iconButtons", predicate: IconButton, descendants: true, isSignal: true }, { propertyName: "controlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<label #inputContainer class=\"md3-text-field-container\" [ngClass]=\"{\n    'md3-text-field-filled': fieldType() == 'filled',\n    'md3-text-field-outlined': fieldType() == 'outlined',\n}\">\n    <ng-content></ng-content>\n    <fieldset aria-hidden=\"true\" class=\"md3-text-field-outline\">\n    @if (label() && fieldType() == 'outlined') {\n        <legend class=\"md3-label-gap\">{{ label() }}</legend>\n    }\n    </fieldset>\n    @if (label()) {\n        <span class=\"md3-text-field-label\">{{ label() }}</span>\n    }\n    <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n    <ng-content select=\"[md3-icon-button], [md3-icon-element=trailing]\"></ng-content>\n    @if (fieldType() != 'outlined') {\n        <div class=\"md3-text-field-state\"></div>\n    }\n</label>\n<div class=\"md3-supporting-text-container\" [class.md3-has-error]=\"inputError()\">\n    <ng-content select=\"[md3-supporting-text]\"></ng-content>\n    @if (inputCounter()) {\n        <div class=\"md3-text-input-counter\">{{ valueLength() + (maxLength() ? \"/\" + maxLength() : \"\") }}</div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-highest));--foreground-color: rgb(var(--md-scheme-on-surface));--label-color: rgb(var(--md-scheme-on-surface-variant));--caret-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-on-surface-variant));font-size:1rem;width:100%}:host .md3-text-field-container{display:block;position:relative;border-radius:var(--md-border-radius-xsmall) var(--md-border-radius-xsmall) 0 0;overflow:hidden}:host .md3-text-field-container>::ng-deep [md3-icon-element=leading]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-start:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container>::ng-deep [md3-icon-element=trailing]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-end:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container>::ng-deep [md3-icon-button]{position:absolute;font-size:1em!important;top:.5em;inset-inline-end:.5em}:host .md3-text-field-container .md3-text-field-outline{position:absolute;inset:0;pointer-events:none;padding:0 .625em;margin:.0625em 0 0;border:none;border-bottom:.0625em solid var(--outline-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),border-width none}:host .md3-text-field-container .md3-text-field-outline .md3-label-gap{padding:0;max-width:0em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.041667em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing);interpolate-size:allow-keywords}:host .md3-text-field-container .md3-text-field-label{position:absolute;top:1em;inset-inline-start:1em;inset-inline-end:1em;padding:0;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;color:var(--label-color);transform-origin:top left;transform:scale(1);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container .md3-text-field-label:dir(rtl){transform-origin:top right}:host .md3-text-field-container .md3-text-field-state{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-color:rgba(var(--md-scheme-on-surface));opacity:0;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container ::ng-deep .md3-input-element{display:block;width:100%;border:none;outline:none;padding:1.5em 1em .5em;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;resize:none;background-color:var(--background-color);color:var(--foreground-color);caret-color:var(--caret-color)}:host .md3-text-field-container ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-state{opacity:.08}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-surface))}:host .md3-text-field-container ::ng-deep .md3-input-element:focus~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-primary));border-bottom-width:.1875em}:host .md3-text-field-container ::ng-deep .md3-input-element:focus:not(:read-only)~.md3-text-field-label{color:var(--caret-color);top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled{--background-color: rgba(var(--md-scheme-surface-container), .4);--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-state{display:none}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border-bottom:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]{caret-color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-label{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-filled{--background-color: rgb(var(--md-scheme-error));--foreground-color: rgb(var(--md-scheme-on-error));--state-color: var(--md-scheme-on-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-tonal{--background-color: rgb(var(--md-scheme-error-container));--foreground-color: rgb(var(--md-scheme-on-error-container));--state-color: var(--md-scheme-on-error-container)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error);border-color:var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-standard{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-label{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container.md3-has-leading-icon ::ng-deep .md3-input-element{padding-inline-start:3.25em}:host .md3-text-field-container.md3-has-leading-icon .md3-text-field-label{inset-inline-start:3.25em}:host .md3-text-field-container.md3-has-trailing-icon ::ng-deep .md3-input-element{padding-inline-end:3.25em}:host .md3-text-field-container.md3-has-trailing-icon .md3-text-field-label{inset-inline-end:3.25em}:host .md3-text-field-container.md3-text-field-outlined{--background-color: transparent;border-radius:var(--md-border-radius-xsmall);padding-top:.5em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-outline{border-radius:inherit;border:.0625em solid var(--outline-color)}:host .md3-text-field-container.md3-text-field-outlined>::ng-deep [md3-icon-element=leading],:host .md3-text-field-container.md3-text-field-outlined>::ng-deep [md3-icon-element=trailing],:host .md3-text-field-container.md3-text-field-outlined>::ng-deep [md3-icon-button]{top:1em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-label{top:1.5em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element{padding-block:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-outline{padding:0 .5em;border-width:.1875em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:read-only):focus~.md3-text-field-outline .md3-label-gap,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-outline .md3-label-gap{padding:0 .375em;max-width:fit-content}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:read-only):focus~.md3-text-field-label,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:0;inset-inline:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled{--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-supporting-text-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1.333332em;padding:0 1.333332em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.033332em;color:var(--label-color)}:host .md3-supporting-text-container.md3-has-error{color:rgb(var(--md-scheme-error))}:host .md3-supporting-text-container .md3-text-input-counter{margin-inline-start:auto}:host .md3-supporting-text-container>::ng-deep *{margin-top:.333332em}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TextField, decorators: [{
             type: Component,
@@ -6030,7 +6029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                             provide: MD3_BUTTON_CONTEXT,
                             useExisting: TextField,
                         },
-                    ], template: "<label #inputContainer class=\"md3-text-field-container\" [ngClass]=\"{\n    'md3-text-field-filled': fieldType() == 'filled',\n    'md3-text-field-outlined': fieldType() == 'outlined',\n}\">\n    <ng-content></ng-content>\n    <fieldset aria-hidden=\"true\" class=\"md3-text-field-outline\">\n    @if (label() && fieldType() == 'outlined') {\n        <legend class=\"md3-label-gap\">{{ label() }}</legend>\n    }\n    </fieldset>\n    @if (label()) {\n        <label class=\"md3-text-field-label\">{{ label() }}</label>\n    }\n    <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n    <ng-content select=\"[md3-icon-button], [md3-icon-element=trailing]\"></ng-content>\n    @if (fieldType() != 'outlined') {\n        <div class=\"md3-text-field-state\"></div>\n    }\n</label>\n<div class=\"md3-supporting-text-container\" [class.md3-has-error]=\"inputError()\">\n    <ng-content select=\"[md3-supporting-text]\"></ng-content>\n    @if (inputCounter()) {\n        <div class=\"md3-text-input-counter\">{{ valueLength() + (maxLength() ? \"/\" + maxLength() : \"\") }}</div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-highest));--foreground-color: rgb(var(--md-scheme-on-surface));--label-color: rgb(var(--md-scheme-on-surface-variant));--caret-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-on-surface-variant));font-size:1rem;width:100%}:host .md3-text-field-container{display:block;position:relative;border-radius:var(--md-border-radius-xsmall) var(--md-border-radius-xsmall) 0 0;overflow:hidden}:host .md3-text-field-container ::ng-deep [md3-icon-element=leading]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-start:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container ::ng-deep [md3-icon-element=trailing]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-end:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container ::ng-deep [md3-icon-button]{position:absolute;font-size:1em!important;top:.5em;inset-inline-end:.5em}:host .md3-text-field-container .md3-text-field-outline{position:absolute;inset:0;pointer-events:none;padding:0 .625em;margin:.0625em 0 0;border:none;border-bottom:.0625em solid var(--outline-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),border-width none}:host .md3-text-field-container .md3-text-field-outline .md3-label-gap{padding:0;max-width:0em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.041667em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing);interpolate-size:allow-keywords}:host .md3-text-field-container .md3-text-field-label{position:absolute;top:1em;inset-inline-start:1em;inset-inline-end:1em;padding:0;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;color:var(--label-color);transform-origin:top left;transform:scale(1);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container .md3-text-field-label:dir(rtl){transform-origin:top right}:host .md3-text-field-container .md3-text-field-state{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-color:rgba(var(--md-scheme-on-surface));opacity:0;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container ::ng-deep .md3-input-element{display:block;width:100%;border:none;outline:none;padding:1.5em 1em .5em;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;resize:none;background-color:var(--background-color);color:var(--foreground-color);caret-color:var(--caret-color)}:host .md3-text-field-container ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-state{opacity:.08}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-surface))}:host .md3-text-field-container ::ng-deep .md3-input-element:focus~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-primary));border-bottom-width:.1875em}:host .md3-text-field-container ::ng-deep .md3-input-element:focus~.md3-text-field-label{color:var(--caret-color);top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled{--background-color: rgba(var(--md-scheme-surface-container), .4);--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-state{display:none}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border-bottom:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]{caret-color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-label{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-filled{--background-color: rgb(var(--md-scheme-error));--foreground-color: rgb(var(--md-scheme-on-error));--state-color: var(--md-scheme-on-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-tonal{--background-color: rgb(var(--md-scheme-error-container));--foreground-color: rgb(var(--md-scheme-on-error-container));--state-color: var(--md-scheme-on-error-container)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error);border-color:var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-standard{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-label{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container.md3-has-leading-icon ::ng-deep .md3-input-element{padding-inline-start:3.25em}:host .md3-text-field-container.md3-has-leading-icon .md3-text-field-label{inset-inline-start:3.25em}:host .md3-text-field-container.md3-has-trailing-icon ::ng-deep .md3-input-element{padding-inline-end:3.25em}:host .md3-text-field-container.md3-has-trailing-icon .md3-text-field-label{inset-inline-end:3.25em}:host .md3-text-field-container.md3-text-field-outlined{--background-color: transparent;border-radius:var(--md-border-radius-xsmall);padding-top:.5em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-outline{border-radius:inherit;border:.0625em solid var(--outline-color)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep [md3-icon-element=leading],:host .md3-text-field-container.md3-text-field-outlined ::ng-deep [md3-icon-element=trailing],:host .md3-text-field-container.md3-text-field-outlined ::ng-deep [md3-icon-button]{top:1em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-label{top:1.5em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element{padding-block:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-outline{padding:0 .5em;border-width:.1875em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-outline .md3-label-gap,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-outline .md3-label-gap{padding:0 .375em;max-width:fit-content}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-label,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:0;inset-inline:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled{--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-supporting-text-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1.333332em;padding:0 1.333332em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.033332em;color:var(--label-color)}:host .md3-supporting-text-container.md3-has-error{color:rgb(var(--md-scheme-error))}:host .md3-supporting-text-container .md3-text-input-counter{margin-inline-start:auto}:host .md3-supporting-text-container>::ng-deep *{margin-top:.333332em}\n"] }]
+                    ], template: "<label #inputContainer class=\"md3-text-field-container\" [ngClass]=\"{\n    'md3-text-field-filled': fieldType() == 'filled',\n    'md3-text-field-outlined': fieldType() == 'outlined',\n}\">\n    <ng-content></ng-content>\n    <fieldset aria-hidden=\"true\" class=\"md3-text-field-outline\">\n    @if (label() && fieldType() == 'outlined') {\n        <legend class=\"md3-label-gap\">{{ label() }}</legend>\n    }\n    </fieldset>\n    @if (label()) {\n        <span class=\"md3-text-field-label\">{{ label() }}</span>\n    }\n    <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n    <ng-content select=\"[md3-icon-button], [md3-icon-element=trailing]\"></ng-content>\n    @if (fieldType() != 'outlined') {\n        <div class=\"md3-text-field-state\"></div>\n    }\n</label>\n<div class=\"md3-supporting-text-container\" [class.md3-has-error]=\"inputError()\">\n    <ng-content select=\"[md3-supporting-text]\"></ng-content>\n    @if (inputCounter()) {\n        <div class=\"md3-text-input-counter\">{{ valueLength() + (maxLength() ? \"/\" + maxLength() : \"\") }}</div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-highest));--foreground-color: rgb(var(--md-scheme-on-surface));--label-color: rgb(var(--md-scheme-on-surface-variant));--caret-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-on-surface-variant));font-size:1rem;width:100%}:host .md3-text-field-container{display:block;position:relative;border-radius:var(--md-border-radius-xsmall) var(--md-border-radius-xsmall) 0 0;overflow:hidden}:host .md3-text-field-container>::ng-deep [md3-icon-element=leading]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-start:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container>::ng-deep [md3-icon-element=trailing]{position:absolute;font-size:1.5em!important;height:1em!important;width:1em!important;top:.666667em;inset-inline-end:.5em;pointer-events:none;color:var(--label-color)}:host .md3-text-field-container>::ng-deep [md3-icon-button]{position:absolute;font-size:1em!important;top:.5em;inset-inline-end:.5em}:host .md3-text-field-container .md3-text-field-outline{position:absolute;inset:0;pointer-events:none;padding:0 .625em;margin:.0625em 0 0;border:none;border-bottom:.0625em solid var(--outline-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),border-width none}:host .md3-text-field-container .md3-text-field-outline .md3-label-gap{padding:0;max-width:0em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.041667em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing);interpolate-size:allow-keywords}:host .md3-text-field-container .md3-text-field-label{position:absolute;top:1em;inset-inline-start:1em;inset-inline-end:1em;padding:0;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;color:var(--label-color);transform-origin:top left;transform:scale(1);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container .md3-text-field-label:dir(rtl){transform-origin:top right}:host .md3-text-field-container .md3-text-field-state{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-color:rgba(var(--md-scheme-on-surface));opacity:0;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-text-field-container ::ng-deep .md3-input-element{display:block;width:100%;border:none;outline:none;padding:1.5em 1em .5em;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:.03125em;resize:none;background-color:var(--background-color);color:var(--foreground-color);caret-color:var(--caret-color)}:host .md3-text-field-container ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-state{opacity:.08}:host .md3-text-field-container ::ng-deep .md3-input-element:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-surface))}:host .md3-text-field-container ::ng-deep .md3-input-element:focus~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-primary));border-bottom-width:.1875em}:host .md3-text-field-container ::ng-deep .md3-input-element:focus:not(:read-only)~.md3-text-field-label{color:var(--caret-color);top:.4375em;transform:scale(.75)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled{--background-color: rgba(var(--md-scheme-surface-container), .4);--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-state{display:none}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border-bottom:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]{caret-color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~.md3-text-field-label{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-error))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-filled{--background-color: rgb(var(--md-scheme-error));--foreground-color: rgb(var(--md-scheme-on-error));--state-color: var(--md-scheme-on-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-tonal{--background-color: rgb(var(--md-scheme-error-container));--foreground-color: rgb(var(--md-scheme-on-error-container));--state-color: var(--md-scheme-on-error-container)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error);border-color:var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]~[md3-icon-button].md3-standard{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-error));--state-color: var(--md-scheme-error)}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-outline{--outline-color: rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~.md3-text-field-label{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container ::ng-deep .md3-input-element[aria-invalid=true]:hover~[md3-icon-element=trailing]{color:rgb(var(--md-scheme-on-error-container))}:host .md3-text-field-container.md3-has-leading-icon ::ng-deep .md3-input-element{padding-inline-start:3.25em}:host .md3-text-field-container.md3-has-leading-icon .md3-text-field-label{inset-inline-start:3.25em}:host .md3-text-field-container.md3-has-trailing-icon ::ng-deep .md3-input-element{padding-inline-end:3.25em}:host .md3-text-field-container.md3-has-trailing-icon .md3-text-field-label{inset-inline-end:3.25em}:host .md3-text-field-container.md3-text-field-outlined{--background-color: transparent;border-radius:var(--md-border-radius-xsmall);padding-top:.5em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-outline{border-radius:inherit;border:.0625em solid var(--outline-color)}:host .md3-text-field-container.md3-text-field-outlined>::ng-deep [md3-icon-element=leading],:host .md3-text-field-container.md3-text-field-outlined>::ng-deep [md3-icon-element=trailing],:host .md3-text-field-container.md3-text-field-outlined>::ng-deep [md3-icon-button]{top:1em}:host .md3-text-field-container.md3-text-field-outlined .md3-text-field-label{top:1.5em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element{padding-block:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:focus~.md3-text-field-outline{padding:0 .5em;border-width:.1875em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:read-only):focus~.md3-text-field-outline .md3-label-gap,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-outline .md3-label-gap{padding:0 .375em;max-width:fit-content}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:read-only):focus~.md3-text-field-label,:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:not(:placeholder-shown)~.md3-text-field-label{top:0;inset-inline:1em}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled{--foreground-color: rgba(var(--md-scheme-on-surface), .38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-outline{border:.0625em solid rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~.md3-text-field-label{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-text-field-container.md3-text-field-outlined ::ng-deep .md3-input-element:disabled~[md3-icon-element]{color:rgba(var(--md-scheme-on-surface),.38)}:host .md3-supporting-text-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1.333332em;padding:0 1.333332em;font-size:.75em;font-weight:400;line-height:1.333332em;letter-spacing:.033332em;color:var(--label-color)}:host .md3-supporting-text-container.md3-has-error{color:rgb(var(--md-scheme-error))}:host .md3-supporting-text-container .md3-text-input-counter{margin-inline-start:auto}:host .md3-supporting-text-container>::ng-deep *{margin-top:.333332em}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "field-type", required: false }] }], inputCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "input-counter", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], inputContainer: [{ type: i0.ViewChild, args: ['inputContainer', { isSignal: true }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputElement), { isSignal: true }] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { ...{ descendants: true }, isSignal: true }] }], iconButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconButton), { ...{ descendants: true }, isSignal: true }] }], controlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }] } });
 
 class SupportingText {
@@ -6047,1207 +6046,1437 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 
-/**
- * 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 surfaceElement() {
-        return this.surface()?.nativeElement ?? null;
-    }
-    /**
-     * 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);
-        });
-    }
-    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: 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<div\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</div>\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;pointer-events:none}::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"] }] });
+class MenuGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: MenuGroup, isStandalone: true, selector: "md3-menu-group", host: { attributes: { "role": "group" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;gap:.125em;padding:.25em;background-color:var(--background-color);color:var(--foreground-color);border-radius:var(--menu-group-radius);box-shadow:var(--menu-group-shadow)}:host:first-child{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius)}:host:last-child{border-end-start-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host ::ng-deep md3-divider{margin:.125em .5em}:host ::ng-deep [md3-menu-item]:first-child .md3-menu-item-container{--border-top-start-r: var(--md-border-radius-medium);--border-top-end-r: var(--md-border-radius-medium);border-start-start-radius:var(--border-top-start-r);border-start-end-radius:var(--border-top-end-r)}:host ::ng-deep [md3-menu-item]:last-child .md3-menu-item-container{--border-bottom-start-r: var(--md-border-radius-medium);--border-bottom-end-r: var(--md-border-radius-medium);border-end-start-radius:var(--border-bottom-start-r);border-end-end-radius:var(--border-bottom-end-r)}.md3-menu-group-label{padding:.5rem var(--menu-item-inline-padding, .75rem) .25rem;color:rgb(var(--md-scheme-on-surface-variant));font-size:.75rem;font-weight:500;line-height:1rem;letter-spacing:.03125rem}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'md3-dialog', imports: [
-                        CdkPortalOutlet,
-                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<div\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</div>\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;pointer-events:none}::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 }] }] } });
+            args: [{ selector: 'md3-menu-group', imports: [], host: {
+                        'role': 'group',
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;gap:.125em;padding:.25em;background-color:var(--background-color);color:var(--foreground-color);border-radius:var(--menu-group-radius);box-shadow:var(--menu-group-shadow)}:host:first-child{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius)}:host:last-child{border-end-start-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host ::ng-deep md3-divider{margin:.125em .5em}:host ::ng-deep [md3-menu-item]:first-child .md3-menu-item-container{--border-top-start-r: var(--md-border-radius-medium);--border-top-end-r: var(--md-border-radius-medium);border-start-start-radius:var(--border-top-start-r);border-start-end-radius:var(--border-top-end-r)}:host ::ng-deep [md3-menu-item]:last-child .md3-menu-item-container{--border-bottom-start-r: var(--md-border-radius-medium);--border-bottom-end-r: var(--md-border-radius-medium);border-end-start-radius:var(--border-bottom-start-r);border-end-end-radius:var(--border-bottom-end-r)}.md3-menu-group-label{padding:.5rem var(--menu-item-inline-padding, .75rem) .25rem;color:rgb(var(--md-scheme-on-surface-variant));font-size:.75rem;font-weight:500;line-height:1rem;letter-spacing:.03125rem}\n"] }]
+        }] });
 
-/**
- * Material 3 full screen dialog shell. It covers the viewport and holds the content.
- *
- * The content is an `md3-layout`. The layout places the regions — the bar rows for an app bar
- * or a toolbar, the rail columns, and the panes where side sheets open — so the dialog itself
- * places nothing but the content. A content root that is not a layout gets a warning in
- * development mode, and the shell falls back to panes of its own, so a side sheet never opens
- * behind the dialog where nobody can see it.
- */
-class FullScreenDialog extends CdkDialogContainer {
-    surface = viewChild('surface', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
-    mainPane = viewChild('mainPane', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mainPane" }] : /* 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);
-    /** True while the shell holds the side sheet outlets, which happens without a layout only. */
-    ownsSideSheetOutlets = false;
-    isActive = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-    config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
-    get surfaceElement() {
-        return this.surface()?.nativeElement ?? null;
+class MenuItem {
+    el;
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'label' });
+    supportingText = input(null, { ...(ngDevMode ? { debugName: "supportingText" } : /* istanbul ignore next */ {}), alias: 'supporting-text' });
+    trailingText = input(null, { ...(ngDevMode ? { debugName: "trailingText" } : /* istanbul ignore next */ {}), alias: 'trailing-text' });
+    selected = model(null, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), alias: 'selected' });
+    iconElements = contentChildren(IconElement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconElements" }] : /* istanbul ignore next */ []));
+    get leading() {
+        return this.iconElements().find((icon) => icon.iconType() === 'leading');
     }
-    ngAfterViewInit() {
-        // The content is attached by now, so the layout it brings has already taken the
-        // outlets. Its panes sit under the bar regions, which is where a side sheet belongs.
-        const layout = this.findContentLayout();
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            this.checkContentLayout(layout);
-        }
-        if (layout) {
+    get trailing() {
+        return this.iconElements().find((icon) => icon.iconType() === 'trailing');
+    }
+    get showLeadingIcon() {
+        return (!!this.leading && !this.selected()) || this.selected() == true;
+    }
+    onHostClick() {
+        const selected = this.selected();
+        if (selected === null) {
             return;
         }
-        // No layout, so the shell keeps the dialog self-sufficient. Without this the next side
-        // sheet would open in the outlet underneath — the page scaffold, behind the dialog.
-        const startOutlet = this.startOutlet();
-        const endOutlet = this.endOutlet();
-        if (startOutlet) {
-            this.sheets.registerSideSheetOutlet('start', startOutlet);
-        }
-        if (endOutlet) {
-            this.sheets.registerSideSheetOutlet('end', endOutlet);
-        }
-        this.ownsSideSheetOutlets = !!startOutlet || !!endOutlet;
+        this.selected.set(!selected);
     }
-    ngOnDestroy() {
-        if (this.ownsSideSheetOutlets) {
-            const startOutlet = this.startOutlet();
-            const endOutlet = this.endOutlet();
-            if (startOutlet) {
-                this.sheets.unregisterSideSheetOutlet('start', startOutlet);
-            }
-            if (endOutlet) {
-                this.sheets.unregisterSideSheetOutlet('end', endOutlet);
-            }
-            this.ownsSideSheetOutlets = false;
-        }
-        super.ngOnDestroy();
+    constructor(el) {
+        this.el = el;
+    }
+    get element() {
+        return this.el.nativeElement;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MenuItem, isStandalone: true, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, supportingText: { classPropertyName: "supportingText", publicName: "supporting-text", isSignal: true, isRequired: false, transformFunction: null }, trailingText: { classPropertyName: "trailingText", publicName: "trailing-text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { listeners: { "click": "onHostClick()" } }, queries: [{ propertyName: "iconElements", predicate: IconElement, isSignal: true }], ngImport: i0, template: "@if (selected() !== null) {\n    <input type=\"checkbox\" md3-input-element [checked]=\"selected()\">\n}\n\n<div class=\"md3-menu-item-container\" md3-state-component>\n    <div class=\"md3-menu-item-leading\" [class.has-icon]=\"showLeadingIcon\">\n        <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        @if (!leading) {\n            <md3-icon>check</md3-icon>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-content\">\n        <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n        @if (supportingText()?.length) {\n            <md3-type-body size=\"small\">{{ supportingText() }}</md3-type-body>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-trailing\">\n        <ng-content select=\"md3-badge\"></ng-content>\n        @if (trailingText()?.length) {\n            <md3-type-title size=\"small\">{{ trailingText() }}</md3-type-title>\n        }\n        <ng-content select=\"[md3-icon-element=trailing]\"></ng-content>\n    </div>\n</div>", styles: [":host{--state-color: var(--menu-item-state-color);--border-radius: var(--menu-item-border-radius);--outline-color: var(--menu-item-outline-color);--outline-width: var(--menu-item-outline-width);--outline-offset: var(--menu-item-outline-offset);position:relative;display:block;padding:0;border:0;background:transparent;color:var(--menu-item-label-color);font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;appearance:none;-webkit-user-select:none;user-select:none;z-index:0}:host:focus{z-index:1}:host:focus:not(:hover) .md3-menu-item-container:after{opacity:1}:host:active{z-index:2}:host:active .md3-menu-item-container:after{opacity:0}:host .md3-menu-item-container{display:flex;align-items:center;min-height:3em;padding:0 .75em;border-radius:var(--border-radius);transition:background-color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;opacity:0;transform:scale(1.2);width:0;height:1.25em;color:var(--menu-item-supporting-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-leading.has-icon{margin-inline-end:.5em;opacity:1;transform:scale(1);height:1.25em;width:1.25em}:host .md3-menu-item-container .md3-menu-item-trailing{flex:0 1 content;display:inline-flex;gap:.5em;align-items:center;justify-content:center;font-size:inherit;margin-inline-start:.5em;color:var(--menu-item-supporting-color)}:host .md3-menu-item-container .md3-menu-item-trailing:empty{margin:0}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep md3-badge{background-color:var(--menu-item-badge-background);color:var(--menu-item-badge-foreground)}:host .md3-menu-item-container .md3-menu-item-trailing .md3-text-title.md3-text-small{margin:0;padding:0;white-space:nowrap;letter-spacing:.007143em}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-content{flex:1 1 auto}:host .md3-menu-item-container .md3-menu-item-content .md3-text-label.md3-text-large{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.007143em;color:var(--menu-item-label-color)}:host .md3-menu-item-container .md3-menu-item-content .md3-text-body.md3-text-small{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.0333334em;color:var(--menu-item-supporting-color)}:host [md3-input-element]{position:absolute;height:0;width:0;opacity:0;pointer-events:none}:host [md3-input-element]+.md3-menu-item-container .md3-menu-item-leading{opacity:0;transform:scale(1.2);width:0}:host [md3-input-element]:checked+.md3-menu-item-container{--menu-item-label-color: var(--menu-item-selected-foreground);--menu-item-supporting-color: var(--menu-item-selected-foreground);--border-radius: var(--md-border-radius-medium);background-color:var(--menu-item-selected-background)}:host [md3-input-element]:checked+.md3-menu-item-container .md3-menu-item-leading{opacity:1;transform:scale(1);width:1.25em}:host:disabled{cursor:default}:host:disabled .md3-menu-item-container{--menu-item-label-color: var(--menu-item-label-color);--menu-item-supporting-color: var(--menu-item-label-color);--menu-item-selected-background: transparent;--menu-item-selected-foreground: var(--menu-item-label-color);pointer-events:none;opacity:.38}:host:disabled .md3-menu-item-container.md3-state-layer,:host:disabled .md3-menu-item-container:after{display:none}\n"], dependencies: [{ kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "directive", type: StateComponent, selector: "[md3-state-component]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }, { kind: "directive", type: TypeLabel, selector: "md3-type-label, [md3-type-label]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }, { 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: MenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[md3-menu-item], a[md3-menu-item]', imports: [
+                        InputElement,
+                        StateComponent,
+                        MaterialIcon,
+                        TypeLabel,
+                        TypeBody,
+                        TypeTitle,
+                    ], host: {
+                        '(click)': 'onHostClick()',
+                    }, template: "@if (selected() !== null) {\n    <input type=\"checkbox\" md3-input-element [checked]=\"selected()\">\n}\n\n<div class=\"md3-menu-item-container\" md3-state-component>\n    <div class=\"md3-menu-item-leading\" [class.has-icon]=\"showLeadingIcon\">\n        <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        @if (!leading) {\n            <md3-icon>check</md3-icon>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-content\">\n        <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n        @if (supportingText()?.length) {\n            <md3-type-body size=\"small\">{{ supportingText() }}</md3-type-body>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-trailing\">\n        <ng-content select=\"md3-badge\"></ng-content>\n        @if (trailingText()?.length) {\n            <md3-type-title size=\"small\">{{ trailingText() }}</md3-type-title>\n        }\n        <ng-content select=\"[md3-icon-element=trailing]\"></ng-content>\n    </div>\n</div>", styles: [":host{--state-color: var(--menu-item-state-color);--border-radius: var(--menu-item-border-radius);--outline-color: var(--menu-item-outline-color);--outline-width: var(--menu-item-outline-width);--outline-offset: var(--menu-item-outline-offset);position:relative;display:block;padding:0;border:0;background:transparent;color:var(--menu-item-label-color);font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;appearance:none;-webkit-user-select:none;user-select:none;z-index:0}:host:focus{z-index:1}:host:focus:not(:hover) .md3-menu-item-container:after{opacity:1}:host:active{z-index:2}:host:active .md3-menu-item-container:after{opacity:0}:host .md3-menu-item-container{display:flex;align-items:center;min-height:3em;padding:0 .75em;border-radius:var(--border-radius);transition:background-color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;opacity:0;transform:scale(1.2);width:0;height:1.25em;color:var(--menu-item-supporting-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-leading.has-icon{margin-inline-end:.5em;opacity:1;transform:scale(1);height:1.25em;width:1.25em}:host .md3-menu-item-container .md3-menu-item-trailing{flex:0 1 content;display:inline-flex;gap:.5em;align-items:center;justify-content:center;font-size:inherit;margin-inline-start:.5em;color:var(--menu-item-supporting-color)}:host .md3-menu-item-container .md3-menu-item-trailing:empty{margin:0}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep md3-badge{background-color:var(--menu-item-badge-background);color:var(--menu-item-badge-foreground)}:host .md3-menu-item-container .md3-menu-item-trailing .md3-text-title.md3-text-small{margin:0;padding:0;white-space:nowrap;letter-spacing:.007143em}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-content{flex:1 1 auto}:host .md3-menu-item-container .md3-menu-item-content .md3-text-label.md3-text-large{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.007143em;color:var(--menu-item-label-color)}:host .md3-menu-item-container .md3-menu-item-content .md3-text-body.md3-text-small{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.0333334em;color:var(--menu-item-supporting-color)}:host [md3-input-element]{position:absolute;height:0;width:0;opacity:0;pointer-events:none}:host [md3-input-element]+.md3-menu-item-container .md3-menu-item-leading{opacity:0;transform:scale(1.2);width:0}:host [md3-input-element]:checked+.md3-menu-item-container{--menu-item-label-color: var(--menu-item-selected-foreground);--menu-item-supporting-color: var(--menu-item-selected-foreground);--border-radius: var(--md-border-radius-medium);background-color:var(--menu-item-selected-background)}:host [md3-input-element]:checked+.md3-menu-item-container .md3-menu-item-leading{opacity:1;transform:scale(1);width:1.25em}:host:disabled{cursor:default}:host:disabled .md3-menu-item-container{--menu-item-label-color: var(--menu-item-label-color);--menu-item-supporting-color: var(--menu-item-label-color);--menu-item-selected-background: transparent;--menu-item-selected-foreground: var(--menu-item-label-color);pointer-events:none;opacity:.38}:host:disabled .md3-menu-item-container.md3-state-layer,:host:disabled .md3-menu-item-container:after{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], supportingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "supporting-text", required: false }] }], trailingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing-text", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { isSignal: true }] }] } });
+
+class SelectOptions {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     /**
-     * The layout at the root of the content, if the content brought one.
-     *
-     * The root is either the layout itself, or the component that holds it — a dialog is
-     * normally opened with a component whose own template starts with `md3-layout`.
+     * The options left after the search filter of the field. SelectField writes into this
+     * signal while the menu is open, because menu inputs are bound once, at open. null means
+     * that no filter applies, so every option is shown.
      */
-    findContentLayout() {
-        const content = this.mainPane()?.nativeElement.firstElementChild;
-        if (!content) {
-            return null;
+    visibleOptions = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    /** Emits the values selected by the user. The field owns the selection state. */
+    selectionChange = output();
+    renderedOptions = computed(() => this.visibleOptions() ?? this.options(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedOptions" }] : /* istanbul ignore next */ []));
+    optionClick(option) {
+        const options = this.options();
+        if (this.multiple()) {
+            option.selected = !(option.selected ?? false);
         }
-        if (content.tagName === 'MD3-LAYOUT') {
-            return content;
+        else {
+            options.forEach((item) => {
+                item.selected = item === option;
+            });
         }
-        const root = content.firstElementChild;
-        return root?.tagName === 'MD3-LAYOUT' ? root : null;
+        // Reported from the full list, so a selected option hidden by the search is kept.
+        this.selectionChange.emit(options.filter((item) => item.selected).map((item) => item.value));
     }
-    checkContentLayout(layout) {
-        if (layout) {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectOptions, isStandalone: true, selector: "md3-select-options", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<md3-menu-group class=\"md3-scrollable\">\n    @for (item of renderedOptions(); track item.value) {\n        <button\n            md3-menu-item\n            [selected]=\"item.selected ?? false\"\n            [label]=\"item.label\"\n            [supporting-text]=\"item.supportingText ?? null\"\n            [trailing-text]=\"item.trailingText ?? null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"optionClick(item)\"\n        >\n        </button>\n    }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: MenuGroup, selector: "md3-menu-group" }, { kind: "component", type: MenuItem, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: ["label", "supporting-text", "trailing-text", "selected"], outputs: ["selectedChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-select-options', imports: [
+                        MenuGroup,
+                        MenuItem,
+                    ], template: "<md3-menu-group class=\"md3-scrollable\">\n    @for (item of renderedOptions(); track item.value) {\n        <button\n            md3-menu-item\n            [selected]=\"item.selected ?? false\"\n            [label]=\"item.label\"\n            [supporting-text]=\"item.supportingText ?? null\"\n            [trailing-text]=\"item.trailingText ?? null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"optionClick(item)\"\n        >\n        </button>\n    }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
+const MENU_CONFIG = new InjectionToken('MD3_MENU_CONFIG');
+const MENU_COMPONENT = new InjectionToken('MD3_MENU_COMPONENT');
+const MENU_EXIT_ANIMATION_FALLBACK_MS = 300;
+class MenuRef {
+    overlayRef;
+    previouslyFocusedElement;
+    closed = new Subject();
+    isClosed = false;
+    menuInstance;
+    /**
+     * Filled by MenuService 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;
+    }
+    close(result) {
+        if (this.isClosed) {
             return;
         }
-        console.warn('[md3-fullscreen-dialog] the content of a full screen dialog should start with '
-            + 'md3-layout. Without it the dialog has no bar and no rail region, so an app bar or '
-            + 'a toolbar has nowhere to go, and the content does not scroll on its own.');
-    }
-    startEnterAnimation() {
-        requestAnimationFrame(() => {
-            this.isActive.set(true);
+        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();
         });
     }
-    setActive(value) {
-        this.isActive.set(value);
+    startCloseAnimation() {
+        let panel = this.overlayRef.overlayElement;
+        let animatedElement = panel.querySelector('.md3-menu-container') ?? panel;
+        panel.classList.add('md3-menu-closing');
+        this.menuInstance?.showMenu(false);
+        return new Promise((resolve) => {
+            let isResolved = false;
+            let timeoutId = setTimeout(done, MENU_EXIT_ANIMATION_FALLBACK_MS);
+            function done() {
+                if (isResolved) {
+                    return;
+                }
+                isResolved = true;
+                clearTimeout(timeoutId);
+                animatedElement.removeEventListener('transitionend', onTransitionEnd);
+                resolve();
+            }
+            function onTransitionEnd(event) {
+                if (event.target === animatedElement) {
+                    done();
+                }
+            }
+            animatedElement.addEventListener('transitionend', onTransitionEnd);
+        });
     }
-    recaptureFocus() {
-        this._recaptureFocus();
+    afterClosed() {
+        return this.closed.asObservable();
     }
-    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: "mainPane", first: true, predicate: ["mainPane"], 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<div\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\" #mainPane>\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</div>\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);grid-template-columns:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{min-width:0;min-height:0;height:100%;max-height:100dvh;max-width:100dvw}: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<div\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\" #mainPane>\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</div>\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);grid-template-columns:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{min-width:0;min-height:0;height:100%;max-height:100dvh;max-width:100dvw}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
-        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], mainPane: [{ type: i0.ViewChild, args: ['mainPane', { 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);
-    overlayContainer = inject(OverlayContainer);
-    injector = inject(Injector);
-    document = inject(DOCUMENT);
-    /** Open dialogs, from the first one opened to the one currently on top. */
-    refs = [];
-    /**
-     * Elements the page was made of that the CDK hid from assistive technology,
-     * kept here while the dialogs are hidden and the page is given back.
-     */
-    pageAriaHidden = new Map();
+class Menu {
+    el;
+    portalOutlet = viewChild(CdkPortalOutlet, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portalOutlet" }] : /* istanbul ignore next */ []));
+    config = inject(MENU_CONFIG, { optional: true }) ?? {};
+    menuColors = signal('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuColors" }] : /* istanbul ignore next */ []));
+    isVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    scheme = signal('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []));
+    direction = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    isActive = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    get element() {
+        return this.el.nativeElement;
+    }
+    constructor(el) {
+        this.el = el;
+        effect((onCleanup) => {
+            const color = 'md3-' + this.menuColors();
+            this.element.classList.add(color);
+            onCleanup(() => {
+                this.element.classList.remove(color);
+            });
+        });
+        this.menuColors.set(this.config.menuColors ?? 'standard');
+        this.scheme.set(this.config.scheme ?? 'inherit');
+        this.direction.set(this.config.direction ?? null);
+    }
+    ngAfterContentInit() {
+        requestAnimationFrame(() => {
+            this.showMenu(true);
+        });
+    }
+    showMenu(value) {
+        this.isVisible.set(value);
+    }
     /**
-     * Page scrolling is blocked here instead of per overlay, so stacked dialogs
-     * cannot unblock the page while another dialog is still open.
+     * The service creates this wrapper first, then calls this method to mount
+     * the user supplied component into the dialog container.
      */
-    scrollBlock = this.overlay.scrollStrategies.block();
-    /** Element that was focused before the first dialog of the stack opened. */
-    rootTrigger = null;
-    pageStateQueued = false;
-    get openDialogs() {
-        return this.refs;
+    attachContent(component, injector) {
+        const portal = new ComponentPortal(component, null, injector);
+        return this.portalOutlet().attachComponentPortal(portal);
     }
-    /** Open dialogs that are currently on screen, from the bottom one up. */
-    get visibleDialogs() {
-        return this.refs.filter((ref) => !ref.isHidden);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Menu, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Menu, isStandalone: true, selector: "md3-menu", host: { attributes: { "role": "menu" }, properties: { "class.md3-visible": "isVisible()", "class.md3-inactive": "!isActive()", "class.md-scheme-dark": "scheme() == \"dark\"", "class.md-scheme-light": "scheme() == \"light\"", "dir": "direction()" }, classAttribute: "md3-menu-container" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>", 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-menu-scrim{position:absolute;inset:0;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-overlay-connected-position-bounding-box{pointer-events:none}::ng-deep .cdk-overlay-container .md3-menu-panel{pointer-events:auto}::ng-deep .cdk-overlay-container .md3-menu-panel.md3-select-menu>.md3-menu-container{--menu-min-width: 100%;--menu-max-width: 100%}::ng-deep .cdk-overlay-container .md3-menu-panel.md3-menu-closing{pointer-events:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 0;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel{position:absolute;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel.md3-menu-closing{pointer-events:none}: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);--menu-min-width: 7em;--menu-max-width: 17.5em;--menu-group-radius: var(--md-border-radius-small);--menu-group-shadow: var(--md-shadow-3dp);--menu-group-label-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-label-color: rgb(var(--md-scheme-on-surface));--menu-item-supporting-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-selected-background: rgb(var(--md-scheme-tertiary-container));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary-container));--menu-item-state-color: var(--md-scheme-on-surface);--menu-item-border-radius: var(--md-border-radius-xsmall);--menu-item-outline-color: rgb(var(--md-scheme-secondary));--menu-item-outline-width: .1875em;--menu-item-outline-offset: -.1875em;--menu-item-badge-background: rgb(var(--md-scheme-primary-container));--menu-item-badge-foreground: rgb(var(--md-scheme-on-primary-container));position:relative;display:block;font-size:1rem;min-width:var(--menu-min-width);max-width:min(var(--menu-max-width),100vw - 2rem);max-height:min(32rem,100vh - 2rem);outline:none;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8)}:host.md3-visible{opacity:1;transform:scaleY(1)}:host.md3-vibrant{--background-color: rgb(var(--md-scheme-tertiary-container));--foreground-color: rgb(var(--md-scheme-on-tertiary-container));--menu-group-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-supporting-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-selected-background: rgb(var(--md-scheme-tertiary));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary));--menu-item-state-color: var(--md-scheme-on-tertiary-container)}:host.md3-inactive{--border-radius: var(--md-border-radius-small)}:host ::ng-deep md3-menu-group{margin-top:.125em}:host ::ng-deep md3-menu-group:first-child{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: Menu, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-menu', imports: [
+                        CdkPortalOutlet,
+                    ], host: {
+                        'class': 'md3-menu-container',
+                        'role': 'menu',
+                        '[class.md3-visible]': 'isVisible()',
+                        '[class.md3-inactive]': '!isActive()',
+                        '[class.md-scheme-dark]': 'scheme() == "dark"',
+                        '[class.md-scheme-light]': 'scheme() == "light"',
+                        '[dir]': 'direction()',
+                    }, template: "<ng-template cdkPortalOutlet></ng-template>", 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-menu-scrim{position:absolute;inset:0;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-overlay-connected-position-bounding-box{pointer-events:none}::ng-deep .cdk-overlay-container .md3-menu-panel{pointer-events:auto}::ng-deep .cdk-overlay-container .md3-menu-panel.md3-select-menu>.md3-menu-container{--menu-min-width: 100%;--menu-max-width: 100%}::ng-deep .cdk-overlay-container .md3-menu-panel.md3-menu-closing{pointer-events:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 0;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel{position:absolute;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel.md3-menu-closing{pointer-events:none}: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);--menu-min-width: 7em;--menu-max-width: 17.5em;--menu-group-radius: var(--md-border-radius-small);--menu-group-shadow: var(--md-shadow-3dp);--menu-group-label-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-label-color: rgb(var(--md-scheme-on-surface));--menu-item-supporting-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-selected-background: rgb(var(--md-scheme-tertiary-container));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary-container));--menu-item-state-color: var(--md-scheme-on-surface);--menu-item-border-radius: var(--md-border-radius-xsmall);--menu-item-outline-color: rgb(var(--md-scheme-secondary));--menu-item-outline-width: .1875em;--menu-item-outline-offset: -.1875em;--menu-item-badge-background: rgb(var(--md-scheme-primary-container));--menu-item-badge-foreground: rgb(var(--md-scheme-on-primary-container));position:relative;display:block;font-size:1rem;min-width:var(--menu-min-width);max-width:min(var(--menu-max-width),100vw - 2rem);max-height:min(32rem,100vh - 2rem);outline:none;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8)}:host.md3-visible{opacity:1;transform:scaleY(1)}:host.md3-vibrant{--background-color: rgb(var(--md-scheme-tertiary-container));--foreground-color: rgb(var(--md-scheme-on-tertiary-container));--menu-group-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-supporting-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-selected-background: rgb(var(--md-scheme-tertiary));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary));--menu-item-state-color: var(--md-scheme-on-tertiary-container)}:host.md3-inactive{--border-radius: var(--md-border-radius-small)}:host ::ng-deep md3-menu-group{margin-top:.125em}:host ::ng-deep md3-menu-group:first-child{margin-top:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
+
+class MenuService {
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    document = inject(DOCUMENT);
+    open(component, config = {}) {
+        const menuConfig = this.mergeConfig(config);
+        const previouslyFocusedElement = this.getFocusedElement();
+        const triggerElement = this.resolveTriggerElement(menuConfig.origin, previouslyFocusedElement);
+        const menuOverlay = this.createOverlay(menuConfig, previouslyFocusedElement);
+        const overlayRef = menuOverlay.overlayRef;
+        const menuRef = new MenuRef(overlayRef, previouslyFocusedElement);
+        const injector = this.createInjector(component, menuConfig, menuRef);
+        // The overlay hosts the MD3 menu shell. The shell is responsible for
+        // the surface markup and receives the dynamic content through a portal.
+        const menuPortal = new ComponentPortal(Menu, menuConfig.viewContainerRef ?? null, injector);
+        const menuComponentRef = overlayRef.attach(menuPortal);
+        const contentComponentRef = menuComponentRef.instance.attachContent(component, injector);
+        this.bindDataToInputs(contentComponentRef, menuConfig);
+        this.flipPositionIfPushBreaksAnchor(menuOverlay, menuConfig);
+        menuRef.componentInstance = contentComponentRef.instance;
+        menuRef.menuInstance = menuComponentRef.instance;
+        this.bindTriggerActiveState(triggerElement, overlayRef, menuRef);
+        this.startOpenAnimation(overlayRef);
+        this.connectCloseEvents(overlayRef, menuRef, menuOverlay.origin);
+        return menuRef;
     }
-    /** The full screen dialog that is open, if there is one. */
-    get fullScreenDialog() {
-        return this.refs.find((ref) => ref.isFullScreen && !ref.isClosing);
+    openSubMenu(component, config = {}) {
+        const xPosition = this.getSubMenuXPosition(config.xPosition);
+        const yPosition = config.yPosition ?? 'below';
+        const offsetX = config.offsetX ?? 0;
+        const offsetY = config.offsetY ?? 0;
+        const subMenuConfig = {
+            ...config,
+            isSubMenu: true,
+            xPosition,
+            yPosition,
+            overlapTrigger: config.overlapTrigger ?? true,
+            offsetX,
+            offsetY,
+            scheme: config.scheme ?? 'inherit',
+            direction: config.direction ?? null,
+        };
+        return this.open(component, subMenuConfig);
     }
-    open(component, config = {}) {
-        const dialogConfig = this.mergeConfig(config);
-        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,
+    mergeConfig(config) {
+        const viewportMargin = this.getViewportMargin(config.viewportMargin);
+        return {
+            data: config.data,
+            bindDataToInputs: config.bindDataToInputs ?? false,
+            isSubMenu: config.isSubMenu ?? false,
+            menuColors: config.menuColors ?? 'standard',
+            origin: config.origin,
+            xPosition: config.xPosition ?? 'start',
+            yPosition: config.yPosition ?? 'below',
+            overlapTrigger: config.overlapTrigger ?? false,
+            offsetX: config.offsetX ?? 0,
+            offsetY: config.offsetY ?? 4,
+            viewportMargin,
+            positions: config.positions,
+            scrollStrategy: config.scrollStrategy ?? 'reposition',
+            scheme: config.scheme ?? 'inherit',
+            direction: config.direction ?? null,
+            viewContainerRef: config.viewContainerRef,
+            injector: config.injector ?? this.injector,
+        };
+    }
+    isSelectInput(origin) {
+        return origin?.tagName.toLowerCase() == 'input' && origin?.classList.contains('md3-select-input');
+    }
+    createOverlay(config, fallbackOrigin) {
+        const origin = this.resolveOrigin(config.origin, fallbackOrigin);
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(origin)
+            .withFlexibleDimensions(false)
+            .withGrowAfterOpen(true)
+            .withPush(true)
+            .withViewportMargin(config.viewportMargin)
+            .withPositions(config.positions ?? this.getInitialConnectedPositions(config))
+            .withTransformOriginOn('.md3-menu-container');
+        const isSelectInput = this.isSelectInput(origin);
+        const originRect = this.getOriginClientRect(origin);
+        const minWidth = !isSelectInput ? undefined : originRect.width;
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: !isSelectInput,
+            backdropClass: ['md3-menu-scrim', 'md3-menu-opening'],
+            panelClass: ['md3-menu-panel', 'md3-menu-opening', ...(isSelectInput ? ['md3-select-menu'] : [])],
+            positionStrategy,
+            scrollStrategy: this.getScrollStrategy(config.scrollStrategy),
+            minWidth: minWidth,
         });
-        this.registerDialog(dialogRef, cdkRef, dialogConfig, previousRef);
-        return dialogRef;
+        return {
+            overlayRef: this.overlay.create(overlayConfig),
+            positionStrategy: config.positions ? undefined : positionStrategy,
+            origin,
+        };
     }
-    /**
-     * 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.
-     * `previousDialog` decides what happens to the dialogs it replaces, the
-     * same way it does for a regular dialog.
-     */
-    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.dismissPreviousContext(dialogConfig.previousDialog);
+    bindTriggerActiveState(triggerElement, overlayRef, menuRef) {
+        if (!triggerElement) {
+            return;
         }
-        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;
+        const removeActiveClass = () => triggerElement.classList.remove('md3-menu-active');
+        triggerElement.classList.add('md3-menu-active');
+        menuRef.afterClosed().pipe(take(1)).subscribe(removeActiveClass);
+        overlayRef.detachments().pipe(take(1)).subscribe(removeActiveClass);
     }
-    /** 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);
+    resolveOrigin(origin, fallbackOrigin) {
+        const resolvedOrigin = origin ?? fallbackOrigin;
+        if (resolvedOrigin) {
+            if (this.isMouseEvent(resolvedOrigin)) {
+                if (resolvedOrigin.currentTarget instanceof HTMLElement) {
+                    return resolvedOrigin.currentTarget;
+                }
+                return {
+                    x: resolvedOrigin.clientX,
+                    y: resolvedOrigin.clientY,
+                };
+            }
+            if (this.isElementRef(resolvedOrigin)) {
+                return resolvedOrigin.nativeElement;
+            }
+            return resolvedOrigin;
+        }
+        const viewport = this.document.defaultView;
+        return {
+            x: (viewport?.innerWidth ?? 0) / 2,
+            y: (viewport?.innerHeight ?? 0) / 2,
+        };
+    }
+    resolveTriggerElement(origin, fallbackOrigin) {
+        const resolvedOrigin = origin ?? fallbackOrigin;
+        if (!resolvedOrigin) {
+            return null;
         }
-        this.refs.push(dialogRef);
-        this.syncPageState();
-        if (previousRef) {
-            setTimeout(() => this.startReplacingAnimation(dialogRef, previousRef), DIALOG_HANDOVER_DELAY_MS);
+        if (this.isMouseEvent(resolvedOrigin)) {
+            return resolvedOrigin.currentTarget instanceof HTMLElement
+                ? resolvedOrigin.currentTarget
+                : null;
         }
-        else {
-            this.startOpenAnimation(dialogRef);
+        if (this.isElementRef(resolvedOrigin)) {
+            return resolvedOrigin.nativeElement;
         }
-        // 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));
-        // Hiding and showing can also come straight from the reference, so the
-        // page state is driven by what the dialogs report rather than by the
-        // calls that went through this service.
-        dialogRef.hiddenChanged().subscribe(() => this.syncPageState());
-    }
-    /**
-     * Hides every dialog that is on screen, the full screen one included, with
-     * the closing animation. They stay alive with their content and state, the
-     * page underneath becomes usable, and showAll() puts them back. The promise
-     * resolves once they are all out of sight.
-     */
-    hideAll() {
-        const visible = this.refs.filter((ref) => !ref.isHidden && !ref.isClosing);
-        return Promise.all(visible.map((ref) => ref.hide())).then(() => undefined);
+        return resolvedOrigin instanceof HTMLElement ? resolvedOrigin : null;
     }
-    /**
-     * Brings the dialogs back on screen, whether they were hidden one by one or
-     * all at once: the dialog that was on top returns, along with the full
-     * screen dialog it sits in. Dialogs hidden behind another dialog stay
-     * hidden, since that is where they belong once the stack is back.
-     */
-    showAll() {
-        const topRef = this.topRef();
-        if (!topRef) {
+    flipPositionIfPushBreaksAnchor(menuOverlay, config) {
+        if (!menuOverlay.positionStrategy) {
             return;
         }
-        const fullScreenRef = this.fullScreenDialog;
-        // The full screen dialog is the context the top one sits in, so it
-        // comes back first and the dialog on top ends up on top, with the focus.
-        if (fullScreenRef && fullScreenRef !== topRef && fullScreenRef.isHidden) {
-            fullScreenRef.show();
-        }
-        if (topRef.isHidden) {
-            topRef.show();
+        menuOverlay.overlayRef.updatePosition();
+        const fallbackPosition = this.getFallbackPositionAfterPush(config, this.getOriginClientRect(menuOverlay.origin), menuOverlay.overlayRef.overlayElement.getBoundingClientRect());
+        if (!fallbackPosition) {
+            return;
         }
+        menuOverlay.positionStrategy.withPositions([fallbackPosition]);
+        menuOverlay.overlayRef.updatePosition();
     }
-    /** 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);
+    getInitialConnectedPositions(config) {
+        return [this.getPreferredConnectedPosition(config)];
     }
-    /** 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);
+    getPreferredConnectedPosition(config) {
+        if (config.isSubMenu) {
+            return this.createSubMenuConnectedPosition(this.getSubMenuXPosition(config.xPosition), this.getSubMenuVerticalAlignment(config.yPosition), config.offsetX, config.offsetY);
+        }
+        return this.createConnectedPosition(config.xPosition, config.yPosition, config);
     }
-    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 ?? '',
-            ariaDescribedBy: config.ariaDescribedBy ?? '',
-            scheme: config.scheme ?? 'inherit',
-            direction: config.direction ?? null,
-            viewContainerRef: config.viewContainerRef,
-            injector: config.injector ?? this.injector,
-        };
+    getFallbackPositionAfterPush(config, originRect, overlayRect) {
+        const xPosition = this.shouldFlipXPosition(config, originRect, overlayRect)
+            ? this.getFallbackXPosition(config.xPosition)
+            : config.xPosition;
+        const yPosition = this.shouldFlipYPosition(config, originRect, overlayRect)
+            ? this.getFallbackYPosition(config.yPosition)
+            : config.yPosition;
+        if (xPosition === config.xPosition && yPosition === config.yPosition) {
+            return null;
+        }
+        return this.getPreferredConnectedPosition({
+            ...config,
+            xPosition,
+            yPosition,
+        });
     }
-    /**
-     * 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();
+    shouldFlipXPosition(config, originRect, overlayRect) {
+        const tolerance = config.viewportMargin;
+        switch (config.xPosition) {
+            case 'before':
+                return overlayRect.right > originRect.left + tolerance;
+            case 'after':
+                return overlayRect.left < originRect.right - tolerance;
+            case 'start':
+                return originRect.left < overlayRect.left - tolerance
+                    || originRect.left > overlayRect.right + tolerance;
+            case 'end':
+                return originRect.right < overlayRect.left - tolerance
+                    || originRect.right > overlayRect.right + tolerance;
+            case 'center':
+            default:
+                return false;
+        }
     }
-    /**
-     * The same choice for a full screen dialog, applied to everything that is
-     * on screen: what it takes over from is a whole context, a full screen
-     * dialog of its own included. `hide` keeps that context alive, and it comes
-     * back as it was once this dialog closes.
-     */
-    dismissPreviousContext(behavior) {
-        return behavior === 'hide' ? this.hideAll() : this.closeAll();
+    shouldFlipYPosition(config, originRect, overlayRect) {
+        const tolerance = config.viewportMargin;
+        if (config.isSubMenu) {
+            const anchorY = config.yPosition === 'above' ? originRect.bottom : originRect.top;
+            return anchorY < overlayRect.top - tolerance
+                || anchorY > overlayRect.bottom + tolerance;
+        }
+        if (config.overlapTrigger) {
+            const anchorY = config.yPosition === 'above' ? originRect.bottom : originRect.top;
+            return anchorY < overlayRect.top - tolerance
+                || anchorY > overlayRect.bottom + tolerance;
+        }
+        switch (config.yPosition) {
+            case 'above':
+                return overlayRect.bottom > originRect.top + tolerance;
+            case 'below':
+                return overlayRect.top < originRect.bottom - tolerance;
+            case 'center':
+            default:
+                return false;
+        }
     }
-    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
-        // one frame, force style calculation, then remove it so CSS transitions
-        // have a real from/to state.
-        requestAnimationFrame(() => {
-            setTimeout(() => {
-                panel.getBoundingClientRect();
-                panel.classList.remove(OPENING_CLASS);
-                backdrop?.classList.remove(OPENING_CLASS);
-            }, 100);
-        });
-        dialogRef.dialogInstance?.startEnterAnimation();
+    createConnectedPosition(xPosition, yPosition, config) {
+        const horizontal = this.getHorizontalPosition(xPosition);
+        const vertical = this.getVerticalPosition(yPosition, config.overlapTrigger);
+        return {
+            ...horizontal,
+            ...vertical,
+            offsetX: config.offsetX,
+            offsetY: this.getOffsetY(yPosition, config),
+            panelClass: [
+                'md3-menu-position-' + xPosition,
+                'md3-menu-position-' + yPosition,
+            ],
+        };
     }
-    /** 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();
+    createSubMenuConnectedPosition(xPosition, yAlignment, offsetX, offsetY) {
+        const horizontal = this.getHorizontalPosition(xPosition);
+        const yPosition = yAlignment === 'top' ? 'below' : 'above';
+        return {
+            ...horizontal,
+            originY: yAlignment,
+            overlayY: yAlignment,
+            offsetX: this.getSubMenuOffsetX(xPosition, offsetX),
+            offsetY: this.getSubMenuOffsetY(yAlignment, offsetY),
+            panelClass: [
+                'md3-menu-position-' + xPosition,
+                'md3-menu-position-' + yPosition,
+                'md3-menu-position-submenu',
+            ],
+        };
     }
-    /** Opening animation for a dialog coming back from behind a closing one. */
-    startRestoringAnimation(closingRef, previousRef) {
-        if (previousRef.isClosing) {
-            return;
+    getHorizontalPosition(position) {
+        switch (position) {
+            case 'end':
+                return {
+                    originX: 'end',
+                    overlayX: 'end',
+                };
+            case 'before':
+                return {
+                    originX: 'start',
+                    overlayX: 'end',
+                };
+            case 'after':
+                return {
+                    originX: 'end',
+                    overlayX: 'start',
+                };
+            case 'center':
+                return {
+                    originX: 'center',
+                    overlayX: 'center',
+                };
+            case 'start':
+            default:
+                return {
+                    originX: 'start',
+                    overlayX: 'start',
+                };
         }
-        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;
+    getVerticalPosition(position, overlapTrigger) {
+        switch (position) {
+            case 'above':
+                return {
+                    originY: overlapTrigger ? 'bottom' : 'top',
+                    overlayY: 'bottom',
+                };
+            case 'center':
+                return {
+                    originY: 'center',
+                    overlayY: 'center',
+                };
+            case 'below':
+            default:
+                return {
+                    originY: overlapTrigger ? 'top' : 'bottom',
+                    overlayY: 'top',
+                };
         }
-        // Nothing to hand over either: the dialog leaving carries no scrim, so
-        // the one coming in fades its own in rather than switching it on in a
-        // single frame. This is a full screen dialog closing over a dialog that
-        // was hidden underneath it.
-        if (!from) {
-            return;
+    }
+    getFallbackXPosition(position) {
+        switch (position) {
+            case 'start':
+                return 'end';
+            case 'end':
+                return 'start';
+            case 'before':
+                return 'after';
+            case 'after':
+                return 'before';
+            case 'center':
+            default:
+                return 'center';
         }
-        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);
-        });
+    getSubMenuXPosition(position) {
+        return position === 'before' ? 'before' : 'after';
     }
-    bindDataToInputs(componentRef, config) {
-        if (!config.bindDataToInputs || !this.canBindDataToInputs(config.data)) {
-            return;
+    getFallbackYPosition(position) {
+        switch (position) {
+            case 'above':
+                return 'below';
+            case 'below':
+                return 'above';
+            case 'center':
+            default:
+                return 'center';
         }
-        // setInput runs Angular's normal input pipeline, so input setters,
-        // transforms, signal inputs, and change detection are handled for us.
-        Object.entries(config.data).forEach(([inputName, inputValue]) => {
-            componentRef.setInput(inputName, inputValue);
-        });
     }
-    canBindDataToInputs(data) {
-        return typeof data === 'object' && data !== null && !Array.isArray(data);
+    getSubMenuVerticalAlignment(position) {
+        return position === 'above' ? 'bottom' : 'top';
     }
-    /** 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];
-            }
+    getOriginClientRect(origin) {
+        if ('getBoundingClientRect' in origin) {
+            return origin.getBoundingClientRect();
         }
-        return undefined;
+        return {
+            x: origin.x,
+            y: origin.y,
+            top: origin.y,
+            right: origin.x,
+            bottom: origin.y,
+            left: origin.x,
+            width: 0,
+            height: 0,
+        };
     }
-    /**
-     * 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;
+    getViewportMargin(configuredMargin) {
+        const minimumMargin = this.getHalfEmInPixels();
+        return Math.max(configuredMargin ?? minimumMargin, minimumMargin);
     }
-    restorePreviousDialog(ref) {
-        const index = this.refs.indexOf(ref);
-        if (index < 1) {
-            return;
-        }
-        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.showHostFullScreenDialog(previousRef);
-                this.startRestoringAnimation(ref, previousRef);
-            }, DIALOG_HANDOVER_DELAY_MS);
-            return;
-        }
+    getHalfEmInPixels() {
+        const viewport = this.document.defaultView;
+        const fontSize = viewport?.getComputedStyle(this.document.documentElement).fontSize;
+        const pixels = fontSize ? Number.parseFloat(fontSize) * 0.5 : 8;
+        return Number.isFinite(pixels) ? pixels : 8;
     }
-    /**
-     * Brings back the full screen dialog a restored dialog sits in. The two are
-     * hidden together when a full screen dialog takes over with
-     * `previousDialog: 'hide'`, so the context has to be on screen again before
-     * the dialog that sits on top of it, exactly as showAll() puts them back.
-     */
-    showHostFullScreenDialog(ref) {
-        if (ref.isFullScreen) {
-            return;
-        }
-        const hostRef = this.fullScreenDialog;
-        if (hostRef?.isHidden && this.refs.indexOf(hostRef) < this.refs.indexOf(ref)) {
-            hostRef.show();
+    getOffsetY(position, config) {
+        if (config.overlapTrigger || position === 'center') {
+            return 0;
         }
+        return position === 'above'
+            ? config.offsetY * -1
+            : config.offsetY;
     }
-    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.syncPageState();
+    getSubMenuOffsetX(position, offsetX) {
+        return position === 'before' ? offsetX * -1 : offsetX;
     }
-    /**
-     * State that belongs to the dialogs as a whole rather than to one of them:
-     * page scrolling, the page being hidden from assistive technology, and
-     * where focus sits. Applied in a task of its own, so a dialog handing the
-     * screen over to another one does not give the page back and take it again
-     * within the same frame.
-     */
-    syncPageState() {
-        if (this.pageStateQueued) {
-            return;
-        }
-        this.pageStateQueued = true;
-        setTimeout(() => {
-            this.pageStateQueued = false;
-            this.applyPageState();
-        });
+    getSubMenuOffsetY(alignment, offsetY) {
+        return alignment === 'bottom' ? offsetY * -1 : offsetY;
     }
-    applyPageState() {
-        const hasVisibleDialog = this.refs.some((ref) => !ref.isHidden);
-        if (hasVisibleDialog) {
-            this.scrollBlock.enable();
-        }
-        else {
-            this.scrollBlock.disable();
-        }
-        if (this.refs.length === 0) {
-            // Nothing is open anymore: the CDK gives the page back to assistive
-            // technology on its own, so there is nothing left to restore here.
-            this.pageAriaHidden.clear();
-            return;
-        }
-        if (hasVisibleDialog) {
-            this.hidePageFromAssistiveTechnology();
-            return;
+    getScrollStrategy(scrollStrategy) {
+        switch (scrollStrategy) {
+            case 'block':
+                return this.overlay.scrollStrategies.block();
+            case 'close':
+                return this.overlay.scrollStrategies.close();
+            case 'noop':
+                return this.overlay.scrollStrategies.noop();
+            case 'reposition':
+            default:
+                return this.overlay.scrollStrategies.reposition();
         }
-        this.exposePageToAssistiveTechnology();
-        this.releaseFocus();
     }
-    /**
-     * Gives the page back to assistive technology while every dialog is hidden.
-     * The CDK hides it for as long as a dialog is open, which would otherwise
-     * leave nothing to read at all once the dialogs are out of sight.
-     */
-    exposePageToAssistiveTechnology() {
-        if (this.pageAriaHidden.size > 0) {
-            return;
-        }
-        const container = this.overlayContainer.getContainerElement();
-        Array.from(container.parentElement?.children ?? []).forEach((sibling) => {
-            const value = sibling.getAttribute('aria-hidden');
-            if (sibling === container || value === null) {
-                return;
-            }
-            this.pageAriaHidden.set(sibling, value);
-            sibling.removeAttribute('aria-hidden');
+    isMouseEvent(origin) {
+        return typeof MouseEvent !== 'undefined' && origin instanceof MouseEvent;
+    }
+    isElementRef(origin) {
+        return typeof origin === 'object'
+            && origin !== null
+            && 'nativeElement' in origin
+            && origin.nativeElement instanceof HTMLElement;
+    }
+    startOpenAnimation(overlayRef) {
+        const panel = overlayRef.overlayElement;
+        const backdrop = overlayRef.backdropElement;
+        // The overlay is inserted already rendered. Keep an initial class for
+        // one frame, force style calculation, then remove it so CSS transitions
+        // have a real from/to state.
+        requestAnimationFrame(() => {
+            setTimeout(() => {
+                panel.getBoundingClientRect();
+                panel.classList.remove('md3-menu-opening');
+                backdrop?.classList.remove('md3-menu-opening');
+            }, 100);
         });
     }
-    /** Hides the page again as soon as a dialog is back on screen. */
-    hidePageFromAssistiveTechnology() {
-        this.pageAriaHidden.forEach((value, element) => {
-            element.setAttribute('aria-hidden', value);
+    createInjector(component, config, menuRef) {
+        return Injector.create({
+            parent: config.injector,
+            providers: [
+                // These tokens make the menu controllable from the dynamic
+                // component without coupling that component to the service.
+                { provide: MenuRef, useValue: menuRef },
+                { provide: MENU_DATA, useValue: config.data },
+                { provide: MENU_CONFIG, useValue: config },
+                { provide: MENU_COMPONENT, useValue: component },
+            ],
         });
-        this.pageAriaHidden.clear();
     }
-    /**
-     * Focus follows the dialogs off the screen: it goes back to whatever opened
-     * the stack, so the page stays usable with the keyboard while the dialogs
-     * wait behind it. Focus that already moved somewhere else is left alone.
-     */
-    releaseFocus() {
-        const activeElement = this.document.activeElement;
-        if (this.rootTrigger && (!activeElement || activeElement === this.document.body)) {
-            this.rootTrigger.focus();
+    bindDataToInputs(componentRef, config) {
+        if (!config.bindDataToInputs || !this.canBindDataToInputs(config.data)) {
+            return;
+        }
+        // setInput runs Angular's normal input pipeline, so input setters,
+        // transforms, signal inputs, and change detection are handled for us.
+        Object.entries(config.data).forEach(([inputName, inputValue]) => {
+            componentRef.setInput(inputName, inputValue);
+        });
+    }
+    connectCloseEvents(overlayRef, menuRef, origin) {
+        overlayRef.backdropClick().pipe(take(1)).subscribe(() => menuRef.close());
+        overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape'), take(1)).subscribe(() => menuRef.close());
+        if (this.isSelectInput(origin)) {
+            const originRect = this.getOriginClientRect(origin);
+            overlayRef.outsidePointerEvents().pipe(filter((event) => {
+                const clickedInsideOrigin = event.clientX >= originRect.left &&
+                    event.clientX <= originRect.right &&
+                    event.clientY >= originRect.top &&
+                    event.clientY <= originRect.bottom;
+                return !clickedInsideOrigin;
+            })).subscribe(() => menuRef.close());
         }
     }
     getFocusedElement() {
         const activeElement = this.document.activeElement;
         return activeElement instanceof HTMLElement ? activeElement : null;
     }
-    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' });
+    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: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class DialogHeader {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogHeader, isStandalone: true, selector: "md3-dialog-header", ngImport: i0, template: "<ng-content select=\"[md3-icon-element]\"></ng-content>\n<div class=\"md3-dialog-title\">\n    <md3-type-headline size=\"small\">\n        <ng-content></ng-content>\n    </md3-type-headline>\n</div>", styles: [":host{display:block;margin:1.5em 1.5em 1em;text-align:center}:host .md3-dialog-title{text-align:start;color:rgb(var(--md-scheme-on-surface))}:host ::ng-deep [md3-icon-element]{color:rgb(var(--md-scheme-secondary))}:host ::ng-deep [md3-icon-element]+.md3-dialog-title{margin-top:1em;text-align:center}\n"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogHeader, decorators: [{
-            type: Component,
-            args: [{ selector: 'md3-dialog-header', imports: [
-                        TypeHeadline
-                    ], template: "<ng-content select=\"[md3-icon-element]\"></ng-content>\n<div class=\"md3-dialog-title\">\n    <md3-type-headline size=\"small\">\n        <ng-content></ng-content>\n    </md3-type-headline>\n</div>", styles: [":host{display:block;margin:1.5em 1.5em 1em;text-align:center}:host .md3-dialog-title{text-align:start;color:rgb(var(--md-scheme-on-surface))}:host ::ng-deep [md3-icon-element]{color:rgb(var(--md-scheme-secondary))}:host ::ng-deep [md3-icon-element]+.md3-dialog-title{margin-top:1em;text-align:center}\n"] }]
-        }] });
-
-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", host: { classAttribute: "md3-scrollable" }, ngImport: i0, template: "<ng-content></ng-content>", 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"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogBody, decorators: [{
-            type: Component,
-            args: [{ selector: 'md3-dialog-body', imports: [], host: {
-                        'class': 'md3-scrollable',
-                    }, template: "<ng-content></ng-content>", 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 {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogActions, isStandalone: true, selector: "md3-dialog-actions", ngImport: i0, 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"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogActions, decorators: [{
-            type: Component,
-            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"] }]
-        }] });
-
-const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
-const MENU_CONFIG = new InjectionToken('MD3_MENU_CONFIG');
-const MENU_COMPONENT = new InjectionToken('MD3_MENU_COMPONENT');
-const MENU_EXIT_ANIMATION_FALLBACK_MS = 300;
-class MenuRef {
-    overlayRef;
-    previouslyFocusedElement;
-    closed = new Subject();
-    isClosed = false;
-    menuInstance;
+class SelectField {
+    menuService;
+    viewContainerRef;
     /**
-     * Filled by MenuService after the user component is attached. Keeping the
-     * instance here lets callers imperatively update inputs when that is useful.
+     * Form directive placed on the host element: [formControl], formControlName or [(ngModel)].
+     * The accessor is registered from the constructor instead of through an NG_VALUE_ACCESSOR
+     * provider, which keeps the directive injectable here and gives access to the control
+     * itself for the error state forwarded to md3-text-field.
      */
-    componentInstance;
-    constructor(overlayRef, previouslyFocusedElement) {
-        this.overlayRef = overlayRef;
-        this.previouslyFocusedElement = previouslyFocusedElement;
-    }
-    close(result) {
-        if (this.isClosed) {
-            return;
+    ngControl = inject(NgControl, { self: true, optional: true });
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Lets the user type in the field to filter the options. While the field has focus it
+     * acts as a search box; the selected options are shown again as soon as it loses focus.
+     */
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    label = input(null, { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'label' });
+    /**
+     * Formats the text shown in the field. The default joins the labels of the selected
+     * options with a comma, so the field shows as many labels as its width allows.
+     * The formatter is not called for an empty selection: the field stays empty, which keeps
+     * the floating label in its place.
+     */
+    displayWith = input(null, { ...(ngDevMode ? { debugName: "displayWith" } : /* istanbul ignore next */ {}), alias: 'display-with' });
+    /**
+     * Disables the field outside of a form. With reactive forms prefer control.disable().
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    menuColors = input('standard', { ...(ngDevMode ? { debugName: "menuColors" } : /* istanbul ignore next */ {}), alias: 'menu-colors' });
+    fieldType = input('filled', { ...(ngDevMode ? { debugName: "fieldType" } : /* istanbul ignore next */ {}), alias: 'field-type' });
+    /**
+     * Control passed explicitly, mirroring md3-text-field. Takes precedence over a form
+     * directive on the host element.
+     */
+    control = input(undefined, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), alias: 'control' });
+    iconElements = contentChildren(IconElement, { ...(ngDevMode ? { debugName: "iconElements" } : /* istanbul ignore next */ {}), descendants: true });
+    hasLeadingIcon = computed(() => this.iconElements().some(i => i.iconType() === 'leading') ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLeadingIcon" }] : /* istanbul ignore next */ []));
+    hasArrowIcon = computed(() => this.iconElements().some(i => i.iconType() === 'arrow') ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasArrowIcon" }] : /* istanbul ignore next */ []));
+    isMenuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : /* istanbul ignore next */ []));
+    menuRef = null;
+    inputElement = viewChild(InputElement, { ...(ngDevMode ? { debugName: "inputElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** Control resolved from the host form directive, captured when the accessor is wired up. */
+    hostControl = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostControl" }] : /* istanbul ignore next */ []));
+    /** Disabled state pushed by the control, either through setDisabledState or control.disabled. */
+    controlDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Set as soon as a control writes a value. From then on the control owns the selection and
+     * SelectOption.selected no longer seeds it.
+     */
+    controlOwnsValue = false;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Selection is kept by value so it survives options arriving or being replaced later. */
+    selectedValues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    isInputFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInputFocused" }] : /* istanbul ignore next */ []));
+    formControl = computed(() => this.control() ?? this.hostControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.controlDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    selectedOptions = computed(() => {
+        const values = this.selectedValues();
+        return this.options().filter((option) => values.includes(option.value));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    selectedText = computed(() => {
+        const selected = this.selectedOptions();
+        if (selected.length == 0) {
+            return null;
         }
-        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();
-        });
-    }
-    startCloseAnimation() {
-        let panel = this.overlayRef.overlayElement;
-        let animatedElement = panel.querySelector('.md3-menu-container') ?? panel;
-        panel.classList.add('md3-menu-closing');
-        this.menuInstance?.showMenu(false);
-        return new Promise((resolve) => {
-            let isResolved = false;
-            let timeoutId = setTimeout(done, MENU_EXIT_ANIMATION_FALLBACK_MS);
-            function done() {
-                if (isResolved) {
+        const format = this.displayWith();
+        if (format) {
+            return format(selected);
+        }
+        return selected.map((option) => option.label).join(', ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
+    /** True while the field acts as a search box instead of showing the selection. */
+    isSearching = computed(() => this.searchable() && !this.isDisabled() && this.isInputFocused(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
+    /** What the input element shows: the search query while searching, the selection otherwise. */
+    displayText = computed(() => this.isSearching() ? this.searchQuery() : this.selectedText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    /**
+     * Each option paired with the text the search runs against. It is rebuilt only when the
+     * options array changes, so typing does not normalize the same text again and again.
+     * The fields are joined with a character the query can never contain, which stops a query
+     * from matching across two fields.
+     */
+    searchIndex = computed(() => {
+        return this.options().map((option) => ({
+            option,
+            text: [option.label, String(option.value), option.supportingText, option.trailingText]
+                .filter((field) => !!field)
+                .map((field) => this.normalizeSearchText(field))
+                .join('\u0000'),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchIndex" }] : /* istanbul ignore next */ []));
+    /** The options the menu shows. Options that do not match the query are hidden. */
+    filteredOptions = computed(() => {
+        const query = this.normalizeSearchText(this.searchQuery());
+        if (!this.searchable() || query.length == 0) {
+            return this.options();
+        }
+        return this.searchIndex()
+            .filter((entry) => entry.text.includes(query))
+            .map((entry) => entry.option);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    constructor(menuService, viewContainerRef) {
+        this.menuService = menuService;
+        this.viewContainerRef = viewContainerRef;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        // Seeds the selection from SelectOption.selected while no control owns the value.
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (this.controlOwnsValue) {
                     return;
                 }
-                isResolved = true;
-                clearTimeout(timeoutId);
-                animatedElement.removeEventListener('transitionend', onTransitionEnd);
-                resolve();
-            }
-            function onTransitionEnd(event) {
-                if (event.target === animatedElement) {
-                    done();
+                let selected = options.filter((option) => option.selected);
+                if (!this.multiple() && selected.length > 1) {
+                    selected = [selected[0]];
                 }
+                this.setSelectedValues(selected.map((option) => option.value));
+            });
+        });
+        // Mirrors the selection back onto SelectOption.selected so the menu renders it.
+        effect(() => {
+            const values = this.selectedValues();
+            for (const option of this.options()) {
+                option.selected = values.includes(option.value);
             }
-            animatedElement.addEventListener('transitionend', onTransitionEnd);
+        });
+        // [control] is bound manually; [formControl]/formControlName go through the accessor API.
+        effect((onCleanup) => {
+            const control = this.control();
+            if (!control) {
+                return;
+            }
+            this.syncFromControl(control);
+            const controlEvents = control.events.subscribe(() => this.syncFromControl(control));
+            onCleanup(() => controlEvents.unsubscribe());
+        });
+        effect(() => {
+            const isOpen = this.isMenuOpen();
+            untracked(() => {
+                if (isOpen) {
+                    this.openSelectOptions();
+                    return;
+                }
+                this.menuRef?.close();
+                this.menuRef = null;
+                this.searchQuery.set('');
+            });
+        });
+        // Keeps an open menu in step with the query. The menu binds its inputs once, at open.
+        effect(() => {
+            const filtered = this.filteredOptions();
+            untracked(() => this.menuRef?.componentInstance?.visibleOptions.set(filtered));
         });
     }
-    afterClosed() {
-        return this.closed.asObservable();
+    // Search
+    onSearchFocus() {
+        this.isInputFocused.set(true);
+    }
+    onSearchBlur() {
+        this.isInputFocused.set(false);
+        this.searchQuery.set('');
+    }
+    onSearchInput(event) {
+        if (!this.searchable()) {
+            return;
+        }
+        this.searchQuery.set(event.target.value);
+        this.openMenu();
+    }
+    /** Lower-cases the text and removes everything that is not a letter or a digit. */
+    normalizeSearchText(text) {
+        return text.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, '');
+    }
+    // ControlValueAccessor
+    writeValue(value) {
+        this.captureHostControl();
+        this.controlOwnsValue = true;
+        this.setSelectedValues(this.normalizeValues(value));
+    }
+    registerOnChange(fn) {
+        this.captureHostControl();
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.controlDisabled.set(isDisabled);
+    }
+    // Menu
+    openMenu() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.isMenuOpen.set(true);
+    }
+    closeMenu() {
+        this.isMenuOpen.set(false);
+    }
+    toggleMenu() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.isMenuOpen.update(current => !current);
+    }
+    openSelectOptions() {
+        this.menuRef = this.menuService.open(SelectOptions, {
+            data: {
+                options: this.options(),
+                multiple: this.multiple(),
+            },
+            bindDataToInputs: true,
+            menuColors: this.menuColors(),
+            origin: this.inputElement(),
+            xPosition: 'start',
+            yPosition: 'below',
+            overlapTrigger: false,
+            // scrollStrategy: 'close',
+            viewContainerRef: this.viewContainerRef,
+        });
+        this.menuRef.componentInstance?.visibleOptions.set(this.filteredOptions());
+        this.menuRef.componentInstance?.selectionChange.subscribe((values) => this.selectValues(values));
+        this.menuRef.afterClosed().subscribe(() => {
+            this.isMenuOpen.set(false);
+            this.markAsTouched();
+        });
+    }
+    // Selection
+    selectValues(values) {
+        this.setSelectedValues(this.normalizeValues(values));
+        this.commitValue();
+    }
+    setSelectedValues(values) {
+        const current = untracked(this.selectedValues);
+        if (current.length === values.length && current.every((value, index) => value === values[index])) {
+            return;
+        }
+        this.selectedValues.set(values);
+    }
+    commitValue() {
+        const value = this.currentValue();
+        // No-op unless a form directive registered an accessor callback.
+        this.onChange(value);
+        const control = this.control();
+        if (control && !this.valuesAreEqual(control.value, value)) {
+            control.markAsDirty();
+            control.setValue(value);
+        }
+    }
+    currentValue() {
+        const values = untracked(this.selectedValues);
+        if (this.multiple()) {
+            return [...values];
+        }
+        return values.length > 0 ? values[0] : null;
+    }
+    markAsTouched() {
+        this.onTouched();
+        const control = this.control();
+        if (control && !control.touched) {
+            control.markAsTouched();
+        }
+    }
+    syncFromControl(control) {
+        this.controlOwnsValue = true;
+        this.setSelectedValues(this.normalizeValues(control.value));
+        this.controlDisabled.set(control.disabled);
+    }
+    captureHostControl() {
+        const control = this.ngControl?.control ?? undefined;
+        if (control && untracked(this.hostControl) !== control) {
+            this.hostControl.set(control);
+        }
+    }
+    /**
+     * Accepts whatever a control holds and reduces it to the option values this field can show:
+     * a single value for single selection, a de-duplicated list for multiple selection.
+     */
+    normalizeValues(value) {
+        const values = (Array.isArray(value) ? value : [value])
+            .filter((item) => typeof item === 'string' || typeof item === 'number');
+        const unique = [...new Set(values)];
+        return this.multiple() ? unique : unique.slice(0, 1);
+    }
+    valuesAreEqual(current, next) {
+        if (Array.isArray(current) && Array.isArray(next)) {
+            return current.length === next.length && current.every((value, index) => value === next[index]);
+        }
+        return current === next;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectField, deps: [{ token: MenuService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectField, isStandalone: true, selector: "md3-select-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "display-with", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuColors: { classPropertyName: "menuColors", publicName: "menu-colors", isSignal: true, isRequired: false, transformFunction: null }, fieldType: { classPropertyName: "fieldType", publicName: "field-type", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconElements", predicate: IconElement, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputElement, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n    <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n    @if (hasLeadingIcon()) {\n        <div md3-icon-element=\"leading\">\n            <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        </div>\n    }\n\n    <input md3-input-element type=\"text\" [readonly]=\"!searchable()\" [disabled]=\"isDisabled()\" (click)=\"openMenu()\"\n        (focus)=\"onSearchFocus()\" (blur)=\"onSearchBlur()\" (input)=\"onSearchInput($event)\"\n        class=\"md3-select-input\" [value]=\"displayText()\">\n\n    <button md3-icon-button button-type=\"standard\" [disabled]=\"isDisabled()\" (click)=\"toggleMenu()\" class=\"md3-select-arrow\">\n        @if (hasArrowIcon()) {\n            <ng-content select=\"[md3-icon-element=arrow]\"></ng-content>\n        } @else {\n            <md3-icon md3-icon-element>arrow_drop_down</md3-icon>\n        }\n    </button>\n\n    <ng-content select=\"[md3-supporting-text]\" ngProjectAs=\"[md3-supporting-text]\"></ng-content>\n</md3-text-field>\n", styles: [".md3-select-input{text-overflow:ellipsis}.md3-select-input:read-only{cursor:default;-webkit-user-select:none;user-select:none}.md3-select-input~.md3-select-arrow{transition:transform var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}.md3-select-input.md3-menu-active:dir(ltr)~.md3-select-arrow{transform:rotate(180deg)}.md3-select-input.md3-menu-active:dir(rtl)~.md3-select-arrow{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "component", type: TextField, selector: "md3-text-field", inputs: ["label", "field-type", "input-counter", "control"] }, { kind: "directive", type: IconElement, selector: "[md3-icon-element]", inputs: ["md3-icon-element"] }, { kind: "component", type: IconButton, selector: "button[md3-icon-button], a[md3-icon-button]", inputs: ["button-size", "button-type", "button-width", "button-squared", "selected"], outputs: ["selectedChange"] }, { kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectField, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-select-field', imports: [
+                        TextField,
+                        IconElement,
+                        IconButton,
+                        InputElement,
+                        MaterialIcon,
+                    ], template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n    <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n    @if (hasLeadingIcon()) {\n        <div md3-icon-element=\"leading\">\n            <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        </div>\n    }\n\n    <input md3-input-element type=\"text\" [readonly]=\"!searchable()\" [disabled]=\"isDisabled()\" (click)=\"openMenu()\"\n        (focus)=\"onSearchFocus()\" (blur)=\"onSearchBlur()\" (input)=\"onSearchInput($event)\"\n        class=\"md3-select-input\" [value]=\"displayText()\">\n\n    <button md3-icon-button button-type=\"standard\" [disabled]=\"isDisabled()\" (click)=\"toggleMenu()\" class=\"md3-select-arrow\">\n        @if (hasArrowIcon()) {\n            <ng-content select=\"[md3-icon-element=arrow]\"></ng-content>\n        } @else {\n            <md3-icon md3-icon-element>arrow_drop_down</md3-icon>\n        }\n    </button>\n\n    <ng-content select=\"[md3-supporting-text]\" ngProjectAs=\"[md3-supporting-text]\"></ng-content>\n</md3-text-field>\n", styles: [".md3-select-input{text-overflow:ellipsis}.md3-select-input:read-only{cursor:default;-webkit-user-select:none;user-select:none}.md3-select-input~.md3-select-arrow{transition:transform var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}.md3-select-input.md3-menu-active:dir(ltr)~.md3-select-arrow{transform:rotate(180deg)}.md3-select-input.md3-menu-active:dir(rtl)~.md3-select-arrow{transform:rotate(-180deg)}\n"] }]
+        }], ctorParameters: () => [{ type: MenuService }, { type: i0.ViewContainerRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "display-with", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-colors", required: false }] }], fieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "field-type", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { ...{ descendants: true }, isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputElement), { ...{ read: ElementRef }, isSignal: true }] }] } });
 
-class Menu {
-    el;
-    portalOutlet = viewChild(CdkPortalOutlet, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "portalOutlet" }] : /* istanbul ignore next */ []));
-    config = inject(MENU_CONFIG, { optional: true }) ?? {};
-    menuColors = signal('standard', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menuColors" }] : /* istanbul ignore next */ []));
-    isVisible = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
-    scheme = signal('inherit', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []));
-    direction = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
-    isActive = signal(true, /* @ts-ignore */
+/**
+ * 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 */ []));
-    get element() {
-        return this.el.nativeElement;
-    }
-    constructor(el) {
-        this.el = el;
-        effect((onCleanup) => {
-            const color = 'md3-' + this.menuColors();
-            this.element.classList.add(color);
-            onCleanup(() => {
-                this.element.classList.remove(color);
-            });
-        });
-        this.menuColors.set(this.config.menuColors ?? 'standard');
-        this.scheme.set(this.config.scheme ?? 'inherit');
-        this.direction.set(this.config.direction ?? null);
+    config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
+    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.showMenu(true);
+            this.isActive.set(true);
         });
     }
-    showMenu(value) {
-        this.isVisible.set(value);
+    setActive(value) {
+        this.isActive.set(value);
     }
-    /**
-     * 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);
+    recaptureFocus() {
+        this._recaptureFocus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Menu, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Menu, isStandalone: true, selector: "md3-menu", host: { attributes: { "role": "menu" }, properties: { "class.md3-visible": "isVisible()", "class.md3-inactive": "!isActive()", "class.md-scheme-dark": "scheme() == \"dark\"", "class.md-scheme-light": "scheme() == \"light\"", "dir": "direction()" }, classAttribute: "md3-menu-container" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>", 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-menu-scrim{position:absolute;inset:0;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-overlay-connected-position-bounding-box{pointer-events:none}::ng-deep .cdk-overlay-container .md3-menu-panel{pointer-events:auto}::ng-deep .cdk-overlay-container .md3-menu-panel.md3-menu-closing{pointer-events:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 0;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel{position:absolute;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel.md3-menu-closing{pointer-events:none}: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);--menu-min-width: 7em;--menu-max-width: 17.5em;--menu-group-radius: var(--md-border-radius-small);--menu-group-shadow: var(--md-shadow-3dp);--menu-group-label-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-label-color: rgb(var(--md-scheme-on-surface));--menu-item-supporting-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-selected-background: rgb(var(--md-scheme-tertiary-container));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary-container));--menu-item-state-color: var(--md-scheme-on-surface);--menu-item-border-radius: var(--md-border-radius-xsmall);--menu-item-outline-color: rgb(var(--md-scheme-secondary));--menu-item-outline-width: .1875em;--menu-item-outline-offset: -.1875em;--menu-item-badge-background: rgb(var(--md-scheme-primary-container));--menu-item-badge-foreground: rgb(var(--md-scheme-on-primary-container));position:relative;display:block;font-size:1rem;min-width:var(--menu-min-width);max-width:min(var(--menu-max-width),100vw - 2rem);max-height:min(32rem,100vh - 2rem);outline:none;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8)}:host.md3-visible{opacity:1;transform:scaleY(1)}:host.md3-vibrant{--background-color: rgb(var(--md-scheme-tertiary-container));--foreground-color: rgb(var(--md-scheme-on-tertiary-container));--menu-group-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-supporting-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-selected-background: rgb(var(--md-scheme-tertiary));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary));--menu-item-state-color: var(--md-scheme-on-tertiary-container)}:host.md3-inactive{--border-radius: var(--md-border-radius-small)}:host ::ng-deep md3-menu-group{margin-top:.125em}:host ::ng-deep md3-menu-group:first-child{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<div\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</div>\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;pointer-events:none}::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: Menu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
-            args: [{ selector: 'md3-menu', imports: [
+            args: [{ selector: 'md3-dialog', imports: [
                         CdkPortalOutlet,
-                    ], host: {
-                        'class': 'md3-menu-container',
-                        'role': 'menu',
-                        '[class.md3-visible]': 'isVisible()',
-                        '[class.md3-inactive]': '!isActive()',
-                        '[class.md-scheme-dark]': 'scheme() == "dark"',
-                        '[class.md-scheme-light]': 'scheme() == "light"',
-                        '[dir]': 'direction()',
-                    }, template: "<ng-template cdkPortalOutlet></ng-template>", 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-menu-scrim{position:absolute;inset:0;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-overlay-connected-position-bounding-box{pointer-events:none}::ng-deep .cdk-overlay-container .md3-menu-panel{pointer-events:auto}::ng-deep .cdk-overlay-container .md3-menu-panel.md3-menu-closing{pointer-events:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 0;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel{position:absolute;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-menu-panel.md3-menu-closing{pointer-events:none}: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);--menu-min-width: 7em;--menu-max-width: 17.5em;--menu-group-radius: var(--md-border-radius-small);--menu-group-shadow: var(--md-shadow-3dp);--menu-group-label-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-label-color: rgb(var(--md-scheme-on-surface));--menu-item-supporting-color: rgb(var(--md-scheme-on-surface-variant));--menu-item-selected-background: rgb(var(--md-scheme-tertiary-container));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary-container));--menu-item-state-color: var(--md-scheme-on-surface);--menu-item-border-radius: var(--md-border-radius-xsmall);--menu-item-outline-color: rgb(var(--md-scheme-secondary));--menu-item-outline-width: .1875em;--menu-item-outline-offset: -.1875em;--menu-item-badge-background: rgb(var(--md-scheme-primary-container));--menu-item-badge-foreground: rgb(var(--md-scheme-on-primary-container));position:relative;display:block;font-size:1rem;min-width:var(--menu-min-width);max-width:min(var(--menu-max-width),100vw - 2rem);max-height:min(32rem,100vh - 2rem);outline:none;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8)}:host.md3-visible{opacity:1;transform:scaleY(1)}:host.md3-vibrant{--background-color: rgb(var(--md-scheme-tertiary-container));--foreground-color: rgb(var(--md-scheme-on-tertiary-container));--menu-group-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-label-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-supporting-color: rgb(var(--md-scheme-on-tertiary-container));--menu-item-selected-background: rgb(var(--md-scheme-tertiary));--menu-item-selected-foreground: rgb(var(--md-scheme-on-tertiary));--menu-item-state-color: var(--md-scheme-on-tertiary-container)}:host.md3-inactive{--border-radius: var(--md-border-radius-small)}:host ::ng-deep md3-menu-group{margin-top:.125em}:host ::ng-deep md3-menu-group:first-child{margin-top:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], 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<div\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</div>\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;pointer-events:none}::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 }] }] } });
 
-class MenuService {
-    overlay = inject(Overlay);
-    injector = inject(Injector);
-    document = inject(DOCUMENT);
-    open(component, config = {}) {
-        const menuConfig = this.mergeConfig(config);
-        const previouslyFocusedElement = this.getFocusedElement();
-        const triggerElement = this.resolveTriggerElement(menuConfig.origin, previouslyFocusedElement);
-        const menuOverlay = this.createOverlay(menuConfig, previouslyFocusedElement);
-        const overlayRef = menuOverlay.overlayRef;
-        const menuRef = new MenuRef(overlayRef, previouslyFocusedElement);
-        const injector = this.createInjector(component, menuConfig, menuRef);
-        // The overlay hosts the MD3 menu shell. The shell is responsible for
-        // the surface markup and receives the dynamic content through a portal.
-        const menuPortal = new ComponentPortal(Menu, menuConfig.viewContainerRef ?? null, injector);
-        const menuComponentRef = overlayRef.attach(menuPortal);
-        const contentComponentRef = menuComponentRef.instance.attachContent(component, injector);
-        this.bindDataToInputs(contentComponentRef, menuConfig);
-        this.flipPositionIfPushBreaksAnchor(menuOverlay, menuConfig);
-        menuRef.componentInstance = contentComponentRef.instance;
-        menuRef.menuInstance = menuComponentRef.instance;
-        this.bindTriggerActiveState(triggerElement, overlayRef, menuRef);
-        this.startOpenAnimation(overlayRef);
-        this.connectCloseEvents(overlayRef, menuRef);
-        return menuRef;
-    }
-    openSubMenu(component, config = {}) {
-        const xPosition = this.getSubMenuXPosition(config.xPosition);
-        const yPosition = config.yPosition ?? 'below';
-        const offsetX = config.offsetX ?? 0;
-        const offsetY = config.offsetY ?? 0;
-        const subMenuConfig = {
-            ...config,
-            isSubMenu: true,
-            xPosition,
-            yPosition,
-            overlapTrigger: config.overlapTrigger ?? true,
-            offsetX,
-            offsetY,
-            scheme: config.scheme ?? 'inherit',
-            direction: config.direction ?? null,
-        };
-        return this.open(component, subMenuConfig);
-    }
-    mergeConfig(config) {
-        const viewportMargin = this.getViewportMargin(config.viewportMargin);
-        return {
-            data: config.data,
-            bindDataToInputs: config.bindDataToInputs ?? false,
-            isSubMenu: config.isSubMenu ?? false,
-            menuColors: config.menuColors ?? 'standard',
-            xPosition: config.xPosition ?? 'start',
-            yPosition: config.yPosition ?? 'below',
-            overlapTrigger: config.overlapTrigger ?? false,
-            offsetX: config.offsetX ?? 0,
-            offsetY: config.offsetY ?? 4,
-            viewportMargin,
-            positions: config.positions,
-            scrollStrategy: config.scrollStrategy ?? 'reposition',
-            scheme: config.scheme ?? 'inherit',
-            direction: config.direction ?? null,
-            viewContainerRef: config.viewContainerRef,
-            injector: config.injector ?? this.injector,
-        };
-    }
-    createOverlay(config, fallbackOrigin) {
-        const origin = this.resolveOrigin(config.origin, fallbackOrigin);
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(origin)
-            .withFlexibleDimensions(false)
-            .withGrowAfterOpen(true)
-            .withPush(true)
-            .withViewportMargin(config.viewportMargin)
-            .withPositions(config.positions ?? this.getInitialConnectedPositions(config))
-            .withTransformOriginOn('.md3-menu-container');
-        const overlayConfig = new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: ['md3-menu-scrim', 'md3-menu-opening'],
-            panelClass: ['md3-menu-panel', 'md3-menu-opening'],
-            positionStrategy,
-            scrollStrategy: this.getScrollStrategy(config.scrollStrategy),
-        });
-        return {
-            overlayRef: this.overlay.create(overlayConfig),
-            positionStrategy: config.positions ? undefined : positionStrategy,
-            origin,
-        };
+/**
+ * Material 3 full screen dialog shell. It covers the viewport and holds the content.
+ *
+ * The content is an `md3-layout`. The layout places the regions — the bar rows for an app bar
+ * or a toolbar, the rail columns, and the panes where side sheets open — so the dialog itself
+ * places nothing but the content. A content root that is not a layout gets a warning in
+ * development mode, and the shell falls back to panes of its own, so a side sheet never opens
+ * behind the dialog where nobody can see it.
+ */
+class FullScreenDialog extends CdkDialogContainer {
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    mainPane = viewChild('mainPane', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mainPane" }] : /* 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);
+    /** True while the shell holds the side sheet outlets, which happens without a layout only. */
+    ownsSideSheetOutlets = false;
+    isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
+    get surfaceElement() {
+        return this.surface()?.nativeElement ?? null;
     }
-    bindTriggerActiveState(triggerElement, overlayRef, menuRef) {
-        if (!triggerElement) {
+    ngAfterViewInit() {
+        // The content is attached by now, so the layout it brings has already taken the
+        // outlets. Its panes sit under the bar regions, which is where a side sheet belongs.
+        const layout = this.findContentLayout();
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            this.checkContentLayout(layout);
+        }
+        if (layout) {
             return;
         }
-        const removeActiveClass = () => triggerElement.classList.remove('md3-menu-active');
-        triggerElement.classList.add('md3-menu-active');
-        menuRef.afterClosed().pipe(take(1)).subscribe(removeActiveClass);
-        overlayRef.detachments().pipe(take(1)).subscribe(removeActiveClass);
+        // No layout, so the shell keeps the dialog self-sufficient. Without this the next side
+        // sheet would open in the outlet underneath — the page scaffold, behind the dialog.
+        const startOutlet = this.startOutlet();
+        const endOutlet = this.endOutlet();
+        if (startOutlet) {
+            this.sheets.registerSideSheetOutlet('start', startOutlet);
+        }
+        if (endOutlet) {
+            this.sheets.registerSideSheetOutlet('end', endOutlet);
+        }
+        this.ownsSideSheetOutlets = !!startOutlet || !!endOutlet;
     }
-    resolveOrigin(origin, fallbackOrigin) {
-        const resolvedOrigin = origin ?? fallbackOrigin;
-        if (resolvedOrigin) {
-            if (this.isMouseEvent(resolvedOrigin)) {
-                if (resolvedOrigin.currentTarget instanceof HTMLElement) {
-                    return resolvedOrigin.currentTarget;
-                }
-                return {
-                    x: resolvedOrigin.clientX,
-                    y: resolvedOrigin.clientY,
-                };
+    ngOnDestroy() {
+        if (this.ownsSideSheetOutlets) {
+            const startOutlet = this.startOutlet();
+            const endOutlet = this.endOutlet();
+            if (startOutlet) {
+                this.sheets.unregisterSideSheetOutlet('start', startOutlet);
             }
-            if (this.isElementRef(resolvedOrigin)) {
-                return resolvedOrigin.nativeElement;
+            if (endOutlet) {
+                this.sheets.unregisterSideSheetOutlet('end', endOutlet);
             }
-            return resolvedOrigin;
+            this.ownsSideSheetOutlets = false;
         }
-        const viewport = this.document.defaultView;
-        return {
-            x: (viewport?.innerWidth ?? 0) / 2,
-            y: (viewport?.innerHeight ?? 0) / 2,
-        };
+        super.ngOnDestroy();
     }
-    resolveTriggerElement(origin, fallbackOrigin) {
-        const resolvedOrigin = origin ?? fallbackOrigin;
-        if (!resolvedOrigin) {
+    /**
+     * The layout at the root of the content, if the content brought one.
+     *
+     * The root is either the layout itself, or the component that holds it — a dialog is
+     * normally opened with a component whose own template starts with `md3-layout`.
+     */
+    findContentLayout() {
+        const content = this.mainPane()?.nativeElement.firstElementChild;
+        if (!content) {
             return null;
         }
-        if (this.isMouseEvent(resolvedOrigin)) {
-            return resolvedOrigin.currentTarget instanceof HTMLElement
-                ? resolvedOrigin.currentTarget
-                : null;
+        if (content.tagName === 'MD3-LAYOUT') {
+            return content;
         }
-        if (this.isElementRef(resolvedOrigin)) {
-            return resolvedOrigin.nativeElement;
+        const root = content.firstElementChild;
+        return root?.tagName === 'MD3-LAYOUT' ? root : null;
+    }
+    checkContentLayout(layout) {
+        if (layout) {
+            return;
         }
-        return resolvedOrigin instanceof HTMLElement ? resolvedOrigin : null;
+        console.warn('[md3-fullscreen-dialog] the content of a full screen dialog should start with '
+            + 'md3-layout. Without it the dialog has no bar and no rail region, so an app bar or '
+            + 'a toolbar has nowhere to go, and the content does not scroll on its own.');
+    }
+    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: "mainPane", first: true, predicate: ["mainPane"], 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<div\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\" #mainPane>\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</div>\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);grid-template-columns:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{min-width:0;min-height:0;height:100%;max-height:100dvh;max-width:100dvw}: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<div\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\" #mainPane>\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</div>\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);grid-template-columns:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{min-width:0;min-height:0;height:100%;max-height:100dvh;max-width:100dvw}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], mainPane: [{ type: i0.ViewChild, args: ['mainPane', { 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);
+    overlayContainer = inject(OverlayContainer);
+    injector = inject(Injector);
+    document = inject(DOCUMENT);
+    /** Open dialogs, from the first one opened to the one currently on top. */
+    refs = [];
+    /**
+     * Elements the page was made of that the CDK hid from assistive technology,
+     * kept here while the dialogs are hidden and the page is given back.
+     */
+    pageAriaHidden = new Map();
+    /**
+     * 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;
+    pageStateQueued = false;
+    get openDialogs() {
+        return this.refs;
     }
-    flipPositionIfPushBreaksAnchor(menuOverlay, config) {
-        if (!menuOverlay.positionStrategy) {
-            return;
-        }
-        menuOverlay.overlayRef.updatePosition();
-        const fallbackPosition = this.getFallbackPositionAfterPush(config, this.getOriginClientRect(menuOverlay.origin), menuOverlay.overlayRef.overlayElement.getBoundingClientRect());
-        if (!fallbackPosition) {
-            return;
-        }
-        menuOverlay.positionStrategy.withPositions([fallbackPosition]);
-        menuOverlay.overlayRef.updatePosition();
+    /** Open dialogs that are currently on screen, from the bottom one up. */
+    get visibleDialogs() {
+        return this.refs.filter((ref) => !ref.isHidden);
     }
-    getInitialConnectedPositions(config) {
-        return [this.getPreferredConnectedPosition(config)];
+    /** The full screen dialog that is open, if there is one. */
+    get fullScreenDialog() {
+        return this.refs.find((ref) => ref.isFullScreen && !ref.isClosing);
     }
-    getPreferredConnectedPosition(config) {
-        if (config.isSubMenu) {
-            return this.createSubMenuConnectedPosition(this.getSubMenuXPosition(config.xPosition), this.getSubMenuVerticalAlignment(config.yPosition), config.offsetX, config.offsetY);
+    open(component, config = {}) {
+        const dialogConfig = this.mergeConfig(config);
+        if (this.refs.length === 0) {
+            this.rootTrigger = this.getFocusedElement();
         }
-        return this.createConnectedPosition(config.xPosition, config.yPosition, config);
-    }
-    getFallbackPositionAfterPush(config, originRect, overlayRect) {
-        const xPosition = this.shouldFlipXPosition(config, originRect, overlayRect)
-            ? this.getFallbackXPosition(config.xPosition)
-            : config.xPosition;
-        const yPosition = this.shouldFlipYPosition(config, originRect, overlayRect)
-            ? this.getFallbackYPosition(config.yPosition)
-            : config.yPosition;
-        if (xPosition === config.xPosition && yPosition === config.yPosition) {
-            return null;
+        // 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);
         }
-        return this.getPreferredConnectedPosition({
-            ...config,
-            xPosition,
-            yPosition,
+        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;
     }
-    shouldFlipXPosition(config, originRect, overlayRect) {
-        const tolerance = config.viewportMargin;
-        switch (config.xPosition) {
-            case 'before':
-                return overlayRect.right > originRect.left + tolerance;
-            case 'after':
-                return overlayRect.left < originRect.right - tolerance;
-            case 'start':
-                return originRect.left < overlayRect.left - tolerance
-                    || originRect.left > overlayRect.right + tolerance;
-            case 'end':
-                return originRect.right < overlayRect.left - tolerance
-                    || originRect.right > overlayRect.right + tolerance;
-            case 'center':
-            default:
-                return false;
-        }
-    }
-    shouldFlipYPosition(config, originRect, overlayRect) {
-        const tolerance = config.viewportMargin;
-        if (config.isSubMenu) {
-            const anchorY = config.yPosition === 'above' ? originRect.bottom : originRect.top;
-            return anchorY < overlayRect.top - tolerance
-                || anchorY > overlayRect.bottom + tolerance;
-        }
-        if (config.overlapTrigger) {
-            const anchorY = config.yPosition === 'above' ? originRect.bottom : originRect.top;
-            return anchorY < overlayRect.top - tolerance
-                || anchorY > overlayRect.bottom + tolerance;
-        }
-        switch (config.yPosition) {
-            case 'above':
-                return overlayRect.bottom > originRect.top + tolerance;
-            case 'below':
-                return overlayRect.top < originRect.bottom - tolerance;
-            case 'center':
-            default:
-                return false;
+    /**
+     * 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.
+     * `previousDialog` decides what happens to the dialogs it replaces, the
+     * same way it does for a regular dialog.
+     */
+    openFullScreen(component, config = {}) {
+        const dialogConfig = this.mergeConfig(config);
+        if (this.refs.length === 0) {
+            this.rootTrigger = this.getFocusedElement();
         }
-    }
-    createConnectedPosition(xPosition, yPosition, config) {
-        const horizontal = this.getHorizontalPosition(xPosition);
-        const vertical = this.getVerticalPosition(yPosition, config.overlapTrigger);
-        return {
-            ...horizontal,
-            ...vertical,
-            offsetX: config.offsetX,
-            offsetY: this.getOffsetY(yPosition, config),
-            panelClass: [
-                'md3-menu-position-' + xPosition,
-                'md3-menu-position-' + yPosition,
-            ],
-        };
-    }
-    createSubMenuConnectedPosition(xPosition, yAlignment, offsetX, offsetY) {
-        const horizontal = this.getHorizontalPosition(xPosition);
-        const yPosition = yAlignment === 'top' ? 'below' : 'above';
-        return {
-            ...horizontal,
-            originY: yAlignment,
-            overlayY: yAlignment,
-            offsetX: this.getSubMenuOffsetX(xPosition, offsetX),
-            offsetY: this.getSubMenuOffsetY(yAlignment, offsetY),
-            panelClass: [
-                'md3-menu-position-' + xPosition,
-                'md3-menu-position-' + yPosition,
-                'md3-menu-position-submenu',
-            ],
-        };
-    }
-    getHorizontalPosition(position) {
-        switch (position) {
-            case 'end':
-                return {
-                    originX: 'end',
-                    overlayX: 'end',
-                };
-            case 'before':
-                return {
-                    originX: 'start',
-                    overlayX: 'end',
-                };
-            case 'after':
-                return {
-                    originX: 'end',
-                    overlayX: 'start',
-                };
-            case 'center':
-                return {
-                    originX: 'center',
-                    overlayX: 'center',
-                };
-            case 'start':
-            default:
-                return {
-                    originX: 'start',
-                    overlayX: 'start',
-                };
+        // 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.dismissPreviousContext(dialogConfig.previousDialog);
         }
+        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;
     }
-    getVerticalPosition(position, overlapTrigger) {
-        switch (position) {
-            case 'above':
-                return {
-                    originY: overlapTrigger ? 'bottom' : 'top',
-                    overlayY: 'bottom',
-                };
-            case 'center':
-                return {
-                    originY: 'center',
-                    overlayY: 'center',
-                };
-            case 'below':
-            default:
-                return {
-                    originY: overlapTrigger ? 'top' : 'bottom',
-                    overlayY: 'top',
-                };
+    /** 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);
         }
-    }
-    getFallbackXPosition(position) {
-        switch (position) {
-            case 'start':
-                return 'end';
-            case 'end':
-                return 'start';
-            case 'before':
-                return 'after';
-            case 'after':
-                return 'before';
-            case 'center':
-            default:
-                return 'center';
+        this.refs.push(dialogRef);
+        this.syncPageState();
+        if (previousRef) {
+            setTimeout(() => this.startReplacingAnimation(dialogRef, previousRef), DIALOG_HANDOVER_DELAY_MS);
         }
-    }
-    getSubMenuXPosition(position) {
-        return position === 'before' ? 'before' : 'after';
-    }
-    getFallbackYPosition(position) {
-        switch (position) {
-            case 'above':
-                return 'below';
-            case 'below':
-                return 'above';
-            case 'center':
-            default:
-                return 'center';
+        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));
+        // Hiding and showing can also come straight from the reference, so the
+        // page state is driven by what the dialogs report rather than by the
+        // calls that went through this service.
+        dialogRef.hiddenChanged().subscribe(() => this.syncPageState());
     }
-    getSubMenuVerticalAlignment(position) {
-        return position === 'above' ? 'bottom' : 'top';
+    /**
+     * Hides every dialog that is on screen, the full screen one included, with
+     * the closing animation. They stay alive with their content and state, the
+     * page underneath becomes usable, and showAll() puts them back. The promise
+     * resolves once they are all out of sight.
+     */
+    hideAll() {
+        const visible = this.refs.filter((ref) => !ref.isHidden && !ref.isClosing);
+        return Promise.all(visible.map((ref) => ref.hide())).then(() => undefined);
     }
-    getOriginClientRect(origin) {
-        if ('getBoundingClientRect' in origin) {
-            return origin.getBoundingClientRect();
+    /**
+     * Brings the dialogs back on screen, whether they were hidden one by one or
+     * all at once: the dialog that was on top returns, along with the full
+     * screen dialog it sits in. Dialogs hidden behind another dialog stay
+     * hidden, since that is where they belong once the stack is back.
+     */
+    showAll() {
+        const topRef = this.topRef();
+        if (!topRef) {
+            return;
         }
-        return {
-            x: origin.x,
-            y: origin.y,
-            top: origin.y,
-            right: origin.x,
-            bottom: origin.y,
-            left: origin.x,
-            width: 0,
-            height: 0,
-        };
-    }
-    getViewportMargin(configuredMargin) {
-        const minimumMargin = this.getHalfEmInPixels();
-        return Math.max(configuredMargin ?? minimumMargin, minimumMargin);
-    }
-    getHalfEmInPixels() {
-        const viewport = this.document.defaultView;
-        const fontSize = viewport?.getComputedStyle(this.document.documentElement).fontSize;
-        const pixels = fontSize ? Number.parseFloat(fontSize) * 0.5 : 8;
-        return Number.isFinite(pixels) ? pixels : 8;
-    }
-    getOffsetY(position, config) {
-        if (config.overlapTrigger || position === 'center') {
-            return 0;
+        const fullScreenRef = this.fullScreenDialog;
+        // The full screen dialog is the context the top one sits in, so it
+        // comes back first and the dialog on top ends up on top, with the focus.
+        if (fullScreenRef && fullScreenRef !== topRef && fullScreenRef.isHidden) {
+            fullScreenRef.show();
+        }
+        if (topRef.isHidden) {
+            topRef.show();
         }
-        return position === 'above'
-            ? config.offsetY * -1
-            : config.offsetY;
     }
-    getSubMenuOffsetX(position, offsetX) {
-        return position === 'before' ? offsetX * -1 : offsetX;
+    /** 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);
     }
-    getSubMenuOffsetY(alignment, offsetY) {
-        return alignment === 'bottom' ? offsetY * -1 : offsetY;
+    /** 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);
     }
-    getScrollStrategy(scrollStrategy) {
-        switch (scrollStrategy) {
-            case 'block':
-                return this.overlay.scrollStrategies.block();
-            case 'close':
-                return this.overlay.scrollStrategies.close();
-            case 'noop':
-                return this.overlay.scrollStrategies.noop();
-            case 'reposition':
-            default:
-                return this.overlay.scrollStrategies.reposition();
-        }
+    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 ?? '',
+            ariaDescribedBy: config.ariaDescribedBy ?? '',
+            scheme: config.scheme ?? 'inherit',
+            direction: config.direction ?? null,
+            viewContainerRef: config.viewContainerRef,
+            injector: config.injector ?? this.injector,
+        };
     }
-    isMouseEvent(origin) {
-        return typeof MouseEvent !== 'undefined' && origin instanceof MouseEvent;
+    /**
+     * 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();
     }
-    isElementRef(origin) {
-        return typeof origin === 'object'
-            && origin !== null
-            && 'nativeElement' in origin
-            && origin.nativeElement instanceof HTMLElement;
+    /**
+     * The same choice for a full screen dialog, applied to everything that is
+     * on screen: what it takes over from is a whole context, a full screen
+     * dialog of its own included. `hide` keeps that context alive, and it comes
+     * back as it was once this dialog closes.
+     */
+    dismissPreviousContext(behavior) {
+        return behavior === 'hide' ? this.hideAll() : this.closeAll();
     }
-    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
@@ -7256,22 +7485,65 @@ class MenuService {
         requestAnimationFrame(() => {
             setTimeout(() => {
                 panel.getBoundingClientRect();
-                panel.classList.remove('md3-menu-opening');
-                backdrop?.classList.remove('md3-menu-opening');
+                panel.classList.remove(OPENING_CLASS);
+                backdrop?.classList.remove(OPENING_CLASS);
             }, 100);
         });
+        dialogRef.dialogInstance?.startEnterAnimation();
+    }
+    /** 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;
+        }
+        // Nothing to hand over either: the dialog leaving carries no scrim, so
+        // the one coming in fades its own in rather than switching it on in a
+        // single frame. This is a full screen dialog closing over a dialog that
+        // was hidden underneath it.
+        if (!from) {
+            return;
+        }
+        from?.classList.add(SCRIM_INSTANT_CLASS);
+        from?.classList.remove(SCRIM_KEPT_CLASS);
+        to?.classList.add(SCRIM_INSTANT_CLASS);
     }
-    createInjector(component, config, menuRef) {
-        return Injector.create({
-            parent: config.injector,
-            providers: [
-                // These tokens make the menu controllable from the dynamic
-                // component without coupling that component to the service.
-                { provide: MenuRef, useValue: menuRef },
-                { provide: MENU_DATA, useValue: config.data },
-                { provide: MENU_CONFIG, useValue: config },
-                { provide: MENU_COMPONENT, useValue: component },
-            ],
+    /** 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) {
@@ -7284,84 +7556,194 @@ class MenuService {
             componentRef.setInput(inputName, inputValue);
         });
     }
-    connectCloseEvents(overlayRef, menuRef) {
-        overlayRef.backdropClick().pipe(take(1)).subscribe(() => menuRef.close());
-        overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape'), take(1)).subscribe(() => menuRef.close());
+    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;
+        }
+        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.showHostFullScreenDialog(previousRef);
+                this.startRestoringAnimation(ref, previousRef);
+            }, DIALOG_HANDOVER_DELAY_MS);
+            return;
+        }
+    }
+    /**
+     * Brings back the full screen dialog a restored dialog sits in. The two are
+     * hidden together when a full screen dialog takes over with
+     * `previousDialog: 'hide'`, so the context has to be on screen again before
+     * the dialog that sits on top of it, exactly as showAll() puts them back.
+     */
+    showHostFullScreenDialog(ref) {
+        if (ref.isFullScreen) {
+            return;
+        }
+        const hostRef = this.fullScreenDialog;
+        if (hostRef?.isHidden && this.refs.indexOf(hostRef) < this.refs.indexOf(ref)) {
+            hostRef.show();
+        }
+    }
+    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.syncPageState();
+    }
+    /**
+     * State that belongs to the dialogs as a whole rather than to one of them:
+     * page scrolling, the page being hidden from assistive technology, and
+     * where focus sits. Applied in a task of its own, so a dialog handing the
+     * screen over to another one does not give the page back and take it again
+     * within the same frame.
+     */
+    syncPageState() {
+        if (this.pageStateQueued) {
+            return;
+        }
+        this.pageStateQueued = true;
+        setTimeout(() => {
+            this.pageStateQueued = false;
+            this.applyPageState();
+        });
+    }
+    applyPageState() {
+        const hasVisibleDialog = this.refs.some((ref) => !ref.isHidden);
+        if (hasVisibleDialog) {
+            this.scrollBlock.enable();
+        }
+        else {
+            this.scrollBlock.disable();
+        }
+        if (this.refs.length === 0) {
+            // Nothing is open anymore: the CDK gives the page back to assistive
+            // technology on its own, so there is nothing left to restore here.
+            this.pageAriaHidden.clear();
+            return;
+        }
+        if (hasVisibleDialog) {
+            this.hidePageFromAssistiveTechnology();
+            return;
+        }
+        this.exposePageToAssistiveTechnology();
+        this.releaseFocus();
+    }
+    /**
+     * Gives the page back to assistive technology while every dialog is hidden.
+     * The CDK hides it for as long as a dialog is open, which would otherwise
+     * leave nothing to read at all once the dialogs are out of sight.
+     */
+    exposePageToAssistiveTechnology() {
+        if (this.pageAriaHidden.size > 0) {
+            return;
+        }
+        const container = this.overlayContainer.getContainerElement();
+        Array.from(container.parentElement?.children ?? []).forEach((sibling) => {
+            const value = sibling.getAttribute('aria-hidden');
+            if (sibling === container || value === null) {
+                return;
+            }
+            this.pageAriaHidden.set(sibling, value);
+            sibling.removeAttribute('aria-hidden');
+        });
+    }
+    /** Hides the page again as soon as a dialog is back on screen. */
+    hidePageFromAssistiveTechnology() {
+        this.pageAriaHidden.forEach((value, element) => {
+            element.setAttribute('aria-hidden', value);
+        });
+        this.pageAriaHidden.clear();
+    }
+    /**
+     * Focus follows the dialogs off the screen: it goes back to whatever opened
+     * the stack, so the page stays usable with the keyboard while the dialogs
+     * wait behind it. Focus that already moved somewhere else is left alone.
+     */
+    releaseFocus() {
+        const activeElement = this.document.activeElement;
+        if (this.rootTrigger && (!activeElement || activeElement === this.document.body)) {
+            this.rootTrigger.focus();
+        }
     }
     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: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class MenuGroup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: MenuGroup, isStandalone: true, selector: "md3-menu-group", host: { attributes: { "role": "group" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;gap:.125em;padding:.25em;background-color:var(--background-color);color:var(--foreground-color);border-radius:var(--menu-group-radius);box-shadow:var(--menu-group-shadow)}:host:first-child{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius)}:host:last-child{border-end-start-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host ::ng-deep md3-divider{margin:.125em .5em}:host ::ng-deep [md3-menu-item]:first-child .md3-menu-item-container{--border-top-start-r: var(--md-border-radius-medium);--border-top-end-r: var(--md-border-radius-medium);border-start-start-radius:var(--border-top-start-r);border-start-end-radius:var(--border-top-end-r)}:host ::ng-deep [md3-menu-item]:last-child .md3-menu-item-container{--border-bottom-start-r: var(--md-border-radius-medium);--border-bottom-end-r: var(--md-border-radius-medium);border-end-start-radius:var(--border-bottom-start-r);border-end-end-radius:var(--border-bottom-end-r)}.md3-menu-group-label{padding:.5rem var(--menu-item-inline-padding, .75rem) .25rem;color:rgb(var(--md-scheme-on-surface-variant));font-size:.75rem;font-weight:500;line-height:1rem;letter-spacing:.03125rem}\n"] });
+class DialogHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogHeader, isStandalone: true, selector: "md3-dialog-header", ngImport: i0, template: "<ng-content select=\"[md3-icon-element]\"></ng-content>\n<div class=\"md3-dialog-title\">\n    <md3-type-headline size=\"small\">\n        <ng-content></ng-content>\n    </md3-type-headline>\n</div>", styles: [":host{display:block;margin:1.5em 1.5em 1em;text-align:center}:host .md3-dialog-title{text-align:start;color:rgb(var(--md-scheme-on-surface))}:host ::ng-deep [md3-icon-element]{color:rgb(var(--md-scheme-secondary))}:host ::ng-deep [md3-icon-element]+.md3-dialog-title{margin-top:1em;text-align:center}\n"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'md3-menu-group', imports: [], host: {
-                        'role': 'group',
-                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;gap:.125em;padding:.25em;background-color:var(--background-color);color:var(--foreground-color);border-radius:var(--menu-group-radius);box-shadow:var(--menu-group-shadow)}:host:first-child{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius)}:host:last-child{border-end-start-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host ::ng-deep md3-divider{margin:.125em .5em}:host ::ng-deep [md3-menu-item]:first-child .md3-menu-item-container{--border-top-start-r: var(--md-border-radius-medium);--border-top-end-r: var(--md-border-radius-medium);border-start-start-radius:var(--border-top-start-r);border-start-end-radius:var(--border-top-end-r)}:host ::ng-deep [md3-menu-item]:last-child .md3-menu-item-container{--border-bottom-start-r: var(--md-border-radius-medium);--border-bottom-end-r: var(--md-border-radius-medium);border-end-start-radius:var(--border-bottom-start-r);border-end-end-radius:var(--border-bottom-end-r)}.md3-menu-group-label{padding:.5rem var(--menu-item-inline-padding, .75rem) .25rem;color:rgb(var(--md-scheme-on-surface-variant));font-size:.75rem;font-weight:500;line-height:1rem;letter-spacing:.03125rem}\n"] }]
+            args: [{ selector: 'md3-dialog-header', imports: [
+                        TypeHeadline
+                    ], template: "<ng-content select=\"[md3-icon-element]\"></ng-content>\n<div class=\"md3-dialog-title\">\n    <md3-type-headline size=\"small\">\n        <ng-content></ng-content>\n    </md3-type-headline>\n</div>", styles: [":host{display:block;margin:1.5em 1.5em 1em;text-align:center}:host .md3-dialog-title{text-align:start;color:rgb(var(--md-scheme-on-surface))}:host ::ng-deep [md3-icon-element]{color:rgb(var(--md-scheme-secondary))}:host ::ng-deep [md3-icon-element]+.md3-dialog-title{margin-top:1em;text-align:center}\n"] }]
         }] });
 
-class MenuItem {
-    el;
-    label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'label' });
-    supportingText = input(null, { ...(ngDevMode ? { debugName: "supportingText" } : /* istanbul ignore next */ {}), alias: 'supporting-text' });
-    trailingText = input(null, { ...(ngDevMode ? { debugName: "trailingText" } : /* istanbul ignore next */ {}), alias: 'trailing-text' });
-    selected = model(null, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), alias: 'selected' });
-    iconElements = contentChildren(IconElement, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconElements" }] : /* istanbul ignore next */ []));
-    get leading() {
-        return this.iconElements().find((icon) => icon.iconType() === 'leading');
-    }
-    get trailing() {
-        return this.iconElements().find((icon) => icon.iconType() === 'trailing');
-    }
-    get showLeadingIcon() {
-        return (!!this.leading && !this.selected()) || this.selected() == true;
-    }
-    onHostClick() {
-        const selected = this.selected();
-        if (selected === null) {
-            return;
-        }
-        this.selected.set(!selected);
-    }
-    constructor(el) {
-        this.el = el;
-    }
-    get element() {
-        return this.el.nativeElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MenuItem, isStandalone: true, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, supportingText: { classPropertyName: "supportingText", publicName: "supporting-text", isSignal: true, isRequired: false, transformFunction: null }, trailingText: { classPropertyName: "trailingText", publicName: "trailing-text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { listeners: { "click": "onHostClick()" } }, queries: [{ propertyName: "iconElements", predicate: IconElement, isSignal: true }], ngImport: i0, template: "@if (selected() !== null) {\n    <input type=\"checkbox\" md3-input-element [checked]=\"selected()\">\n}\n\n<div class=\"md3-menu-item-container\" md3-state-component>\n    <div class=\"md3-menu-item-leading\" [class.has-icon]=\"showLeadingIcon\">\n        <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        @if (!leading) {\n            <md3-icon>check</md3-icon>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-content\">\n        <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n        @if (supportingText()?.length) {\n            <md3-type-body size=\"small\">{{ supportingText() }}</md3-type-body>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-trailing\">\n        <ng-content select=\"md3-badge\"></ng-content>\n        @if (trailingText()?.length) {\n            <md3-type-title size=\"small\">{{ trailingText() }}</md3-type-title>\n        }\n        <ng-content select=\"[md3-icon-element=trailing]\"></ng-content>\n    </div>\n</div>", styles: [":host{--state-color: var(--menu-item-state-color);--border-radius: var(--menu-item-border-radius);--outline-color: var(--menu-item-outline-color);--outline-width: var(--menu-item-outline-width);--outline-offset: var(--menu-item-outline-offset);position:relative;display:block;padding:0;border:0;background:transparent;color:var(--menu-item-label-color);font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;appearance:none;-webkit-user-select:none;user-select:none;z-index:0}:host:focus{z-index:1}:host:focus:not(:hover) .md3-menu-item-container:after{opacity:1}:host:active{z-index:2}:host:active .md3-menu-item-container:after{opacity:0}:host .md3-menu-item-container{display:flex;align-items:center;min-height:3em;padding:0 .75em;border-radius:var(--border-radius);transition:background-color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;opacity:0;transform:scale(1.2);width:0;height:1.25em;color:var(--menu-item-supporting-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-leading.has-icon{margin-inline-end:.5em;opacity:1;transform:scale(1);height:1.25em;width:1.25em}:host .md3-menu-item-container .md3-menu-item-trailing{flex:0 1 content;display:inline-flex;gap:.5em;align-items:center;justify-content:center;font-size:inherit;margin-inline-start:.5em;color:var(--menu-item-supporting-color)}:host .md3-menu-item-container .md3-menu-item-trailing:empty{margin:0}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep md3-badge{background-color:var(--menu-item-badge-background);color:var(--menu-item-badge-foreground)}:host .md3-menu-item-container .md3-menu-item-trailing .md3-text-title.md3-text-small{margin:0;padding:0;white-space:nowrap;letter-spacing:.007143em}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-content{flex:1 1 auto}:host .md3-menu-item-container .md3-menu-item-content .md3-text-label.md3-text-large{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.007143em;color:var(--menu-item-label-color)}:host .md3-menu-item-container .md3-menu-item-content .md3-text-body.md3-text-small{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.0333334em;color:var(--menu-item-supporting-color)}:host [md3-input-element]{position:absolute;height:0;width:0;opacity:0;pointer-events:none}:host [md3-input-element]+.md3-menu-item-container .md3-menu-item-leading{opacity:0;transform:scale(1.2);width:0}:host [md3-input-element]:checked+.md3-menu-item-container{--menu-item-label-color: var(--menu-item-selected-foreground);--menu-item-supporting-color: var(--menu-item-selected-foreground);--border-radius: var(--md-border-radius-medium);background-color:var(--menu-item-selected-background)}:host [md3-input-element]:checked+.md3-menu-item-container .md3-menu-item-leading{opacity:1;transform:scale(1);width:1.25em}:host:disabled{cursor:default}:host:disabled .md3-menu-item-container{--menu-item-label-color: var(--menu-item-label-color);--menu-item-supporting-color: var(--menu-item-label-color);--menu-item-selected-background: transparent;--menu-item-selected-foreground: var(--menu-item-label-color);pointer-events:none;opacity:.38}:host:disabled .md3-menu-item-container.md3-state-layer,:host:disabled .md3-menu-item-container:after{display:none}\n"], dependencies: [{ kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "directive", type: StateComponent, selector: "[md3-state-component]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }, { kind: "directive", type: TypeLabel, selector: "md3-type-label, [md3-type-label]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }] });
+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", host: { classAttribute: "md3-scrollable" }, ngImport: i0, template: "<ng-content></ng-content>", 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogBody, decorators: [{
             type: Component,
-            args: [{ selector: 'button[md3-menu-item], a[md3-menu-item]', imports: [
-                        InputElement,
-                        StateComponent,
-                        MaterialIcon,
-                        TypeLabel,
-                        TypeBody,
-                        TypeTitle,
-                    ], host: {
-                        '(click)': 'onHostClick()',
-                    }, template: "@if (selected() !== null) {\n    <input type=\"checkbox\" md3-input-element [checked]=\"selected()\">\n}\n\n<div class=\"md3-menu-item-container\" md3-state-component>\n    <div class=\"md3-menu-item-leading\" [class.has-icon]=\"showLeadingIcon\">\n        <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        @if (!leading) {\n            <md3-icon>check</md3-icon>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-content\">\n        <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n        @if (supportingText()?.length) {\n            <md3-type-body size=\"small\">{{ supportingText() }}</md3-type-body>\n        }\n    </div>\n\n    <div class=\"md3-menu-item-trailing\">\n        <ng-content select=\"md3-badge\"></ng-content>\n        @if (trailingText()?.length) {\n            <md3-type-title size=\"small\">{{ trailingText() }}</md3-type-title>\n        }\n        <ng-content select=\"[md3-icon-element=trailing]\"></ng-content>\n    </div>\n</div>", styles: [":host{--state-color: var(--menu-item-state-color);--border-radius: var(--menu-item-border-radius);--outline-color: var(--menu-item-outline-color);--outline-width: var(--menu-item-outline-width);--outline-offset: var(--menu-item-outline-offset);position:relative;display:block;padding:0;border:0;background:transparent;color:var(--menu-item-label-color);font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;appearance:none;-webkit-user-select:none;user-select:none;z-index:0}:host:focus{z-index:1}:host:focus:not(:hover) .md3-menu-item-container:after{opacity:1}:host:active{z-index:2}:host:active .md3-menu-item-container:after{opacity:0}:host .md3-menu-item-container{display:flex;align-items:center;min-height:3em;padding:0 .75em;border-radius:var(--border-radius);transition:background-color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;opacity:0;transform:scale(1.2);width:0;height:1.25em;color:var(--menu-item-supporting-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-leading.has-icon{margin-inline-end:.5em;opacity:1;transform:scale(1);height:1.25em;width:1.25em}:host .md3-menu-item-container .md3-menu-item-trailing{flex:0 1 content;display:inline-flex;gap:.5em;align-items:center;justify-content:center;font-size:inherit;margin-inline-start:.5em;color:var(--menu-item-supporting-color)}:host .md3-menu-item-container .md3-menu-item-trailing:empty{margin:0}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep md3-badge{background-color:var(--menu-item-badge-background);color:var(--menu-item-badge-foreground)}:host .md3-menu-item-container .md3-menu-item-trailing .md3-text-title.md3-text-small{margin:0;padding:0;white-space:nowrap;letter-spacing:.007143em}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-content{flex:1 1 auto}:host .md3-menu-item-container .md3-menu-item-content .md3-text-label.md3-text-large{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.007143em;color:var(--menu-item-label-color)}:host .md3-menu-item-container .md3-menu-item-content .md3-text-body.md3-text-small{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.0333334em;color:var(--menu-item-supporting-color)}:host [md3-input-element]{position:absolute;height:0;width:0;opacity:0;pointer-events:none}:host [md3-input-element]+.md3-menu-item-container .md3-menu-item-leading{opacity:0;transform:scale(1.2);width:0}:host [md3-input-element]:checked+.md3-menu-item-container{--menu-item-label-color: var(--menu-item-selected-foreground);--menu-item-supporting-color: var(--menu-item-selected-foreground);--border-radius: var(--md-border-radius-medium);background-color:var(--menu-item-selected-background)}:host [md3-input-element]:checked+.md3-menu-item-container .md3-menu-item-leading{opacity:1;transform:scale(1);width:1.25em}:host:disabled{cursor:default}:host:disabled .md3-menu-item-container{--menu-item-label-color: var(--menu-item-label-color);--menu-item-supporting-color: var(--menu-item-label-color);--menu-item-selected-background: transparent;--menu-item-selected-foreground: var(--menu-item-label-color);pointer-events:none;opacity:.38}:host:disabled .md3-menu-item-container.md3-state-layer,:host:disabled .md3-menu-item-container:after{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], supportingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "supporting-text", required: false }] }], trailingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing-text", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { isSignal: true }] }] } });
+            args: [{ selector: 'md3-dialog-body', imports: [], host: {
+                        'class': 'md3-scrollable',
+                    }, template: "<ng-content></ng-content>", 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 {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogActions, isStandalone: true, selector: "md3-dialog-actions", ngImport: i0, 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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogActions, decorators: [{
+            type: Component,
+            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"] }]
+        }] });
 
 class SideSheetHeader {
     title = input('', { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), alias: 'title' });
@@ -7764,5 +8146,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, Grid, GridItem, IconButton, IconElement, InputElement, Layout, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, 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, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, ViewportService, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
+export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, Grid, GridItem, IconButton, IconElement, InputElement, Layout, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, 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, SelectField, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, ViewportService, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map